@ntalmagor/3drize-viewer 0.1.2

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';
+// ── 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 '@ntalmagor/3drize-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":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAG/C,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAIhF,UAAU,oBAAoB;IAC5B,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,eAAe,CAAC;IACxB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACjC;AAgFD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAgOnD,CAAC;AAEF,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';
+// ── 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 React from 'react';
+import type { MoleculesConfig, AnimationOptions } from '@ntalmagor/3drize-core';
+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":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAG/C,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAIhF,UAAU,oBAAoB;IAC5B,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,eAAe,CAAC;IACxB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACjC;AAwDD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA0JnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/effects/MoleculesEffect.js

@@ -0,0 +1,179 @@
+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';
+// Glowing node points at each atom position
+const nodeVertShader = /* glsl */ `
+  attribute float aPhase;
+  attribute float aSize;
+
+  uniform float u_time;
+  uniform float uPointSize;
+  uniform float uIntensity;
+
+  varying float vAlpha;
+  varying vec3  vColor;
+
+  vec3 hsv2rgb(float h, float s, float v){
+    vec3 rgb=clamp(abs(mod(h*6.+vec3(0.,4.,2.),6.)-3.)-1.,0.,1.);
+    return v*mix(vec3(1.),rgb,s);
+  }
+
+  void main() {
+    // Each node has independent color + pulse
+    float hue    = mod(aPhase + u_time * 0.08, 1.0);
+    float pulse  = 0.5 + 0.5 * sin(u_time * 2.5 + aPhase * 6.28);
+    vColor       = hsv2rgb(hue, 0.85, 1.0);
+    vAlpha       = 0.55 + 0.45 * pulse;
+
+    vec4 mv       = modelViewMatrix * vec4(position, 1.0);
+    gl_PointSize  = uPointSize * aSize * (0.6 + 0.4 * pulse) * uIntensity * (250.0 / -mv.z);
+    gl_Position   = projectionMatrix * mv;
+  }
+`;
+const nodeFragShader = /* 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;
+
+    // Gaussian core glow
+    float glow = exp(-dist * dist * 8.0);
+    // Four-point diffraction spike (like a bright star)
+    float cx   = exp(-abs(coord.x) * 20.0) * exp(-coord.y*coord.y * 36.0);
+    float cy   = exp(-abs(coord.y) * 20.0) * exp(-coord.x*coord.x * 36.0);
+    float spike = (cx + cy) * 0.5;
+    // White-hot centre
+    float core  = exp(-dist * dist * 80.0);
+
+    vec3 col = mix(vColor, vec3(1.0), core * 0.8 + spike * 0.2);
+    gl_FragColor = vec4(col, vAlpha * uOpacity * (glow + spike * 0.6 + core));
+  }
+`;
+const MoleculesEffect = ({ boundingRadius, config, animations }) => {
+    const { atomCount, orbitRadius, atomSize, showBonds, opacity, speed, intensity } = config;
+    const startValuesCacheRef = useRef({});
+    const tRef = useRef(new Float32Array(atomCount));
+    const r = boundingRadius * orbitRadius;
+    const PHI = 1.6180339887;
+    // 3D Lissajous frequency ratios per atom
+    const orbitalParams = useMemo(() => {
+        const pairs = [
+            [1, 2, 3], [2, 3, 1], [3, 1, 2], [1, 3, 2], [2, 1, 3], [3, 2, 1],
+            [1, 1, 2], [2, 2, 1], [1, 2, 2], [2, 1, 1], [3, 3, 2], [2, 3, 3],
+        ];
+        return Array.from({ length: atomCount }, (_, i) => {
+            const [fx, fy, fz] = pairs[i % pairs.length];
+            return {
+                fx, fy, fz,
+                px: (i * PHI * Math.PI) % (Math.PI * 2),
+                py: (i * PHI * PHI * Math.PI) % (Math.PI * 2),
+                pz: (i * PHI ** 3 * Math.PI) % (Math.PI * 2),
+                hueBase: i / Math.max(atomCount - 1, 1),
+                speedMult: 0.65 + (i % 7) * 0.07,
+            };
+        });
+    }, [atomCount]);
+    // Resize tRef and spread initial times so atoms don't cluster at cycle start
+    useMemo(() => {
+        tRef.current = new Float32Array(atomCount);
+        for (let i = 0; i < atomCount; i++)
+            tRef.current[i] = (i / atomCount) * Math.PI * 2;
+    }, [atomCount]);
+    // ── Node (point) geometry ──────────────────────────────────────────────────
+    const { nodeGeo, nodeMat } = useMemo(() => {
+        const phases = new Float32Array(atomCount);
+        const sizes = new Float32Array(atomCount);
+        for (let i = 0; i < atomCount; i++) {
+            phases[i] = i / atomCount; // 0..1 → hue spread
+            sizes[i] = 0.8 + Math.random() * 0.6; // slight size variation
+        }
+        const geo = new THREE.BufferGeometry();
+        geo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(atomCount * 3), 3));
+        geo.setAttribute('aPhase', new THREE.BufferAttribute(phases, 1));
+        geo.setAttribute('aSize', new THREE.BufferAttribute(sizes, 1));
+        const mat = new THREE.ShaderMaterial({
+            vertexShader: nodeVertShader,
+            fragmentShader: nodeFragShader,
+            uniforms: {
+                u_time: { value: 0 },
+                uPointSize: { value: atomSize * 200 },
+                uIntensity: { value: intensity },
+                uOpacity: { value: opacity },
+            },
+            transparent: true,
+            depthWrite: false,
+            blending: THREE.AdditiveBlending,
+        });
+        return { nodeGeo: geo, nodeMat: mat };
+    }, [atomCount, atomSize, intensity, opacity]);
+    // ── Bond (line) geometry with per-vertex color ─────────────────────────────
+    const { bondGeo, bondMat } = useMemo(() => {
+        const vertCount = atomCount * 2; // each bond = 2 verts
+        const geo = new THREE.BufferGeometry();
+        const positions = new Float32Array(vertCount * 3);
+        const colors = new Float32Array(vertCount * 3);
+        geo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
+        geo.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+        const mat = new THREE.LineBasicMaterial({
+            vertexColors: true,
+            transparent: true,
+            opacity: opacity * 0.7,
+            depthWrite: false,
+            blending: THREE.AdditiveBlending,
+        });
+        return { bondGeo: geo, bondMat: mat };
+    }, [atomCount, opacity]);
+    const atomPos = useRef([]);
+    useMemo(() => {
+        atomPos.current = Array.from({ length: atomCount }, () => new THREE.Vector3());
+    }, [atomCount]);
+    const tmpCol = useMemo(() => new THREE.Color(), []);
+    useFrame((state, delta) => {
+        const t = state.clock.getElapsedTime();
+        nodeMat.uniforms.u_time.value = t;
+        const nodePos = nodeGeo.attributes.position;
+        for (let i = 0; i < atomCount; i++) {
+            tRef.current[i] += delta * speed * orbitalParams[i].speedMult;
+            const a = tRef.current[i];
+            const p = orbitalParams[i];
+            // 3D Lissajous position
+            const x = Math.cos(p.fx * a + p.px) * r;
+            const y = Math.sin(p.fy * a + p.py) * r * 0.75;
+            const z = Math.sin(p.fz * a + p.pz) * r;
+            atomPos.current[i].set(x, y, z);
+            nodePos.setXYZ(i, x, y, z);
+        }
+        nodePos.needsUpdate = true;
+        // Update bond geometry + animated per-vertex color
+        if (showBonds) {
+            const bondPos = bondGeo.attributes.position;
+            const bondCol = bondGeo.attributes.color;
+            for (let i = 0; i < atomCount; i++) {
+                const curr = atomPos.current[i];
+                const next = atomPos.current[(i + 1) % atomCount];
+                bondPos.setXYZ(i * 2, curr.x, curr.y, curr.z);
+                bondPos.setXYZ(i * 2 + 1, next.x, next.y, next.z);
+                // Color: each vertex gets a hue based on its atom's phase + time
+                const hue0 = (orbitalParams[i].hueBase + t * 0.07) % 1;
+                const hue1 = (orbitalParams[(i + 1) % atomCount].hueBase + t * 0.07) % 1;
+                tmpCol.setHSL(hue0, 1.0, 0.6);
+                bondCol.setXYZ(i * 2, tmpCol.r, tmpCol.g, tmpCol.b);
+                tmpCol.setHSL(hue1, 1.0, 0.6);
+                bondCol.setXYZ(i * 2 + 1, tmpCol.r, tmpCol.g, tmpCol.b);
+            }
+            bondPos.needsUpdate = true;
+            bondCol.needsUpdate = true;
+        }
+        if (animations?.length) {
+            applyGenerativeAnimations([nodeMat, bondMat], animations, startValuesCacheRef.current, Date.now(), false);
+        }
+    });
+    return (_jsxs("group", { name: "MoleculesEffect", children: [_jsx("points", { geometry: nodeGeo, material: nodeMat }), showBonds && (_jsx("lineSegments", { geometry: bondGeo, material: bondMat }))] }));
+};
+export default MoleculesEffect;

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"NeuralNetworkEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/NeuralNetworkEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAG/C,OAAO,KAAK,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAIpF,UAAU,wBAAwB;IAChC,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,mBAAmB,CAAC;IAC5B,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACjC;AAqCD,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAkL3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}