@3driseai/3drise-viewer 0.1.26 → 0.1.27

package/dist/components/effects/DnaHelixEffect.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, 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';
 // ── Pulsing junction-dot shader ───────────────────────────────────────────────
 const dotVert = /* glsl */ `
   attribute float aPhase;
@@ -75,18 +77,40 @@ function helixAt(t, si, numStrands, r, h) {
     return new THREE.Vector3(Math.cos(angle) * r, t * h - h / 2, Math.sin(angle) * r);
 }
 // ── Component ─────────────────────────────────────────────────────────────────
-const DnaHelixEffect = ({ boundingRadius, config, animations, onObjectReady, onObjectDispose }) => {
-    const { particleCount, strandCount, helixRadius, helixHeight, basePairColor, runningLightEnabled, opacity, speed, intensity, } = config;
-    const startValuesCacheRef = useRef({});
+/** Knobs that rebuild the helix (sample count, strands, radius, height, the bolt layer mount): commit only. */
+const STRUCTURAL = ['particleCount', 'strandCount', 'helixRadius', 'helixHeight', 'runningLightEnabled'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what the push point applies. */
+const ANIMATABLE = new Set(EFFECTS_ANIMATABLE.dnaHelix.map((p) => p.value));
+const _color = new THREE.Color();
+/** The single push point: every config knob that lives on a material reaches it here. */
+function applyConfig(scene, boltPtsMat, c) {
+    _color.set(c.basePairColor || '#00ffee');
+    const col = scene.rungGeo.attributes.color;
+    for (let v = 0; v < col.count; v++) {
+        const br = scene.rungBright[v >> 1];
+        col.setXYZ(v, _color.r * br, _color.g * br, _color.b * br);
+    }
+    col.needsUpdate = true;
+    scene.rungMat.opacity = c.opacity * 0.7;
+    scene.dotMat.uniforms.uSize.value = 14 * c.intensity;
+    scene.dotMat.uniforms.uOpacity.value = c.opacity;
+    boltPtsMat.uniforms.uSize.value = 18 * c.intensity;
+    boltPtsMat.uniforms.uOpacity.value = c.opacity;
+}
+const DnaHelixEffect = ({ boundingRadius, config, id, keyframes, mouseMove, onObjectReady, onObjectDispose }) => {
+    const cfg = useMemo(() => withConfigDefaults(DEFAULT_GENERATIVE_EFFECTS.dnaHelix, config), [config]);
+    const { particleCount, strandCount, helixRadius, helixHeight, runningLightEnabled } = cfg;
     const groupRef = useRef(null);
     useObjectReady(groupRef, config, onObjectReady, onObjectDispose);
+    // the knobs read per frame (speed, intensity), from the last merged config
+    const cur = useRef(cfg);
     const washProgress = useRef(0);
     const r = boundingRadius * helixRadius;
     const h = boundingRadius * helixHeight;
     const numStrands = Math.min(strandCount, 3);
-    // Bolt travel state — just headT + seed per bolt, no THREE objects
+    // Bolt travel state - just headT + seed per bolt, no THREE objects
     const boltStates = useRef([]);
-    // ── Static geometry: backbone, rungs, dots ────────────────────────────────
+    // Static geometry: backbone, rungs, dots. Colours, sizes and opacity are pushed.
     const scene = useMemo(() => {
         const N = Math.max(particleCount, 150);
         const RUNG_STEP = Math.max(3, Math.floor(N / 22));
@@ -96,7 +120,7 @@ const DnaHelixEffect = ({ boundingRadius, config, animations, onObjectReady, onO
                 strandPts[si].push(helixAt(i / (N - 1), si, numStrands, r, h));
             }
         }
-        // Backbone lines — colors updated each frame
+        // Backbone lines - colors updated each frame
         const makeStrandLine = (pts) => {
             const pos = new Float32Array(pts.length * 3);
             const col = new Float32Array(pts.length * 3);
@@ -117,27 +141,27 @@ const DnaHelixEffect = ({ boundingRadius, config, animations, onObjectReady, onO
             });
             return {
                 line: new THREE.Line(geo, mat),
+                geo,
+                mat,
                 colorBuf: col,
                 colorAttr: geo.attributes.color,
                 N: pts.length,
             };
         };
         const strands = strandPts.map(makeStrandLine);
-        // Rungs
-        const rV = [], rC = [];
-        const rc = new THREE.Color(basePairColor || '#00ffee');
+        // Rungs (coloured by applyConfig from basePairColor x a per-rung brightness)
+        const rV = [], rB = [];
         for (let i = 0; i < N; i += RUNG_STEP) {
             const a = strandPts[0][i];
             const b = strandPts[1 % numStrands][i];
             rV.push(a.x, a.y, a.z, b.x, b.y, b.z);
-            const br = 0.55 + 0.3 * Math.sin((i / (N - 1)) * Math.PI);
-            rC.push(rc.r * br, rc.g * br, rc.b * br, rc.r * br, rc.g * br, rc.b * br);
+            rB.push(0.55 + 0.3 * Math.sin((i / (N - 1)) * Math.PI));
         }
         const rungGeo = new THREE.BufferGeometry();
         rungGeo.setAttribute('position', new THREE.BufferAttribute(new Float32Array(rV), 3));
-        rungGeo.setAttribute('color', new THREE.BufferAttribute(new Float32Array(rC), 3));
+        rungGeo.setAttribute('color', new THREE.BufferAttribute(new Float32Array(rV.length), 3));
         const rungMat = new THREE.LineBasicMaterial({
-            vertexColors: true, transparent: true, opacity: opacity * 0.7,
+            vertexColors: true, transparent: true,
             depthWrite: false, blending: THREE.AdditiveBlending,
         });
         // Junction dots
@@ -157,17 +181,23 @@ const DnaHelixEffect = ({ boundingRadius, config, animations, onObjectReady, onO
         const dotMat = new THREE.ShaderMaterial({
             vertexShader: dotVert, fragmentShader: dotFrag,
             uniforms: {
-                uSize: { value: 14 * intensity },
+                uSize: { value: 14 },
                 uColor: { value: new THREE.Vector3(0.15, 1.0, 0.93) },
-                uOpacity: { value: opacity },
+                uOpacity: { value: 1 },
                 u_time: { value: 0 },
             },
             transparent: true, depthWrite: false, blending: THREE.AdditiveBlending,
         });
-        return { strands, N, rungGeo, rungMat, dotGeo, dotMat };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [particleCount, numStrands, r, h, opacity, intensity, basePairColor]);
-    // ── Single combined geometry for ALL energy bolts ─────────────────────────
+        return { strands, N, rungGeo, rungMat, rungBright: new Float32Array(rB), dotGeo, dotMat };
+    }, [particleCount, numStrands, r, h]);
+    useEffect(() => () => {
+        scene.strands.forEach(({ geo, mat }) => { geo.dispose(); mat.dispose(); });
+        scene.rungGeo.dispose();
+        scene.rungMat.dispose();
+        scene.dotGeo.dispose();
+        scene.dotMat.dispose();
+    }, [scene]);
+    // Single combined geometry for ALL energy bolts.
     // Uses LineSegments (GL_LINES: disconnected pairs), one draw call for all bolts.
     const { boltGeo, boltMat, boltPtsGeo, boltPtsMat } = useMemo(() => {
         const totalBolts = numStrands * BOLTS_PER_STRAND;
@@ -192,7 +222,7 @@ const DnaHelixEffect = ({ boundingRadius, config, animations, onObjectReady, onO
                 });
             }
         }
-        // Points layer — one sprite per BOLT_N sample, drives the glow thickness
+        // Points layer - one sprite per BOLT_N sample, drives the glow thickness
         const totalPts = numStrands * BOLTS_PER_STRAND * BOLT_N;
         const ptPos = new Float32Array(totalPts * 3);
         const ptBright = new Float32Array(totalPts);
@@ -210,12 +240,19 @@ const DnaHelixEffect = ({ boundingRadius, config, animations, onObjectReady, onO
             transparent: true, depthWrite: false, blending: THREE.AdditiveBlending,
         });
         return { boltGeo: geo, boltMat: mat, boltPtsGeo: ptsGeo, boltPtsMat: ptsMat };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [numStrands]);
-    // ── Frame loop ────────────────────────────────────────────────────────────
+    useEffect(() => () => { boltGeo.dispose(); boltMat.dispose(); boltPtsGeo.dispose(); boltPtsMat.dispose(); }, [boltGeo, boltMat, boltPtsGeo, boltPtsMat]);
+    const push = useCallback((merged) => {
+        cur.current = merged;
+        applyConfig(scene, boltPtsMat, merged);
+    }, [scene, boltPtsMat]);
+    useLayoutEffect(() => { push(cfg); }, [push, cfg]);
+    useConfigDriver({ rootRef: groupRef, id, family: 'effects', base: cfg, structural: STRUCTURAL, allowed: ANIMATABLE, keyframes, mouseMove, push });
+    // Frame loop
     useFrame((state, delta) => {
         if (!groupRef.current)
             return;
+        const { speed, intensity } = cur.current;
         groupRef.current.rotation.y += delta * speed * 0.18;
         scene.dotMat.uniforms.u_time.value = state.clock.getElapsedTime();
         // Backbone color wash
@@ -242,10 +279,8 @@ const DnaHelixEffect = ({ boundingRadius, config, animations, onObjectReady, onO
             const ptPosAttr = boltPtsGeo.attributes.position;
             const ptBrtAttr = boltPtsGeo.attributes.aBright;
             const JITTER = r * 0.20;
-            boltPtsMat.uniforms.uSize.value = 18 * intensity;
-            boltPtsMat.uniforms.uOpacity.value = opacity;
             boltStates.current.forEach((state, boltIdx) => {
-                state.headT += delta * speed * 0.18; // slow — so each bolt is clearly visible
+                state.headT += delta * speed * 0.18; // slow - so each bolt is clearly visible
                 if (state.headT >= 1) {
                     state.headT -= 1;
                     state.seed++;
@@ -304,9 +339,6 @@ const DnaHelixEffect = ({ boundingRadius, config, animations, onObjectReady, onO
             ptPosAttr.needsUpdate = true;
             ptBrtAttr.needsUpdate = true;
         }
-        if (animations?.length) {
-            applyGenerativeAnimations([scene.dotMat, boltPtsMat], animations, startValuesCacheRef.current, Date.now(), false);
-        }
     });
     return (_jsxs("group", { ref: groupRef, children: [scene.strands.map(({ line }, i) => _jsx("primitive", { object: line }, i)), _jsx("lineSegments", { geometry: scene.rungGeo, material: scene.rungMat }), _jsx("points", { geometry: scene.dotGeo, material: scene.dotMat }), runningLightEnabled && (_jsxs(_Fragment, { children: [_jsx("lineSegments", { geometry: boltGeo, material: boltMat }), _jsx("points", { geometry: boltPtsGeo, material: boltPtsMat })] }))] }));
 };

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

@@ -1,10 +1,15 @@
 import React from 'react';
-import type { AnimationOptions, FallingLeavesConfig } from '@3driseai/3drise-core';
+import type { AnimationOptions, FallingLeavesConfig, MouseMoveDomain } from '@3driseai/3drise-core';
 import type { ObjectReadyProps } from '../../types/objectReady';
 export interface FallingLeavesEffectProps extends ObjectReadyProps {
     boundingRadius: number;
     config: FallingLeavesConfig;
-    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/FallingLeavesEffect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FallingLeavesEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/FallingLeavesEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAG3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAGnF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,WAAW,wBAAyB,SAAQ,gBAAgB;IAC9D,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,mBAAmB,CAAC;IAC5B,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAChC,kFAAkF;IAClF,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAwZD,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CA+B3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"FallingLeavesEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/FallingLeavesEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmE,MAAM,OAAO,CAAC;AAIxF,OAAO,KAAK,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAIpG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,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;IAC5B,kFAAkF;IAClF,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AA8ZD,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAqC3D,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/effects/FallingLeavesEffect.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';
 /**
  * Leaves drifting past the object, each one integrating the Andersen-Pesavento-Wang falling-plate equations, so they flutter, glide and tumble like real leaves.
  *
@@ -405,7 +407,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,
@@ -419,27 +421,35 @@ const DEFAULTS = {
     wind: 0.5,
     autumnColor: '#c4631f',
 };
-const FallingLeavesEffect = ({ boundingRadius, config, animations, hasHost = false, onObjectReady, onObjectDispose }) => {
+/** Knobs that rebuild the object: they change on commit, never through the live path. */
+const STRUCTURAL = ['leafCount'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what the push point applies. */
+const ANIMATABLE = new Set(EFFECTS_ANIMATABLE.fallingLeaves.map((p) => p.value));
+const FallingLeavesEffect = ({ 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.leafCount]);
+    const instance = useMemo(() => build(uniforms, cfg, b, env), [uniforms, b, env, cfg.leafCount]);
     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/FieldLinesEffect.d.ts

@@ -1,10 +1,15 @@
-import React from 'react';
-import type { AnimationOptions, FieldLinesConfig } from '@3driseai/3drise-core';
+import React from "react";
+import type { FieldLinesConfig, AnimationOptions, MouseMoveDomain } from "@3driseai/3drise-core";
 import type { ObjectReadyProps } from '../../types/objectReady';
 export interface FieldLinesEffectProps extends ObjectReadyProps {
     boundingRadius: number;
     config: FieldLinesConfig;
-    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 FieldLinesEffect: React.FC<FieldLinesEffectProps>;
 export default FieldLinesEffect;

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

@@ -1 +1 @@
-{"version":3,"file":"FieldLinesEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/FieldLinesEffect.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAGhF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB;IAC3D,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,gBAAgB,CAAC;IACzB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC;AAqND,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA2DrD,CAAC;AACF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"FieldLinesEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/FieldLinesEffect.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAGjG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB;IAC3D,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,gBAAgB,CAAC;IACzB,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;AAyOD,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA+CrD,CAAC;AACF,eAAe,gBAAgB,CAAC"}

package/dist/components/effects/FieldLinesEffect.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';
 /**
  * Magnetic dipole field lines around the host, from the analytic line equation
  * r = L sin^2(theta), with trapped particles that bounce between magnetic
@@ -210,10 +212,27 @@ const particleFrag = /* glsl */ `
     gl_FragColor = vec4(col, core * core * (0.5 + 0.5 * vGlow) * uOpacity);
   }
 `;
-const FieldLinesEffect = ({ boundingRadius, config, animations, onObjectReady, onObjectDispose }) => {
-    const { intensity, speed, color, opacity, shells = 4, linesPerShell = 12, extent = 3.2, twist = 0, tilt = 11, particleCount = 6, particleSize = 1.2, apexColor = '#6a5cff', } = config;
+/** Knobs that rebuild the line and particle geometry: commit only, never live. */
+const STRUCTURAL = ['shells', 'linesPerShell', 'particleCount'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what applyConfig pushes. */
+const ANIMATABLE = new Set(EFFECTS_ANIMATABLE.fieldLines.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.uIntensity.value = c.intensity;
+    u.uOpacity.value = c.opacity;
+    u.uColor.value.set(c.color);
+    u.uApexColor.value.set(c.apexColor);
+    u.uBound.value = bound;
+    u.uExtent.value = c.extent;
+    u.uTwist.value = c.twist;
+    u.uTilt.value = c.tilt;
+    u.uParticleSize.value = c.particleSize;
+}
+const FieldLinesEffect = ({ boundingRadius, config, id, keyframes, mouseMove, onObjectReady, onObjectDispose }) => {
+    const cfg = useMemo(() => withConfigDefaults(DEFAULT_GENERATIVE_EFFECTS.fieldLines, config), [config]);
+    const { shells, linesPerShell, particleCount } = cfg;
     const rootRef = useRef(null);
-    const animCache = useRef({});
     useObjectReady(rootRef, config, onObjectReady, onObjectDispose);
     // one uniform set, shared by the lines and the particles
     const uniforms = useMemo(() => ({
@@ -238,22 +257,13 @@ const FieldLinesEffect = ({ boundingRadius, config, animations, onObjectReady, o
     const particleGeometry = useMemo(() => buildFieldParticles(shells, linesPerShell, particleCount), [shells, linesPerShell, particleCount]);
     useEffect(() => () => lineGeometry.dispose(), [lineGeometry]);
     useEffect(() => () => particleGeometry.dispose(), [particleGeometry]);
-    useLayoutEffect(() => {
-        uniforms.uSpeed.value = speed;
-        uniforms.uIntensity.value = intensity;
-        uniforms.uOpacity.value = opacity;
-        uniforms.uColor.value.set(color);
-        uniforms.uApexColor.value.set(apexColor);
-        uniforms.uBound.value = boundingRadius;
-        uniforms.uExtent.value = extent;
-        uniforms.uTwist.value = twist;
-        uniforms.uTilt.value = tilt;
-        uniforms.uParticleSize.value = particleSize;
-    }, [uniforms, speed, intensity, opacity, color, apexColor, boundingRadius, extent, twist, tilt, particleSize]);
+    const push = useCallback((merged) => {
+        applyConfig(uniforms, merged, boundingRadius);
+    }, [uniforms, boundingRadius]);
+    useLayoutEffect(() => { push(cfg); }, [push, cfg]);
+    useConfigDriver({ rootRef, id, family: 'effects', base: cfg, structural: STRUCTURAL, allowed: ANIMATABLE, keyframes, mouseMove, push });
     useFrame((_, delta) => {
         uniforms.uTime.value += delta * uniforms.uSpeed.value;
-        if (animations?.length)
-            applyGenerativeAnimations(materials, animations, animCache.current, Date.now(), false);
     });
     return (_jsxs("group", { ref: rootRef, children: [_jsx("lineSegments", { geometry: lineGeometry, material: materials[0], frustumCulled: false }), _jsx("points", { geometry: particleGeometry, material: materials[1], frustumCulled: false })] }));
 };

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

@@ -1,5 +1,5 @@
 import type { Object3D } from 'three';
-import { AnimationOptions, FireConfig } from "@3driseai/3drise-core";
+import type { AnimationOptions, FireConfig, MouseMoveDomain } from "@3driseai/3drise-core";
 import type { ObjectReadyProps } from '../../types/objectReady';
 export interface FireProps extends ObjectReadyProps {
     /**
@@ -14,8 +14,13 @@ export interface FireProps extends ObjectReadyProps {
      */
     hostRef?: Object3D | null;
     config: FireConfig;
-    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 Fire: ({ hostRef, config, animations, onObjectReady, onObjectDispose }: FireProps) => import("react").JSX.Element;
+declare const Fire: ({ hostRef, config, id, keyframes, mouseMove, onObjectReady, onObjectDispose }: FireProps) => import("react").JSX.Element;
 export default Fire;
 //# sourceMappingURL=Fire.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Fire.d.ts","sourceRoot":"","sources":["../../../src/components/effects/Fire.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAErE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,MAAM,WAAW,SAAU,SAAQ,gBAAgB;IAC/C;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC1B,MAAM,EAAE,UAAU,CAAC;IACnB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC;AAqFD,QAAA,MAAM,IAAI,GAAI,iEAAiE,SAAS,gCAyHvF,CAAC;AACF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Fire.d.ts","sourceRoot":"","sources":["../../../src/components/effects/Fire.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAItC,OAAO,KAAK,EAAE,gBAAgB,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAI3F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,MAAM,WAAW,SAAU,SAAQ,gBAAgB;IAC/C;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC1B,MAAM,EAAE,UAAU,CAAC;IACnB,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;AAsGD,QAAA,MAAM,IAAI,GAAI,+EAA+E,SAAS,gCA4IrG,CAAC;AACF,eAAe,IAAI,CAAC"}

package/dist/components/effects/Fire.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box3, Sphere, Color, Vector3, Matrix4, PlaneGeometry, InstancedBufferGeometry, InstancedBufferAttribute, } from 'three';
-import { useEffect, useLayoutEffect, useMemo, useRef } from 'react';
+import { Box3, Sphere, Vector3, Matrix4, PlaneGeometry, InstancedBufferGeometry, InstancedBufferAttribute, } from 'three';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
 import { useFrame } from '@react-three/fiber';
+import { DEFAULT_GENERATIVE_EFFECTS, EFFECTS_ANIMATABLE } from "@3driseai/3drise-core";
 import { useObjectReady } from '../../hooks/useObjectReady.js';
+import { useConfigDriver } from '../../hooks/useConfigDriver.js';
+import { withConfigDefaults } from '../../utils/configAnimations.js';
 // Add to FireConfig in 3drize-core:
 //   mode?: 'crown' | 'wrap'   // wrap scatters tongues over the host surface
 //   coverage?: number         // 0..1 — how far down the host burns (wrap)
@@ -85,14 +88,30 @@ function sampleSurface(host, count) {
     }
     return points;
 }
-const Fire = ({ hostRef, config, animations, onObjectReady, onObjectDispose }) => {
+/** Knobs that re-fit or re-scatter the flames, or mount the light: commit only, never live. */
+const STRUCTURAL = ['mode', 'coverage', 'tongues', 'radius', 'height', 'radiusScale', 'heightScale', 'light'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what the push point applies. */
+const ANIMATABLE = new Set(EFFECTS_ANIMATABLE.fire.map((p) => p.value));
+/** The single push point: every config knob that lives on the material reaches it here. */
+function applyConfig(m, c) {
+    m.u_intensity = c.intensity;
+    // speed is integrated into u_time on the CPU (see useFrame), so the shader's
+    // u_time * u_speed never jumps when the speed changes
+    m.u_speed = 1;
+    m.u_turbulence = c.turbulence;
+    m.u_sway = c.sway;
+    m.u_tint.set(c.tint);
+}
+const Fire = ({ hostRef, config, id, keyframes, mouseMove, onObjectReady, onObjectDispose }) => {
+    const cfg = useMemo(() => withConfigDefaults(DEFAULT_GENERATIVE_EFFECTS.fire, config), [config]);
     const group = useRef(null);
     useObjectReady(group, config, onObjectReady, onObjectDispose);
     const material = useRef(null);
     const lightRef = useRef(null);
-    const { radius = 1, height = 2.5, radiusScale = 1, heightScale = 1, intensity = 1, speed = 1, turbulence = 1.5, sway = 1, tint = '#ffffff', light = true, mode = 'tongues', coverage = 0.85, tongues = 36, } = config;
-    const tintColor = useMemo(() => new Color(tint), [tint]);
-    // Shared instanced quad — per-tongue attributes are (re)filled on fit.
+    // the knobs read per frame (speed, intensity), from the last merged config
+    const cur = useRef(cfg);
+    const { radius, height, radiusScale, heightScale, light, mode, coverage, tongues } = cfg;
+    // Shared instanced quad - per-tongue attributes are (re)filled on fit.
     const geometry = useMemo(() => {
         const base = new PlaneGeometry(1, 1);
         const geo = new InstancedBufferGeometry();
@@ -192,11 +211,29 @@ const Fire = ({ hostRef, config, animations, onObjectReady, onObjectDispose }) =
         heightScale,
         geometry,
     ]);
-    useFrame(({ clock }) => {
+    // One push point for the material: the committed config when the material mounts or
+    // the config commits, the merged one while anything overrides it.
+    const cfgRef = useRef(cfg);
+    cfgRef.current = cfg;
+    const setMaterial = useCallback((m) => {
+        material.current = m;
+        if (m)
+            applyConfig(m, cfgRef.current);
+    }, []);
+    const push = useCallback((merged) => {
+        cur.current = merged;
+        if (material.current)
+            applyConfig(material.current, merged);
+    }, []);
+    useLayoutEffect(() => { push(cfg); }, [push, cfg]);
+    useConfigDriver({ rootRef: group, id, family: 'effects', base: cfg, structural: STRUCTURAL, allowed: ANIMATABLE, keyframes, mouseMove, push });
+    useFrame(({ clock }, delta) => {
         const t = clock.getElapsedTime();
-        material.current.u_time = t;
+        const { speed, intensity } = cur.current;
+        if (material.current)
+            material.current.u_time += Math.min(delta, 0.1) * speed;
         if (light && lightRef.current) {
-            // Low-frequency flicker — calm, ember-like, no strobing.
+            // Low-frequency flicker - calm, ember-like, no strobing.
             const flicker = 0.82 +
                 0.12 * Math.sin(t * 7.3) * Math.sin(t * 3.1) +
                 0.06 * Math.sin(t * 13.7 + 1.4);
@@ -205,6 +242,6 @@ const Fire = ({ hostRef, config, animations, onObjectReady, onObjectDispose }) =
                 material.current.u_height * (0.35 + 0.03 * Math.sin(t * 5.1));
         }
     });
-    return (_jsxs("group", { ref: group, children: [_jsx("mesh", { geometry: geometry, frustumCulled: false, children: _jsx("fireMaterial", { ref: material, u_intensity: intensity, u_speed: speed, u_turbulence: turbulence, u_sway: sway, u_tint: tintColor }) }), light && (_jsx("pointLight", { ref: lightRef, color: "#ff7a26", distance: 0, decay: 2 }))] }));
+    return (_jsxs("group", { ref: group, children: [_jsx("mesh", { geometry: geometry, frustumCulled: false, children: _jsx("fireMaterial", { ref: setMaterial }) }), light && (_jsx("pointLight", { ref: lightRef, color: "#ff7a26", distance: 0, decay: 2 }))] }));
 };
 export default Fire;

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

@@ -1,10 +1,15 @@
 import React from 'react';
-import type { AnimationOptions, FireflySwarmConfig } from '@3driseai/3drise-core';
+import type { AnimationOptions, FireflySwarmConfig, MouseMoveDomain } from '@3driseai/3drise-core';
 import type { ObjectReadyProps } from '../../types/objectReady';
 export interface FireflySwarmEffectProps extends ObjectReadyProps {
     boundingRadius: number;
     config: FireflySwarmConfig;
-    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/FireflySwarmEffect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FireflySwarmEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/FireflySwarmEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAG3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAGlF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,WAAW,uBAAwB,SAAQ,gBAAgB;IAC7D,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,kBAAkB,CAAC;IAC3B,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAChC,kFAAkF;IAClF,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAwXD,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA+BzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"FireflySwarmEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/FireflySwarmEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmE,MAAM,OAAO,CAAC;AAIxF,OAAO,KAAK,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAInG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,WAAW,uBAAwB,SAAQ,gBAAgB;IAC7D,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,kBAAkB,CAAC;IAC3B,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;AA8XD,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAqCzD,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/dist/components/effects/FireflySwarmEffect.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';
 /**
  * Kuramoto-coupled fireflies drifting on a divergence-free flow: random blinking slowly locks into sync, with ripples of light rolling through the swarm. Use for night, garden, forest, magical scenes.
  *
@@ -367,7 +369,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,
@@ -381,27 +383,35 @@ const DEFAULTS = {
     glowSize: 1,
     flashColor: '#d4ff5c',
 };
-const FireflySwarmEffect = ({ 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.fireflySwarm.map((p) => p.value));
+const FireflySwarmEffect = ({ 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/Flares.d.ts

@@ -1,5 +1,5 @@
 import { Vector3, Object3D } from "three";
-import { AnimationOptions, FlaresConfig } from "@3driseai/3drise-core";
+import type { AnimationOptions, FlaresConfig, MouseMoveDomain } from "@3driseai/3drise-core";
 declare global {
     namespace JSX {
         interface IntrinsicElements {
@@ -15,11 +15,18 @@ export type FlaresProps = ObjectReadyProps & {
      * false -> plane mode: circular limb billboard (default).
      */
     hostRef?: Object3D | null;
+    /** Host bounding radius (1 for a standalone effect): the billboard is sized from it. */
+    boundingRadius?: number;
     /** Root the bursts at the center (shooting from source) instead of the limb. */
     config: FlaresConfig;
     /** Uniform overrides for FlareMaterial (u_frequency, u_reach, ...). */
     uniforms?: Record<string, number | Vector3 | number[]>;
-    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;
 };
-export default function Flares({ hostRef, config, uniforms, animations, onObjectReady, onObjectDispose }: FlaresProps): import("react").JSX.Element;
+export default function Flares({ hostRef, boundingRadius, config, uniforms, id, keyframes, mouseMove, onObjectReady, onObjectDispose }: FlaresProps): import("react").JSX.Element;
 //# sourceMappingURL=Flares.d.ts.map