@3driseai/3drise-viewer 0.1.26 → 0.1.28

package/dist/components/VoronoiGrid.d.ts

@@ -1,21 +1,19 @@
 import type { ThreeElements } from '@react-three/fiber';
 import type { ObjectReadyProps } from '../types/objectReady';
 import type { VoronoiGridConfig } from '../types/gridConfigs';
+import type { AnimationOptions, MouseMoveDomain } from '@3driseai/3drise-core';
 export interface VoronoiGridProps extends ObjectReadyProps {
     config?: VoronoiGridConfig;
     groupProps?: ThreeElements['group'];
+    /** Scene object id: the live-edit handle is found by it. */
+    id?: string;
+    /** Keyframes on this grid's config knobs (animations.grid.animations). */
+    keyframes?: AnimationOptions[];
+    /** Pointer bindings on this grid's config knobs (mouseMove.grid). */
+    mouseMove?: MouseMoveDomain;
 }
 /** VoronoiGridConfig — the single source of truth for a Voronoi grid instance. */
 export declare const defaultVoronoiGridConfig: VoronoiGridConfig;
-/**
- * An irregular cellular lattice on a shader plane.
- *
- * Seeds drift over time, so the whole lattice slowly morphs rather than
- * animating in place. `jitter` runs from a regular square lattice (0) to fully
- * scattered (1); `drift` sets how far the seeds wander. `sectionWidth` draws
- * the cell nuclei, `sectionSize` groups cells into clusters that share an
- * accent colour. With `displace > 0` the surface breaks into irregular plates.
- */
-export declare function VoronoiGrid({ config, groupProps, onObjectReady, onObjectDispose }: VoronoiGridProps): import("react").JSX.Element;
+export declare function VoronoiGrid({ config, groupProps, id, keyframes, mouseMove, onObjectReady, onObjectDispose }: VoronoiGridProps): import("react").JSX.Element;
 export default VoronoiGrid;
 //# sourceMappingURL=VoronoiGrid.d.ts.map

package/dist/components/VoronoiGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VoronoiGrid.d.ts","sourceRoot":"","sources":["../../src/components/VoronoiGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAIxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAG9D,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;IACtD,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,UAAU,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;CACvC;AAKD,kFAAkF;AAClF,eAAO,MAAM,wBAAwB,EAAE,iBA2BtC,CAAC;AAEF;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EAAE,MAAiC,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,EAAE,gBAAgB,+BAgE9H;AAED,eAAe,WAAW,CAAC"}
+{"version":3,"file":"VoronoiGrid.d.ts","sourceRoot":"","sources":["../../src/components/VoronoiGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAOxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE/E,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;IACtD,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,UAAU,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACpC,4DAA4D;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0EAA0E;IAC1E,SAAS,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC/B,qEAAqE;IACrE,SAAS,CAAC,EAAE,eAAe,CAAC;CAC/B;AAKD,kFAAkF;AAClF,eAAO,MAAM,wBAAwB,EAAE,iBA2BtC,CAAC;AAoBF,wBAAgB,WAAW,CAAC,EAAE,MAAiC,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,eAAe,EAAE,EAAE,gBAAgB,+BA6CxJ;AAED,eAAe,WAAW,CAAC"}

package/dist/components/VoronoiGrid.js

@@ -1,9 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useRef } from 'react';
+import { useCallback, useLayoutEffect, useMemo, useRef } from 'react';
 import * as THREE from 'three';
 import { useObjectReady } from '../hooks/useObjectReady.js';
 import { useGridSurface } from '../hooks/useGridSurface.js';
-import { VoronoiGridMaterial } 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 { VoronoiGridMaterial, GRIDS_ANIMATABLE } from '@3driseai/3drise-core';
 // Side-effect import registers <voronoiGridMaterial> via extend().
 void VoronoiGridMaterial;
 /** VoronoiGridConfig — the single source of truth for a Voronoi grid instance. */
