@ntalmagor/3drize-viewer 0.1.2

package/dist/components/effects/ConstellationEffect.js

@@ -0,0 +1,189 @@
+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';
+// Stars: per-particle twinkle + size variation
+const starVertShader = /* glsl */ `
+  attribute float aPhase;
+  attribute float aSize;
+
+  uniform float u_time;
+  uniform float uTwinkleSpeed;
+  uniform float uPointSize;
+
+  varying float vAlpha;
+  varying float vBrightness;
+
+  void main() {
+    float twinkle  = 0.5 + 0.5 * sin(u_time * uTwinkleSpeed + aPhase);
+    float twinkle2 = 0.5 + 0.5 * sin(u_time * uTwinkleSpeed * 1.618 + aPhase * 2.3);
+    vAlpha      = 0.35 + 0.65 * twinkle;
+    vBrightness = twinkle2;
+
+    vec4 mv     = modelViewMatrix * vec4(position, 1.0);
+    gl_PointSize = uPointSize * aSize * (twinkle * 0.6 + 0.4) * (260.0 / -mv.z);
+    gl_Position  = projectionMatrix * mv;
+  }
+`;
+const starFragShader = /* glsl */ `
+  uniform vec3  uColor;
+  uniform float uOpacity;
+
+  varying float vAlpha;
+  varying float vBrightness;
+
+  void main() {
+    vec2  coord = gl_PointCoord - vec2(0.5);
+    float dist  = length(coord);
+    if (dist > 0.5) discard;
+
+    // Gaussian glow
+    float glow = exp(-dist * dist * 10.0);
+
+    // Four-pointed diffraction spike (like real stars through telescopes)
+    float cx = exp(-abs(coord.x) * 16.0) * exp(-coord.y*coord.y * 40.0);
+    float cy = exp(-abs(coord.y) * 16.0) * exp(-coord.x*coord.x * 40.0);
+    float spike = (cx + cy) * 0.5 * vBrightness;
+
+    // Hot core: center goes white
+    float core  = exp(-dist * dist * 80.0);
+    vec3  col   = mix(uColor, vec3(1.0, 1.0, 1.0), core * 0.7 + spike * 0.3);
+
+    gl_FragColor = vec4(col, vAlpha * uOpacity * (glow + spike + core));
+  }
+`;
+// Animated connection lines — pulse in/out using time + per-line phase
+const lineVertShader = /* glsl */ `
+  attribute float aLinePhase;
+  attribute float aLineSeed;
+
+  uniform float u_time;
+  uniform float uPulseSpeed;
+
+  varying float vLineAlpha;
+
+  void main() {
+    // Each line independently pulses with a unique phase
+    float pulse  = 0.5 + 0.5 * sin(u_time * uPulseSpeed + aLinePhase);
+    // Some lines are fast, some slow
+    float pulse2 = 0.5 + 0.5 * sin(u_time * uPulseSpeed * aLineSeed + aLinePhase * 1.7);
+    vLineAlpha   = pulse * pulse2;
+
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+  }
+`;
+const lineFragShader = /* glsl */ `
+  uniform vec3  uColor;
+  uniform float uLineOpacity;
+
+  varying float vLineAlpha;
+
+  void main() {
+    gl_FragColor = vec4(uColor, vLineAlpha * uLineOpacity);
+  }
+`;
+// Fibonacci sphere for even distribution
+function fibonacciSphere(count, radius) {
+    const positions = new Float32Array(count * 3);
+    const golden = Math.PI * (3 - Math.sqrt(5));
+    for (let i = 0; i < count; i++) {
+        const y = 1 - (i / (count - 1)) * 2;
+        const r = Math.sqrt(Math.max(0, 1 - y * y));
+        const theta = golden * i;
+        positions[i * 3] = Math.cos(theta) * r * radius;
+        positions[i * 3 + 1] = y * radius;
+        positions[i * 3 + 2] = Math.sin(theta) * r * radius;
+    }
+    return positions;
+}
+const ConstellationEffect = ({ boundingRadius, config, animations }) => {
+    const { starCount, connectRadius, orbitRadius, twinkleSpeed, lineOpacity, starSize, color, opacity, speed } = config;
+    const startValuesCacheRef = useRef({});
+    const groupRef = useRef(null);
+    const r = boundingRadius * orbitRadius;
+    const connR = boundingRadius * connectRadius;
+    const colorVec = useMemo(() => {
+        const c = new THREE.Color(color);
+        return new THREE.Vector3(c.r, c.g, c.b);
+    }, [color]);
+    const { starGeo, starMat, lineGeo, lineMat } = useMemo(() => {
+        const positions = fibonacciSphere(starCount, r);
+        // Per-star random size multipliers (slight variation makes it feel natural)
+        const phases = new Float32Array(starCount);
+        const sizes = new Float32Array(starCount);
+        for (let i = 0; i < starCount; i++) {
+            phases[i] = Math.random() * Math.PI * 2;
+            sizes[i] = 0.5 + Math.random() * 1.0; // 0.5 – 1.5× size
+        }
+        const sGeo = new THREE.BufferGeometry();
+        sGeo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+        sGeo.setAttribute('aPhase', new THREE.BufferAttribute(phases, 1));
+        sGeo.setAttribute('aSize', new THREE.BufferAttribute(sizes, 1));
+        const sMat = new THREE.ShaderMaterial({
+            vertexShader: starVertShader,
+            fragmentShader: starFragShader,
+            uniforms: {
+                u_time: { value: 0 },
+                uTwinkleSpeed: { value: twinkleSpeed },
+                uPointSize: { value: starSize * 220 },
+                uColor: { value: colorVec },
+                uOpacity: { value: opacity },
+            },
+            transparent: true,
+            depthWrite: false,
+            blending: THREE.AdditiveBlending,
+        });
+        // Build connection line geometry — each nearby pair gets a line
+        const lineVerts = [];
+        const linePhases = [];
+        const lineSeeds = [];
+        for (let i = 0; i < starCount; i++) {
+            for (let j = i + 1; j < starCount; j++) {
+                const ax = positions[i * 3], ay = positions[i * 3 + 1], az = positions[i * 3 + 2];
+                const bx = positions[j * 3], by = positions[j * 3 + 1], bz = positions[j * 3 + 2];
+                const dx = ax - bx, dy = ay - by, dz = az - bz;
+                if (Math.sqrt(dx * dx + dy * dy + dz * dz) < connR) {
+                    lineVerts.push(ax, ay, az, bx, by, bz);
+                    const ph = Math.random() * Math.PI * 2;
+                    const sd = 0.5 + Math.random() * 1.5;
+                    linePhases.push(ph, ph); // same phase for both ends of the segment
+                    lineSeeds.push(sd, sd);
+                }
+            }
+        }
+        const lGeo = new THREE.BufferGeometry();
+        lGeo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(lineVerts), 3));
+        lGeo.setAttribute('aLinePhase', new THREE.BufferAttribute(new Float32Array(linePhases), 1));
+        lGeo.setAttribute('aLineSeed', new THREE.BufferAttribute(new Float32Array(lineSeeds), 1));
+        const lMat = new THREE.ShaderMaterial({
+            vertexShader: lineVertShader,
+            fragmentShader: lineFragShader,
+            uniforms: {
+                u_time: { value: 0 },
+                uPulseSpeed: { value: 0.4 },
+                uColor: { value: colorVec },
+                uLineOpacity: { value: lineOpacity },
+            },
+            transparent: true,
+            depthWrite: false,
+            blending: THREE.AdditiveBlending,
+        });
+        return { starGeo: sGeo, starMat: sMat, lineGeo: lGeo, lineMat: lMat };
+    }, [starCount, r, connR, twinkleSpeed, starSize, colorVec, opacity, lineOpacity]);
+    useFrame((state, delta) => {
+        if (groupRef.current) {
+            // Dual-axis rotation: primary Y + slow precession around X for a tumbling feel
+            groupRef.current.rotation.y += delta * speed * 0.18;
+            groupRef.current.rotation.x += delta * speed * 0.04;
+        }
+        const t = state.clock.getElapsedTime();
+        starMat.uniforms.u_time.value = t;
+        lineMat.uniforms.u_time.value = t;
+        if (animations?.length) {
+            applyGenerativeAnimations([starMat, lineMat], animations, startValuesCacheRef.current, Date.now(), false);
+        }
+    });
+    return (_jsxs("group", { ref: groupRef, children: [_jsx("points", { geometry: starGeo, material: starMat }), _jsx("lineSegments", { geometry: lineGeo, material: lineMat })] }));
+};
+export default ConstellationEffect;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DataStreamEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/DataStreamEffect.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;AAsFD,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA0DrD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/components/effects/DataStreamEffect.js

