@3driseai/3drise-viewer 0.1.26 → 0.1.27

package/dist/components/effects/BlackHoleEffect.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 ray-traced Schwarzschild black hole.
  *
@@ -35,6 +37,7 @@ const blackHoleFrag = /* glsl */ `
   uniform float uLensing;
   uniform float uBeaming;
   uniform float uRotationSpeed;
+  uniform float uSpin;  // integrated on the CPU: rotation speed changes never jump
   uniform float uIntensity;
   uniform float uOpacity;
   uniform float uInside;          // 1 when the camera is inside the proxy sphere
@@ -113,7 +116,7 @@ const blackHoleFrag = /* glsl */ `
     float captured = 0.0;
     float glow = 0.0;
 
-    float ph = uTime * uRotationSpeed / 7.0;
+    float ph = uSpin / 7.0;
     float f0 = fract(ph), f1 = fract(ph + 0.5);
     float w0 = 1.0 - abs(2.0 * f0 - 1.0);
     float off0 = floor(ph) * 7.31, off1 = floor(ph + 0.5) * 7.31 + 3.7;
@@ -246,12 +249,31 @@ const jetFrag = /* glsl */ `
 `;
 const _inv = new THREE.Matrix4();
 const _cam = new THREE.Vector3();
-const BlackHoleEffect = ({ boundingRadius, config, animations, onObjectReady, onObjectDispose }) => {
-    const { intensity = 1.2, speed = 1, color = '#ffd2a0', opacity = 0.95, diskColor = '#ff6600', jetEnabled = true, jetColor = '#88aaff', rotationSpeed = 1, tilt = 15, horizonSize = 0.4, diskOuter = 3, lensing = 1, beaming = 1, } = config;
+/** Knobs that resize the proxy sphere and the jets (horizon size, disk extent): commit only. */
+const STRUCTURAL = ['horizonSize', 'diskOuter'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what the push point applies. */
+const ANIMATABLE = new Set(EFFECTS_ANIMATABLE.blackHole.map((p) => p.value));
+/** The single push point: every config knob reaches its uniform (or the disk tilt) here. */
+function applyConfig(u, tiltGroup, c) {
+    u.uSpeed.value = c.speed;
+    u.uIntensity.value = c.intensity;
+    u.uOpacity.value = c.opacity;
+    u.uColor.value.set(c.color);
+    u.uDiskColor.value.set(c.diskColor);
+    u.uJetColor.value.set(c.jetColor);
+    u.uRotationSpeed.value = c.rotationSpeed;
+    u.uLensing.value = c.lensing;
+    u.uBeaming.value = c.beaming;
+    if (tiltGroup)
+        tiltGroup.rotation.set(0, 0, (c.tilt * Math.PI) / 180);
+}
+const BlackHoleEffect = ({ boundingRadius, config, id, keyframes, mouseMove, onObjectReady, onObjectDispose }) => {
+    const cfg = useMemo(() => withConfigDefaults(DEFAULT_GENERATIVE_EFFECTS.blackHole, config), [config]);
+    const { jetEnabled, horizonSize, diskOuter } = cfg;
     const rootRef = useRef(null);
+    const tiltRef = useRef(null);
     const diskRef = useRef(null);
     const insideRef = useRef(false);
-    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;
@@ -261,6 +283,7 @@ const BlackHoleEffect = ({ boundingRadius, config, animations, onObjectReady, on
     const proxyR = Rs * outerRs * 1.03;
     const uniforms = useMemo(() => ({
         uTime: { value: 0 },
+        uSpin: { value: 0 },
         uSpeed: { value: 1 },
         uIntensity: { value: 1 },
         uOpacity: { value: 1 },
@@ -288,21 +311,21 @@ const BlackHoleEffect = ({ boundingRadius, config, animations, onObjectReady, on
     }, [b, Rs]);
     useEffect(() => () => proxyGeometry.dispose(), [proxyGeometry]);
     useEffect(() => () => jetGeometry.dispose(), [jetGeometry]);
+    // geometry-derived uniforms follow the committed (structural) knobs
     useLayoutEffect(() => {
-        uniforms.uSpeed.value = speed;
-        uniforms.uIntensity.value = intensity;
-        uniforms.uOpacity.value = opacity;
-        uniforms.uColor.value.set(color);
-        uniforms.uDiskColor.value.set(diskColor);
-        uniforms.uJetColor.value.set(jetColor);
-        uniforms.uRotationSpeed.value = rotationSpeed;
-        uniforms.uLensing.value = lensing;
-        uniforms.uBeaming.value = beaming;
         uniforms.uRs.value = Rs;
         uniforms.uOuter.value = outerRs;
-    }, [uniforms, speed, intensity, opacity, color, diskColor, jetColor, rotationSpeed, lensing, beaming, Rs, outerRs]);
+    }, [uniforms, Rs, outerRs]);
+    const push = useCallback((merged) => {
+        applyConfig(uniforms, tiltRef.current, merged);
+    }, [uniforms]);
+    useLayoutEffect(() => { push(cfg); }, [push, cfg]);
+    useConfigDriver({ rootRef, id, family: 'effects', base: cfg, structural: STRUCTURAL, allowed: ANIMATABLE, keyframes, mouseMove, push });
     useFrame((state, delta) => {
-        uniforms.uTime.value += delta * uniforms.uSpeed.value;
+        const dt = delta * uniforms.uSpeed.value;
+        uniforms.uTime.value += dt;
+        // the disk angle is integrated, so changing the rotation speed never makes it jump
+        uniforms.uSpin.value += dt * uniforms.uRotationSpeed.value;
         const disk = diskRef.current;
         if (disk) {
             disk.updateWorldMatrix(true, false);
@@ -317,9 +340,7 @@ const BlackHoleEffect = ({ boundingRadius, config, animations, onObjectReady, on
                 mat.needsUpdate = true;
             }
         }
-        if (animations?.length)
-            applyGenerativeAnimations(materials, animations, animCache.current, Date.now(), false);
     });
-    return (_jsx("group", { ref: rootRef, children: _jsxs("group", { rotation: [0, 0, (tilt * Math.PI) / 180], children: [_jsx("mesh", { ref: diskRef, geometry: proxyGeometry, material: materials[0] }), _jsxs("group", { visible: jetEnabled, children: [_jsx("mesh", { geometry: jetGeometry, material: materials[1], frustumCulled: false }), _jsx("mesh", { geometry: jetGeometry, material: materials[1], scale: [1, -1, 1], frustumCulled: false })] })] }) }));
+    return (_jsx("group", { ref: rootRef, children: _jsxs("group", { ref: tiltRef, children: [_jsx("mesh", { ref: diskRef, geometry: proxyGeometry, material: materials[0] }), _jsxs("group", { visible: jetEnabled, children: [_jsx("mesh", { geometry: jetGeometry, material: materials[1], frustumCulled: false }), _jsx("mesh", { geometry: jetGeometry, material: materials[1], scale: [1, -1, 1], frustumCulled: false })] })] }) }));
 };
 export default BlackHoleEffect;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ConstellationEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/ConstellationEffect.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;AAiGD,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAyF3D,CAAC;AACF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"ConstellationEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/ConstellationEffect.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;AAsHD,QAAA,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC,wBAAwB,CAmG3D,CAAC;AACF,eAAe,mBAAmB,CAAC"}

package/dist/components/effects/ConstellationEffect.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';
 // Stars: per-particle twinkle + size variation
 const starVertShader = /* glsl */ `
   attribute float aPhase;
@@ -11,14 +13,15 @@ const starVertShader = /* glsl */ `
 
   uniform float u_time;
   uniform float uTwinkleSpeed;
+  uniform float uTwinklePhase;  // integrated on the CPU: twinkle speed changes never jump
   uniform float uPointSize;
 
   varying float vAlpha;
   varying float vBrightness;
 
   void main() {
-    float twinkle  = 0.5 + 0.5 * sin(u_time * uTwinkleSpeed + aPhase);
-    float twinkle2 = 0.5 + 0.5 * sin(u_time * uTwinkleSpeed * 1.618 + aPhase * 2.3);
+    float twinkle  = 0.5 + 0.5 * sin(uTwinklePhase + aPhase);
+    float twinkle2 = 0.5 + 0.5 * sin(uTwinklePhase * 1.618 + aPhase * 2.3);
     vAlpha      = 0.35 + 0.65 * twinkle;
     vBrightness = twinkle2;
 
@@ -98,17 +101,32 @@ function fibonacciSphere(count, radius) {
     }
     return positions;
 }
-const ConstellationEffect = ({ boundingRadius, config, animations, onObjectReady, onObjectDispose }) => {
-    const { starCount, connectRadius, orbitRadius, twinkleSpeed, lineOpacity, starSize, color, opacity, speed } = config;
-    const startValuesCacheRef = useRef({});
+/** Knobs that rebuild the star field (positions, connections): commit only, never live. */
+const STRUCTURAL = ['starCount', 'orbitRadius', 'connectRadius'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what the push point applies. */
+const ANIMATABLE = new Set(EFFECTS_ANIMATABLE.constellation.map((p) => p.value));
+const _color = new THREE.Color();
+/** The single push point: every config knob reaches its uniform here. */
+function applyConfig(starMat, lineMat, c) {
+    _color.set(c.color);
+    const s = starMat.uniforms, l = lineMat.uniforms;
+    s.uTwinkleSpeed.value = c.twinkleSpeed;
+    s.uPointSize.value = c.starSize * 220;
+    s.uColor.value.set(_color.r, _color.g, _color.b);
+    s.uOpacity.value = c.opacity;
+    l.uColor.value.set(_color.r, _color.g, _color.b);
+    l.uLineOpacity.value = c.lineOpacity;
+}
+const ConstellationEffect = ({ boundingRadius, config, id, keyframes, mouseMove, onObjectReady, onObjectDispose }) => {
+    const cfg = useMemo(() => withConfigDefaults(DEFAULT_GENERATIVE_EFFECTS.constellation, config), [config]);
+    const { starCount, connectRadius, orbitRadius } = cfg;
     const groupRef = useRef(null);
     useObjectReady(groupRef, config, onObjectReady, onObjectDispose);
+    // the knobs read per frame (speed), from the last merged config
+    const cur = useRef(cfg);
     const r = boundingRadius * orbitRadius;
     const connR = boundingRadius * connectRadius;
-    const colorVec = useMemo(() => {
-        const c = new THREE.Color(color);
-        return new THREE.Vector3(c.r, c.g, c.b);
-    }, [color]);
+    // Built once per star field; every other knob is pushed into the uniforms.
     const { starGeo, starMat, lineGeo, lineMat } = useMemo(() => {
         const positions = fibonacciSphere(starCount, r);
         // Per-star random size multipliers (slight variation makes it feel natural)
@@ -116,7 +134,7 @@ const ConstellationEffect = ({ boundingRadius, config, animations, onObjectReady
         const sizes = new Float32Array(starCount);
         for (let i = 0; i < starCount; i++) {
             phases[i] = Math.random() * Math.PI * 2;
-            sizes[i] = 0.5 + Math.random() * 1.0; // 0.5 – 1.5× size
+            sizes[i] = 0.5 + Math.random() * 1.0; // 0.5 - 1.5x size
         }
         const sGeo = new THREE.BufferGeometry();
         sGeo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
@@ -127,16 +145,17 @@ const ConstellationEffect = ({ boundingRadius, config, animations, onObjectReady
             fragmentShader: starFragShader,
             uniforms: {
                 u_time: { value: 0 },
-                uTwinkleSpeed: { value: twinkleSpeed },
-                uPointSize: { value: starSize * 220 },
-                uColor: { value: colorVec },
-                uOpacity: { value: opacity },
+                uTwinklePhase: { value: 0 },
+                uTwinkleSpeed: { value: 2 },
+                uPointSize: { value: 11 },
+                uColor: { value: new THREE.Vector3(1, 1, 1) },
+                uOpacity: { value: 1 },
             },
             transparent: true,
             depthWrite: false,
             blending: THREE.AdditiveBlending,
         });
-        // Build connection line geometry — each nearby pair gets a line
+        // Build connection line geometry - each nearby pair gets a line
         const lineVerts = [];
         const linePhases = [];
         const lineSeeds = [];
@@ -164,16 +183,24 @@ const ConstellationEffect = ({ boundingRadius, config, animations, onObjectReady
             uniforms: {
                 u_time: { value: 0 },
                 uPulseSpeed: { value: 0.4 },
-                uColor: { value: colorVec },
-                uLineOpacity: { value: lineOpacity },
+                uColor: { value: new THREE.Vector3(1, 1, 1) },
+                uLineOpacity: { value: 0.3 },
             },
             transparent: true,
             depthWrite: false,
             blending: THREE.AdditiveBlending,
         });
         return { starGeo: sGeo, starMat: sMat, lineGeo: lGeo, lineMat: lMat };
-    }, [starCount, r, connR, twinkleSpeed, starSize, colorVec, opacity, lineOpacity]);
+    }, [starCount, r, connR]);
+    useEffect(() => () => { starGeo.dispose(); starMat.dispose(); lineGeo.dispose(); lineMat.dispose(); }, [starGeo, starMat, lineGeo, lineMat]);
+    const push = useCallback((merged) => {
+        cur.current = merged;
+        applyConfig(starMat, lineMat, merged);
+    }, [starMat, lineMat]);
+    useLayoutEffect(() => { push(cfg); }, [push, cfg]);
+    useConfigDriver({ rootRef: groupRef, id, family: 'effects', base: cfg, structural: STRUCTURAL, allowed: ANIMATABLE, keyframes, mouseMove, push });
     useFrame((state, delta) => {
+        const speed = cur.current.speed;
         if (groupRef.current) {
             // Dual-axis rotation: primary Y + slow precession around X for a tumbling feel
             groupRef.current.rotation.y += delta * speed * 0.18;
@@ -181,10 +208,9 @@ const ConstellationEffect = ({ boundingRadius, config, animations, onObjectReady
         }
         const t = state.clock.getElapsedTime();
         starMat.uniforms.u_time.value = t;
+        // integrated, so changing the twinkle speed never makes the stars jump
+        starMat.uniforms.uTwinklePhase.value += Math.min(delta, 0.1) * starMat.uniforms.uTwinkleSpeed.value;
         lineMat.uniforms.u_time.value = t;
-        if (animations?.length) {
-            applyGenerativeAnimations([starMat, lineMat], animations, startValuesCacheRef.current, Date.now(), false);
-        }
     });
     return (_jsxs("group", { ref: groupRef, children: [_jsx("points", { geometry: starGeo, material: starMat }), _jsx("lineSegments", { geometry: lineGeo, material: lineMat })] }));
 };

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

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

@@ -1 +1 @@
-{"version":3,"file":"DandelionSeedsEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/DandelionSeedsEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAG3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC;AAGpF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,WAAW,yBAA0B,SAAQ,gBAAgB;IAC/D,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,oBAAoB,CAAC;IAC7B,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAChC,kFAAkF;IAClF,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AA6cD,QAAA,MAAM,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CA+B7D,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"DandelionSeedsEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/DandelionSeedsEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmE,MAAM,OAAO,CAAC;AAIxF,OAAO,KAAK,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAIrG,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,WAAW,yBAA0B,SAAQ,gBAAgB;IAC/D,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,oBAAoB,CAAC;IAC7B,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,oBAAoB,EAAE,KAAK,CAAC,EAAE,CAAC,yBAAyB,CAqC7D,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/dist/components/effects/DandelionSeedsEffect.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';
 /**
  * Dandelion seeds let go of the head one by one and drift away: a high-drag pappus gives them a slow terminal fall, and curl-noise wind with updrafts carries them. Use for meadow, summer, wish, gentle scenes.
  *
@@ -469,7 +471,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,
@@ -483,27 +485,35 @@ const DEFAULTS = {
     lift: 1,
     stemColor: '#d8b183',
 };
-const DandelionSeedsEffect = ({ boundingRadius, config, animations, hasHost = false, onObjectReady, onObjectDispose }) => {
+/** Knobs that rebuild the object: they change on commit, never through the live path. */
+const STRUCTURAL = ['seedCount'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what the push point applies. */
+const ANIMATABLE = new Set(EFFECTS_ANIMATABLE.dandelionSeeds.map((p) => p.value));
+const DandelionSeedsEffect = ({ 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.seedCount]);
+    const instance = useMemo(() => build(uniforms, cfg, b, env), [uniforms, b, env, cfg.seedCount]);
     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/DataStreamEffect.d.ts

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

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

@@ -1 +1 @@
-{"version":3,"file":"DataStreamEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/DataStreamEffect.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEhF,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,UAAU,qBAAsB,SAAQ,gBAAgB;IACpD,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,gBAAgB,CAAC;IACzB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC;AAuFD,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAoErD,CAAC;AACF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"DataStreamEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/DataStreamEffect.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;AA8GD,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAgErD,CAAC;AACF,eAAe,gBAAgB,CAAC"}

package/dist/components/effects/DataStreamEffect.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';
 // Dual counter-rotating helices with cold→hot color gradient.
 // All animation is GPU-side — only u_time updates per frame.
 const vertexShader = /* glsl */ `
@@ -13,6 +15,7 @@ const vertexShader = /* glsl */ `
 
   uniform float u_time;
   uniform float u_speed;
+  uniform float uFlow;  // integrated on the CPU: speed changes never jump
   uniform float uRadius;
   uniform float uTurns;
   uniform float uHeight;
@@ -39,7 +42,7 @@ const vertexShader = /* glsl */ `
     // Second strand runs the opposite direction, phase-shifted by half turn
     float dir    = aStrand > 0.5 ? -1.0 : 1.0;
     float phase  = aStrand > 0.5 ? TAU * 0.5 : 0.0;
-    float t      = fract(aT + aOffset + u_time * u_speed * dir);
+    float t      = fract(aT + aOffset + uFlow * dir);
 
     float angle  = t * uTurns * TAU + phase;
     float y      = (t - 0.5) * uHeight;
@@ -88,15 +91,33 @@ const fragmentShader = /* glsl */ `
     gl_FragColor = vec4(vColor, vAlpha * uOpacity * (glow + star));
   }
 `;
-const DataStreamEffect = ({ boundingRadius, config, animations, onObjectReady, onObjectDispose }) => {
-    const { particleCount, spiralTurns, streamRadius, inward, particleSize, opacity, speed, intensity, color = '#ffffff', coldColor = '#0d26e6', midColor = '#00d9ff', hotColor = '#ffeb8c', } = config;
-    const startValuesCacheRef = useRef({});
+/** Knobs that rebuild the object: commit only, never live. */
+const STRUCTURAL = ['particleCount'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what applyConfig pushes. */
+const ANIMATABLE = new Set(EFFECTS_ANIMATABLE.dataStream.map((p) => p.value));
+/** The single push point: every config knob reaches its uniform here. */
+function applyConfig(mat, c, bound) {
+    const u = mat.uniforms;
+    u.u_speed.value = c.speed * (c.inward ? -1 : 1);
+    u.uRadius.value = bound * c.streamRadius;
+    u.uTurns.value = c.spiralTurns;
+    u.uHeight.value = bound * 2.6;
+    u.uPointSize.value = c.particleSize * 80;
+    u.uIntensity.value = c.intensity;
+    u.uOpacity.value = c.opacity;
+    u.uColdColor.value.set(c.coldColor);
+    u.uMidColor.value.set(c.midColor);
+    u.uHotColor.value.set(c.hotColor);
+    u.uTintColor.value.set(c.color);
+}
+const DataStreamEffect = ({ boundingRadius, config, id, keyframes, mouseMove, onObjectReady, onObjectDispose }) => {
+    const cfg = useMemo(() => withConfigDefaults(DEFAULT_GENERATIVE_EFFECTS.dataStream, config), [config]);
+    const { particleCount } = cfg;
     const rootRef = useRef(null);
     useObjectReady(rootRef, config, onObjectReady, onObjectDispose);
-    const r = boundingRadius * streamRadius;
-    const h = boundingRadius * 2.6;
+    // Built once per particle count; every other knob is pushed into the uniforms.
     const { geometry, material } = useMemo(() => {
-        // Double the particles — half on each strand
+        // Double the particles - half on each strand
         const total = particleCount * 2;
         const tArr = new Float32Array(total);
         const offsetArr = new Float32Array(total);
@@ -118,29 +139,36 @@ const DataStreamEffect = ({ boundingRadius, config, animations, onObjectReady, o
             fragmentShader,
             uniforms: {
                 u_time: { value: 0 },
-                u_speed: { value: speed * (inward ? -1 : 1) },
-                uRadius: { value: r },
-                uTurns: { value: spiralTurns },
-                uHeight: { value: h },
-                uPointSize: { value: particleSize * 80 },
-                uIntensity: { value: intensity },
-                uOpacity: { value: opacity },
-                uColdColor: { value: new THREE.Color(coldColor) },
-                uMidColor: { value: new THREE.Color(midColor) },
-                uHotColor: { value: new THREE.Color(hotColor) },
-                uTintColor: { value: new THREE.Color(color) },
+                uFlow: { value: 0 },
+                u_speed: { value: 1 },
+                uRadius: { value: 1 },
+                uTurns: { value: 3 },
+                uHeight: { value: 2.6 },
+                uPointSize: { value: 3 },
+                uIntensity: { value: 1 },
+                uOpacity: { value: 1 },
+                uColdColor: { value: new THREE.Color() },
+                uMidColor: { value: new THREE.Color() },
+                uHotColor: { value: new THREE.Color() },
+                uTintColor: { value: new THREE.Color() },
             },
             transparent: true,
             depthWrite: false,
             blending: THREE.AdditiveBlending,
         });
         return { geometry: geo, material: mat };
-    }, [particleCount, spiralTurns, r, h, inward, particleSize, intensity, speed, opacity, coldColor, midColor, hotColor, color]);
-    useFrame((state) => {
-        material.uniforms.u_time.value = state.clock.getElapsedTime();
-        if (animations?.length) {
-            applyGenerativeAnimations([material], animations, startValuesCacheRef.current, Date.now(), false);
-        }
+    }, [particleCount]);
+    useEffect(() => () => { geometry.dispose(); material.dispose(); }, [geometry, material]);
+    const push = useCallback((merged) => {
+        applyConfig(material, merged, boundingRadius);
+    }, [material, boundingRadius]);
+    useLayoutEffect(() => { push(cfg); }, [push, cfg]);
+    useConfigDriver({ rootRef, id, family: 'effects', base: cfg, structural: STRUCTURAL, allowed: ANIMATABLE, keyframes, mouseMove, push });
+    useFrame((state, delta) => {
+        const u = material.uniforms;
+        u.u_time.value = state.clock.getElapsedTime();
+        // integrated, so changing speed (or flipping direction) never makes the stream jump
+        u.uFlow.value += Math.min(delta, 0.1) * u.u_speed.value;
     });
     return _jsx("points", { ref: rootRef, geometry: geometry, material: material });
 };

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"DnaHelixEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/DnaHelixEffect.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;AA0ED,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA0OjD,CAAC;AACF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"DnaHelixEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/DnaHelixEffect.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;AAyGD,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAqPjD,CAAC;AACF,eAAe,cAAc,CAAC"}