@3driseai/3drise-viewer 0.1.1

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.js';
+// 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 "@3driseai/3drise-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":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACjF,UAAU,sBAAsB;IAC5B,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC;AAmED,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAuHvD,CAAC;AACF,eAAe,iBAAiB,CAAC"}

package/dist/components/effects/IceCrystalsEffect.js

@@ -0,0 +1,190 @@
+import { jsx as _jsx, jsxs as _jsxs } 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.js';
+// ── Crystal spike shader ──────────────────────────────────────────────────────
+const spikeVert = /* glsl */ `
+  varying vec3 vNormal;
+  varying vec3 vWorldPos;
+  void main() {
+    vNormal   = normalize(normalMatrix * normal);
+    vWorldPos = (modelMatrix * vec4(position, 1.0)).xyz;
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`;
+const spikeFrag = /* glsl */ `
+  uniform vec3  uIceColor;
+  uniform float uOpacity;
+  uniform float uIntensity;
+  varying vec3  vNormal;
+  varying vec3  vWorldPos;
+
+  void main() {
+    vec3 viewDir  = normalize(cameraPosition - vWorldPos);
+    vec3 n        = normalize(vNormal);
+
+    // Specular glint — sharp facet reflection
+    vec3 h        = normalize(viewDir + vec3(0.6, 1.0, 0.4));
+    float spec    = pow(max(dot(n, h), 0.0), 38.0) * 2.5;
+
+    // Fresnel edge glow
+    float fresnel = pow(1.0 - abs(dot(n, viewDir)), 2.0);
+
+    // Facet shading: vary brightness by normal orientation
+    float shade   = 0.5 + 0.5 * abs(dot(n, normalize(vec3(1.0, 2.0, 0.5))));
+
+    vec3  col   = uIceColor * shade + vec3(spec) + vec3(0.6, 0.9, 1.0) * fresnel * 0.5;
+    float alpha = (shade * 0.5 + fresnel * 0.35 + spec * 0.15) * uOpacity * uIntensity;
+    gl_FragColor = vec4(col, clamp(alpha, 0.0, 1.0));
+  }
+`;
+// ── Frost particle shader ─────────────────────────────────────────────────────
+const frostVert = /* glsl */ `
+  attribute float aBaseY;
+  attribute float aSize;
+  attribute vec2  aXZ;
+  uniform float   u_time;
+  uniform float   uRange;
+  varying float   vA;
+  void main() {
+    float y  = mod(aBaseY - u_time * 0.35, uRange) - uRange * 0.5;
+    vec3  pos = vec3(aXZ.x, y, aXZ.y);
+    vA = 0.4 + 0.6 * smoothstep(-uRange * 0.5, -uRange * 0.3, y)
+             * smoothstep(uRange * 0.5, uRange * 0.3, y);
+    vec4 mv = modelViewMatrix * vec4(pos, 1.0);
+    gl_PointSize = aSize * (180.0 / -mv.z);
+    gl_Position  = projectionMatrix * mv;
+  }
+`;
+const frostFrag = /* glsl */ `
+  uniform float uOpacity;
+  varying float vA;
+  void main() {
+    vec2  c = gl_PointCoord - 0.5;
+    if (length(c) > 0.5) discard;
+    float g = exp(-dot(c, c) * 6.0);
+    gl_FragColor = vec4(0.85, 0.95, 1.0, g * vA * uOpacity);
+  }
+`;
+const IceCrystalsEffect = ({ boundingRadius, config, animations }) => {
+    const { spikeCount, spikeLength, frostEnabled, iceColor, pulseSpeed, opacity, intensity } = config;
+    const startValuesCacheRef = useRef({});
+    const groupRef = useRef(null);
+    const timeRef = useRef(0);
+    const r = boundingRadius;
+    const N = Math.max(10, Math.min(spikeCount, 60));
+    const { spikeMesh, spikeMat, frostGeo, frostMat } = useMemo(() => {
+        const ic = new THREE.Color(iceColor);
+        // ── Spike instanced mesh ─────────────────────────────────────────────
+        const spikeLen = r * spikeLength * 0.55;
+        const spikeBase = r * 0.055 * intensity;
+        const spikeGeo = new THREE.ConeGeometry(spikeBase, spikeLen, 5);
+        // Shift cone so its base is at origin (tip points up in local space)
+        spikeGeo.translate(0, spikeLen / 2, 0);
+        const sMat = new THREE.ShaderMaterial({
+            vertexShader: spikeVert,
+            fragmentShader: spikeFrag,
+            uniforms: {
+                uIceColor: { value: new THREE.Vector3(ic.r, ic.g, ic.b) },
+                uOpacity: { value: opacity },
+                uIntensity: { value: intensity },
+            },
+            transparent: true,
+            depthWrite: false,
+            blending: THREE.AdditiveBlending,
+            side: THREE.DoubleSide,
+        });
+        const mesh = new THREE.InstancedMesh(spikeGeo, sMat, N);
+        mesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
+        // Position spikes on Fibonacci sphere, pointing radially outward
+        const tmpPos = new THREE.Vector3();
+        const tmpQuat = new THREE.Quaternion();
+        const tmpMat = new THREE.Matrix4();
+        const UP = new THREE.Vector3(0, 1, 0);
+        const goldenAngle = Math.PI * (3 - Math.sqrt(5));
+        for (let i = 0; i < N; i++) {
+            const y = 1 - (i / (N - 1)) * 2;
+            const rad = Math.sqrt(1 - y * y) * r;
+            const phi = i * goldenAngle;
+            tmpPos.set(Math.cos(phi) * rad, y * r, Math.sin(phi) * rad);
+            // Quaternion: rotate Y-up to radial direction
+            const dir = tmpPos.clone().normalize();
+            tmpQuat.setFromUnitVectors(UP, dir);
+            // Scale Y randomly for variety
+            const scaleY = 0.6 + Math.random() * 0.8;
+            tmpMat.compose(tmpPos, tmpQuat, new THREE.Vector3(1, scaleY, 1));
+            mesh.setMatrixAt(i, tmpMat);
+        }
+        mesh.instanceMatrix.needsUpdate = true;
+        // ── Frost particles ──────────────────────────────────────────────────
+        const FN = 180;
+        const range = r * 2.5;
+        const fBaseY = new Float32Array(FN);
+        const fSize = new Float32Array(FN);
+        const fXZ = new Float32Array(FN * 2);
+        for (let i = 0; i < FN; i++) {
+            fBaseY[i] = Math.random() * range;
+            fSize[i] = 1.5 + Math.random() * 3.0;
+            const a = Math.random() * Math.PI * 2;
+            const fr = (0.9 + Math.random() * 0.8) * r;
+            fXZ[i * 2] = Math.cos(a) * fr;
+            fXZ[i * 2 + 1] = Math.sin(a) * fr;
+        }
+        const fGeo = new THREE.BufferGeometry();
+        fGeo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(FN * 3), 3));
+        fGeo.setAttribute('aBaseY', new THREE.BufferAttribute(fBaseY, 1));
+        fGeo.setAttribute('aSize', new THREE.BufferAttribute(fSize, 1));
+        fGeo.setAttribute('aXZ', new THREE.BufferAttribute(fXZ, 2));
+        fGeo.frustumCulled = false;
+        const fMat = new THREE.ShaderMaterial({
+            vertexShader: frostVert,
+            fragmentShader: frostFrag,
+            uniforms: {
+                u_time: { value: 0 },
+                uRange: { value: range },
+                uOpacity: { value: opacity * 0.55 },
+            },
+            transparent: true, depthWrite: false, blending: THREE.AdditiveBlending,
+        });
+        return { spikeMesh: mesh, spikeMat: sMat, frostGeo: fGeo, frostMat: fMat };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [N, r, spikeLength, iceColor, opacity, intensity]);
+    // Pulse scale animation on spikes
+    const pulseMats = useRef([]);
+    useMemo(() => {
+        const tmpMat = new THREE.Matrix4();
+        const tmpPos = new THREE.Vector3();
+        const tmpQuat = new THREE.Quaternion();
+        const tmpScale = new THREE.Vector3();
+        pulseMats.current = Array.from({ length: N }, (_, i) => {
+            spikeMesh.getMatrixAt(i, tmpMat);
+            return tmpMat.clone();
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [spikeMesh, N]);
+    useFrame((state, delta) => {
+        timeRef.current += delta;
+        const t = timeRef.current;
+        frostMat.uniforms.u_time.value = t;
+        // Subtle spike pulse: scale Y slightly up/down per spike
+        const tmpMat = new THREE.Matrix4();
+        const tmpPos = new THREE.Vector3();
+        const tmpQuat = new THREE.Quaternion();
+        const tmpScale = new THREE.Vector3();
+        for (let i = 0; i < N; i++) {
+            const base = pulseMats.current[i];
+            base.decompose(tmpPos, tmpQuat, tmpScale);
+            const pulse = 0.88 + 0.12 * Math.sin(t * pulseSpeed * 1.8 + i * 0.47);
+            tmpScale.y = pulse;
+            tmpMat.compose(tmpPos, tmpQuat, tmpScale);
+            spikeMesh.setMatrixAt(i, tmpMat);
+        }
+        spikeMesh.instanceMatrix.needsUpdate = true;
+        if (animations?.length) {
+            applyGenerativeAnimations([spikeMat, frostMat], animations, startValuesCacheRef.current, Date.now(), false);
+        }
+    });
+    return (_jsxs("group", { ref: groupRef, children: [_jsx("primitive", { object: spikeMesh }), frostEnabled && _jsx("points", { geometry: frostGeo, material: frostMat })] }));
+};
+export default IceCrystalsEffect;

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

@@ -0,0 +1,10 @@
+import React from "react";
+import type { LightningConfig, AnimationOptions } from "@3driseai/3drise-core";
+interface LightningEffectProps {
+    boundingRadius: number;
+    config: LightningConfig;
+    animations?: AnimationOptions[];
+}
+declare const LightningEffect: React.FC<LightningEffectProps>;
+export default LightningEffect;
+//# sourceMappingURL=LightningEffect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LightningEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/LightningEffect.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC/E,UAAU,oBAAoB;IAC1B,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,eAAe,CAAC;IACxB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC;AAsDD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAsLnD,CAAC;AACF,eAAe,eAAe,CAAC"}

package/dist/components/effects/LightningEffect.js

@@ -0,0 +1,240 @@
+import { jsx as _jsx, jsxs as _jsxs } 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.js';
+// ── Seeded LCG RNG — deterministic, no Math.random ───────────────────────────
+function makeRng(seed) {
+    let s = (seed * 1664525 + 1013904223) >>> 0;
+    return () => { s = (s * 1664525 + 1013904223) >>> 0; return s / 0xffffffff; };
+}
+// ── Fractal midpoint displacement → ordered polyline ─────────────────────────
+// Returns 2^depth + 1 points
+function fractalPolyline(start, end, depth, rng) {
+    if (depth === 0)
+        return [start.clone(), end.clone()];
+    const mid = start.clone().lerp(end, 0.42 + rng() * 0.16);
+    const dir = end.clone().sub(start);
+    const len = dir.length();
+    dir.normalize();
+    let perp1 = new THREE.Vector3(dir.z, 0, -dir.x);
+    if (perp1.lengthSq() < 0.001)
+        perp1.set(0, dir.z, -dir.y);
+    perp1.normalize();
+    const perp2 = dir.clone().cross(perp1).normalize();
+    const spread = len * 0.38;
+    mid.addScaledVector(perp1, (rng() - 0.5) * 2 * spread);
+    mid.addScaledVector(perp2, (rng() - 0.5) * spread * 0.7);
+    const a = fractalPolyline(start, mid, depth - 1, rng);
+    const b = fractalPolyline(mid, end, depth - 1, rng);
+    return [...a.slice(0, -1), ...b]; // merge without duplicating midpoint
+}
+// ── Glow sprite shader ─────────────────────────────────────────────────────────
+const glowVert = /* glsl */ `
+  attribute float aBrightness;
+  uniform float uPointSize;
+  varying float vB;
+  void main() {
+    vB           = aBrightness;
+    vec4 mv      = modelViewMatrix * vec4(position, 1.0);
+    gl_PointSize = uPointSize * aBrightness * (200.0 / -mv.z);
+    gl_Position  = projectionMatrix * mv;
+  }
+`;
+const glowFrag = /* glsl */ `
+  uniform vec3  uColor;
+  uniform float uOpacity;
+  varying float vB;
+  void main() {
+    if (vB < 0.01) discard;
+    vec2  c = gl_PointCoord - 0.5;
+    if (length(c) > 0.5) discard;
+    float g = exp(-dot(c, c) * 5.5);
+    gl_FragColor = vec4(uColor, g * vB * uOpacity);
+  }
+`;
+const FADE_DUR = 0.22;
+const LightningEffect = ({ boundingRadius, config, animations }) => {
+    const { boltCount, branchDepth, color, glowColor, opacity, speed, intensity, strikeRadius } = config;
+    const startValuesCacheRef = useRef({});
+    const depth = Math.min(Math.max(branchDepth, 2), 6);
+    const N = Math.pow(2, depth) + 1; // vertex count: 5, 9, 17, 33, 65
+    const coreCol = useMemo(() => new THREE.Color(color), [color]);
+    const glowCol = useMemo(() => new THREE.Color(glowColor), [glowColor]);
+    const glowVec = useMemo(() => new THREE.Vector3(glowCol.r, glowCol.g, glowCol.b), [glowCol]);
+    const sr = boundingRadius * strikeRadius;
+    // ── Compute origin/target for a bolt from a seed ───────────────────────────
+    function boltEndpoints(rng) {
+        const theta = rng() * Math.PI * 2;
+        const elev = 0.3 + rng() * 0.4; // horizontal spread of origin
+        return [
+            new THREE.Vector3(Math.cos(theta) * sr * elev, sr * (0.8 + rng() * 0.4), Math.sin(theta) * sr * elev),
+            new THREE.Vector3((rng() - 0.5) * boundingRadius * 0.4, (rng() - 0.5) * boundingRadius * 0.3, (rng() - 0.5) * boundingRadius * 0.4),
+        ];
+    }
+    // ── Build line+point geometry from a point list ────────────────────────────
+    function makeGeos(pts, colBuf, brightBuf) {
+        const posArr = new Float32Array(N * 3);
+        for (let i = 0; i < pts.length && i < N; i++) {
+            posArr[i * 3] = pts[i].x;
+            posArr[i * 3 + 1] = pts[i].y;
+            posArr[i * 3 + 2] = pts[i].z;
+        }
+        const lineGeo = new THREE.BufferGeometry();
+        lineGeo.setAttribute('position', new THREE.BufferAttribute(posArr.slice(), 3));
+        lineGeo.setAttribute('color', new THREE.BufferAttribute(colBuf, 3));
+        const pointGeo = new THREE.BufferGeometry();
+        pointGeo.setAttribute('position', new THREE.BufferAttribute(posArr.slice(), 3));
+        pointGeo.setAttribute('aBrightness', new THREE.BufferAttribute(brightBuf, 1));
+        return { lineGeo, pointGeo };
+    }
+    // ── Initialise bolts ───────────────────────────────────────────────────────
+    const bolts = useMemo(() => {
+        return Array.from({ length: boltCount }, (_, bi) => {
+            const seed = bi * 997 + 1;
+            const rng = makeRng(seed);
+            const [o, t] = boltEndpoints(rng);
+            const pts = fractalPolyline(o, t, depth, rng);
+            const col = new Float32Array(N * 3);
+            const bri = new Float32Array(N);
+            const { lineGeo, pointGeo } = makeGeos(pts, col, bri);
+            return {
+                phase: 'wait', timer: (bi / boltCount) * 1.8,
+                progress: 0, seed, waitDur: 0.5 + rng() * 1.0,
+                points: pts, colBuf: col, brightBuf: bri, lineGeo, pointGeo,
+            };
+        });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [boltCount, depth, N]);
+    // ── Shared materials ───────────────────────────────────────────────────────
+    const lineMat = useMemo(() => new THREE.LineBasicMaterial({
+        vertexColors: true,
+        transparent: true,
+        depthWrite: false,
+        blending: THREE.AdditiveBlending,
+    }), []);
+    const glowMats = useMemo(() => bolts.map(() => new THREE.ShaderMaterial({
+        vertexShader: glowVert,
+        fragmentShader: glowFrag,
+        uniforms: {
+            uPointSize: { value: 6 * intensity },
+            uColor: { value: glowVec },
+            uOpacity: { value: opacity * 0.12 },
+        },
+        transparent: true,
+        depthWrite: false,
+        blending: THREE.AdditiveBlending,
+    })), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [bolts, intensity, glowVec, opacity]);
+    // ── Recompute vertex colors from current progress ──────────────────────────
+    function refreshColors(bolt, overallScale) {
+        const { progress, points, colBuf, brightBuf, lineGeo, pointGeo } = bolt;
+        const n = points.length;
+        for (let i = 0; i < n; i++) {
+            const t = i / (n - 1);
+            if (t > progress + 0.001) {
+                // Not yet reached — keep black (invisible with additive blend)
+                colBuf[i * 3] = colBuf[i * 3 + 1] = colBuf[i * 3 + 2] = 0;
+                brightBuf[i] = 0;
+                continue;
+            }
+            const behind = progress - t; // 0 = at head
+            // Exponential trail: bright near head, fades behind
+            const trail = Math.exp(-behind * 7.0);
+            // Build-up: whole bolt intensifies as progress moves from 0→1
+            const buildUp = 0.3 + 0.7 * progress;
+            // Extra corona right at the head
+            const corona = Math.exp(-behind * behind * 220) * 3.0;
+            const totalBri = (trail * buildUp + corona) * intensity * overallScale;
+            // Color: glow color in body → core (white-ish) at head corona
+            const headMix = Math.min(1, corona * 0.5);
+            colBuf[i * 3] = (glowCol.r + (coreCol.r - glowCol.r) * headMix) * totalBri;
+            colBuf[i * 3 + 1] = (glowCol.g + (coreCol.g - glowCol.g) * headMix) * totalBri;
+            colBuf[i * 3 + 2] = (glowCol.b + (coreCol.b - glowCol.b) * headMix) * totalBri;
+            brightBuf[i] = Math.min(1, (trail * buildUp * 0.5 + corona * 0.3) * overallScale);
+        }
+        lineGeo.attributes.color.needsUpdate = true;
+        pointGeo.attributes.aBrightness.needsUpdate = true;
+    }
+    // ── Rebuild bolt shape with fresh fractal ─────────────────────────────────
+    function rebuildShape(bolt) {
+        bolt.seed++;
+        const rng = makeRng(bolt.seed);
+        const [o, t] = boltEndpoints(rng);
+        bolt.points = fractalPolyline(o, t, depth, rng);
+        bolt.waitDur = 0.3 + rng() * 1.3;
+        bolt.progress = 0;
+        const pts = bolt.points;
+        const posL = bolt.lineGeo.attributes.position;
+        const posP = bolt.pointGeo.attributes.position;
+        for (let i = 0; i < pts.length && i < N; i++) {
+            posL.setXYZ(i, pts[i].x, pts[i].y, pts[i].z);
+            posP.setXYZ(i, pts[i].x, pts[i].y, pts[i].z);
+        }
+        posL.needsUpdate = true;
+        posP.needsUpdate = true;
+    }
+    useFrame((_, delta) => {
+        const dt = delta * speed;
+        bolts.forEach((bolt, bi) => {
+            switch (bolt.phase) {
+                case 'wait':
+                    bolt.timer -= delta;
+                    // Keep all colors black during wait
+                    bolt.colBuf.fill(0);
+                    bolt.brightBuf.fill(0);
+                    bolt.lineGeo.attributes.color.needsUpdate = true;
+                    bolt.pointGeo.attributes.aBrightness.needsUpdate = true;
+                    if (bolt.timer <= 0) {
+                        rebuildShape(bolt);
+                        bolt.phase = 'travel';
+                    }
+                    break;
+                case 'travel':
+                    bolt.progress += dt * 8.0;
+                    if (bolt.progress >= 1) {
+                        bolt.progress = 1;
+                        bolt.phase = 'flash';
+                        bolt.timer = 0.06 + Math.random() * 0.05;
+                    }
+                    refreshColors(bolt, 1.0);
+                    break;
+                case 'flash': {
+                    bolt.timer -= delta;
+                    // Flash: briefly crank overall brightness to 2–3x for the "return stroke"
+                    const flashBoost = 1.0 + Math.max(0, bolt.timer / 0.08) * 2.5;
+                    refreshColors(bolt, flashBoost);
+                    if (bolt.timer <= 0) {
+                        bolt.phase = 'fade';
+                        bolt.timer = FADE_DUR;
+                    }
+                    break;
+                }
+                case 'fade': {
+                    bolt.timer -= delta;
+                    const ratio = Math.max(0, bolt.timer / FADE_DUR);
+                    // Recompute full-progress colors then scale uniformly to fade out
+                    refreshColors(bolt, ratio);
+                    glowMats[bi].uniforms.uOpacity.value = opacity * 0.12 * ratio;
+                    if (bolt.timer <= 0) {
+                        bolt.phase = 'wait';
+                        bolt.timer = bolt.waitDur;
+                        glowMats[bi].uniforms.uOpacity.value = opacity * 0.12;
+                    }
+                    break;
+                }
+            }
+        });
+        if (animations?.length) {
+            applyGenerativeAnimations(glowMats, animations, startValuesCacheRef.current, Date.now(), false);
+        }
+    });
+    // ── Render ─────────────────────────────────────────────────────────────────
+    // Use primitive to render THREE.Line (not THREE.LineSegments)
+    const lineObjects = useMemo(() => bolts.map(bolt => new THREE.Line(bolt.lineGeo, lineMat)), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [bolts, lineMat]);
+    return (_jsx("group", { children: lineObjects.map((lineObj, bi) => (_jsxs("group", { children: [_jsx("primitive", { object: lineObj }), _jsx("points", { geometry: bolts[bi].pointGeo, material: glowMats[bi] })] }, bi))) }));
+};
+export default LightningEffect;

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

@@ -0,0 +1,10 @@
+import type { MoleculesConfig, AnimationOptions } from '@3driseai/3drise-core';
+import React from "react";
+interface MoleculesEffectProps {
+    boundingRadius: number;
+    config: MoleculesConfig;
+    animations?: AnimationOptions[];
+}
+declare const MoleculesEffect: React.FC<MoleculesEffectProps>;
+export default MoleculesEffect;
+//# sourceMappingURL=MoleculesEffect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MoleculesEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/MoleculesEffect.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE/E,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,UAAU,oBAAoB;IAC1B,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,eAAe,CAAC;IACxB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC;AA+CD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAyHnD,CAAC;AACF,eAAe,eAAe,CAAC"}