@3driseai/3drise-viewer 0.1.26 → 0.1.28

package/dist/components/effects/AuroraEffect.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';
 const ribbonVert = /* glsl */ `
   uniform float u_time;
   uniform float uPhase;
@@ -54,22 +56,42 @@ const ribbonFrag = /* glsl */ `
     gl_FragColor = vec4(col, alpha);
   }
 `;
-const AuroraEffect = ({ boundingRadius, config, animations, onObjectReady, onObjectDispose }) => {
-    const { ribbonCount, waveAmplitude, colorShift, arcWidth, opacity, speed, intensity } = config;
+/** Knobs that rebuild the object: commit only, never live. */
+const STRUCTURAL = ['ribbonCount'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what the push point applies. */
+const ANIMATABLE = new Set(EFFECTS_ANIMATABLE.aurora.map((p) => p.value));
+// Aurora spectrum: green -> teal -> cyan -> violet
+const HUES = [0.33, 0.38, 0.45, 0.50, 0.57, 0.65, 0.72, 0.78, 0.82, 0.87];
+/** The single push point: every config knob reaches its uniform (or the ribbon's placement) here. */
+function applyConfig(ribbons, c, r) {
+    const rad = r * 1.35;
+    for (const { mesh, mat, i, t } of ribbons) {
+        const angle = (t - 0.5) * c.arcWidth * Math.PI; // spread across arc
+        // Position ribbon in arc - tilted slightly inward to wrap over the object
+        mesh.position.set(Math.sin(angle) * rad, r * 0.55, -Math.cos(angle) * rad);
+        mesh.rotation.y = angle; // face inward
+        const u = mat.uniforms;
+        u.uWaveAmp.value = c.waveAmplitude * r * 0.55;
+        u.uHue.value = (((c.colorShift + HUES[i % HUES.length]) % 1) + 1) % 1;
+        u.uOpacity.value = c.opacity;
+        u.uIntensity.value = c.intensity;
+    }
+}
+const AuroraEffect = ({ boundingRadius, config, id, keyframes, mouseMove, onObjectReady, onObjectDispose }) => {
+    const cfg = useMemo(() => withConfigDefaults(DEFAULT_GENERATIVE_EFFECTS.aurora, config), [config]);
+    const { ribbonCount } = 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);
+    // Built once per ribbon count and host size; everything else is pushed.
     const ribbons = useMemo(() => {
         const N = Math.max(3, Math.min(ribbonCount, 10));
         const r = boundingRadius;
         const w = r * 0.9;
         const h = r * 2.2;
-        const rad = r * 1.35;
-        // Aurora spectrum: green → teal → cyan → violet
-        const hues = [0.33, 0.38, 0.45, 0.50, 0.57, 0.65, 0.72, 0.78, 0.82, 0.87];
         return Array.from({ length: N }, (_, i) => {
             const t = N === 1 ? 0.5 : i / (N - 1);
-            const angle = (t - 0.5) * arcWidth * Math.PI; // spread across arc
-            const hue = (colorShift + hues[i % hues.length]) % 1;
             const geo = new THREE.PlaneGeometry(w, h, 1, 24);
             const mat = new THREE.ShaderMaterial({
                 vertexShader: ribbonVert,
@@ -78,36 +100,34 @@ const AuroraEffect = ({ boundingRadius, config, animations, onObjectReady, onObj
                     u_time: { value: 0 },
                     uPhase: { value: i * 1.13 + t * Math.PI * 2 },
                     u_speed: { value: 0.55 + Math.random() * 0.3 },
-                    uWaveAmp: { value: waveAmplitude * r * 0.55 },
-                    uHue: { value: hue },
-                    uOpacity: { value: opacity },
-                    uIntensity: { value: intensity },
+                    uWaveAmp: { value: 0 },
+                    uHue: { value: 0 },
+                    uOpacity: { value: 1 },
+                    uIntensity: { value: 1 },
                 },
                 transparent: true,
                 depthWrite: false,
                 blending: THREE.AdditiveBlending,
                 side: THREE.DoubleSide,
             });
-            // Position ribbon in arc — tilted slightly inward to wrap over the object
             const mesh = new THREE.Mesh(geo, mat);
-            mesh.position.set(Math.sin(angle) * rad, r * 0.55, // float above object
-            -Math.cos(angle) * rad);
-            mesh.rotation.y = angle; // face inward
             mesh.rotation.x = 0.08; // slight forward tilt
-            return { mesh, mat };
+            return { mesh, mat, geo, i, t };
         });
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [ribbonCount, waveAmplitude, colorShift, arcWidth, opacity, intensity, boundingRadius]);
-    const startValuesCacheRef = useRef({});
+    }, [ribbonCount, boundingRadius]);
+    useEffect(() => () => ribbons.forEach(({ geo, mat }) => { geo.dispose(); mat.dispose(); }), [ribbons]);
+    const push = useCallback((merged) => {
+        cur.current = merged;
+        applyConfig(ribbons, merged, boundingRadius);
+    }, [ribbons, boundingRadius]);
+    useLayoutEffect(() => { push(cfg); }, [push, cfg]);
+    useConfigDriver({ rootRef: groupRef, id, family: 'effects', base: cfg, structural: STRUCTURAL, allowed: ANIMATABLE, keyframes, mouseMove, push });
     useFrame((state, delta) => {
         if (!groupRef.current)
             return;
         const t = state.clock.getElapsedTime();
         ribbons.forEach(({ mat }) => { mat.uniforms.u_time.value = t; });
-        groupRef.current.rotation.y += delta * speed * 0.06;
-        if (animations?.length) {
-            applyGenerativeAnimations(ribbons.map(({ mat }) => mat), animations, startValuesCacheRef.current, Date.now(), false);
-        }
+        groupRef.current.rotation.y += delta * cur.current.speed * 0.06;
     });
     return (_jsx("group", { ref: groupRef, children: ribbons.map(({ mesh }, i) => (_jsx("primitive", { object: mesh }, i))) }));
 };

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"BlackHoleEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/BlackHoleEffect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsD,MAAM,OAAO,CAAC;AAG3E,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAG/E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAEhE,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB;IAC1D,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,eAAe,CAAC;IACxB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC;AA2PD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA6FnD,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"BlackHoleEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/BlackHoleEffect.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;AAgRD,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA4FnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

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"}