@ntalmagor/3drize-viewer 0.1.2

package/dist/components/effects/FireEffect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FireEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/FireEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAG/C,OAAO,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI3E,UAAU,eAAe;IACvB,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,UAAU,CAAC;IACnB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACjC;AA2GD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAwGzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/effects/FireEffect.js

@@ -0,0 +1,194 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef } from 'react';
+import { useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+import { applyGenerativeAnimations } from '../../utils/handleGenerativeEffectsAnimations';
+// ── Flame particle vertex shader ──────────────────────────────────────────────
+const flameVert = /* glsl */ `
+  attribute float aT;       // lifetime position 0..1 (base→tip)
+  attribute vec2  aBase;    // (x, z) spawn position within disc
+  attribute float aSpeed;   // per-particle rise speed variation
+  attribute float aPhase;   // noise phase offset
+
+  uniform float u_time;
+  uniform float u_speed;
+  uniform float uHeight;
+  uniform float uSpread;
+  uniform float uSize;
+
+  varying float vT;
+
+  void main() {
+    // Loop t upward continuously
+    float t = fract(aT + u_time * u_speed * aSpeed);
+    vT = t;
+
+    // Rise in Y, shrink spread toward tip
+    float spreadScale = 1.0 - t * 0.85;
+    float x = aBase.x * spreadScale * uSpread;
+    float z = aBase.y * spreadScale * uSpread;
+
+    // Turbulent horizontal sway (FBM-like with 2 sines)
+    float sway1 = sin(t * 3.8 + u_time * 1.6 + aPhase)        * 0.18 * uSpread * (1.0 - t);
+    float sway2 = sin(t * 6.2 - u_time * 2.3 + aPhase * 1.7)  * 0.09 * uSpread * (1.0 - t);
+    x += sway1 + sway2;
+    z += cos(t * 4.1 + u_time * 1.9 + aPhase * 0.8) * 0.12 * uSpread * (1.0 - t);
+
+    float y = t * uHeight - uHeight * 0.5;
+
+    // Shrink point size toward tip
+    gl_PointSize = uSize * (1.0 - t * 0.8) * (200.0 / -(modelViewMatrix * vec4(x, y, z, 1.0)).z);
+    gl_Position  = projectionMatrix * modelViewMatrix * vec4(x, y, z, 1.0);
+  }
+`;
+const flameFrag = /* glsl */ `
+  uniform vec3  uFlameColor;
+  uniform vec3  uTipColor;
+  uniform float uOpacity;
+  varying float vT;
+
+  void main() {
+    vec2  c = gl_PointCoord - 0.5;
+    float d = length(c);
+    if (d > 0.5) discard;
+    float g = exp(-d * d * 5.5);
+
+    // Color: flameColor at base → mid orange → tipColor near top → transparent
+    float t2 = vT * vT;
+    vec3 midCol = mix(uFlameColor, vec3(1.0, 0.65, 0.1), 0.5);
+    vec3 col = t2 < 0.4
+      ? mix(uFlameColor, midCol,   t2 / 0.4)
+      : mix(midCol,     uTipColor, (t2 - 0.4) / 0.6);
+
+    // Fade out at tip and base
+    float alpha = g * uOpacity * smoothstep(0.0, 0.12, vT) * (1.0 - smoothstep(0.75, 1.0, vT));
+    if (alpha < 0.01) discard;
+    gl_FragColor = vec4(col, alpha);
+  }
+`;
+// ── Ember vertex shader ───────────────────────────────────────────────────────
+const emberVert = /* glsl */ `
+  attribute float aT;
+  attribute vec3  aDrift;   // (vx, vy, vz) drift velocity
+  attribute float aPhase;
+
+  uniform float u_time;
+  uniform float u_speed;
+  uniform float uHeight;
+
+  varying float vT;
+
+  void main() {
+    float t = fract(aT + u_time * u_speed * 0.4);
+    vT = t;
+
+    float x = aDrift.x * t * 1.8 + sin(t * 5.0 + aPhase) * 0.15;
+    float y = t * uHeight * 1.3 - uHeight * 0.4;
+    float z = aDrift.z * t * 1.8 + cos(t * 4.0 + aPhase) * 0.12;
+
+    gl_PointSize = (1.0 - t) * 5.0 * (200.0 / -(modelViewMatrix * vec4(x, y, z, 1.0)).z);
+    gl_Position  = projectionMatrix * modelViewMatrix * vec4(x, y, z, 1.0);
+  }
+`;
+const emberFrag = /* glsl */ `
+  uniform float uOpacity;
+  varying float vT;
+
+  void main() {
+    vec2  c = gl_PointCoord - 0.5;
+    if (length(c) > 0.5) discard;
+    float g     = exp(-dot(c, c) * 7.0);
+    float alpha = g * uOpacity * (1.0 - vT) * smoothstep(0.0, 0.08, vT);
+    if (alpha < 0.01) discard;
+    // Orange-white ember color
+    gl_FragColor = vec4(1.0, 0.65 + (1.0 - vT) * 0.35, 0.2 * (1.0 - vT), alpha);
+  }
+`;
+const FireEffect = ({ boundingRadius, config, animations }) => {
+    const { particleCount, height, spread, flameColor, tipColor, opacity, speed, intensity } = config;
+    const startValuesCacheRef = useRef({});
+    const h = boundingRadius * height;
+    const s = boundingRadius * spread;
+    const { flameGeo, flameMat, emberGeo, emberMat } = useMemo(() => {
+        const N = Math.max(50, particleCount);
+        const E = Math.floor(N * 0.2);
+        // ── Flame geometry ─────────────────────────────────────────────────────
+        const aT = new Float32Array(N);
+        const aBase = new Float32Array(N * 2);
+        const aSpeed = new Float32Array(N);
+        const aPhase = new Float32Array(N);
+        for (let i = 0; i < N; i++) {
+            aT[i] = i / N;
+            const r = Math.sqrt(Math.random()) * s;
+            const a = Math.random() * Math.PI * 2;
+            aBase[i * 2] = Math.cos(a) * r;
+            aBase[i * 2 + 1] = Math.sin(a) * r;
+            aSpeed[i] = 0.6 + Math.random() * 0.8;
+            aPhase[i] = Math.random() * Math.PI * 2;
+        }
+        const fGeo = new THREE.BufferGeometry();
+        fGeo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(N * 3), 3));
+        fGeo.setAttribute('aT', new THREE.BufferAttribute(aT, 1));
+        fGeo.setAttribute('aBase', new THREE.BufferAttribute(aBase, 2));
+        fGeo.setAttribute('aSpeed', new THREE.BufferAttribute(aSpeed, 1));
+        fGeo.setAttribute('aPhase', new THREE.BufferAttribute(aPhase, 1));
+        const fc = new THREE.Color(flameColor);
+        const tc = new THREE.Color(tipColor);
+        const fMat = new THREE.ShaderMaterial({
+            vertexShader: flameVert,
+            fragmentShader: flameFrag,
+            uniforms: {
+                u_time: { value: 0 },
+                u_speed: { value: speed },
+                uHeight: { value: h },
+                uSpread: { value: s },
+                uSize: { value: 20 * intensity },
+                uFlameColor: { value: new THREE.Vector3(fc.r, fc.g, fc.b) },
+                uTipColor: { value: new THREE.Vector3(tc.r, tc.g, tc.b) },
+                uOpacity: { value: opacity },
+            },
+            transparent: true, depthWrite: false, blending: THREE.AdditiveBlending,
+        });
+        // ── Ember geometry ─────────────────────────────────────────────────────
+        const eT = new Float32Array(E);
+        const eDrift = new Float32Array(E * 3);
+        const ePhase = new Float32Array(E);
+        for (let i = 0; i < E; i++) {
+            eT[i] = i / E;
+            const a = Math.random() * Math.PI * 2;
+            const r = (0.2 + Math.random() * 0.8) * s;
+            eDrift[i * 3] = Math.cos(a) * r;
+            eDrift[i * 3 + 1] = 0;
+            eDrift[i * 3 + 2] = Math.sin(a) * r;
+            ePhase[i] = Math.random() * Math.PI * 2;
+        }
+        const eGeo = new THREE.BufferGeometry();
+        eGeo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(E * 3), 3));
+        eGeo.setAttribute('aT', new THREE.BufferAttribute(eT, 1));
+        eGeo.setAttribute('aDrift', new THREE.BufferAttribute(eDrift, 3));
+        eGeo.setAttribute('aPhase', new THREE.BufferAttribute(ePhase, 1));
+        const eMat = new THREE.ShaderMaterial({
+            vertexShader: emberVert,
+            fragmentShader: emberFrag,
+            uniforms: {
+                u_time: { value: 0 },
+                u_speed: { value: speed },
+                uHeight: { value: h },
+                uOpacity: { value: opacity * 0.7 },
+            },
+            transparent: true, depthWrite: false, blending: THREE.AdditiveBlending,
+        });
+        return { flameGeo: fGeo, flameMat: fMat, emberGeo: eGeo, emberMat: eMat };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [particleCount, h, s, flameColor, tipColor, opacity, speed, intensity]);
+    useFrame((state) => {
+        const t = state.clock.getElapsedTime();
+        flameMat.uniforms.u_time.value = t;
+        emberMat.uniforms.u_time.value = t;
+        if (animations?.length) {
+            applyGenerativeAnimations([flameMat, emberMat], animations, startValuesCacheRef.current, Date.now(), false);
+        }
+    });
+    return (_jsxs("group", { position: [0, boundingRadius * 0.1, 0], children: [_jsx("points", { geometry: flameGeo, material: flameMat }), _jsx("points", { geometry: emberGeo, material: emberMat })] }));
+};
+export default FireEffect;

