@3driseai/3drise-viewer 0.1.26 → 0.1.27

package/dist/components/WallpaperGrid.js

@@ -1,10 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef } from 'react';
+import { useEffect, useMemo, useRef, useCallback, useLayoutEffect } from 'react';
 import * as THREE from 'three';
 import { useFrame } from '@react-three/fiber';
 import { useObjectReady } from '../hooks/useObjectReady.js';
 import { useGridSurface } from '../hooks/useGridSurface.js';
-import { WallpaperGridMaterial } from '@3driseai/3drise-core';
+import { useConfigDriver } from '../hooks/useConfigDriver.js';
+import { withConfigDefaults } from '../utils/configAnimations.js';
+import { applyGridConfig, GRID_STRUCTURAL } from '../utils/gridConfig.js';
+import { WallpaperGridMaterial, GRIDS_ANIMATABLE } from '@3driseai/3drise-core';
 // Side-effect import registers <wallpaperGridMaterial> via extend().
 void WallpaperGridMaterial;
 /** WallpaperGridConfig defaults. Must match the catalog entry in grid-defaults.json exactly. */
@@ -38,124 +41,6 @@ export const defaultWallpaperGridConfig = {
     reveal: 1,
     revealDuration: 0,
 };
-const gridFragHeader = /* glsl */ `
-  precision highp float;
-
-  uniform float u_time;
-  uniform float u_cellSize;
-  uniform float u_lineWidth;
-  uniform float u_sectionSize;
-  uniform float u_sectionWidth;
-  uniform vec3  u_lineColor;
-  uniform vec3  u_sectionColor;
-  uniform vec3  u_cellColor;
-  uniform vec3  u_glowColor;
-  uniform vec3  u_bgColor;
-  uniform float u_bgOpacity;
-  uniform float u_lineMode;
-  uniform float u_cellMode;
-  uniform float u_animSpeed;
-  uniform float u_animScale;
-  uniform float u_animIntensity;
-  uniform float u_fadeDistance;
-  uniform float u_fadeStrength;
-  uniform vec2  u_focus;
-  uniform float u_reveal;
-
-  varying vec2 vGridPos;
-
-  float lineAt(float c, float width, float fp){
-    float d = abs(fract(c - 0.5) - 0.5);
-    return 1.0 - clamp(d / max(fp * max(width, 0.05), 1e-6), 0.0, 1.0);
-  }
-`;
-const gridCommon = /* glsl */ `
-  const float PI  = 3.14159265359;
-  const float TAU = 6.28318530718;
-
-  float hash21(vec2 p){
-    p = fract(p * vec2(123.34, 456.21));
-    p += dot(p, p + 45.32);
-    return fract(p.x * p.y);
-  }
-`;
-const gridTail = /* glsl */ `
-    // ---- line animation --------------------------------------------------
-    float lineAnim = 1.0;
-    if (u_lineMode > 0.5){
-      if (u_lineMode < 1.5){
-        lineAnim = 0.5 + 0.5 * sin(cellDist * u_animScale - t);
-      } else if (u_lineMode < 2.5){
-        lineAnim = 0.5 + 0.5 * sin(flowCoord * u_animScale - t);
-      } else if (u_lineMode < 3.5){
-        float s = fract(scanCoord * 0.05 * u_animScale - t * 0.15);
-        lineAnim = 0.25 + smoothstep(0.0, 0.15, s) * (1.0 - smoothstep(0.15, 0.35, s));
-      } else {
-        lineAnim = 0.5 + 0.5 * sin(t);
-      }
-    }
-    lineAnim = mix(1.0, lineAnim, u_animIntensity);
-
-    // ---- cell fill -------------------------------------------------------
-    float cell = 0.0;
-    if (u_cellMode > 0.5){
-      if (u_cellMode < 1.5){
-        cell = 0.5 + 0.5 * sin(flowCoord * 0.5 * u_animScale - t);
-      } else if (u_cellMode < 2.5){
-        cell = 0.5 + 0.5 * sin(t * (0.6 + cellH) + cellH * TAU);
-      } else if (u_cellMode < 3.5){
-        cell = smoothstep(0.6, 1.0, sin(cellDist * u_animScale - t));
-      } else {
-        cell = step(0.5, cellH) * (0.5 + 0.5 * sin(t));
-      }
-    }
-    cell *= u_animIntensity * edgeKeep;
-
-    float tone = step(0.55, cellH);
-
-    vec3 col = u_bgColor * u_bgOpacity;
-    float a  = u_bgOpacity;
-
-    col += mix(u_cellColor, u_cellColor * 2.2, tone) * cell;
-    a = max(a, cell * 0.9);
-    float linesI = lines * lineAnim;
-    col += u_lineColor * linesI;            a = max(a, linesI);
-    float accentI = accent * lineAnim;
-    col += u_sectionColor * accentI;        a = max(a, accentI);
-    col += u_glowColor * (linesI * 0.2 + cell * 0.35) * u_animIntensity;
-
-    col = col * regionMask + extraCol;
-    a   = max(a * regionMask, extraA);
-
-    float fade = 1.0 - smoothstep(1.0 - u_fadeStrength, 1.0, fadeR);
-    col *= fade;
-    a   *= fade;
-
-    // ---- reveal ----------------------------------------------------------
-    // The build boundary sweeps outward from the focus point with a bright
-    // leading edge, so the grid reads as assembling itself.
-    if (u_reveal < 0.999){
-      float rd = length(vGridPos - u_focus) / max(u_fadeDistance, 1e-4);
-      float edge = u_reveal * 1.1;
-      float mask = 1.0 - smoothstep(edge - 0.05, edge, rd);
-      float front = mask * smoothstep(edge - 0.22, edge - 0.05, rd);
-      col = col * mask + u_glowColor * front * (a * 1.8 + 0.08);
-      a   = max(a * mask, front * 0.10);
-    }
-
-    if (a < 0.002) discard;
-    gl_FragColor = vec4(col, a);
-  }
-`;
-const gridVertexHead = /* glsl */ `
-  uniform float u_time;
-  uniform float u_cellSize;
-  uniform float u_displace;
-  uniform float u_animSpeed;
-  uniform float u_animScale;
-
-  varying vec2 vGridPos;
-`;
 // ---------------------------------------------------------------------------
 // The 17 wallpaper groups (Farris, "Creating Symmetry").
 // Each group is listed by its ITA general positions in lattice coordinates:
