@3driseai/3drise-viewer 0.1.26 → 0.1.28

package/dist/components/effects/LightningEffect.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useMemo } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
 import { useFrame } from '@react-three/fiber';
 import * as THREE from 'three';
-import { applyGenerativeAnimations } from '../../utils/handleGenerativeEffectsAnimations.js';
+import { withConfigDefaults } from '../../utils/configAnimations.js';
+import { DEFAULT_GENERATIVE_EFFECTS, EFFECTS_ANIMATABLE } from "@3driseai/3drise-core";
 import { useObjectReady } from '../../hooks/useObjectReady.js';
+import { useConfigDriver } from '../../hooks/useConfigDriver.js';
 // ── Seeded LCG RNG — deterministic, no Math.random ───────────────────────────
 function makeRng(seed) {
     let s = (seed * 1664525 + 1013904223) >>> 0;
@@ -55,22 +57,37 @@ const glowFrag = /* glsl */ `
   }
 `;
 const FADE_DUR = 0.22;
-const LightningEffect = ({ boundingRadius, config, animations, onObjectReady, onObjectDispose }) => {
-    const { boltCount, branchDepth, color, glowColor, opacity, speed, intensity, strikeRadius } = config;
-    const startValuesCacheRef = useRef({});
+/** Knobs that rebuild the bolts (count, fractal depth): commit only, never live. */
+const STRUCTURAL = ['boltCount', 'branchDepth'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what the push point applies. */
+const ANIMATABLE = new Set(EFFECTS_ANIMATABLE.lightning.map((p) => p.value));
+/** The single push point: every config knob that lives on a material reaches it here. */
+function applyConfig(cols, glowMats, c) {
+    cols.core.set(c.color);
+    cols.glow.set(c.glowColor);
+    cols.glowVec.set(cols.glow.r, cols.glow.g, cols.glow.b);
+    for (const m of glowMats) {
+        m.uniforms.uPointSize.value = 6 * c.intensity;
+        m.uniforms.uOpacity.value = c.opacity * 0.12;
+    }
+}
+const LightningEffect = ({ boundingRadius, config, id, keyframes, mouseMove, onObjectReady, onObjectDispose }) => {
+    const cfg = useMemo(() => withConfigDefaults(DEFAULT_GENERATIVE_EFFECTS.lightning, config), [config]);
+    const { boltCount, branchDepth } = cfg;
     const rootRef = useRef(null);
     useObjectReady(rootRef, config, onObjectReady, onObjectDispose);
+    // the knobs read per frame (speed, intensity, opacity, strikeRadius), from the last merged config
+    const cur = useRef(cfg);
     const requestedDepth = Number(branchDepth);
     const depth = Number.isFinite(requestedDepth)
         ? Math.min(Math.max(Math.floor(requestedDepth), 2), 6)
         : 2;
     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 ───────────────────────────
+    // written by applyConfig, read when the bolts are recoloured
+    const cols = useMemo(() => ({ core: new THREE.Color(), glow: new THREE.Color(), glowVec: new THREE.Vector3() }), []);
+    // Compute origin/target for a bolt from a seed (the strike radius is read live)
     function boltEndpoints(rng) {
+        const sr = boundingRadius * cur.current.strikeRadius;
         const theta = rng() * Math.PI * 2;
         const elev = 0.3 + rng() * 0.4; // horizontal spread of origin
         return [
@@ -78,7 +95,7 @@ const LightningEffect = ({ boundingRadius, config, animations, onObjectReady, on
             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 ────────────────────────────
+    // 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++) {
@@ -94,7 +111,7 @@ const LightningEffect = ({ boundingRadius, config, animations, onObjectReady, on
         pointGeo.setAttribute('aBrightness', new THREE.BufferAttribute(brightBuf, 1));
         return { lineGeo, pointGeo };
     }
-    // ── Initialise bolts ───────────────────────────────────────────────────────
+    // Initialise bolts
     const bolts = useMemo(() => {
         return Array.from({ length: boltCount }, (_, bi) => {
             const seed = bi * 997 + 1;
@@ -112,35 +129,44 @@ const LightningEffect = ({ boundingRadius, config, animations, onObjectReady, on
         });
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [boltCount, depth, N]);
-    // ── Shared materials ───────────────────────────────────────────────────────
+    useEffect(() => () => bolts.forEach((b) => { b.lineGeo.dispose(); b.pointGeo.dispose(); }), [bolts]);
+    // Shared materials
     const lineMat = useMemo(() => new THREE.LineBasicMaterial({
         vertexColors: true,
         transparent: true,
         depthWrite: false,
         blending: THREE.AdditiveBlending,
     }), []);
+    useEffect(() => () => lineMat.dispose(), [lineMat]);
     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 },
+            uPointSize: { value: 6 },
+            uColor: { value: cols.glowVec },
+            uOpacity: { value: 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 ──────────────────────────
+    })), [bolts, cols]);
+    useEffect(() => () => glowMats.forEach((m) => m.dispose()), [glowMats]);
+    const push = useCallback((merged) => {
+        cur.current = merged;
+        applyConfig(cols, glowMats, merged);
+    }, [cols, glowMats]);
+    useLayoutEffect(() => { push(cfg); }, [push, cfg]);
+    useConfigDriver({ rootRef, id, family: 'effects', base: cfg, structural: STRUCTURAL, allowed: ANIMATABLE, keyframes, mouseMove, push });
+    // Recompute vertex colors from current progress
     function refreshColors(bolt, overallScale) {
         const { progress, points, colBuf, brightBuf, lineGeo, pointGeo } = bolt;
+        const intensity = cur.current.intensity;
+        const { core: coreCol, glow: glowCol } = cols;
         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)
+                // 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;
@@ -148,12 +174,12 @@ const LightningEffect = ({ boundingRadius, config, animations, onObjectReady, on
             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
+            // 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
+            // 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;
@@ -163,7 +189,7 @@ const LightningEffect = ({ boundingRadius, config, animations, onObjectReady, on
         lineGeo.attributes.color.needsUpdate = true;
         pointGeo.attributes.aBrightness.needsUpdate = true;
     }
-    // ── Rebuild bolt shape with fresh fractal ─────────────────────────────────
+    // Rebuild bolt shape with fresh fractal
     function rebuildShape(bolt) {
         bolt.seed++;
         const rng = makeRng(bolt.seed);
@@ -182,6 +208,7 @@ const LightningEffect = ({ boundingRadius, config, animations, onObjectReady, on
         posP.needsUpdate = true;
     }
     useFrame((_, delta) => {
+        const { speed, opacity } = cur.current;
         const dt = delta * speed;
         bolts.forEach((bolt, bi) => {
             switch (bolt.phase) {
@@ -208,7 +235,7 @@ const LightningEffect = ({ boundingRadius, config, animations, onObjectReady, on
                     break;
                 case 'flash': {
                     bolt.timer -= delta;
-                    // Flash: briefly crank overall brightness to 2–3x for the "return stroke"
+                    // 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) {
@@ -232,15 +259,10 @@ const LightningEffect = ({ boundingRadius, config, animations, onObjectReady, on
                 }
             }
         });
-        if (animations?.length) {
-            applyGenerativeAnimations(glowMats, animations, startValuesCacheRef.current, Date.now(), false);
-        }
     });
-    // ── Render ─────────────────────────────────────────────────────────────────
+    // 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]);
+    const lineObjects = useMemo(() => bolts.map(bolt => new THREE.Line(bolt.lineGeo, lineMat)), [bolts, lineMat]);
     return (_jsx("group", { ref: rootRef, 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

@@ -1,10 +1,15 @@
-import React from 'react';
-import type { AnimationOptions, MoleculesConfig } from '@3driseai/3drise-core';
+import React from "react";
+import type { MoleculesConfig, AnimationOptions, MouseMoveDomain } from "@3driseai/3drise-core";
 import type { ObjectReadyProps } from '../../types/objectReady';
 export interface MoleculesEffectProps extends ObjectReadyProps {
     boundingRadius: number;
     config: MoleculesConfig;
-    animations?: AnimationOptions[];
+    /** Scene object id of a standalone effect: the live-edit handle is found by it. */
+    id?: string;
+    /** Keyframes on this effect's config knobs (animations.effect.animations). */
+    keyframes?: AnimationOptions[];
+    /** Pointer bindings on this effect's config knobs (mouseMove.effect). */
+    mouseMove?: MouseMoveDomain;
 }
 declare const MoleculesEffect: React.FC<MoleculesEffectProps>;
 export default MoleculesEffect;

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

@@ -1 +1 @@
-{"version":3,"file":"MoleculesEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/MoleculesEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAG3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAG/E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB;IAC1D,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,eAAe,CAAC;IACxB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC;AAgQD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA8FnD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"MoleculesEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/MoleculesEffect.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAGhG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB;IAC1D,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,eAAe,CAAC;IACxB,mFAAmF;IACnF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,8EAA8E;IAC9E,SAAS,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC/B,yEAAyE;IACzE,SAAS,CAAC,EAAE,eAAe,CAAC;CAC/B;AAqRD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAkFnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/dist/components/effects/MoleculesEffect.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
-import * as THREE from 'three';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
 import { useFrame } from '@react-three/fiber';
-import { applyGenerativeAnimations } from '../../utils/handleGenerativeEffectsAnimations.js';
+import * as THREE from 'three';
+import { withConfigDefaults } from '../../utils/configAnimations.js';
+import { DEFAULT_GENERATIVE_EFFECTS, EFFECTS_ANIMATABLE } from "@3driseai/3drise-core";
 import { useObjectReady } from '../../hooks/useObjectReady.js';
+import { useConfigDriver } from '../../hooks/useConfigDriver.js';
 /**
  * A molecule drawn as quantum electron clouds.
  *
@@ -252,11 +254,29 @@ const nucleusFrag = /* glsl */ `
     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;
+/** Knobs that rebuild the electron clouds or re-tilt the tumble axis: commit only, never live. */
+const STRUCTURAL = ['atomCount', 'cloudDensity', 'randomizeAxes'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what applyConfig pushes. */
+const ANIMATABLE = new Set(EFFECTS_ANIMATABLE.molecules.map((p) => p.value));
+/** The single push point: every config knob reaches its uniform here. */
+function applyConfig(u, c, bound) {
+    u.uSpeed.value = c.speed;
+    u.uBound.value = bound;
+    u.uIntensity.value = c.intensity;
+    u.uOpacity.value = c.opacity;
+    u.uColor.value.set(c.color);
+    u.uPhaseColor.value.set(c.phaseColor);
+    u.uBondColor.value.set(c.bondColor);
+    u.uOrbitRadius.value = c.orbitRadius;
+    u.uAtomSize.value = c.atomSize;
+    u.uShowBonds.value = c.showBonds ? 1 : 0;
+    u.uOrbital.value = c.orbital;
+}
+const MoleculesEffect = ({ boundingRadius, config, id, keyframes, mouseMove, onObjectReady, onObjectDispose }) => {
+    const cfg = useMemo(() => withConfigDefaults(DEFAULT_GENERATIVE_EFFECTS.molecules, config), [config]);
+    const { atomCount, cloudDensity, randomizeAxes } = cfg;
     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;
@@ -294,22 +314,12 @@ const MoleculesEffect = ({ boundingRadius, config, animations, onObjectReady, on
     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]);
+    const push = useCallback((merged) => {
+        applyConfig(uniforms, merged, b);
+    }, [uniforms, b]);
+    useLayoutEffect(() => { push(cfg); }, [push, cfg]);
+    useConfigDriver({ rootRef, id, family: 'effects', base: cfg, structural: STRUCTURAL, allowed: ANIMATABLE, keyframes, mouseMove, push });
     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;

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

@@ -1,10 +1,15 @@
 import React from 'react';
-import type { AnimationOptions, MurmurationConfig } from '@3driseai/3drise-core';
+import type { AnimationOptions, MurmurationConfig, MouseMoveDomain } from '@3driseai/3drise-core';
 import type { ObjectReadyProps } from '../../types/objectReady';
 export interface MurmurationEffectProps extends ObjectReadyProps {
     boundingRadius: number;
     config: MurmurationConfig;
-    animations?: AnimationOptions[];
+    /** Scene object id of a standalone effect: the live-edit handle is found by it. */
+    id?: string;
+    /** Keyframes on this effect's config knobs (animations.effect.animations). */
+    keyframes?: AnimationOptions[];
+    /** Pointer bindings on this effect's config knobs (mouseMove.effect). */
+    mouseMove?: MouseMoveDomain;
     /** True when the effect is attached to an object, so it can react to the host. */
     hasHost?: boolean;
 }

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

@@ -1 +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"}
+{"version":3,"file":"MurmurationEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/MurmurationEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmE,MAAM,OAAO,CAAC;AAIxF,OAAO,KAAK,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAIlG,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,mFAAmF;IACnF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,8EAA8E;IAC9E,SAAS,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC/B,yEAAyE;IACzE,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,kFAAkF;IAClF,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AA0dD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAqCvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/effects/MurmurationEffect.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
 import * as THREE from 'three';
 import { useFrame } from '@react-three/fiber';
-import { applyGenerativeAnimations } from '../../utils/handleGenerativeEffectsAnimations.js';
+import { EFFECTS_ANIMATABLE } from '@3driseai/3drise-core';
+import { withConfigDefaults } from '../../utils/configAnimations.js';
 import { useObjectReady } from '../../hooks/useObjectReady.js';
+import { useConfigDriver } from '../../hooks/useConfigDriver.js';
 /**
  * A starling murmuration: thousands of boids with topological neighbours swirl around a drifting roost, folding into dense, wave-like sheets. Use for dusk, wildlife, flocking, atmospheric scenes.
  *
@@ -499,7 +501,7 @@ function build(u, c, bound, env) {
         dispose() { geo.dispose(); mat.dispose(); },
     };
 }
-/** Defaults for every knob, so an older saved config still renders. */
+/** A value for every knob: the base the renderer draws and keyframes interpolate from. */
 const DEFAULTS = {
     intensity: 1,
     speed: 1,
@@ -512,27 +514,35 @@ const DEFAULTS = {
     separation: 1,
     birdSize: 1,
 };
-const MurmurationEffect = ({ boundingRadius, config, animations, hasHost = false, onObjectReady, onObjectDispose }) => {
+/** Knobs that rebuild the object: they change on commit, never through the live path. */
+const STRUCTURAL = ['count'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what the push point applies. */
+const ANIMATABLE = new Set(EFFECTS_ANIMATABLE.murmuration.map((p) => p.value));
+const MurmurationEffect = ({ boundingRadius, config, id, keyframes, mouseMove, hasHost = false, onObjectReady, onObjectDispose }) => {
     const rootRef = useRef(null);
-    const animCache = useRef({});
     useObjectReady(rootRef, config, onObjectReady, onObjectDispose);
     // a standalone effect gets boundingRadius 1
     const b = boundingRadius > 0 ? boundingRadius : 1;
-    const cfg = useMemo(() => ({ ...DEFAULTS, ...config }), [config]);
+    const cfg = useMemo(() => withConfigDefaults(DEFAULTS, config), [config]);
     const env = useMemo(() => ({ hasHost: hasHost }), [hasHost]);
     // uniforms outlive the objects, so keyframe animations survive a rebuild
     const uniforms = useMemo(() => createUniforms(), []);
     // rebuilt only when the host size or a structural knob changes
-    const instance = useMemo(() => build(uniforms, { ...DEFAULTS, ...config }, b, env), [uniforms, b, env, cfg.count]);
+    const instance = useMemo(() => build(uniforms, cfg, b, env), [uniforms, b, env, cfg.count]);
     useEffect(() => () => instance.dispose(), [instance]);
     useLayoutEffect(() => {
         applyConfig(uniforms, cfg, b, env);
         instance.apply(cfg);
     }, [instance, uniforms, cfg, b, env]);
+    // Committed config + live drag + keyframes + pointer, merged into the one push point
+    // (the uniforms, then the instance's own cheap per-config step).
+    const push = useCallback((merged) => {
+        applyConfig(uniforms, merged, b, env);
+        instance.apply(merged);
+    }, [instance, uniforms, b, env]);
+    useConfigDriver({ rootRef, id, family: 'effects', base: cfg, structural: STRUCTURAL, allowed: ANIMATABLE, keyframes, mouseMove, push });
     useFrame((state, delta) => {
         instance.update(Math.min(delta, 0.1), state.camera);
-        if (animations?.length)
-            applyGenerativeAnimations(instance.materials, animations, animCache.current, Date.now(), false);
     });
     return (_jsx("group", { ref: rootRef, children: _jsx("primitive", { object: instance.object }) }));
 };

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

@@ -1,10 +1,15 @@
 import React from "react";
-import type { NeuralNetworkConfig, AnimationOptions } from "@3driseai/3drise-core";
+import type { NeuralNetworkConfig, AnimationOptions, MouseMoveDomain } from "@3driseai/3drise-core";
 import type { ObjectReadyProps } from '../../types/objectReady';
-interface NeuralNetworkEffectProps extends ObjectReadyProps {
+export interface NeuralNetworkEffectProps extends ObjectReadyProps {
     boundingRadius: number;
     config: NeuralNetworkConfig;
-    animations?: AnimationOptions[];
+    /** Scene object id of a standalone effect: the live-edit handle is found by it. */
+    id?: string;
+    /** Keyframes on this effect's config knobs (animations.effect.animations). */
+    keyframes?: AnimationOptions[];
+    /** Pointer bindings on this effect's config knobs (mouseMove.effect). */
+    mouseMove?: MouseMoveDomain;
 }
 declare const NeuralNetworkEffect: React.FC<NeuralNetworkEffectProps>;
 export default NeuralNetworkEffect;

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

@@ -1 +1 @@
-{"version":3,"file":"NeuralNetworkEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/NeuralNetworkEffect.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEnF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,UAAU,wBAAyB,SAAQ,gBAAgB;IACvD,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,mBAAmB,CAAC;IAC5B,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC;AA+BD,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA4J3D,CAAC;AACF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"NeuralNetworkEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/NeuralNetworkEffect.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAGpG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,MAAM,WAAW,wBAAyB,SAAQ,gBAAgB;IAC9D,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,mBAAmB,CAAC;IAC5B,mFAAmF;IACnF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,8EAA8E;IAC9E,SAAS,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC/B,yEAAyE;IACzE,SAAS,CAAC,EAAE,eAAe,CAAC;CAC/B;AAgED,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAmK3D,CAAC;AACF,eAAe,mBAAmB,CAAC"}

package/dist/components/effects/NeuralNetworkEffect.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, useMemo } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
 import { useFrame } from '@react-three/fiber';
 import * as THREE from 'three';
-import { applyGenerativeAnimations } from '../../utils/handleGenerativeEffectsAnimations.js';
+import { withConfigDefaults } from '../../utils/configAnimations.js';
+import { DEFAULT_GENERATIVE_EFFECTS, EFFECTS_ANIMATABLE } from "@3driseai/3drise-core";
 import { useObjectReady } from '../../hooks/useObjectReady.js';
+import { useConfigDriver } from '../../hooks/useConfigDriver.js';
 // Tight point sprites for electrical signals moving through the connections.
 const pulseVert = /* glsl */ `
   attribute float aBright;
@@ -32,19 +34,44 @@ const pulseFrag = /* glsl */ `
   }
 `;
 const MAX_PULSES = 4;
-const NeuralNetworkEffect = ({ boundingRadius, config, animations, onObjectReady, onObjectDispose }) => {
-    const { nodeCount, signalSpeed, nodeColor, pulseColor, orbitSpeed, opacity, speed, intensity } = config;
-    const startValuesCacheRef = useRef({});
+/** Knobs that rebuild the network: commit only, never live. */
+const STRUCTURAL = ['nodeCount'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what the push point applies. */
+const ANIMATABLE = new Set(EFFECTS_ANIMATABLE.neuralNetwork.map((p) => p.value));
+const _color = new THREE.Color();
+const EDGE_DIM = 0.06;
+/** The single push point: every config knob reaches its uniform (or material) here. */
+function applyConfig(s, c) {
+    _color.set(c.nodeColor);
+    s.nodeMat.color.copy(_color);
+    s.nodeMat.opacity = c.opacity * 0.55;
+    // edges are drawn in a dim copy of the node colour
+    const cols = s.edgeGeo.attributes.color;
+    for (let i = 0; i < cols.count; i++)
+        cols.setXYZ(i, _color.r * EDGE_DIM, _color.g * EDGE_DIM, _color.b * EDGE_DIM);
+    cols.needsUpdate = true;
+    _color.set(c.pulseColor);
+    const u = s.pulseMat.uniforms;
+    u.uColor.value.set(_color.r, _color.g, _color.b);
+    u.uSize.value = 7 * c.intensity;
+    u.uOpacity.value = c.opacity;
+}
+const NeuralNetworkEffect = ({ boundingRadius, config, id, keyframes, mouseMove, onObjectReady, onObjectDispose }) => {
+    const cfg = useMemo(() => withConfigDefaults(DEFAULT_GENERATIVE_EFFECTS.neuralNetwork, config), [config]);
+    const { nodeCount } = cfg;
     const groupRef = useRef(null);
     useObjectReady(groupRef, config, onObjectReady, onObjectDispose);
+    // the knobs read per frame (speed, orbitSpeed, signalSpeed, intensity), from the last merged config
+    const cur = useRef(cfg);
     // Node orbit state
     const orbitAngles = useRef(new Float32Array(0));
     const pulses = useRef([]);
     const nextPulse = useRef(0);
     const r = boundingRadius * 1.35;
     const N = Math.max(8, Math.min(nodeCount, 40));
+    // Built once per node count and host size; colours, sizes and opacity are pushed.
     const scene = useMemo(() => {
-        // ── Node positions on Fibonacci sphere ────────────────────────────────
+        // Node positions on Fibonacci sphere
         const basePos = [];
         const goldenAngle = Math.PI * (3 - Math.sqrt(5));
         for (let i = 0; i < N; i++) {
@@ -53,12 +80,12 @@ const NeuralNetworkEffect = ({ boundingRadius, config, animations, onObjectReady
             const phi = i * goldenAngle;
             basePos.push(new THREE.Vector3(Math.cos(phi) * rad, y * r, Math.sin(phi) * rad));
         }
-        // Orbit axes — random unit vectors
+        // Orbit axes - random unit vectors
         const orbitAxes = Array.from({ length: N }, () => new THREE.Vector3(Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5).normalize());
         const orbitSpeeds = Array.from({ length: N }, () => 0.4 + Math.random() * 0.6);
         const angles = new Float32Array(N).map((_, i) => i * 0.7);
         orbitAngles.current = angles;
-        // ── Edges — connect nearby pairs ─────────────────────────────────────
+        // Edges - connect nearby pairs
         const MAX_DIST = r * 0.85;
         const edges = [];
         const degree = new Int32Array(N);
@@ -74,42 +101,35 @@ const NeuralNetworkEffect = ({ boundingRadius, config, animations, onObjectReady
             }
         }
         const edgeVerts = new Float32Array(edges.length * 6);
-        const edgeCols = new Float32Array(edges.length * 6);
-        const nc = new THREE.Color(nodeColor);
-        const DIM = 0.06;
         for (let e = 0; e < edges.length; e++) {
             const [a, b] = edges[e];
             edgeVerts.set([basePos[a].x, basePos[a].y, basePos[a].z, basePos[b].x, basePos[b].y, basePos[b].z], e * 6);
-            edgeCols.set([nc.r * DIM, nc.g * DIM, nc.b * DIM, nc.r * DIM, nc.g * DIM, nc.b * DIM], e * 6);
         }
         const edgeGeo = new THREE.BufferGeometry();
         edgeGeo.setAttribute('position', new THREE.BufferAttribute(edgeVerts, 3));
-        edgeGeo.setAttribute('color', new THREE.BufferAttribute(edgeCols, 3));
+        edgeGeo.setAttribute('color', new THREE.BufferAttribute(new Float32Array(edges.length * 6), 3));
         const edgeMat = new THREE.LineBasicMaterial({
             vertexColors: true, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending,
         });
-        // ── Node instanced mesh ───────────────────────────────────────────────
-        const nodeGeo = new THREE.SphereGeometry(0.055 * intensity, 8, 8);
-        const nc2 = new THREE.Color(nodeColor);
+        // Node instanced mesh (sized per instance by intensity, so the size can be driven)
+        const nodeGeo = new THREE.SphereGeometry(0.055, 8, 8);
         const nodeMat = new THREE.MeshBasicMaterial({
-            color: nc2, transparent: true, opacity: opacity * 0.55,
-            depthWrite: false, blending: THREE.AdditiveBlending,
+            transparent: true, depthWrite: false, blending: THREE.AdditiveBlending,
         });
         const nodeMesh = new THREE.InstancedMesh(nodeGeo, nodeMat, N);
         nodeMesh.instanceMatrix.setUsage(THREE.DynamicDrawUsage);
-        // ── Pulse sprites ─────────────────────────────────────────────────────
+        // Pulse sprites
         const pulsePos = new Float32Array(MAX_PULSES * 3);
         const pulseBright = new Float32Array(MAX_PULSES);
         const pulseGeo = new THREE.BufferGeometry();
         pulseGeo.setAttribute('position', new THREE.BufferAttribute(pulsePos, 3));
         pulseGeo.setAttribute('aBright', new THREE.BufferAttribute(pulseBright, 1));
-        const pc = new THREE.Color(pulseColor);
         const pulseMat = new THREE.ShaderMaterial({
             vertexShader: pulseVert, fragmentShader: pulseFrag,
             uniforms: {
-                uSize: { value: 7 * intensity },
-                uColor: { value: new THREE.Vector3(pc.r, pc.g, pc.b) },
-                uOpacity: { value: opacity },
+                uSize: { value: 7 },
+                uColor: { value: new THREE.Vector3(1, 1, 1) },
+                uOpacity: { value: 1 },
             },
             transparent: true, depthWrite: false, blending: THREE.AdditiveBlending,
         });
@@ -117,17 +137,34 @@ const NeuralNetworkEffect = ({ boundingRadius, config, animations, onObjectReady
         pulses.current = Array.from({ length: MAX_PULSES }, () => ({
             fromIdx: 0, toIdx: 1, progress: 0, active: false,
         }));
-        return { basePos, orbitAxes, orbitSpeeds, edges, edgeGeo, edgeMat, nodeMesh, pulseGeo, pulseMat };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [N, r, nodeColor, pulseColor, opacity, intensity]);
+        return { basePos, orbitAxes, orbitSpeeds, edges, edgeGeo, edgeMat, nodeGeo, nodeMat, nodeMesh, pulseGeo, pulseMat };
+    }, [N, r]);
+    useEffect(() => () => {
+        scene.edgeGeo.dispose();
+        scene.edgeMat.dispose();
+        scene.nodeGeo.dispose();
+        scene.nodeMat.dispose();
+        scene.nodeMesh.dispose();
+        scene.pulseGeo.dispose();
+        scene.pulseMat.dispose();
+    }, [scene]);
+    const push = useCallback((merged) => {
+        cur.current = merged;
+        applyConfig(scene, merged);
+    }, [scene]);
+    useLayoutEffect(() => { push(cfg); }, [push, cfg]);
+    useConfigDriver({ rootRef: groupRef, id, family: 'effects', base: cfg, structural: STRUCTURAL, allowed: ANIMATABLE, keyframes, mouseMove, push });
     const tmpMat = useMemo(() => new THREE.Matrix4(), []);
     const tmpQuat = useMemo(() => new THREE.Quaternion(), []);
     const tmpVec = useMemo(() => new THREE.Vector3(), []);
+    const tmpScale = useMemo(() => new THREE.Vector3(), []);
     useFrame((_, delta) => {
         if (!groupRef.current)
             return;
+        const { speed, orbitSpeed, signalSpeed, intensity } = cur.current;
         const dt = delta * speed;
-        const { basePos, orbitAxes, orbitSpeeds, edges, edgeGeo, nodeMesh, pulseGeo, pulseMat } = scene;
+        const { basePos, orbitAxes, orbitSpeeds, edges, edgeGeo, nodeMesh, pulseGeo } = scene;
+        tmpScale.setScalar(intensity);
         // Rotate nodes around their individual axes
         const angles = orbitAngles.current;
         const curPos = [];
@@ -141,7 +178,7 @@ const NeuralNetworkEffect = ({ boundingRadius, config, animations, onObjectReady
             const dot = base.dot(axis);
             tmpVec.set(base.x * cosA + (axis.y * base.z - axis.z * base.y) * sinA + axis.x * dot * (1 - cosA), base.y * cosA + (axis.z * base.x - axis.x * base.z) * sinA + axis.y * dot * (1 - cosA), base.z * cosA + (axis.x * base.y - axis.y * base.x) * sinA + axis.z * dot * (1 - cosA));
             curPos.push(tmpVec.clone());
-            tmpMat.compose(tmpVec, tmpQuat, new THREE.Vector3(1, 1, 1));
+            tmpMat.compose(tmpVec, tmpQuat, tmpScale);
             nodeMesh.setMatrixAt(i, tmpMat);
         }
         nodeMesh.instanceMatrix.needsUpdate = true;
@@ -156,7 +193,7 @@ const NeuralNetworkEffect = ({ boundingRadius, config, animations, onObjectReady
         // Pulse signals along edges
         nextPulse.current -= delta;
         if (nextPulse.current <= 0 && edges.length > 0) {
-            nextPulse.current = 0.4 / speed;
+            nextPulse.current = 0.4 / Math.max(speed, 0.05);
             const idle = pulses.current.findIndex(p => !p.active);
             if (idle >= 0) {
                 const e = Math.floor(Math.random() * edges.length);
@@ -182,10 +219,6 @@ const NeuralNetworkEffect = ({ boundingRadius, config, animations, onObjectReady
         });
         ptPos.needsUpdate = true;
         ptBright.needsUpdate = true;
-        pulseMat.uniforms.uSize.value = 7 * intensity;
-        if (animations?.length) {
-            applyGenerativeAnimations([pulseMat], animations, startValuesCacheRef.current, Date.now(), false);
-        }
     });
     return (_jsxs("group", { ref: groupRef, children: [_jsx("lineSegments", { geometry: scene.edgeGeo, material: scene.edgeMat }), _jsx("primitive", { object: scene.nodeMesh }), _jsx("points", { geometry: scene.pulseGeo, material: scene.pulseMat })] }));
 };

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

@@ -1,10 +1,15 @@
 import React from "react";
-import type { OrbConfig, AnimationOptions } from "@3driseai/3drise-core";
+import type { OrbConfig, AnimationOptions, MouseMoveDomain } from "@3driseai/3drise-core";
 import type { ObjectReadyProps } from '../../types/objectReady';
-interface OrbEffectProps extends ObjectReadyProps {
+export interface OrbEffectProps extends ObjectReadyProps {
     boundingRadius: number;
     config: OrbConfig;
-    animations?: AnimationOptions[];
+    /** Scene object id of a standalone effect: the live-edit handle is found by it. */
+    id?: string;
+    /** Keyframes on this effect's config knobs (animations.effect.animations). */
+    keyframes?: AnimationOptions[];
+    /** Pointer bindings on this effect's config knobs (mouseMove.effect). */
+    mouseMove?: MouseMoveDomain;
 }
 declare const OrbEffect: React.FC<OrbEffectProps>;
 export default OrbEffect;