@3driseai/3drise-viewer 0.1.26 → 0.1.28

package/dist/components/effects/HarmonicShellEffect.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx } 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';
 /**
  * An iridescent shell around the host, displaced by real spherical harmonics
  * up to l = 4 whose weights drift slowly. The colour is thin-film
@@ -158,10 +160,27 @@ const frag = /* glsl */ `
     gl_FragColor = vec4(col * uIntensity, a);
   }
 `;
-const HarmonicShellEffect = ({ boundingRadius, config, animations, onObjectReady, onObjectDispose }) => {
-    const { intensity, speed, color, opacity, degree = 3, amplitude = 0.22, sizeMultiplier = 1.35, filmThickness = 380, nodalLines = 0.6, rimColor = '#bfe8ff', } = config;
+/** Nothing rebuilds the shell: the vertex shader displaces a unit sphere. */
+const STRUCTURAL = [];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what applyConfig pushes. */
+const ANIMATABLE = new Set(EFFECTS_ANIMATABLE.harmonicShell.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.uRimColor.value.set(c.rimColor);
+    u.uAmplitude.value = c.amplitude;
+    u.uBound.value = bound;
+    u.uSizeMultiplier.value = c.sizeMultiplier;
+    u.uFilmThickness.value = c.filmThickness;
+    u.uNodalLines.value = c.nodalLines;
+    u.uDegree.value = c.degree;
+}
+const HarmonicShellEffect = ({ boundingRadius, config, id, keyframes, mouseMove, onObjectReady, onObjectDispose }) => {
+    const cfg = useMemo(() => withConfigDefaults(DEFAULT_GENERATIVE_EFFECTS.harmonicShell, config), [config]);
     const rootRef = useRef(null);
-    const animCache = useRef({});
     useObjectReady(rootRef, config, onObjectReady, onObjectDispose);
     const state = useMemo(createHarmonicState, []);
     const uniforms = useMemo(() => ({
@@ -181,28 +200,17 @@ const HarmonicShellEffect = ({ boundingRadius, config, animations, onObjectReady
     }), []);
     const material = useMemo(() => new THREE.ShaderMaterial({ vertexShader: vert, fragmentShader: frag, uniforms, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending }), [uniforms]);
     useEffect(() => () => material.dispose(), [material]);
-    const materials = useMemo(() => [material], [material]);
     // the vertex shader displaces a unit sphere, so the mesh never needs rebuilding
     const geometry = useMemo(() => new THREE.SphereGeometry(1, 192, 128), []);
     useEffect(() => () => geometry.dispose(), [geometry]);
-    useLayoutEffect(() => {
-        uniforms.uSpeed.value = speed;
-        uniforms.uIntensity.value = intensity;
-        uniforms.uOpacity.value = opacity;
-        uniforms.uColor.value.set(color);
-        uniforms.uRimColor.value.set(rimColor);
-        uniforms.uAmplitude.value = amplitude;
-        uniforms.uBound.value = boundingRadius;
-        uniforms.uSizeMultiplier.value = sizeMultiplier;
-        uniforms.uFilmThickness.value = filmThickness;
-        uniforms.uNodalLines.value = nodalLines;
-        uniforms.uDegree.value = degree;
-    }, [uniforms, speed, intensity, opacity, color, rimColor, amplitude, boundingRadius, sizeMultiplier, filmThickness, nodalLines, degree]);
+    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;
         updateHarmonicWeights(state, uniforms.uW.value, uniforms.uTime.value, uniforms.uDegree.value, delta);
-        if (animations?.length)
-            applyGenerativeAnimations(materials, animations, animCache.current, Date.now(), false);
     });
     return (_jsx("group", { ref: rootRef, children: _jsx("mesh", { geometry: geometry, material: material }) }));
 };

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"HologramEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/HologramEffect.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE9E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,UAAU,mBAAoB,SAAQ,gBAAgB;IAClD,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,cAAc,CAAC;IACvB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC;AAqFD,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAwDjD,CAAC;AACF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"HologramEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/HologramEffect.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAG/F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,MAAM,WAAW,mBAAoB,SAAQ,gBAAgB;IACzD,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,cAAc,CAAC;IACvB,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;AA4GD,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAmEjD,CAAC;AACF,eAAe,cAAc,CAAC"}

package/dist/components/effects/HologramEffect.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx } 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';
 // Single rich shader handles scanlines, grid, RGB aberration, interference fringes, flicker
 const vertexShader = /* glsl */ `
   varying vec2 vUv;
@@ -15,6 +17,7 @@ const vertexShader = /* glsl */ `
 const fragmentShader = /* glsl */ `
   uniform float u_time;
   uniform float uScanSpeed;
+  uniform float uScanPhase;  // integrated on the CPU: scan speed changes never jump
   uniform float uScanlineCount;
   uniform vec3  uColor;
   uniform float uOpacity;
@@ -32,7 +35,7 @@ const fragmentShader = /* glsl */ `
 
   // Scanline sample at a specific UV (shared logic, called 3× for RGB split)
   float scanSample(vec2 uv, float t) {
-    return step(0.45, fract(uv.y * uScanlineCount + t * uScanSpeed));
+    return step(0.45, fract(uv.y * uScanlineCount + uScanPhase));
   }
 
   void main() {
@@ -86,17 +89,34 @@ const fragmentShader = /* glsl */ `
     gl_FragColor = vec4(hologramColor + uColor * fringe, intensity * uOpacity);
   }
 `;
-const HologramEffect = ({ boundingRadius, config, animations, onObjectReady, onObjectDispose }) => {
-    const { scanlineCount, scanSpeed, scanColor, gridEnabled, flickerAmount, glitchEnabled, opacity, speed, intensity } = config;
-    const startValuesCacheRef = useRef({});
+/** Knobs that rebuild the object (one plane per scanline layer): commit only, never live. */
+const STRUCTURAL = ['scanlineCount'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what the push point applies. */
+const ANIMATABLE = new Set(EFFECTS_ANIMATABLE.hologram.map((p) => p.value));
+const _color = new THREE.Color();
+/** The single push point: every config knob reaches its uniform here. */
+function applyConfig(materials, c) {
+    _color.set(c.scanColor);
+    for (const m of materials) {
+        const u = m.uniforms;
+        u.uScanSpeed.value = c.scanSpeed * c.speed;
+        u.uColor.value.set(_color.r, _color.g, _color.b);
+        u.uOpacity.value = c.opacity * c.intensity;
+        u.uFlickerAmount.value = c.flickerAmount;
+        u.uGridEnabled.value = c.gridEnabled ? 1.0 : 0.0;
+        u.uIntensity.value = c.intensity;
+    }
+}
+const HologramEffect = ({ boundingRadius, config, id, keyframes, mouseMove, onObjectReady, onObjectDispose }) => {
+    const cfg = useMemo(() => withConfigDefaults(DEFAULT_GENERATIVE_EFFECTS.hologram, config), [config]);
+    const { scanlineCount } = cfg;
     const rootRef = useRef(null);
     useObjectReady(rootRef, config, onObjectReady, onObjectDispose);
     const meshRefs = useRef([]);
-    const colorVec = useMemo(() => {
-        const c = new THREE.Color(scanColor);
-        return new THREE.Vector3(c.r, c.g, c.b);
-    }, [scanColor]);
-    // One material per plane — each has its own uPlaneY so the assembly sweeps correctly
+    // the knobs read per frame (glitchEnabled), from the last merged config
+    const cur = useRef(cfg);
+    // One material per plane - each has its own uPlaneY so the assembly sweeps correctly.
+    // Built once per plane count; every other knob is pushed into the uniforms.
     const materials = useMemo(() => Array.from({ length: scanlineCount }, (_, i) => {
         const planeY = (i / Math.max(scanlineCount - 1, 1)) * 2 - 1; // -1..+1
         return new THREE.ShaderMaterial({
@@ -104,39 +124,48 @@ const HologramEffect = ({ boundingRadius, config, animations, onObjectReady, onO
             fragmentShader,
             uniforms: {
                 u_time: { value: 0 },
-                uScanSpeed: { value: scanSpeed * speed },
+                uScanPhase: { value: 0 },
+                uScanSpeed: { value: 1 },
                 uScanlineCount: { value: 5.0 + i * 0.3 }, // slight variation per plane
-                uColor: { value: colorVec },
-                uOpacity: { value: opacity * intensity },
-                uFlickerAmount: { value: flickerAmount },
-                uGridEnabled: { value: gridEnabled ? 1.0 : 0.0 },
+                uColor: { value: new THREE.Vector3() },
+                uOpacity: { value: 1 },
+                uFlickerAmount: { value: 0 },
+                uGridEnabled: { value: 1 },
                 uGlitchOffset: { value: 0 },
                 uAberration: { value: 0.012 },
                 uPlaneY: { value: planeY },
-                uIntensity: { value: intensity },
+                uIntensity: { value: 1 },
             },
             transparent: true,
             depthWrite: false,
             blending: THREE.AdditiveBlending,
             side: THREE.DoubleSide,
         });
-    }), [scanlineCount, scanSpeed, speed, colorVec, opacity, intensity, flickerAmount, gridEnabled]);
+    }), [scanlineCount]);
+    useEffect(() => () => materials.forEach((m) => m.dispose()), [materials]);
+    const push = useCallback((merged) => {
+        cur.current = merged;
+        applyConfig(materials, merged);
+    }, [materials]);
+    useLayoutEffect(() => { push(cfg); }, [push, cfg]);
+    useConfigDriver({ rootRef, id, family: 'effects', base: cfg, structural: STRUCTURAL, allowed: ANIMATABLE, keyframes, mouseMove, push });
     const planeSize = boundingRadius * 2.3;
     const stepY = (boundingRadius * 2.5) / Math.max(scanlineCount - 1, 1);
-    useFrame((state) => {
+    useFrame((state, delta) => {
         const t = state.clock.getElapsedTime();
+        const dt = Math.min(delta, 0.1);
+        const glitch = !!cur.current.glitchEnabled;
         materials.forEach((mat, i) => {
             mat.uniforms.u_time.value = t + i * 0.04;
-            if (glitchEnabled && Math.random() > 0.985) {
+            // integrated, so changing the scan speed never makes the bands jump
+            mat.uniforms.uScanPhase.value += dt * mat.uniforms.uScanSpeed.value;
+            if (glitch && Math.random() > 0.985) {
                 mat.uniforms.uGlitchOffset.value = (Math.random() - 0.5) * 0.06;
             }
             else {
                 mat.uniforms.uGlitchOffset.value *= 0.80;
             }
         });
-        if (animations?.length) {
-            applyGenerativeAnimations(materials, animations, startValuesCacheRef.current, Date.now(), false);
-        }
     });
     return (_jsx("group", { ref: rootRef, children: Array.from({ length: scanlineCount }, (_, i) => {
             const y = -boundingRadius * 1.25 + i * stepY;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"IceCrystalsEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/IceCrystalsEffect.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;CACnC;AA+PD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAyEvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"IceCrystalsEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/IceCrystalsEffect.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAGlG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,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;CAC/B;AAmRD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAmEvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/effects/IceCrystalsEffect.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';
 /**
  * Six-fold snow crystals growing as frost on the host.
  *
@@ -79,6 +81,7 @@ const iceVert = /* glsl */ `
   attribute vec3 aSeed;           // x: shape seed, y: phase, z: size jitter
   uniform float uTime;
   uniform float uPulseSpeed;
+  uniform float uPulsePhase;  // integrated on the CPU: pulse speed changes never jump
   varying vec2  vUv;
   varying vec3  vNormalW;
   varying vec3  vViewW;
@@ -89,7 +92,7 @@ const iceVert = /* glsl */ `
     vUv = uv * 2.0 - 1.0;
     vSeed = aSeed;
     // Grow, hold, sublimate. Diffusion-limited growth: radius ~ sqrt(t).
-    float cyc = fract(uTime * uPulseSpeed * 0.06 + aSeed.y);
+    float cyc = fract(uPulsePhase * 0.06 + aSeed.y);
     float grow = sqrt(clamp(cyc / 0.55, 0.0, 1.0));
     float fade = 1.0 - smoothstep(0.82, 1.0, cyc);
     vGrowth = grow * fade;
@@ -249,15 +252,32 @@ const dustFrag = /* glsl */ `
     gl_FragColor = vec4(mix(uIceColor, vec3(1.0), 0.6 + 0.4 * vGlint), a);
   }
 `;
-const IceCrystalsEffect = ({ boundingRadius, config, animations, onObjectReady, onObjectDispose }) => {
-    const { intensity = 1, speed = 0.5, opacity = 0.9, spikeCount = 30, spikeLength = 1, frostEnabled = true, iceColor = '#9fd8ff', pulseSpeed = 0.4, habit = 0.8, branches = 5, sparkle = 1, } = config;
+/** Knobs that re-lay the crystals (count, length) or mount the frost layer: commit only. */
+const STRUCTURAL = ['spikeCount', 'spikeLength', 'frostEnabled'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what applyConfig pushes. */
+const ANIMATABLE = new Set(EFFECTS_ANIMATABLE.iceCrystals.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.uIceColor.value.set(c.iceColor);
+    u.uPulseSpeed.value = c.pulseSpeed;
+    u.uHabit.value = c.habit;
+    u.uBranches.value = c.branches;
+    u.uSparkle.value = c.sparkle;
+}
+const IceCrystalsEffect = ({ boundingRadius, config, id, keyframes, mouseMove, onObjectReady, onObjectDispose }) => {
+    const cfg = useMemo(() => withConfigDefaults(DEFAULT_GENERATIVE_EFFECTS.iceCrystals, config), [config]);
+    const { spikeCount, spikeLength, frostEnabled } = cfg;
     const rootRef = 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 },
+        uPulsePhase: { value: 0 },
         uSpeed: { value: 1 },
         uBound: { value: 1 },
         uIntensity: { value: 1 },
@@ -291,21 +311,16 @@ const IceCrystalsEffect = ({ boundingRadius, config, animations, onObjectReady,
         return g;
     }, []);
     useEffect(() => () => dustGeometry.dispose(), [dustGeometry]);
-    useLayoutEffect(() => {
-        uniforms.uSpeed.value = speed;
-        uniforms.uBound.value = b;
-        uniforms.uIntensity.value = intensity;
-        uniforms.uOpacity.value = opacity;
-        uniforms.uIceColor.value.set(iceColor);
-        uniforms.uPulseSpeed.value = pulseSpeed;
-        uniforms.uHabit.value = habit;
-        uniforms.uBranches.value = branches;
-        uniforms.uSparkle.value = sparkle;
-    }, [uniforms, speed, b, intensity, opacity, iceColor, pulseSpeed, habit, branches, sparkle]);
+    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) => {
-        uniforms.uTime.value += delta * uniforms.uSpeed.value * 2;
-        if (animations?.length)
-            applyGenerativeAnimations(materials, animations, animCache.current, Date.now(), false);
+        const dt = delta * uniforms.uSpeed.value * 2;
+        uniforms.uTime.value += dt;
+        // the growth pulse is integrated, so changing its speed never makes it jump
+        uniforms.uPulsePhase.value += dt * uniforms.uPulseSpeed.value;
     });
     return (_jsxs("group", { ref: rootRef, children: [_jsx("primitive", { object: crystals }), _jsx("points", { geometry: dustGeometry, material: materials[1], visible: frostEnabled, frustumCulled: false })] }));
 };

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

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

@@ -1 +1 @@
-{"version":3,"file":"IceHaloEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/IceHaloEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAG3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAG7E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,WAAW,kBAAmB,SAAQ,gBAAgB;IACxD,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,aAAa,CAAC;IACtB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAChC,kFAAkF;IAClF,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AA4RD,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA+B/C,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"IceHaloEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/IceHaloEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmE,MAAM,OAAO,CAAC;AAIxF,OAAO,KAAK,EAAE,gBAAgB,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAI9F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,WAAW,kBAAmB,SAAQ,gBAAgB;IACxD,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,aAAa,CAAC;IACtB,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;AAkSD,QAAA,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAqC/C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/effects/IceHaloEffect.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';
 /**
  * Atmospheric ice optics around the object as a light source: a dispersed 22° halo, sun dogs, a parhelic circle and a light pillar. Use for cold skies, suns, lamps, magic light.
  *
@@ -266,7 +268,7 @@ function build(u, c, bound, env) {
         },
     };
 }
-/** 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,
@@ -279,27 +281,35 @@ const DEFAULTS = {
     pillar: 0.45,
     glare: 0.9,
 };
-const IceHaloEffect = ({ boundingRadius, config, animations, hasHost = false, onObjectReady, onObjectDispose }) => {
+/** Knobs that rebuild the object: they change on commit, never through the live path. */
+const STRUCTURAL = [];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what the push point applies. */
+const ANIMATABLE = new Set(EFFECTS_ANIMATABLE.iceHalo.map((p) => p.value));
+const IceHaloEffect = ({ 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]);
+    const instance = useMemo(() => build(uniforms, cfg, b, env), [uniforms, b, env]);
     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/LichtenbergEffect.d.ts

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

@@ -1 +1 @@
-{"version":3,"file":"LichtenbergEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/LichtenbergEffect.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;AA6cD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA+BvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"LichtenbergEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/LichtenbergEffect.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;AAmdD,QAAA,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAqCvD,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/components/effects/LichtenbergEffect.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 Lichtenberg figure grown by the dielectric breakdown model: a glowing fern of electricity creeps over the surface, holds, fades and regrows. Use for energy, sci-fi, power and lightning scenes.
  *
@@ -477,7 +479,7 @@ function build(u, c, bound, env) {
         dispose() { geo.dispose(); quad.dispose(); mat.dispose(); rootMat.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,
@@ -490,27 +492,35 @@ const DEFAULTS = {
     pulse: 0.6,
     coreColor: '#f2f6ff',
 };
-const LichtenbergEffect = ({ boundingRadius, config, animations, hasHost = false, onObjectReady, onObjectDispose }) => {
+/** Knobs that rebuild the object: they change on commit, never through the live path. */
+const STRUCTURAL = ['nodeCount', 'branching'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what the push point applies. */
+const ANIMATABLE = new Set(EFFECTS_ANIMATABLE.lichtenberg.map((p) => p.value));
+const LichtenbergEffect = ({ 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.nodeCount, cfg.branching]);
+    const instance = useMemo(() => build(uniforms, cfg, b, env), [uniforms, b, env, cfg.nodeCount, cfg.branching]);
     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/LightningEffect.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"LightningEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/LightningEffect.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE/E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,UAAU,oBAAqB,SAAQ,gBAAgB;IACnD,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,eAAe,CAAC;IACxB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC;AAsDD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA2LnD,CAAC;AACF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"LightningEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/LightningEffect.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;AAyED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAmMnD,CAAC;AACF,eAAe,eAAe,CAAC"}