@@ -44,24 +47,39 @@ export const defaultVoronoiGridConfig = {
  * the cell nuclei, `sectionSize` groups cells into clusters that share an
  * accent colour. With `displace > 0` the surface breaks into irregular plates.
  */
-export function VoronoiGrid({ config = defaultVoronoiGridConfig, groupProps, onObjectReady, onObjectDispose }) {
+/** This grid's own uniforms (u_<key>), pushed by applyGridConfig beside the shared surface knobs. */
+const VARIANT = ['jitter', 'drift'];
+/** 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];
+/** Knobs a keyframe or pointer binding may drive per frame — exactly what applyGridConfig pushes. */
+const ANIMATABLE = new Set((GRIDS_ANIMATABLE.voronoiGrid ?? []).map((p) => p.value));
+export function VoronoiGrid({ config = defaultVoronoiGridConfig, 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, jitter, drift, 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(defaultVoronoiGridConfig, config), [config]);
+    const { cellSize, size, segments, flat, displace, followMouse, reveal, revealDuration } = base;
     const segs = segments ?? (displace > 0
         ? Math.min(384, Math.max(96, Math.ceil(size / Math.max(cellSize, 1e-4)) * 6))
         : 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 });
-    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("voronoiGridMaterial", { 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_jitter: jitter, u_drift: drift, u_lineColor: colors.line, u_sectionColor: colors.section, u_cellColor: colors.cell, u_glowColor: colors.glow, u_bgColor: colors.bg, u_bgOpacity: bgOpacity }, VoronoiGridMaterial.key)] }) }));
+    // 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 });
+    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("voronoiGridMaterial", { ref: setMaterial, transparent: true, depthWrite: false, blending: THREE.AdditiveBlending, side: THREE.DoubleSide }, VoronoiGridMaterial.key)] }) }));
 }
 export default VoronoiGrid;

package/dist/components/WallpaperGrid.d.ts

@@ -1,15 +1,22 @@
 import type { ThreeElements } from '@react-three/fiber';
 import type { ObjectReadyProps } from '../types/objectReady';
 import type { WallpaperGridConfig } from '../types/gridConfigs';
+import type { AnimationOptions, MouseMoveDomain } from '@3driseai/3drise-core';
 export interface WallpaperGridProps extends ObjectReadyProps {
     config?: WallpaperGridConfig;
     groupProps?: ThreeElements['group'];
+    /** Scene object id: the live-edit handle is found by it. */
+    id?: string;
+    /** Keyframes on this grid's config knobs (animations.grid.animations). */
+    keyframes?: AnimationOptions[];
+    /** Pointer bindings on this grid's config knobs (mouseMove.grid). */
+    mouseMove?: MouseMoveDomain;
 }
 /** WallpaperGridConfig defaults. Must match the catalog entry in grid-defaults.json exactly. */
 export declare const defaultWallpaperGridConfig: WallpaperGridConfig;
 /**
  * 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 declare function WallpaperGrid({ config, groupProps, onObjectReady, onObjectDispose }: WallpaperGridProps): import("react").JSX.Element;
+export declare function WallpaperGrid({ config, groupProps, id, keyframes, mouseMove, onObjectReady, onObjectDispose }: WallpaperGridProps): import("react").JSX.Element;
 export default WallpaperGrid;
 //# sourceMappingURL=WallpaperGrid.d.ts.map

package/dist/components/WallpaperGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WallpaperGrid.d.ts","sourceRoot":"","sources":["../../src/components/WallpaperGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAKxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAGhE,MAAM,WAAW,kBAAmB,SAAQ,gBAAgB;IACxD,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,UAAU,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;CACvC;AAKD,gGAAgG;AAChG,eAAO,MAAM,0BAA0B,EAAE,mBA6BxC,CAAC;AAocF;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAE,MAAmC,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,EAAE,EAAE,kBAAkB,+BAgFpI;AAED,eAAe,aAAa,CAAC"}
+{"version":3,"file":"WallpaperGrid.d.ts","sourceRoot":"","sources":["../../src/components/WallpaperGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAQxD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAEhE,OAAO,KAAK,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAE/E,MAAM,WAAW,kBAAmB,SAAQ,gBAAgB;IACxD,MAAM,CAAC,EAAE,mBAAmB,CAAC;IAC7B,UAAU,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACpC,4DAA4D;IAC5D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,0EAA0E;IAC1E,SAAS,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC/B,qEAAqE;IACrE,SAAS,CAAC,EAAE,eAAe,CAAC;CAC/B;AAKD,gGAAgG;AAChG,eAAO,MAAM,0BAA0B,EAAE,mBA6BxC,CAAC;AAkQF;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAE,MAAmC,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,SAAS,EAAE,aAAa,EAAE,eAAe,EAAE,EAAE,kBAAkB,+BA0D9J;AAED,eAAe,aAAa,CAAC"}

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