@@ -363,29 +248,6 @@ function wallpaperRms(tab, wave, sk, sre, sim) {
         sum += sre[s] * sre[s] + sim[s] * sim[s];
     return Math.sqrt(sum * 0.5);
 }
-function createExtraUniforms() {
-    return {
-        u_wave: { value: new Float32Array(12) },
-        u_RA: { value: new Float32Array(48) },
-        u_TA: { value: new Float32Array(24) },
-        u_countA: { value: 1 },
-        u_basisA: { value: new Float32Array([1, 0, 0, 1]) },
-        u_normA: { value: 1 },
-        u_axA: { value: new Float32Array(24) },
-        u_axKA: { value: new Float32Array(18) },
-        u_axNA: { value: 0 },
-        u_RB: { value: new Float32Array(48) },
-        u_TB: { value: new Float32Array(24) },
-        u_countB: { value: 1 },
-        u_basisB: { value: new Float32Array([1, 0, 0, 1]) },
-        u_normB: { value: 1 },
-        u_axB: { value: new Float32Array(24) },
-        u_axKB: { value: new Float32Array(18) },
-        u_axNB: { value: 0 },
-        u_mix: { value: 0 },
-        u_mixGain: { value: 1 },
-    };
-}
 function createRuntime(u, renderer, c) {
     const tables = [];
     for (let i = 0; i < 17; i++)
@@ -460,80 +322,41 @@ function updateRuntime(rt, u, c, dt, renderer) {
 function disposeRuntime(rt) {
     rt.tables.length = 0;
 }
-// ---------------------------------------------------------------------------
-// Farris' recipe: a lattice-periodic motif m(q) summed over the coset
-// representatives g of a wallpaper group, F(p) = sum_g m(g.q), q = B^-1 p.
-// For any h in the group, {g h} runs over the same cosets, and m ignores
-// lattice translations, so F(h.p) = F(p) exactly: the picture has precisely
-// the group's mirrors, glides and rotation centres, and tiles seamlessly.
-// Level sets of F are the lines; its value bands are the cells.
-// ---------------------------------------------------------------------------
-const wallpaperField = /* glsl */ `
-  uniform vec2  u_wave[6];
-  uniform mat2  u_RA[12];
-  uniform vec2  u_TA[12];
-  uniform float u_countA;
-  uniform mat2  u_basisA;
-  uniform float u_normA;
-  uniform mat2  u_RB[12];
-  uniform vec2  u_TB[12];
-  uniform float u_countB;
-  uniform mat2  u_basisB;
-  uniform float u_normB;
-  uniform float u_mix;
-  uniform float u_mixGain;
-
-  float wpMotif(vec2 q){
-    vec2 a = TAU * q;
-    return u_wave[0].x * cos(dot(a, vec2(1.0, 1.0)) + u_wave[0].y)
-         + u_wave[1].x * cos(dot(a, vec2(2.0, 0.0)) + u_wave[1].y)
-         + u_wave[2].x * cos(dot(a, vec2(1.0, -2.0)) + u_wave[2].y)
-         + u_wave[3].x * cos(dot(a, vec2(2.0, 1.0)) + u_wave[3].y)
-         + u_wave[4].x * cos(dot(a, vec2(3.0, 1.0)) + u_wave[4].y)
-         + u_wave[5].x * cos(dot(a, vec2(1.0, 3.0)) + u_wave[5].y);
-  }
-
-  float wpSym(vec2 p, mat2 Bi, mat2 R[12], vec2 T[12], float n){
-    vec2 q = Bi * p;
-    q -= floor(q);
-    float s = 0.0;
-    for (int i = 0; i < 12; i++){
-      if (float(i) >= n) break;
-      s += wpMotif(R[i] * q + T[i]);
-    }
-    return s;
-  }
-
-  // unit-RMS field, crossfaded between group A and group B
-  float wpField(vec2 p){
-    float f = wpSym(p, u_basisA, u_RA, u_TA, u_countA) * u_normA;
-    if (u_mix > 0.001){
-      float g = wpSym(p, u_basisB, u_RB, u_TB, u_countB) * u_normB;
-      f = mix(f, g, u_mix) * u_mixGain;
-    }
-    return f;
-  }
-`;
+/** This grid's own uniforms (u_<key>), pushed by applyGridConfig beside the shared surface knobs. */
+const VARIANT = ['group', 'cycleTime', 'motif', 'levels'];
+/** No computed uniforms: every knob maps straight to its u_<key>. */
+const DERIVE = {};
+/** Knobs that rebuild the plane or pick a mode: they change on commit, never through the live path. */
+const STRUCTURAL = [...GRID_STRUCTURAL, 'group', 'levels'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what applyGridConfig pushes. */
+const ANIMATABLE = new Set((GRIDS_ANIMATABLE.wallpaperGrid ?? []).map((p) => p.value));
 /**
  * Wallpaper-group kaleidoscope: a drifting lattice-periodic Fourier motif summed over the coset representatives of one of the 17 plane crystallographic groups. The runtime builds the group tables and crossfades from group to group.
  */
-export function WallpaperGrid({ config = defaultWallpaperGridConfig, groupProps, onObjectReady, onObjectDispose }) {
+export function WallpaperGrid({ config = defaultWallpaperGridConfig, groupProps, id, keyframes, mouseMove, onObjectReady, onObjectDispose }) {
     const matRef = useRef(null);
     const rootRef = useRef(null);
     const meshRef = useRef(null);
     useObjectReady(rootRef, config, onObjectReady, onObjectDispose);
-    const { cellSize, size, segments, flat, lineMode, cellMode, lineWidth, sectionSize, sectionWidth, animSpeed, animScale, animIntensity, fadeDistance, fadeStrength, displace, group, cycleTime, motif, levels, lineColor, sectionColor, cellColor, glowColor, bgColor, bgOpacity, followMouse, reveal, revealDuration, } = config;
+    // The committed config over this grid's defaults: every knob has a value to render
+    // and for a keyframe or pointer binding to start from.
+    const base = useMemo(() => withConfigDefaults(defaultWallpaperGridConfig, config), [config]);
+    const { cellSize, size, segments, flat, displace, followMouse, reveal, revealDuration } = base;
     // the motif has up to ~3 waves per unit cell, so 16 vertices per cell keep the displaced relief smooth
     const segs = segments ?? (displace > 0 ? Math.min(512, Math.max(96, Math.ceil(size / Math.max(cellSize, 1e-4)) * 16)) : 1);
-    const fade = fadeDistance ?? size * 0.5;
-    const colors = useMemo(() => ({
-        line: new THREE.Color(lineColor),
-        section: new THREE.Color(sectionColor),
-        cell: new THREE.Color(cellColor),
-        glow: new THREE.Color(glowColor),
-        bg: new THREE.Color(bgColor),
-    }), [lineColor, sectionColor, cellColor, glowColor, bgColor]);
     useGridSurface(matRef, meshRef, { followMouse, reveal, revealDuration });
+    // One push point for every uniform the config owns: the committed config when the
+    // material mounts or the config commits, the merged one while anything overrides it.
+    const baseRef = useRef(base);
+    baseRef.current = base;
+    const setMaterial = useCallback((m) => {
+        matRef.current = m;
+        if (m)
+            applyGridConfig(m, baseRef.current, VARIANT, DERIVE);
+    }, []);
+    useLayoutEffect(() => { applyGridConfig(matRef.current, base, VARIANT, DERIVE); }, [base]);
+    const push = useCallback((merged) => applyGridConfig(matRef.current, merged, VARIANT, DERIVE), []);
+    useConfigDriver({ rootRef, id, family: 'grids', base, structural: STRUCTURAL, allowed: ANIMATABLE, keyframes, mouseMove, push });
     // the simulation behind this grid: created on mount, stepped every frame
     const runtimeRef = useRef(null);
     useFrame((state, delta) => {
@@ -541,8 +364,8 @@ export function WallpaperGrid({ config = defaultWallpaperGridConfig, groupProps,
         if (!mat)
             return;
         if (!runtimeRef.current)
-            runtimeRef.current = createRuntime(mat.uniforms, state.gl, config);
-        updateRuntime(runtimeRef.current, mat.uniforms, config, Math.min(delta, 0.1), state.gl);
+            runtimeRef.current = createRuntime(mat.uniforms, state.gl, base);
+        updateRuntime(runtimeRef.current, mat.uniforms, base, Math.min(delta, 0.1), state.gl);
     });
     useEffect(() => () => {
         if (runtimeRef.current) {
@@ -550,6 +373,6 @@ export function WallpaperGrid({ config = defaultWallpaperGridConfig, groupProps,
             runtimeRef.current = null;
         }
     }, []);
-    return (_jsx("group", { ref: rootRef, ...groupProps, children: _jsxs("mesh", { ref: meshRef, rotation: flat ? [-Math.PI / 2, 0, 0] : [0, 0, 0], children: [_jsx("planeGeometry", { args: [size, size, segs, segs] }), _jsx("wallpaperGridMaterial", { ref: matRef, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, side: THREE.DoubleSide, u_cellSize: cellSize, u_lineWidth: lineWidth, u_sectionSize: sectionSize, u_sectionWidth: sectionWidth, u_lineMode: lineMode, u_cellMode: cellMode, u_animSpeed: animSpeed, u_animScale: animScale, u_animIntensity: animIntensity, u_fadeDistance: fade, u_fadeStrength: fadeStrength, u_displace: displace, u_group: group, u_cycleTime: cycleTime, u_motif: motif, u_levels: levels, u_lineColor: colors.line, u_sectionColor: colors.section, u_cellColor: colors.cell, u_glowColor: colors.glow, u_bgColor: colors.bg, u_bgOpacity: bgOpacity }, WallpaperGridMaterial.key)] }) }));
+    return (_jsx("group", { ref: rootRef, ...groupProps, children: _jsxs("mesh", { ref: meshRef, rotation: flat ? [-Math.PI / 2, 0, 0] : [0, 0, 0], children: [_jsx("planeGeometry", { args: [size, size, segs, segs] }), _jsx("wallpaperGridMaterial", { ref: setMaterial, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, side: THREE.DoubleSide }, WallpaperGridMaterial.key)] }) }));
 }
 export default WallpaperGrid;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"AuraEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/AuraEffect.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE1E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,UAAU,eAAgB,SAAQ,gBAAgB;IAC9C,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,UAAU,CAAC;IACnB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC;AAgFD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA6CzC,CAAC;AACF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"AuraEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/AuraEffect.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,UAAU,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAG3F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,MAAM,WAAW,eAAgB,SAAQ,gBAAgB;IACrD,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,UAAU,CAAC;IACnB,mFAAmF;IACnF,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,8EAA8E;IAC9E,SAAS,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC/B,yEAAyE;IACzE,SAAS,CAAC,EAAE,eAAe,CAAC;CAC/B;AAyGD,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAkDzC,CAAC;AACF,eAAe,UAAU,CAAC"}

package/dist/components/effects/AuraEffect.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 vertexShader = /* glsl */ `
   varying vec3 vNormal;
   varying vec3 vViewDir;
@@ -21,6 +23,7 @@ const fragmentShader = /* glsl */ `
   uniform float u_time;
   uniform float uFresnelPower;
   uniform float uPulseSpeed;
+  uniform float uPulsePhase;  // integrated on the CPU: pulse speed changes never jump
   uniform float uNoiseAmount;
   uniform float uOpacity;
   uniform float uLayerIndex;  // 0..1
@@ -70,7 +73,7 @@ const fragmentShader = /* glsl */ `
     float tendrils = smoothstep(0.60, 0.75, f + uLayerIndex * 0.05);
 
     // ── Pulse per layer (staggered phase) ──────────────────────────────────
-    float pulse = 0.65 + 0.35 * sin(u_time * uPulseSpeed + uLayerIndex * 2.1);
+    float pulse = 0.65 + 0.35 * sin(uPulsePhase + uLayerIndex * 2.1);
 
     // ── Combine ────────────────────────────────────────────────────────────
     float noiseBlend = (1.0 - uNoiseAmount) + uNoiseAmount * f;
@@ -81,42 +84,64 @@ const fragmentShader = /* glsl */ `
     gl_FragColor = vec4(col, alpha);
   }
 `;
-const AuraEffect = ({ boundingRadius, config, animations, onObjectReady, onObjectDispose }) => {
-    const { layerCount, fresnelPower, pulseSpeed, innerColor, outerColor, noiseAmount, sizeMultiplier, opacity, speed, intensity } = config;
-    const startValuesCacheRef = useRef({});
+/** Knobs that rebuild the object (layer count, shell radii): commit only, never live. */
+const STRUCTURAL = ['layerCount', 'sizeMultiplier'];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what applyConfig pushes. */
+const ANIMATABLE = new Set(EFFECTS_ANIMATABLE.aura.map((p) => p.value));
+const _color = new THREE.Color();
+const _hsl = { h: 0, s: 0, l: 0 };
+/** The single push point: every config knob reaches its uniform here. */
+function applyConfig(materials, c) {
+    // one base hue, derived from the inner colour
+    _color.set(c.innerColor).getHSL(_hsl);
+    for (const m of materials) {
+        const u = m.uniforms;
+        u.uFresnelPower.value = c.fresnelPower;
+        u.uPulseSpeed.value = c.pulseSpeed * c.speed;
+        u.uNoiseAmount.value = c.noiseAmount;
+        u.uOpacity.value = c.opacity;
+        u.uBaseHue.value = _hsl.h;
+        u.uIntensity.value = c.intensity;
+    }
+}
+const AuraEffect = ({ boundingRadius, config, id, keyframes, mouseMove, onObjectReady, onObjectDispose }) => {
+    const cfg = useMemo(() => withConfigDefaults(DEFAULT_GENERATIVE_EFFECTS.aura, config), [config]);
+    const { layerCount, sizeMultiplier } = cfg;
     const rootRef = useRef(null);
     useObjectReady(rootRef, config, onObjectReady, onObjectDispose);
-    // Derive a single base hue from the innerColor
-    const baseHue = useMemo(() => {
-        const c = new THREE.Color(innerColor);
-        const h = { h: 0, s: 0, l: 0 };
-        c.getHSL(h);
-        return h.h;
-    }, [innerColor]);
+    // Built once per layer count; every other knob is pushed into the uniforms.
     const materials = useMemo(() => Array.from({ length: layerCount }, (_, i) => new THREE.ShaderMaterial({
         vertexShader,
         fragmentShader,
         uniforms: {
             u_time: { value: 0 },
-            uFresnelPower: { value: fresnelPower },
-            uPulseSpeed: { value: pulseSpeed * speed },
-            uNoiseAmount: { value: noiseAmount },
-            uOpacity: { value: opacity },
+            uPulsePhase: { value: 0 },
+            uFresnelPower: { value: 3 },
+            uPulseSpeed: { value: 1 },
+            uNoiseAmount: { value: 0.3 },
+            uOpacity: { value: 1 },
             uLayerIndex: { value: layerCount > 1 ? i / (layerCount - 1) : 0 },
-            uBaseHue: { value: baseHue },
-            uIntensity: { value: intensity },
+            uBaseHue: { value: 0 },
+            uIntensity: { value: 1 },
         },
         transparent: true,
         depthWrite: false,
         blending: THREE.AdditiveBlending,
         side: THREE.BackSide,
-    })), [layerCount, fresnelPower, pulseSpeed, speed, noiseAmount, opacity, baseHue, intensity]);
-    useFrame((state) => {
+    })), [layerCount]);
+    useEffect(() => () => materials.forEach((m) => m.dispose()), [materials]);
+    const push = useCallback((merged) => {
+        applyConfig(materials, merged);
+    }, [materials]);
+    useLayoutEffect(() => { push(cfg); }, [push, cfg]);
+    useConfigDriver({ rootRef, id, family: 'effects', base: cfg, structural: STRUCTURAL, allowed: ANIMATABLE, keyframes, mouseMove, push });
+    useFrame((state, delta) => {
         const t = state.clock.getElapsedTime();
-        for (const mat of materials)
+        const dt = Math.min(delta, 0.1);
+        for (const mat of materials) {
             mat.uniforms.u_time.value = t;
-        if (animations?.length) {
-            applyGenerativeAnimations(materials, animations, startValuesCacheRef.current, Date.now(), false);
+            // integrated, so changing the pulse speed never makes the phase jump
+            mat.uniforms.uPulsePhase.value += dt * mat.uniforms.uPulseSpeed.value;
         }
     });
     const baseR = boundingRadius * sizeMultiplier;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"AuroraEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/AuroraEffect.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAE5E,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,UAAU,iBAAkB,SAAQ,gBAAgB;IAChD,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,YAAY,CAAC;IACrB,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAC;CACnC;AAqDD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAwD7C,CAAC;AACF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"AuroraEffect.d.ts","sourceRoot":"","sources":["../../../src/components/effects/AuroraEffect.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAG7F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAChE,MAAM,WAAW,iBAAkB,SAAQ,gBAAgB;IACvD,cAAc,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,YAAY,CAAC;IACrB,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;AAgFD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAuD7C,CAAC;AACF,eAAe,YAAY,CAAC"}

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