@@ -0,0 +1,138 @@
+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';
+// Dual counter-rotating helices with cold→hot color gradient.
+// All animation is GPU-side — only u_time updates per frame.
+const vertexShader = /* glsl */ `
+  attribute float aT;
+  attribute float aOffset;
+  attribute float aStrand;  // 0 = CW, 1 = CCW (second helix, π-phase offset)
+
+  uniform float u_time;
+  uniform float u_speed;
+  uniform float uRadius;
+  uniform float uTurns;
+  uniform float uHeight;
+  uniform float uPointSize;
+  uniform float uIntensity;
+
+  varying float vAlpha;
+  varying vec3  vColor;
+
+  // Palette: deep electric blue → cyan → white-gold
+  vec3 palette(float t) {
+    vec3 cold = vec3(0.05, 0.15, 0.9);   // deep blue
+    vec3 mid  = vec3(0.0,  0.85, 1.0);   // cyan
+    vec3 hot  = vec3(1.0,  0.92, 0.55);  // warm gold-white
+    if (t < 0.5) return mix(cold, mid,  t * 2.0);
+    else          return mix(mid,  hot, (t - 0.5) * 2.0);
+  }
+
+  void main() {
+    const float TAU = 6.28318530718;
+
+    // Second strand runs the opposite direction, phase-shifted by half turn
+    float dir    = aStrand > 0.5 ? -1.0 : 1.0;
+    float phase  = aStrand > 0.5 ? TAU * 0.5 : 0.0;
+    float t      = fract(aT + aOffset + u_time * u_speed * dir);
+
+    float angle  = t * uTurns * TAU + phase;
+    float y      = (t - 0.5) * uHeight;
+
+    // Slight radius oscillation along the helix for organic feel
+    float rWave  = uRadius * (1.0 + 0.06 * sin(t * TAU * 3.0 + u_time * 2.0));
+    vec3 helixPos = vec3(cos(angle) * rWave, y, sin(angle) * rWave);
+
+    // Head/tail fade
+    float nearHead = smoothstep(0.0, 0.10, t);
+    float nearTail = 1.0 - smoothstep(0.88, 1.0, t);
+    vAlpha = nearHead * nearTail;
+
+    // Color: gradient along t, second strand tinted slightly differently
+    float tColor  = aStrand > 0.5 ? 1.0 - t : t;  // CW cold→hot, CCW hot→cold
+    vColor        = palette(tColor);
+    if (aStrand > 0.5) vColor = mix(vColor, vColor.zxy, 0.25); // slight RGB swizzle for 2nd strand
+
+    // Size: larger at the bright head of the stream
+    float sizeT  = aStrand > 0.5 ? 1.0 - t : t;
+    float sizeMod = 0.3 + 0.7 * pow(sizeT, 0.4);
+
+    vec4 mv = modelViewMatrix * vec4(helixPos, 1.0);
+    gl_PointSize = uPointSize * sizeMod * uIntensity * (280.0 / -mv.z);
+    gl_Position  = projectionMatrix * mv;
+  }
+`;
+const fragmentShader = /* glsl */ `
+  varying float vAlpha;
+  varying vec3  vColor;
+  uniform float uOpacity;
+
+  void main() {
+    vec2  coord = gl_PointCoord - vec2(0.5);
+    float dist  = length(coord);
+    if (dist > 0.5) discard;
+
+    // Soft circular glow
+    float glow  = exp(-dist * dist * 9.0);
+
+    // Cross-shaped sparkle on bright particles
+    float cx = exp(-abs(coord.x) * 18.0) * exp(-coord.y*coord.y * 28.0);
+    float cy = exp(-abs(coord.y) * 18.0) * exp(-coord.x*coord.x * 28.0);
+    float star = (cx + cy) * 0.25;
+
+    gl_FragColor = vec4(vColor, vAlpha * uOpacity * (glow + star));
+  }
+`;
+const DataStreamEffect = ({ boundingRadius, config, animations }) => {
+    const { particleCount, spiralTurns, streamRadius, inward, particleSize, opacity, speed, intensity } = config;
+    const startValuesCacheRef = useRef({});
+    const r = boundingRadius * streamRadius;
+    const h = boundingRadius * 2.6;
+    const { geometry, material } = useMemo(() => {
+        // Double the particles — half on each strand
+        const total = particleCount * 2;
+        const tArr = new Float32Array(total);
+        const offsetArr = new Float32Array(total);
+        const strandArr = new Float32Array(total);
+        for (let i = 0; i < total; i++) {
+            const half = i < particleCount ? 0 : 1;
+            const localI = i % particleCount;
+            tArr[i] = localI / particleCount;
+            offsetArr[i] = Math.random();
+            strandArr[i] = half;
+        }
+        const geo = new THREE.BufferGeometry();
+        geo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(total * 3), 3));
+        geo.setAttribute('aT', new THREE.BufferAttribute(tArr, 1));
+        geo.setAttribute('aOffset', new THREE.BufferAttribute(offsetArr, 1));
+        geo.setAttribute('aStrand', new THREE.BufferAttribute(strandArr, 1));
+        const mat = new THREE.ShaderMaterial({
+            vertexShader,
+            fragmentShader,
+            uniforms: {
+                u_time: { value: 0 },
+                u_speed: { value: speed * (inward ? -1 : 1) },
+                uRadius: { value: r },
+                uTurns: { value: spiralTurns },
+                uHeight: { value: h },
+                uPointSize: { value: particleSize * 80 },
+                uIntensity: { value: intensity },
+                uOpacity: { value: opacity },
+            },
+            transparent: true,
+            depthWrite: false,
+            blending: THREE.AdditiveBlending,
+        });
+        return { geometry: geo, material: mat };
+    }, [particleCount, spiralTurns, r, h, inward, particleSize, intensity, speed, opacity]);
+    useFrame((state) => {
+        material.uniforms.u_time.value = state.clock.getElapsedTime();
+        if (animations?.length) {
+            applyGenerativeAnimations([material], animations, startValuesCacheRef.current, Date.now(), false);
+        }
+    });
+    return _jsx("points", { geometry: geometry, material: material });
+};
+export default DataStreamEffect;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DnaHelixEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/DnaHelixEffect.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;AA+ED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAmRjD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/effects/DnaHelixEffect.js

