@3driseai/3drise-viewer 0.1.16 → 0.1.17

package/dist/components/effects/MoleculesEffect.js

@@ -1,176 +1,334 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useMemo } from 'react';
-import { useFrame } from '@react-three/fiber';
+import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
 import * as THREE from 'three';
-import { getShaderByName } from '@3driseai/3drise-core';
+import { useFrame } from '@react-three/fiber';
 import { applyGenerativeAnimations } from '../../utils/handleGenerativeEffectsAnimations.js';
 import { useObjectReady } from '../../hooks/useObjectReady.js';
-// 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, onObjectReady, onObjectDispose }) => {
-    const { atomCount, orbitRadius, atomSize, showBonds, opacity, speed, intensity } = config;
-    const startValuesCacheRef = useRef({});
-    const rootRef = useRef(null);
-    useObjectReady(rootRef, config, onObjectReady, onObjectDispose);
-    const shaderData = getShaderByName('Molecules');
-    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
+/**
+ * A molecule drawn as quantum electron clouds.
+ *
+ * The central atom shows hydrogen orbitals as rejection samples of |psi|^2,
+ * morphing from 1s to 2p, 3d and 4f (or holding one with `orbital`); the
+ * sign of psi colours the lobes. Outer atoms sit where the Thomson problem
+ * puts them (minimum Coulomb repulsion, which reproduces VSEPR shapes), each
+ * with a 1s cloud and a sigma-bond density between the nuclei. The molecule
+ * breathes with a symmetric stretch.
+ */
+const PRE_ADD = { transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, premultipliedAlpha: true };
+const ORBITAL_PERIOD = 7;
+const ORBITAL_FADE = 1.6;
+function mulberry32(seed) {
+    return () => {
+        seed |= 0;
+        seed = (seed + 0x6d2b79f5) | 0;
+        let r = Math.imul(seed ^ (seed >>> 15), 1 | seed);
+        r = (r + Math.imul(r ^ (r >>> 7), 61 | r)) ^ r;
+        return ((r ^ (r >>> 14)) >>> 0) / 4294967296;
+    };
+}
+function cross(a, b) { return [a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0]]; }
+function add(a, b) { return [a[0] + b[0], a[1] + b[1], a[2] + b[2]]; }
+function scale(a, s) { return [a[0] * s, a[1] * s, a[2] * s]; }
+function norm(a) { const l = Math.hypot(a[0], a[1], a[2]) || 1; return [a[0] / l, a[1] / l, a[2] / l]; }
+/** N points on a unit sphere minimising Coulomb repulsion (VSEPR shapes for N <= 6). */
+function thomson(count, seed) {
+    const n = Math.round(Math.min(Math.max(count, 1), 20));
+    if (n === 1)
+        return [[0, 1, 0]];
+    const rand = mulberry32(seed);
+    let pts = Array.from({ length: n }, () => norm([rand() - 0.5, rand() - 0.5, rand() - 0.5]));
+    for (let it = 0; it < 400; it++) {
+        const step = 0.12 * (1 - it / 400) + 0.005;
+        const forces = pts.map(() => [0, 0, 0]);
+        for (let i = 0; i < n; i++) {
+            for (let j = i + 1; j < n; j++) {
+                const d = [pts[i][0] - pts[j][0], pts[i][1] - pts[j][1], pts[i][2] - pts[j][2]];
+                const l2 = d[0] * d[0] + d[1] * d[1] + d[2] * d[2] + 1e-9;
+                const f = 1 / (l2 * Math.sqrt(l2));
+                for (let k = 0; k < 3; k++) {
+                    forces[i][k] += d[k] * f;
+                    forces[j][k] -= d[k] * f;
+                }
+            }
         }
-        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: shaderData.vertex,
-            fragmentShader: shaderData.fragment,
-            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,
+        pts = pts.map((p, i) => {
+            const fl = Math.hypot(...forces[i]) || 1;
+            return norm(add(p, scale(forces[i], step / fl)));
         });
-        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);
+    }
+    return pts;
+}
+/** Unnormalised hydrogen-like orbitals (real forms), written with z as the axis. */
+const ORBITALS = [
+    { name: '1s', extent: 5, psi: (x, y, z, r) => Math.exp(-r) },
+    { name: '2p', extent: 12, psi: (x, y, z, r) => z * Math.exp(-r / 2) },
+    { name: '3d z²', extent: 22, psi: (x, y, z, r) => (3 * z * z - r * r) * Math.exp(-r / 3) },
+    { name: '3d xy', extent: 22, psi: (x, y, z, r) => x * y * Math.exp(-r / 3) },
+    { name: '4f z³', extent: 34, psi: (x, y, z, r) => z * (5 * z * z - 3 * r * r) * Math.exp(-r / 4) },
+    { name: '4f xyz', extent: 34, psi: (x, y, z, r) => x * y * z * Math.exp(-r / 4) },
+];
+/** Rejection-samples |psi|^2; positions are scaled so the 92nd-percentile radius is 1. */
+function sampleOrbital(index, count, seed) {
+    const o = ORBITALS[index];
+    const rand = mulberry32(seed);
+    const L = o.extent;
+    // estimate the peak density
+    let peak = 0;
+    for (let i = 0; i < 20000; i++) {
+        const x = (rand() * 2 - 1) * L, y = (rand() * 2 - 1) * L, z = (rand() * 2 - 1) * L;
+        const v = o.psi(x, y, z, Math.hypot(x, y, z));
+        peak = Math.max(peak, v * v);
+    }
+    peak *= 1.05;
+    const pts = [];
+    const signs = [];
+    let guard = 0;
+    while (pts.length < count && guard < count * 4000) {
+        guard++;
+        const x = (rand() * 2 - 1) * L, y = (rand() * 2 - 1) * L, z = (rand() * 2 - 1) * L;
+        const v = o.psi(x, y, z, Math.hypot(x, y, z));
+        if (rand() * peak < v * v) {
+            pts.push([x, y, z]);
+            signs.push(v >= 0 ? 1 : -1);
         }
-        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;
+    }
+    const radii = pts.map((p) => Math.hypot(...p)).sort((a, b) => a - b);
+    const s = 1 / (radii[Math.floor(radii.length * 0.92)] || 1);
+    const pos = new Float32Array(pts.length * 3);
+    // orbitals are written with z as the axis; stand it up as world Y
+    pts.forEach((p, i) => { pos[i * 3] = p[0] * s; pos[i * 3 + 1] = p[2] * s; pos[i * 3 + 2] = p[1] * s; });
+    return { pos, signs };
+}
+// Orbital sampling is the slow part (~200 ms for all six), so keep it across remounts.
+const orbitalCache = new Map();
+function cachedOrbital(index, count) {
+    const key = index + ':' + count;
+    let hit = orbitalCache.get(key);
+    if (!hit) {
+        if (orbitalCache.size >= 24)
+            orbitalCache.clear();
+        hit = sampleOrbital(index, count, 100 + index);
+        orbitalCache.set(key, hit);
+    }
+    return hit;
+}
+function gauss(rand) {
+    return Math.sqrt(-2 * Math.log(1 - rand() * 0.999)) * Math.cos(Math.PI * 2 * rand());
+}
+/**
+ * One point cloud holding every orbital set (kinds 0-5), the ligand 1s clouds (kind 6)
+ * and the bond clouds (kind 7).
+ * position = orbital sample, or unit ligand direction
+ * normal   = offset in atom-size units (ligands and bonds)
+ * aInfo    = kind, sign, phase
+ */
+function buildMolecule(atomCount, density, axisSeed) {
+    const dens = Math.min(Math.max(density, 0.25), 2);
+    const perOrbital = Math.round(4000 * dens);
+    const perLigand = Math.round(260 * dens);
+    const perBond = Math.round(180 * dens);
+    const dirs = atomCount > 0 ? thomson(atomCount, 3 + axisSeed) : [];
+    const rand = mulberry32(41);
+    const pos = [], nrm = [], info = [];
+    ORBITALS.forEach((_, k) => {
+        const { pos: p, signs } = cachedOrbital(k, perOrbital);
+        for (let i = 0; i < signs.length; i++) {
+            pos.push(p[i * 3], p[i * 3 + 1], p[i * 3 + 2]);
+            nrm.push(0, 0, 0);
+            info.push(k, signs[i], rand());
+        }
+    });
+    for (const d of dirs) {
+        for (let i = 0; i < perLigand; i++) {
+            // 1s density: radial distance follows r^2 e^-2r
+            const r = -Math.log(rand() * rand() * rand() + 1e-6) / 2 / 3;
+            const u = norm([gauss(rand), gauss(rand), gauss(rand)]);
+            pos.push(d[0], d[1], d[2]);
+            nrm.push(u[0] * r, u[1] * r, u[2] * r);
+            info.push(6, 1, rand());
+        }
+        for (let i = 0; i < perBond; i++) {
+            // sigma bond: density peaks between the nuclei, gaussian across the axis
+            const t = Math.min(Math.max(0.5 + gauss(rand) * 0.17, 0.12), 0.88);
+            pos.push(d[0] * t, d[1] * t, d[2] * t);
+            nrm.push(gauss(rand) * 0.35, gauss(rand) * 0.35, gauss(rand) * 0.35);
+            info.push(7, 1, rand());
+        }
+    }
+    return {
+        position: new Float32Array(pos),
+        normal: new Float32Array(nrm),
+        aInfo: new Float32Array(info),
+        ligands: dirs,
+    };
+}
+const cloudVert = /* glsl */ `
+  attribute vec3  aInfo;          // x: kind (0-5 orbital set, 6 ligand, 7 bond), y: sign, z: phase
+  uniform float uTime;
+  uniform float uSetA;
+  uniform float uSetB;
+  uniform float uMix;             // 0 shows set A, 1 shows set B
+  uniform float uOrbitRadius;
+  uniform float uAtomSize;
+  uniform float uBound;
+  uniform float uStretch;
+  uniform float uShowBonds;
+  uniform float uIntensity;
+  varying float vSign;
+  varying float vAlpha;
+  varying float vKind;
+  void main(){
+    float kind = aInfo.x;
+    float w = 0.0;
+    vec3 p = position;
+    float bondLen = uOrbitRadius * uBound;
+    float atomR = uAtomSize * uBound * 6.0;
+    // symmetric stretch: ligands and bond clouds breathe together
+    float stretch = 1.0 + uStretch * 0.035 * sin(uTime * 2.2);
+    if (kind < 5.5){
+      w = (abs(kind - uSetA) < 0.5 ? 1.0 - uMix : 0.0) + (abs(kind - uSetB) < 0.5 ? uMix : 0.0);
+      p *= bondLen * 0.62;
+    } else if (kind < 6.5){
+      w = 1.0;
+      p = p * stretch * bondLen + normal * atomR;
+    } else {
+      w = uShowBonds;
+      p = p * stretch * bondLen + normal * atomR * 0.5;
+    }
+    if (w < 0.002){
+      gl_PointSize = 0.0;
+      gl_Position = vec4(2.0, 2.0, 2.0, 1.0);
+      vAlpha = 0.0;
+      return;
+    }
+    vSign = aInfo.y;
+    vKind = kind;
+    // the cloud is alive: each sample fades slowly in and out
+    vAlpha = w * (0.55 + 0.45 * sin(uTime * 0.9 + aInfo.z * 6.2832));
+    vec4 mv = modelViewMatrix * vec4(p, 1.0);
+    gl_PointSize = (kind < 5.5 ? 1.0 : 0.8) * uIntensity * (3.2 * bondLen / max(-mv.z, 1e-3)) * 6.0;
+    gl_Position = projectionMatrix * mv;
+  }
+`;
+const cloudFrag = /* glsl */ `
+  uniform vec3  uColor;
+  uniform vec3  uPhaseColor;
+  uniform vec3  uBondColor;
+  uniform float uOpacity;
+  varying float vSign;
+  varying float vAlpha;
+  varying float vKind;
+  void main(){
+    float d = length(gl_PointCoord - 0.5);
+    if (d > 0.5 || vAlpha < 0.002) discard;
+    float g = smoothstep(0.5, 0.0, d);
+    // the wavefunction's sign colours the lobes
+    vec3 col = vKind > 6.5 ? uBondColor : (vSign > 0.0 ? uColor : uPhaseColor);
+    float a = g * g * vAlpha * uOpacity * 0.9;
+    gl_FragColor = vec4(col * a, a);
+  }
+`;
+const spriteVert = /* glsl */ `
+  varying vec2 vUv;
+  uniform float uOrbitRadius;
+  uniform float uBound;
+  void main(){
+    vUv = uv;
+    // camera-facing quad
+    vec4 mv = modelViewMatrix * vec4(0.0, 0.0, 0.0, 1.0);
+    mv.xy += position.xy * uOrbitRadius * uBound * 0.35;
+    gl_Position = projectionMatrix * mv;
+  }
+`;
+const nucleusFrag = /* glsl */ `
+  uniform vec3  uColor;
+  uniform float uOpacity;
+  uniform float uIntensity;
+  varying vec2 vUv;
+  void main(){
+    float d = length(vUv - 0.5) * 2.0;
+    float g = exp(-d * d * 18.0) + exp(-d * 5.0) * 0.15;
+    vec3 col = mix(uColor, vec3(1.0), exp(-d * d * 60.0));
+    gl_FragColor = vec4(col * g * uIntensity * uOpacity, g * uOpacity);
+  }
+`;
+const MoleculesEffect = ({ boundingRadius, config, animations, onObjectReady, onObjectDispose }) => {
+    const { intensity = 1, speed = 1, color = '#00d4ff', opacity = 0.9, atomCount = 6, orbitRadius = 1.5, atomSize = 0.08, showBonds = true, bondColor = '#ffffff', randomizeAxes = true, orbital = -1, phaseColor = '#ff5a8a', cloudDensity = 1, } = config;
+    const rootRef = useRef(null);
+    const spinRef = useRef(null);
+    const animCache = useRef({});
+    useObjectReady(rootRef, config, onObjectReady, onObjectDispose);
+    // a standalone effect gets boundingRadius 1; guard against an empty host
+    const b = boundingRadius > 0 ? boundingRadius : 1;
+    const uniforms = useMemo(() => ({
+        uTime: { value: 0 },
+        uSpeed: { value: 1 },
+        uBound: { value: 1 },
+        uIntensity: { value: 1 },
+        uOpacity: { value: 1 },
+        uColor: { value: new THREE.Color() },
+        uPhaseColor: { value: new THREE.Color() },
+        uBondColor: { value: new THREE.Color() },
+        uOrbitRadius: { value: 1.5 },
+        uAtomSize: { value: 0.08 },
+        uShowBonds: { value: 1 },
+        uStretch: { value: 1 },
+        uOrbital: { value: -1 },
+        uSetA: { value: 0 },
+        uSetB: { value: 1 },
+        uMix: { value: 0 },
+    }), []);
+    const materials = useMemo(() => [
+        new THREE.ShaderMaterial({ vertexShader: cloudVert, fragmentShader: cloudFrag, uniforms, ...PRE_ADD }),
+        new THREE.ShaderMaterial({ vertexShader: spriteVert, fragmentShader: nucleusFrag, uniforms, ...PRE_ADD }),
+    ], [uniforms]);
+    useEffect(() => () => materials.forEach((m) => m.dispose()), [materials]);
+    const cloudGeometry = useMemo(() => {
+        const m = buildMolecule(Math.round(Math.min(Math.max(atomCount, 0), 20)), cloudDensity, 0);
+        const g = new THREE.BufferGeometry();
+        g.setAttribute('position', new THREE.BufferAttribute(m.position, 3));
+        g.setAttribute('normal', new THREE.BufferAttribute(m.normal, 3));
+        g.setAttribute('aInfo', new THREE.BufferAttribute(m.aInfo, 3));
+        return g;
+    }, [atomCount, cloudDensity]);
+    useEffect(() => () => cloudGeometry.dispose(), [cloudGeometry]);
+    const quadGeometry = useMemo(() => new THREE.PlaneGeometry(1, 1), []);
+    useEffect(() => () => quadGeometry.dispose(), [quadGeometry]);
+    useLayoutEffect(() => {
+        uniforms.uSpeed.value = speed;
+        uniforms.uBound.value = b;
+        uniforms.uIntensity.value = intensity;
+        uniforms.uOpacity.value = opacity;
+        uniforms.uColor.value.set(color);
+        uniforms.uPhaseColor.value.set(phaseColor);
+        uniforms.uBondColor.value.set(bondColor);
+        uniforms.uOrbitRadius.value = orbitRadius;
+        uniforms.uAtomSize.value = atomSize;
+        uniforms.uShowBonds.value = showBonds ? 1 : 0;
+        uniforms.uOrbital.value = orbital;
+    }, [uniforms, speed, b, intensity, opacity, color, phaseColor, bondColor, orbitRadius, atomSize, showBonds, orbital]);
+    useFrame((_, delta) => {
+        if (animations?.length)
+            applyGenerativeAnimations(materials, animations, animCache.current, Date.now(), false);
+        const t = (uniforms.uTime.value += delta * uniforms.uSpeed.value);
+        if (spinRef.current)
+            spinRef.current.rotation.y = t * 0.15;
+        const fixed = Math.round(uniforms.uOrbital.value);
+        if (fixed >= 0) {
+            // hold one orbital
+            uniforms.uSetA.value = Math.min(fixed, ORBITALS.length - 1);
+            uniforms.uSetB.value = uniforms.uSetA.value;
+            uniforms.uMix.value = 0;
         }
-        if (animations?.length) {
-            applyGenerativeAnimations([nodeMat, bondMat], animations, startValuesCacheRef.current, Date.now(), false);
+        else {
+            // cycle 1s -> 2p -> 3d -> 4f with a crossfade at the end of each period
+            const k = Math.floor(t / ORBITAL_PERIOD);
+            const local = t - k * ORBITAL_PERIOD;
+            uniforms.uSetA.value = k % ORBITALS.length;
+            uniforms.uSetB.value = (k + 1) % ORBITALS.length;
+            uniforms.uMix.value = THREE.MathUtils.smoothstep(local, ORBITAL_PERIOD - ORBITAL_FADE, ORBITAL_PERIOD);
         }
     });
-    return (_jsxs("group", { ref: rootRef, name: "MoleculesEffect", children: [_jsx("points", { geometry: nodeGeo, material: nodeMat }), showBonds && (_jsx("lineSegments", { geometry: bondGeo, material: bondMat }))] }));
+    return (_jsx("group", { ref: rootRef, children: _jsx("group", { rotation: randomizeAxes ? [0.45, 0, 0.3] : [0, 0, 0], children: _jsxs("group", { ref: spinRef, children: [_jsx("points", { geometry: cloudGeometry, material: materials[0], frustumCulled: false }), _jsx("mesh", { geometry: quadGeometry, material: materials[1], frustumCulled: false })] }) }) }));
 };
 export default MoleculesEffect;

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { AnimationOptions, MurmurationConfig } from '@3driseai/3drise-core';
+import type { ObjectReadyProps } from '../../types/objectReady';
+export interface MurmurationEffectProps extends ObjectReadyProps {
+    boundingRadius: number;
+    config: MurmurationConfig;
+    animations?: AnimationOptions[];
+    /** True when the effect is attached to an object, so it can react to the host. */
+    hasHost?: boolean;
+}
+declare const MurmurationEffect: React.FC<MurmurationEffectProps>;
+export default MurmurationEffect;
+//# sourceMappingURL=MurmurationEffect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MurmurationEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/MurmurationEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAG3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAGjF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,WAAW,sBAAuB,SAAQ,gBAAgB;IAC5D,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,iBAAiB,CAAC;IAC1B,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAChC,kFAAkF;IAClF,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAodD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA+BvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}