package/dist/components/effects/ForcefieldEffect.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { ForcefieldConfig, AnimationOptions } from '@ntalmagor/3drize-core';
+interface ForcefieldEffectProps {
+    boundingRadius: number;
+    config: ForcefieldConfig;
+    animations?: AnimationOptions[];
+}
+declare const ForcefieldEffect: React.FC<ForcefieldEffectProps>;
+export default ForcefieldEffect;
+//# sourceMappingURL=ForcefieldEffect.d.ts.map

package/dist/components/effects/ForcefieldEffect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ForcefieldEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/ForcefieldEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAG/C,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAIjF,UAAU,qBAAqB;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,gBAAgB,CAAC;IACzB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACjC;AA8ED,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAgErD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/effects/ForcefieldEffect.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useMemo } from 'react';
+import { useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+import { applyGenerativeAnimations } from '../../utils/handleGenerativeEffectsAnimations';
+const shieldVert = /* glsl */ `
+  varying vec3 vNormal;
+  varying vec3 vWorldPos;
+  varying vec2 vUv;
+  void main() {
+    vNormal   = normalize(normalMatrix * normal);
+    vWorldPos = (modelMatrix * vec4(position, 1.0)).xyz;
+    vUv       = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`;
+const shieldFrag = /* glsl */ `
+  uniform float u_time;
+  uniform float uHexSize;
+  uniform vec3  uShieldColor;
+  uniform vec3  uRimColor;
+  uniform float uOpacity;
+  uniform float uIntensity;
+
+  // Ripple slots (3 simultaneous)
+  uniform vec3  uHitPos[3];
+  uniform float uHitTime[3];
+
+  varying vec3 vNormal;
+  varying vec3 vWorldPos;
+  varying vec2 vUv;
+
+  // ── Analytical hex grid in 3D via world-space spherical UV ───────────────
+  vec2 hexCoord(vec2 p) {
+    const float SQRT3 = 1.7320508;
+    vec2 r = vec2(1.0, SQRT3);
+    vec2 h = r * 0.5;
+    vec2 a = mod(p,       r) - h;
+    vec2 b = mod(p + h,   r) - h;
+    return dot(a, a) < dot(b, b) ? a : b;
+  }
+
+  float hexEdge(vec2 p, float size) {
+    vec2 hc = hexCoord(p / size);
+    float d = length(hc);
+    // Edge = thin ring at cell boundary
+    return 1.0 - smoothstep(size * 0.38, size * 0.46, d);
+  }
+
+  void main() {
+    // Spherical UV from world normal
+    vec3  n   = normalize(vNormal);
+    float phi  = atan(n.z, n.x);
+    float theta = acos(clamp(n.y, -1.0, 1.0));
+    vec2  suv  = vec2(phi / 6.28318, theta / 3.14159);
+
+    float edge = hexEdge(suv, uHexSize);
+
+    // Fresnel rim
+    vec3  viewDir = normalize(cameraPosition - vWorldPos);
+    float fresnel = pow(1.0 - abs(dot(n, viewDir)), 2.5);
+
+    // Ripple contributions
+    float ripple = 0.0;
+    for (int k = 0; k < 3; k++) {
+      float age  = u_time - uHitTime[k];
+      if (age < 0.0 || age > 2.0) continue;
+      float dist = distance(vWorldPos, uHitPos[k]);
+      float wave = sin(dist * 14.0 - age * 9.0) * exp(-dist * 2.5) * exp(-age * 1.4);
+      ripple    += wave * 0.7;
+    }
+
+    vec3  col   = mix(uShieldColor, uRimColor, fresnel * 0.6 + edge * 0.4);
+    float alpha = (edge * 0.55 + fresnel * 0.3 + max(0.0, ripple) * 0.45 + 0.04)
+                  * uOpacity * uIntensity;
+    if (alpha < 0.005) discard;
+    gl_FragColor = vec4(col + uRimColor * ripple * 0.3, alpha);
+  }
+`;
+const ForcefieldEffect = ({ boundingRadius, config, animations }) => {
+    const { hexSize, rippleEnabled, shieldColor, rimColor, opacity, speed, intensity } = config;
+    const startValuesCacheRef = useRef({});
+    const meshRef = useRef(null);
+    const hitSlot = useRef(0);
+    const nextHit = useRef(0);
+    const mat = useMemo(() => {
+        const sc = new THREE.Color(shieldColor);
+        const rc = new THREE.Color(rimColor);
+        return new THREE.ShaderMaterial({
+            vertexShader: shieldVert,
+            fragmentShader: shieldFrag,
+            uniforms: {
+                u_time: { value: 0 },
+                uHexSize: { value: hexSize },
+                uShieldColor: { value: new THREE.Vector3(sc.r, sc.g, sc.b) },
+                uRimColor: { value: new THREE.Vector3(rc.r, rc.g, rc.b) },
+                uOpacity: { value: opacity },
+                uIntensity: { value: intensity },
+                uHitPos: { value: [new THREE.Vector3(), new THREE.Vector3(), new THREE.Vector3()] },
+                uHitTime: { value: [-99, -99, -99] },
+            },
+            transparent: true,
+            depthWrite: false,
+            side: THREE.FrontSide,
+            blending: THREE.AdditiveBlending,
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hexSize, shieldColor, rimColor, opacity, intensity]);
+    useFrame((state, delta) => {
+        const t = state.clock.getElapsedTime();
+        mat.uniforms.u_time.value = t;
+        if (rippleEnabled) {
+            nextHit.current -= delta;
+            if (nextHit.current <= 0) {
+                nextHit.current = 1.4 / speed + Math.random() * 0.8;
+                // Random point on sphere surface
+                const phi = Math.random() * Math.PI * 2;
+                const theta = Math.acos(2 * Math.random() - 1);
+                const r = boundingRadius * 1.15;
+                const slot = hitSlot.current % 3;
+                mat.uniforms.uHitPos.value[slot].set(Math.sin(theta) * Math.cos(phi) * r, Math.cos(theta) * r, Math.sin(theta) * Math.sin(phi) * r);
+                mat.uniforms.uHitTime.value[slot] = t;
+                hitSlot.current++;
+            }
+        }
+        if (animations?.length) {
+            applyGenerativeAnimations([mat], animations, startValuesCacheRef.current, Date.now(), false);
+        }
+    });
+    return (_jsx("mesh", { ref: meshRef, material: mat, children: _jsx("sphereGeometry", { args: [boundingRadius * 1.15, 64, 64] }) }));
+};
+export default ForcefieldEffect;

package/dist/components/effects/HologramEffect.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { HologramConfig, AnimationOptions } from '@ntalmagor/3drize-core';
+interface HologramEffectProps {
+    boundingRadius: number;
+    config: HologramConfig;
+    animations?: AnimationOptions[];
+}
+declare const HologramEffect: React.FC<HologramEffectProps>;
+export default HologramEffect;
+//# sourceMappingURL=HologramEffect.d.ts.map

package/dist/components/effects/HologramEffect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HologramEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/HologramEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAG/C,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAI/E,UAAU,mBAAmB;IAC3B,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,cAAc,CAAC;IACvB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACjC;AAsFD,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA4EjD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/effects/HologramEffect.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useMemo } from 'react';
+import { useFrame } from '@react-three/fiber';
+import * as THREE from 'three';
+import { applyGenerativeAnimations } from '../../utils/handleGenerativeEffectsAnimations';
+// Single rich shader handles scanlines, grid, RGB aberration, interference fringes, flicker
+const vertexShader = /* glsl */ `
+  varying vec2 vUv;
+  void main() {
+    vUv = uv;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`;
+const fragmentShader = /* glsl */ `
+  uniform float u_time;
+  uniform float uScanSpeed;
+  uniform float uScanlineCount;
+  uniform vec3  uColor;
+  uniform float uOpacity;
+  uniform float uFlickerAmount;
+  uniform float uGridEnabled;
+  uniform float uGlitchOffset;
+  uniform float uAberration;   // chromatic aberration intensity
+  uniform float uPlaneY;       // -1..1 normalized plane position
+  uniform float uIntensity;
+
+  varying vec2 vUv;
+
+  float hash(float n){ return fract(sin(n) * 43758.5453); }
+  float hash2(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
+
+  // Scanline sample at a specific UV (shared logic, called 3× for RGB split)
+  float scanSample(vec2 uv, float t) {
+    return step(0.45, fract(uv.y * uScanlineCount + t * uScanSpeed));
+  }
+
+  void main() {
+    vec2 uv = vUv;
+    float t  = u_time;
+
+    // ── Glitch: rectangular block shift ────────────────────────────────────
+    float blockY  = floor(uv.y * 8.0);
+    float glitchT = hash(blockY + floor(t * 12.0));
+    float doGlitch= step(0.94, glitchT);
+    uv.x += doGlitch * (hash(blockY * 3.1 + t * 4.0) - 0.5) * uGlitchOffset;
+    uv.x  = fract(uv.x);
+
+    // ── RGB chromatic aberration ───────────────────────────────────────────
+    float aberr = uAberration * (1.0 + 0.4 * sin(t * 3.0));
+    float r_val = scanSample(uv + vec2( aberr, 0.0), t);
+    float g_val = scanSample(uv,                     t);
+    float b_val = scanSample(uv - vec2( aberr, 0.0), t);
+    vec3  scanRGB = vec3(r_val, g_val, b_val);
+
+    // ── Interference fringe pattern ────────────────────────────────────────
+    // Moiré-like bands that drift across the plane
+    float fringe = sin(uv.y * 60.0 + t * 4.0) * sin(uv.x * 40.0 - t * 2.0) * 0.5 + 0.5;
+    fringe = pow(fringe, 3.0) * 0.35;
+
+    // ── Grid overlay ───────────────────────────────────────────────────────
+    float grid = 0.0;
+    if (uGridEnabled > 0.5) {
+      float gx = step(0.93, fract(uv.x * 14.0));
+      float gy = step(0.93, fract(uv.y * 14.0));
+      grid = max(gx, gy) * 0.5;
+    }
+
+    // ── Assembly animation: plane lights up from bottom ────────────────────
+    // uPlaneY goes -1 (bottom) to +1 (top); assemble = time-based sweep
+    float assembleT  = mod(t * 0.3, 2.5);
+    float assembled  = smoothstep(assembleT - 0.4, assembleT, uPlaneY * 0.5 + 0.5);
+    // Once fully assembled, stay on; only flicker during initial assembly
+    float stableT    = smoothstep(0.0, 1.2, assembleT);
+    float assembleA  = mix(assembled, 1.0, stableT);
+
+    // ── Flicker ────────────────────────────────────────────────────────────
+    float flicker = 1.0 - uFlickerAmount * step(0.93, hash(floor(t * 18.0)));
+
+    // ── Composite ─────────────────────────────────────────────────────────
+    vec3  hologramColor = uColor * scanRGB;
+    float scanBright    = (r_val + g_val + b_val) / 3.0;
+    float intensity     = (scanBright * 0.65 + fringe + grid) * flicker * assembleA * uIntensity;
+    if (intensity < 0.015) discard;
+
+    gl_FragColor = vec4(hologramColor + uColor * fringe, intensity * uOpacity);
+  }
+`;
+const HologramEffect = ({ boundingRadius, config, animations }) => {
+    const { scanlineCount, scanSpeed, scanColor, gridEnabled, flickerAmount, glitchEnabled, opacity, speed, intensity } = config;
+    const startValuesCacheRef = useRef({});
+    const meshRefs = useRef([]);
+    const colorVec = useMemo(() => {
+        const c = new THREE.Color(scanColor);
+        return new THREE.Vector3(c.r, c.g, c.b);
+    }, [scanColor]);
+    // One material per plane — each has its own uPlaneY so the assembly sweeps correctly
+    const materials = useMemo(() => Array.from({ length: scanlineCount }, (_, i) => {
+        const planeY = (i / Math.max(scanlineCount - 1, 1)) * 2 - 1; // -1..+1
+        return new THREE.ShaderMaterial({
+            vertexShader,
+            fragmentShader,
+            uniforms: {
+                u_time: { value: 0 },
+                uScanSpeed: { value: scanSpeed * speed },
+                uScanlineCount: { value: 5.0 + i * 0.3 }, // slight variation per plane
+                uColor: { value: colorVec },
+                uOpacity: { value: opacity * intensity },
+                uFlickerAmount: { value: flickerAmount },
+                uGridEnabled: { value: gridEnabled ? 1.0 : 0.0 },
+                uGlitchOffset: { value: 0 },
+                uAberration: { value: 0.012 },
+                uPlaneY: { value: planeY },
+                uIntensity: { value: intensity },
+            },
+            transparent: true,
+            depthWrite: false,
+            blending: THREE.AdditiveBlending,
+            side: THREE.DoubleSide,
+        });
+    }), [scanlineCount, scanSpeed, speed, colorVec, opacity, intensity, flickerAmount, gridEnabled]);
+    const planeSize = boundingRadius * 2.3;
+    const stepY = (boundingRadius * 2.5) / Math.max(scanlineCount - 1, 1);
+    useFrame((state) => {
+        const t = state.clock.getElapsedTime();
+        materials.forEach((mat, i) => {
+            mat.uniforms.u_time.value = t + i * 0.04;
+            if (glitchEnabled && Math.random() > 0.985) {
+                mat.uniforms.uGlitchOffset.value = (Math.random() - 0.5) * 0.06;
+            }
+            else {
+                mat.uniforms.uGlitchOffset.value *= 0.80;
+            }
+        });
+        if (animations?.length) {
+            applyGenerativeAnimations(materials, animations, startValuesCacheRef.current, Date.now(), false);
+        }
+    });
+    return (_jsx("group", { children: Array.from({ length: scanlineCount }, (_, i) => {
+            const y = -boundingRadius * 1.25 + i * stepY;
+            return (_jsx("mesh", { ref: el => { meshRefs.current[i] = el; }, material: materials[i], position: [0, y, 0], rotation: [-Math.PI / 2, 0, 0], children: _jsx("planeGeometry", { args: [planeSize, planeSize, 2, 2] }) }, i));
+        }) }));
+};
+export default HologramEffect;

package/dist/components/effects/IceCrystalsEffect.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { IceCrystalsConfig, AnimationOptions } from '@ntalmagor/3drize-core';
+interface IceCrystalsEffectProps {
+    boundingRadius: number;
+    config: IceCrystalsConfig;
+    animations?: AnimationOptions[];
+}
+declare const IceCrystalsEffect: React.FC<IceCrystalsEffectProps>;
+export default IceCrystalsEffect;
+//# sourceMappingURL=IceCrystalsEffect.d.ts.map

package/dist/components/effects/IceCrystalsEffect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IceCrystalsEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/IceCrystalsEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAG/C,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAIlF,UAAU,sBAAsB;IAC9B,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACjC;AAoED,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAiJvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}