@@ -0,0 +1,311 @@
+import { jsx as _jsx, Fragment as _Fragment, 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';
+// ── Pulsing junction-dot shader ───────────────────────────────────────────────
+const dotVert = /* glsl */ `
+  attribute float aPhase;
+  uniform float   uSize;
+  uniform float   u_time;
+  varying float   vP;
+  void main() {
+    vP = 0.55 + 0.45 * sin(u_time * 2.0 + aPhase);
+    vec4 mv = modelViewMatrix * vec4(position, 1.0);
+    gl_PointSize = uSize * vP * (200.0 / -mv.z);
+    gl_Position  = projectionMatrix * mv;
+  }
+`;
+const dotFrag = /* glsl */ `
+  uniform vec3  uColor;
+  uniform float uOpacity;
+  varying float vP;
+  void main() {
+    vec2  c = gl_PointCoord - 0.5;
+    float d = length(c);
+    if (d > 0.5) discard;
+    float core = smoothstep(0.2, 0.0, d);
+    float halo = exp(-d * d * 4.5) * 0.6;
+    gl_FragColor = vec4(uColor + vec3(core * 0.5), (core + halo) * vP * uOpacity);
+  }
+`;
+// ── Bolt glow-sprite shader ───────────────────────────────────────────────────
+const boltPtVert = /* glsl */ `
+  attribute float aBright;
+  uniform float   uSize;
+  varying float   vB;
+  void main() {
+    vB = aBright;
+    vec4 mv      = modelViewMatrix * vec4(position, 1.0);
+    gl_PointSize = uSize * aBright * (200.0 / -mv.z);
+    gl_Position  = projectionMatrix * mv;
+  }
+`;
+const boltPtFrag = /* 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.0);
+    gl_FragColor = vec4(uColor, g * vB * uOpacity);
+  }
+`;
+// ── Constants ─────────────────────────────────────────────────────────────────
+const TURNS = 4;
+const BOLT_N = 12; // helix samples per bolt (more = smoother glow)
+const BOLT_LEN_T = 0.08; // fraction of helix per bolt (longer = more visible)
+const BOLTS_PER_STRAND = 2;
+const SEGS_PER_BOLT = BOLT_N - 1; // line segments per bolt
+const VERTS_PER_BOLT = SEGS_PER_BOLT * 2; // 2 verts per GL_LINES segment
+const BASE_GLOW = 0.12;
+const CYAN = new THREE.Color('#00ffee');
+const WHITE = new THREE.Color('#ffffff');
+// ── Seeded LCG RNG ────────────────────────────────────────────────────────────
+function makeRng(seed) {
+    let s = (seed * 1664525 + 1013904223) >>> 0;
+    return () => { s = (s * 1664525 + 1013904223) >>> 0; return s / 0xffffffff; };
+}
+// ── Analytical helix position ─────────────────────────────────────────────────
+function helixAt(t, si, numStrands, r, h) {
+    const angle = t * Math.PI * 2 * TURNS + si * (Math.PI * 2 / numStrands);
+    return new THREE.Vector3(Math.cos(angle) * r, t * h - h / 2, Math.sin(angle) * r);
+}
+// ── Component ─────────────────────────────────────────────────────────────────
+const DnaHelixEffect = ({ boundingRadius, config, animations }) => {
+    const { particleCount, strandCount, helixRadius, helixHeight, basePairColor, runningLightEnabled, opacity, speed, intensity, } = config;
+    const startValuesCacheRef = useRef({});
+    const groupRef = useRef(null);
+    const washProgress = useRef(0);
+    const r = boundingRadius * helixRadius;
+    const h = boundingRadius * helixHeight;
+    const numStrands = Math.min(strandCount, 3);
+    // Bolt travel state — just headT + seed per bolt, no THREE objects
+    const boltStates = useRef([]);
+    // ── Static geometry: backbone, rungs, dots ────────────────────────────────
+    const scene = useMemo(() => {
+        const N = Math.max(particleCount, 150);
+        const RUNG_STEP = Math.max(3, Math.floor(N / 22));
+        const strandPts = Array.from({ length: numStrands }, () => []);
+        for (let si = 0; si < numStrands; si++) {
+            for (let i = 0; i < N; i++) {
+                strandPts[si].push(helixAt(i / (N - 1), si, numStrands, r, h));
+            }
+        }
+        // Backbone lines — colors updated each frame
+        const makeStrandLine = (pts) => {
+            const pos = new Float32Array(pts.length * 3);
+            const col = new Float32Array(pts.length * 3);
+            for (let i = 0; i < pts.length; i++) {
+                pos[i * 3] = pts[i].x;
+                pos[i * 3 + 1] = pts[i].y;
+                pos[i * 3 + 2] = pts[i].z;
+                col[i * 3] = CYAN.r * BASE_GLOW;
+                col[i * 3 + 1] = CYAN.g * BASE_GLOW;
+                col[i * 3 + 2] = CYAN.b * BASE_GLOW;
+            }
+            const geo = new THREE.BufferGeometry();
+            geo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
+            geo.setAttribute('color', new THREE.BufferAttribute(col, 3));
+            const mat = new THREE.LineBasicMaterial({
+                vertexColors: true, transparent: true, depthWrite: false,
+                blending: THREE.AdditiveBlending,
+            });
+            return {
+                line: new THREE.Line(geo, mat),
+                colorBuf: col,
+                colorAttr: geo.attributes.color,
+                N: pts.length,
+            };
+        };
+        const strands = strandPts.map(makeStrandLine);
+        // Rungs
+        const rV = [], rC = [];
+        const rc = new THREE.Color(basePairColor || '#00ffee');
+        for (let i = 0; i < N; i += RUNG_STEP) {
+            const a = strandPts[0][i];
+            const b = strandPts[1 % numStrands][i];
+            rV.push(a.x, a.y, a.z, b.x, b.y, b.z);
+            const br = 0.55 + 0.3 * Math.sin((i / (N - 1)) * Math.PI);
+            rC.push(rc.r * br, rc.g * br, rc.b * br, rc.r * br, rc.g * br, rc.b * br);
+        }
+        const rungGeo = new THREE.BufferGeometry();
+        rungGeo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(rV), 3));
+        rungGeo.setAttribute('color', new THREE.BufferAttribute(new Float32Array(rC), 3));
+        const rungMat = new THREE.LineBasicMaterial({
+            vertexColors: true, transparent: true, opacity: opacity * 0.7,
+            depthWrite: false, blending: THREE.AdditiveBlending,
+        });
+        // Junction dots
+        const dP = [], dPh = [];
+        let di = 0;
+        for (let i = 0; i < N; i += RUNG_STEP) {
+            for (let si = 0; si < numStrands; si++) {
+                const p = strandPts[si][i];
+                dP.push(p.x, p.y, p.z);
+                dPh.push(di * 1.37 + si * 2.09);
+                di++;
+            }
+        }
+        const dotGeo = new THREE.BufferGeometry();
+        dotGeo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(dP), 3));
+        dotGeo.setAttribute('aPhase', new THREE.BufferAttribute(new Float32Array(dPh), 1));
+        const dotMat = new THREE.ShaderMaterial({
+            vertexShader: dotVert, fragmentShader: dotFrag,
+            uniforms: {
+                uSize: { value: 14 * intensity },
+                uColor: { value: new THREE.Vector3(0.15, 1.0, 0.93) },
+                uOpacity: { value: opacity },
+                u_time: { value: 0 },
+            },
+            transparent: true, depthWrite: false, blending: THREE.AdditiveBlending,
+        });
+        return { strands, N, rungGeo, rungMat, dotGeo, dotMat };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [particleCount, numStrands, r, h, opacity, intensity, basePairColor]);
+    // ── Single combined geometry for ALL energy bolts ─────────────────────────
+    // Uses LineSegments (GL_LINES: disconnected pairs), one draw call for all bolts.
+    const { boltGeo, boltMat, boltPtsGeo, boltPtsMat } = useMemo(() => {
+        const totalBolts = numStrands * BOLTS_PER_STRAND;
+        const totalVerts = totalBolts * VERTS_PER_BOLT;
+        const pos = new Float32Array(totalVerts * 3);
+        const col = new Float32Array(totalVerts * 3);
+        const geo = new THREE.BufferGeometry();
+        geo.setAttribute('position', new THREE.BufferAttribute(pos, 3));
+        geo.setAttribute('color', new THREE.BufferAttribute(col, 3));
+        const mat = new THREE.LineBasicMaterial({
+            vertexColors: true, transparent: true, depthWrite: false,
+            blending: THREE.AdditiveBlending,
+        });
+        // Initialise bolt travel states
+        boltStates.current = [];
+        for (let si = 0; si < numStrands; si++) {
+            for (let bi = 0; bi < BOLTS_PER_STRAND; bi++) {
+                boltStates.current.push({
+                    si,
+                    headT: bi / BOLTS_PER_STRAND,
+                    seed: si * 200 + bi * 37 + 1,
+                });
+            }
+        }
+        // Points layer — one sprite per BOLT_N sample, drives the glow thickness
+        const totalPts = numStrands * BOLTS_PER_STRAND * BOLT_N;
+        const ptPos = new Float32Array(totalPts * 3);
+        const ptBright = new Float32Array(totalPts);
+        const ptsGeo = new THREE.BufferGeometry();
+        ptsGeo.setAttribute('position', new THREE.BufferAttribute(ptPos, 3));
+        ptsGeo.setAttribute('aBright', new THREE.BufferAttribute(ptBright, 1));
+        const ptsMat = new THREE.ShaderMaterial({
+            vertexShader: boltPtVert,
+            fragmentShader: boltPtFrag,
+            uniforms: {
+                uSize: { value: 18 },
+                uColor: { value: new THREE.Vector3(0.1, 1.0, 0.95) },
+                uOpacity: { value: 1.0 },
+            },
+            transparent: true, depthWrite: false, blending: THREE.AdditiveBlending,
+        });
+        return { boltGeo: geo, boltMat: mat, boltPtsGeo: ptsGeo, boltPtsMat: ptsMat };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [numStrands]);
+    // ── Frame loop ────────────────────────────────────────────────────────────
+    useFrame((state, delta) => {
+        if (!groupRef.current)
+            return;
+        groupRef.current.rotation.y += delta * speed * 0.18;
+        scene.dotMat.uniforms.u_time.value = state.clock.getElapsedTime();
+        // Backbone color wash
+        washProgress.current = (washProgress.current + delta * speed * 0.28) % 1;
+        const head = washProgress.current;
+        scene.strands.forEach(({ colorBuf, colorAttr, N }) => {
+            for (let i = 0; i < N; i++) {
+                const t = i / (N - 1);
+                const dist = Math.min(Math.abs(t - head), 1 - Math.abs(t - head));
+                const trail = Math.exp(-dist * 9.0);
+                const corona = Math.exp(-dist * dist * 200);
+                const bright = BASE_GLOW + (trail * 0.6 + corona * 2.2) * intensity;
+                const hm = Math.min(1, corona * 0.7);
+                colorBuf[i * 3] = (CYAN.r + (WHITE.r - CYAN.r) * hm) * bright;
+                colorBuf[i * 3 + 1] = (CYAN.g + (WHITE.g - CYAN.g) * hm) * bright;
+                colorBuf[i * 3 + 2] = (CYAN.b + (WHITE.b - CYAN.b) * hm) * bright;
+            }
+            colorAttr.needsUpdate = true;
+        });
+        // Energy bolts
+        if (runningLightEnabled) {
+            const posAttr = boltGeo.attributes.position;
+            const colAttr = boltGeo.attributes.color;
+            const ptPosAttr = boltPtsGeo.attributes.position;
+            const ptBrtAttr = boltPtsGeo.attributes.aBright;
+            const JITTER = r * 0.20;
+            boltPtsMat.uniforms.uSize.value = 18 * intensity;
+            boltPtsMat.uniforms.uOpacity.value = opacity;
+            boltStates.current.forEach((state, boltIdx) => {
+                state.headT += delta * speed * 0.18; // slow — so each bolt is clearly visible
+                if (state.headT >= 1) {
+                    state.headT -= 1;
+                    state.seed++;
+                }
+                const { si, headT, seed } = state;
+                const rng = makeRng(seed);
+                const pts = [];
+                const cols = [];
+                const bright = [];
+                for (let i = 0; i < BOLT_N; i++) {
+                    const frac = i / (BOLT_N - 1);
+                    const t = headT - BOLT_LEN_T + frac * BOLT_LEN_T;
+                    const tw = ((t % 1) + 1) % 1;
+                    const p = helixAt(tw, si, numStrands, r, h);
+                    if (i > 0 && i < BOLT_N - 1) {
+                        const lxz = Math.sqrt(p.x * p.x + p.z * p.z);
+                        if (lxz > 0.001) {
+                            const rx = p.x / lxz, rz = p.z / lxz;
+                            const dr = (rng() * 2 - 1) * JITTER;
+                            const dt = (rng() * 2 - 1) * JITTER * 0.5;
+                            p.x += rx * dr - rz * dt;
+                            p.z += rz * dr + rx * dt;
+                            p.y += (rng() * 2 - 1) * JITTER * 0.3;
+                        }
+                    }
+                    const trail = Math.exp(-(1 - frac) * 5.0);
+                    const corona = Math.exp(-Math.pow((1 - frac) / 0.12, 2) * 2) * 3.5;
+                    const b = (trail * 1.0 + corona) * intensity * 1.5;
+                    const hm = Math.min(1, corona * 0.55);
+                    pts.push([p.x, p.y, p.z]);
+                    cols.push([
+                        (CYAN.r + (WHITE.r - CYAN.r) * hm) * b,
+                        (CYAN.g + (WHITE.g - CYAN.g) * hm) * b,
+                        (CYAN.b + (WHITE.b - CYAN.b) * hm) * b,
+                    ]);
+                    bright.push(Math.min(1, b * 0.7));
+                }
+                // GL_LINES pairs into line buffer
+                const baseV = boltIdx * VERTS_PER_BOLT;
+                for (let j = 0; j < SEGS_PER_BOLT; j++) {
+                    const va = baseV + j * 2;
+                    posAttr.setXYZ(va, pts[j][0], pts[j][1], pts[j][2]);
+                    posAttr.setXYZ(va + 1, pts[j + 1][0], pts[j + 1][1], pts[j + 1][2]);
+                    colAttr.setXYZ(va, cols[j][0], cols[j][1], cols[j][2]);
+                    colAttr.setXYZ(va + 1, cols[j + 1][0], cols[j + 1][1], cols[j + 1][2]);
+                }
+                // Sprite points into points buffer
+                const baseP = boltIdx * BOLT_N;
+                for (let i = 0; i < BOLT_N; i++) {
+                    ptPosAttr.setXYZ(baseP + i, pts[i][0], pts[i][1], pts[i][2]);
+                    ptBrtAttr.setX(baseP + i, bright[i]);
+                }
+            });
+            posAttr.needsUpdate = true;
+            colAttr.needsUpdate = true;
+            ptPosAttr.needsUpdate = true;
+            ptBrtAttr.needsUpdate = true;
+        }
+        if (animations?.length) {
+            applyGenerativeAnimations([scene.dotMat, boltPtsMat], animations, startValuesCacheRef.current, Date.now(), false);
+        }
+    });
+    return (_jsxs("group", { ref: groupRef, children: [scene.strands.map(({ line }, i) => _jsx("primitive", { object: line }, i)), _jsx("lineSegments", { geometry: scene.rungGeo, material: scene.rungMat }), _jsx("points", { geometry: scene.dotGeo, material: scene.dotMat }), runningLightEnabled && (_jsxs(_Fragment, { children: [_jsx("lineSegments", { geometry: boltGeo, material: boltMat }), _jsx("points", { geometry: boltPtsGeo, material: boltPtsMat })] }))] }));
+};
+export default DnaHelixEffect;

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

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