@flikk/ui 1.0.0-beta.3 → 1.0.0-beta.30

package/dist/components/effects/AIOrb/variants/DotSphere/DotSphere.impl.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { DotSphereProps } from "./DotSphere.types";
+export declare const DotSphereImpl: React.FC<DotSphereProps>;

package/dist/components/effects/AIOrb/variants/DotSphere/DotSphere.impl.js

@@ -0,0 +1,176 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useRef, useMemo, useEffect } from 'react';
+import { Canvas, useFrame } from '@react-three/fiber';
+import { useReducedMotion } from 'motion/react';
+import { Color, OneFactor, ZeroFactor, AddEquation, CustomBlending, BackSide } from 'three';
+import { waveFragment, waveVertex, dotSphereFragment, dotSphereVertex, glowFragment, glowVertex } from './DotSphere.shaders.js';
+import { useOrbState } from '../../hooks/useOrbState.js';
+
+const STATE_CONFIG = {
+    idle: { speed: 0.3, glowIntensity: 0.6, rimIntensity: 1.0 },
+    listening: { speed: 0.6, glowIntensity: 1.0, rimIntensity: 1.5 },
+    thinking: { speed: 1.2, glowIntensity: 1.4, rimIntensity: 2.0 },
+    speaking: { speed: 0.8, glowIntensity: 1.2, rimIntensity: 1.8 },
+};
+const OrbScene = ({ colors, speed, gridDensity, dotSize, rimIntensity, glowIntensity, glowSize, state, }) => {
+    const shouldReduceMotion = useReducedMotion();
+    const groupRef = useRef(null);
+    const dotMatRef = useRef(null);
+    const innerGlowRef = useRef(null);
+    const outerGlowRef = useRef(null);
+    const waveDeepRef = useRef(null);
+    const waveSurfaceRef = useRef(null);
+    // Colour objects (rebuilt only when hex strings change)
+    const [c1, c2, c3] = colors;
+    const colorObjs = useMemo(() => ({
+        c1: new Color(c1),
+        c2: new Color(c2),
+        c3: new Color(c3),
+    }), [c1, c2, c3]);
+    // ── Uniforms – created once, mutated in useFrame / useEffect ──────────
+    const dotUniforms = useMemo(() => ({
+        u_time: { value: 0 },
+        u_color1: { value: colorObjs.c1.clone() },
+        u_color2: { value: colorObjs.c2.clone() },
+        u_color3: { value: colorObjs.c3.clone() },
+        u_dotSize: { value: dotSize },
+        u_gridDensity: { value: gridDensity },
+        u_rimIntensity: { value: rimIntensity },
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    const innerGlowUniforms = useMemo(() => ({
+        u_time: { value: 0 },
+        u_color1: { value: colorObjs.c1.clone() },
+        u_color2: { value: colorObjs.c2.clone() },
+        u_color3: { value: colorObjs.c3.clone() },
+        u_intensity: { value: glowIntensity * 0.8 },
+        u_falloff: { value: 2.0 },
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    const outerGlowUniforms = useMemo(() => ({
+        u_time: { value: 0 },
+        u_color1: { value: colorObjs.c1.clone() },
+        u_color2: { value: colorObjs.c2.clone() },
+        u_color3: { value: colorObjs.c3.clone() },
+        u_intensity: { value: glowIntensity * 0.55 },
+        u_falloff: { value: 1.0 },
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    // Deep wave layer – large glowing blobs in the core
+    const waveDeepUniforms = useMemo(() => ({
+        u_time: { value: 0 },
+        u_color1: { value: colorObjs.c1.clone() },
+        u_color2: { value: colorObjs.c2.clone() },
+        u_color3: { value: colorObjs.c3.clone() },
+        u_intensity: { value: 1.2 },
+        u_noiseScale: { value: 1.5 },
+        u_flowSpeed: { value: 1.8 },
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    // Surface wave layer – finer, faster glowing patterns near the shell
+    const waveSurfaceUniforms = useMemo(() => ({
+        u_time: { value: 0 },
+        u_color1: { value: colorObjs.c1.clone() },
+        u_color2: { value: colorObjs.c2.clone() },
+        u_color3: { value: colorObjs.c3.clone() },
+        u_intensity: { value: 0.9 },
+        u_noiseScale: { value: 2.5 },
+        u_flowSpeed: { value: 2.5 },
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    // ── State-driven interpolation ─────────────────────────────────────────
+    const stateProps = useMemo(() => ({ speed, glowIntensity, rimIntensity }), [speed, glowIntensity, rimIntensity]);
+    const { valuesRef: stateRef, tick: stateTick } = useOrbState(state, STATE_CONFIG, stateProps);
+    // ── Sync prop changes → uniforms ──────────────────────────────────────
+    useEffect(() => {
+        // Dot sphere
+        if (dotMatRef.current) {
+            const u = dotMatRef.current.uniforms;
+            u.u_color1.value.copy(colorObjs.c1);
+            u.u_color2.value.copy(colorObjs.c2);
+            u.u_color3.value.copy(colorObjs.c3);
+            u.u_dotSize.value = dotSize;
+            u.u_gridDensity.value = gridDensity;
+            u.u_rimIntensity.value = rimIntensity;
+        }
+        // Glow layers
+        for (const ref of [innerGlowRef, outerGlowRef]) {
+            if (ref.current) {
+                ref.current.uniforms.u_color1.value.copy(colorObjs.c1);
+                ref.current.uniforms.u_color2.value.copy(colorObjs.c2);
+                ref.current.uniforms.u_color3.value.copy(colorObjs.c3);
+            }
+        }
+        if (innerGlowRef.current)
+            innerGlowRef.current.uniforms.u_intensity.value = glowIntensity * 0.8;
+        if (outerGlowRef.current)
+            outerGlowRef.current.uniforms.u_intensity.value = glowIntensity * 0.55;
+        // Wave layers
+        for (const ref of [waveDeepRef, waveSurfaceRef]) {
+            if (ref.current) {
+                ref.current.uniforms.u_color1.value.copy(colorObjs.c1);
+                ref.current.uniforms.u_color2.value.copy(colorObjs.c2);
+                ref.current.uniforms.u_color3.value.copy(colorObjs.c3);
+            }
+        }
+    }, [colorObjs, dotSize, gridDensity, rimIntensity, glowIntensity]);
+    // ── Animation loop ────────────────────────────────────────────────────
+    useFrame(({ clock }, delta) => {
+        // Tick state interpolation
+        stateTick(delta);
+        const sv = stateRef.current;
+        // Freezing `t` at 0 settles every u_time-driven material at its baseline
+        // pose instead of continuing to animate, per prefers-reduced-motion.
+        const t = shouldReduceMotion ? 0 : clock.getElapsedTime() * sv.speed;
+        // Sync interpolated rimIntensity / glowIntensity into uniforms
+        if (dotMatRef.current) {
+            dotMatRef.current.uniforms.u_rimIntensity.value = sv.rimIntensity;
+        }
+        if (innerGlowRef.current) {
+            innerGlowRef.current.uniforms.u_intensity.value = sv.glowIntensity * 0.8;
+        }
+        if (outerGlowRef.current) {
+            outerGlowRef.current.uniforms.u_intensity.value = sv.glowIntensity * 0.55;
+        }
+        // Update time uniform on every material
+        for (const ref of [
+            dotMatRef,
+            innerGlowRef,
+            outerGlowRef,
+            waveDeepRef,
+            waveSurfaceRef,
+        ]) {
+            if (ref.current)
+                ref.current.uniforms.u_time.value = t;
+        }
+        if (groupRef.current) {
+            // Ambient rotation runs at a constant rate independent of `sv.speed`,
+            // so it needs its own explicit reduced-motion guard.
+            groupRef.current.rotation.y = shouldReduceMotion
+                ? 0
+                : clock.getElapsedTime() * 0.12;
+        }
+    });
+    return (jsxs("group", { ref: groupRef, children: [jsxs("mesh", { scale: 0.85, children: [jsx("sphereGeometry", { args: [1, 48, 48] }), jsx("shaderMaterial", { ref: waveDeepRef, vertexShader: waveVertex, fragmentShader: waveFragment, uniforms: waveDeepUniforms, transparent: true, depthWrite: false })] }), jsxs("mesh", { scale: 0.96, children: [jsx("sphereGeometry", { args: [1, 48, 48] }), jsx("shaderMaterial", { ref: waveSurfaceRef, vertexShader: waveVertex, fragmentShader: waveFragment, uniforms: waveSurfaceUniforms, transparent: true, depthWrite: false })] }), jsxs("mesh", { children: [jsx("sphereGeometry", { args: [1, 64, 64] }), jsx("shaderMaterial", { ref: dotMatRef, vertexShader: dotSphereVertex, fragmentShader: dotSphereFragment, uniforms: dotUniforms, transparent: true, depthWrite: false })] }), jsxs("mesh", { scale: 1.12, children: [jsx("sphereGeometry", { args: [1, 32, 32] }), jsx("shaderMaterial", { ref: innerGlowRef, vertexShader: glowVertex, fragmentShader: glowFragment, uniforms: innerGlowUniforms, transparent: true, side: BackSide, blending: CustomBlending, blendEquation: AddEquation, blendSrc: OneFactor, blendDst: OneFactor, blendSrcAlpha: ZeroFactor, blendDstAlpha: OneFactor, depthWrite: false })] }), jsxs("mesh", { scale: glowSize, children: [jsx("sphereGeometry", { args: [1, 32, 32] }), jsx("shaderMaterial", { ref: outerGlowRef, vertexShader: glowVertex, fragmentShader: glowFragment, uniforms: outerGlowUniforms, transparent: true, side: BackSide, blending: CustomBlending, blendEquation: AddEquation, blendSrc: OneFactor, blendDst: OneFactor, blendSrcAlpha: ZeroFactor, blendDstAlpha: OneFactor, depthWrite: false })] })] }));
+};
+// ── Public DotSphere variant implementation (dynamically imported — see DotSphere.tsx) ──
+const DEFAULT_COLORS = ["#00d2ff", "#a855f7", "#f97316"];
+const DotSphereImpl = ({ colors = DEFAULT_COLORS, speed = 0.6, gridDensity = 40, dotSize = 0.055, rimIntensity = 1.5, glowIntensity = 1.0, glowSize = 1.5, state, }) => {
+    return (jsx(Canvas, { className: "!absolute inset-0 w-full h-full", style: {
+            filter: [
+                'drop-shadow(0 0 10px rgba(168, 85, 247, 0.7))',
+                'drop-shadow(0 0 25px rgba(147, 51, 234, 0.35))',
+                'drop-shadow(0 0 50px rgba(124, 58, 237, 0.15))',
+            ].join(' '),
+        }, dpr: [1, 2], camera: { position: [0, 0, 3], fov: 50 }, gl: { antialias: true, alpha: true, premultipliedAlpha: false }, onCreated: ({ gl }) => {
+            gl.setClearColor(0x000000, 0);
+        }, children: jsx(OrbScene, { colors: colors, speed: speed, gridDensity: gridDensity, dotSize: dotSize, rimIntensity: rimIntensity, glowIntensity: glowIntensity, glowSize: glowSize, state: state }) }));
+};
+
+export { DotSphereImpl };

package/dist/components/effects/AIOrb/variants/DotSphere/DotSphere.js

@@ -1,136 +1,35 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useRef, useMemo, useEffect } from 'react';
-import { Canvas, useFrame } from '@react-three/fiber';
-import { Color, AdditiveBlending, BackSide } from 'three';
-import { waveFragment, waveVertex, dotSphereFragment, dotSphereVertex, glowFragment, glowVertex } from './DotSphere.shaders.js';
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
 
-const OrbScene = ({ colors, speed, gridDensity, dotSize, rimIntensity, glowIntensity, glowSize, }) => {
-    const groupRef = useRef(null);
-    const dotMatRef = useRef(null);
-    const innerGlowRef = useRef(null);
-    const outerGlowRef = useRef(null);
-    const waveDeepRef = useRef(null);
-    const waveSurfaceRef = useRef(null);
-    // Colour objects (rebuilt only when hex strings change)
-    const [c1, c2, c3] = colors;
-    const colorObjs = useMemo(() => ({
-        c1: new Color(c1),
-        c2: new Color(c2),
-        c3: new Color(c3),
-    }), [c1, c2, c3]);
-    // ── Uniforms – created once, mutated in useFrame / useEffect ──────────
-    const dotUniforms = useMemo(() => ({
-        u_time: { value: 0 },
-        u_color1: { value: colorObjs.c1.clone() },
-        u_color2: { value: colorObjs.c2.clone() },
-        u_color3: { value: colorObjs.c3.clone() },
-        u_dotSize: { value: dotSize },
-        u_gridDensity: { value: gridDensity },
-        u_rimIntensity: { value: rimIntensity },
-    }), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    const innerGlowUniforms = useMemo(() => ({
-        u_time: { value: 0 },
-        u_color1: { value: colorObjs.c1.clone() },
-        u_color2: { value: colorObjs.c2.clone() },
-        u_color3: { value: colorObjs.c3.clone() },
-        u_intensity: { value: glowIntensity * 0.8 },
-        u_falloff: { value: 2.0 },
-    }), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    const outerGlowUniforms = useMemo(() => ({
-        u_time: { value: 0 },
-        u_color1: { value: colorObjs.c1.clone() },
-        u_color2: { value: colorObjs.c2.clone() },
-        u_color3: { value: colorObjs.c3.clone() },
-        u_intensity: { value: glowIntensity * 0.55 },
-        u_falloff: { value: 1.0 },
-    }), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    // Deep wave layer – large glowing blobs in the core
-    const waveDeepUniforms = useMemo(() => ({
-        u_time: { value: 0 },
-        u_color1: { value: colorObjs.c1.clone() },
-        u_color2: { value: colorObjs.c2.clone() },
-        u_color3: { value: colorObjs.c3.clone() },
-        u_intensity: { value: 1.2 },
-        u_noiseScale: { value: 1.5 },
-        u_flowSpeed: { value: 1.8 },
-    }), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    // Surface wave layer – finer, faster glowing patterns near the shell
-    const waveSurfaceUniforms = useMemo(() => ({
-        u_time: { value: 0 },
-        u_color1: { value: colorObjs.c1.clone() },
-        u_color2: { value: colorObjs.c2.clone() },
-        u_color3: { value: colorObjs.c3.clone() },
-        u_intensity: { value: 0.9 },
-        u_noiseScale: { value: 2.5 },
-        u_flowSpeed: { value: 2.5 },
-    }), 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []);
-    // ── Sync prop changes → uniforms ──────────────────────────────────────
+/**
+ * Lazy-loading shell. The actual scene (`OrbScene` + `<Canvas>`) lives in
+ * `DotSphere.impl`, which imports `@react-three/fiber` and `three` — dynamically
+ * imported here on mount so that rendering a sibling AIOrb variant that doesn't
+ * need three (e.g. `AIOrb.Aura`, raw WebGL) never pulls that bundle in. Mirrors
+ * `TiltCard`'s `glow` lazy-load (see `TiltCard.tsx` / `TiltCard.glow.ts`).
+ */
+const DotSphere = (props) => {
+    const [Impl, setImpl] = useState(null);
     useEffect(() => {
-        // Dot sphere
-        if (dotMatRef.current) {
-            const u = dotMatRef.current.uniforms;
-            u.u_color1.value.copy(colorObjs.c1);
-            u.u_color2.value.copy(colorObjs.c2);
-            u.u_color3.value.copy(colorObjs.c3);
-            u.u_dotSize.value = dotSize;
-            u.u_gridDensity.value = gridDensity;
-            u.u_rimIntensity.value = rimIntensity;
-        }
-        // Glow layers
-        for (const ref of [innerGlowRef, outerGlowRef]) {
-            if (ref.current) {
-                ref.current.uniforms.u_color1.value.copy(colorObjs.c1);
-                ref.current.uniforms.u_color2.value.copy(colorObjs.c2);
-                ref.current.uniforms.u_color3.value.copy(colorObjs.c3);
+        let cancelled = false;
+        import('./DotSphere.impl.js')
+            .then(({ DotSphereImpl }) => {
+            if (!cancelled)
+                setImpl(() => DotSphereImpl);
+        })
+            .catch((err) => {
+            if (process.env.NODE_ENV !== "production") {
+                console.error('[AIOrb.DotSphere] requires the optional "three" and "@react-three/fiber" peer dependencies.', err);
             }
-        }
-        if (innerGlowRef.current)
-            innerGlowRef.current.uniforms.u_intensity.value = glowIntensity * 0.8;
-        if (outerGlowRef.current)
-            outerGlowRef.current.uniforms.u_intensity.value = glowIntensity * 0.55;
-        // Wave layers
-        for (const ref of [waveDeepRef, waveSurfaceRef]) {
-            if (ref.current) {
-                ref.current.uniforms.u_color1.value.copy(colorObjs.c1);
-                ref.current.uniforms.u_color2.value.copy(colorObjs.c2);
-                ref.current.uniforms.u_color3.value.copy(colorObjs.c3);
-            }
-        }
-    }, [colorObjs, dotSize, gridDensity, rimIntensity, glowIntensity]);
-    // ── Animation loop ────────────────────────────────────────────────────
-    useFrame(({ clock }) => {
-        const t = clock.getElapsedTime() * speed;
-        // Update time uniform on every material
-        for (const ref of [
-            dotMatRef,
-            innerGlowRef,
-            outerGlowRef,
-            waveDeepRef,
-            waveSurfaceRef,
-        ]) {
-            if (ref.current)
-                ref.current.uniforms.u_time.value = t;
-        }
-        if (groupRef.current) {
-            groupRef.current.rotation.y = clock.getElapsedTime() * 0.12;
-        }
-    });
-    return (jsxs("group", { ref: groupRef, children: [jsxs("mesh", { scale: 0.85, children: [jsx("sphereGeometry", { args: [1, 48, 48] }), jsx("shaderMaterial", { ref: waveDeepRef, vertexShader: waveVertex, fragmentShader: waveFragment, uniforms: waveDeepUniforms, transparent: true, blending: AdditiveBlending, depthWrite: false })] }), jsxs("mesh", { scale: 0.96, children: [jsx("sphereGeometry", { args: [1, 48, 48] }), jsx("shaderMaterial", { ref: waveSurfaceRef, vertexShader: waveVertex, fragmentShader: waveFragment, uniforms: waveSurfaceUniforms, transparent: true, blending: AdditiveBlending, depthWrite: false })] }), jsxs("mesh", { children: [jsx("sphereGeometry", { args: [1, 64, 64] }), jsx("shaderMaterial", { ref: dotMatRef, vertexShader: dotSphereVertex, fragmentShader: dotSphereFragment, uniforms: dotUniforms, transparent: true, depthWrite: false })] }), jsxs("mesh", { scale: 1.12, children: [jsx("sphereGeometry", { args: [1, 32, 32] }), jsx("shaderMaterial", { ref: innerGlowRef, vertexShader: glowVertex, fragmentShader: glowFragment, uniforms: innerGlowUniforms, transparent: true, side: BackSide, blending: AdditiveBlending, depthWrite: false })] }), jsxs("mesh", { scale: glowSize, children: [jsx("sphereGeometry", { args: [1, 32, 32] }), jsx("shaderMaterial", { ref: outerGlowRef, vertexShader: glowVertex, fragmentShader: glowFragment, uniforms: outerGlowUniforms, transparent: true, side: BackSide, blending: AdditiveBlending, depthWrite: false })] })] }));
-};
-// ── Public DotSphere variant ─────────────────────────────────────────────────
-const DEFAULT_COLORS = ["#00d2ff", "#a855f7", "#f97316"];
-const DotSphere = ({ colors = DEFAULT_COLORS, speed = 0.6, gridDensity = 40, dotSize = 0.055, rimIntensity = 1.5, glowIntensity = 1.0, glowSize = 1.5, }) => {
-    return (jsx(Canvas, { className: "!absolute inset-0 w-full h-full", dpr: [1, 2], camera: { position: [0, 0, 3], fov: 50 }, gl: { antialias: true, alpha: true }, children: jsx(OrbScene, { colors: colors, speed: speed, gridDensity: gridDensity, dotSize: dotSize, rimIntensity: rimIntensity, glowIntensity: glowIntensity, glowSize: glowSize }) }));
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    if (!Impl)
+        return null;
+    return jsx(Impl, { ...props });
 };
 
 export { DotSphere };

package/dist/components/effects/AIOrb/variants/DotSphere/DotSphere.types.d.ts

@@ -1,3 +1,4 @@
+import type { OrbState } from "../../AIOrb.types";
 export interface DotSphereProps {
     /**
      * Three gradient colours [top, middle, bottom] as hex strings.
@@ -34,4 +35,9 @@ export interface DotSphereProps {
      * @default 1.5
      */
     glowSize?: number;
+    /**
+     * State-driven animation. When set, smoothly interpolates speed,
+     * glowIntensity, and rimIntensity towards state targets.
+     */
+    state?: OrbState;
 }

package/dist/components/effects/AIOrb/variants/Liquid/Liquid.d.ts

@@ -1,3 +1,11 @@
 import React from "react";
 import type { LiquidProps } from "./Liquid.types";
+/**
+ * Lazy-loading shell. The actual scene (`LiquidScene` + `<Canvas>`) lives in
+ * `Liquid.impl`, which imports `@react-three/fiber`, `@react-three/drei`, and
+ * `three` — dynamically imported here on mount so that rendering a sibling
+ * AIOrb variant that doesn't need three (e.g. `AIOrb.Aura`, raw WebGL) never
+ * pulls that bundle in. Mirrors `TiltCard`'s `glow` lazy-load (see
+ * `TiltCard.tsx` / `TiltCard.glow.ts`).
+ */
 export declare const Liquid: React.FC<LiquidProps>;

package/dist/components/effects/AIOrb/variants/Liquid/Liquid.impl.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import type { LiquidProps } from "./Liquid.types";
+export declare const LiquidImpl: React.FC<LiquidProps>;

package/dist/components/effects/AIOrb/variants/Liquid/Liquid.impl.js

@@ -0,0 +1,140 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useRef, useMemo, useEffect } from 'react';
+import { Canvas, useFrame } from '@react-three/fiber';
+import { Environment } from '@react-three/drei';
+import { useReducedMotion } from 'motion/react';
+import { ACESFilmicToneMapping, Color, OneFactor, ZeroFactor, AddEquation, CustomBlending, BackSide } from 'three';
+import { simplex3 } from './Liquid.noise.js';
+import { atmosphereFragment, glowVertex } from './Liquid.shaders.js';
+import { useOrbState } from '../../hooks/useOrbState.js';
+
+const STATE_CONFIG = {
+    idle: { speed: 0.5, noiseAmplitude: 0.06, glowIntensity: 0.6 },
+    listening: { speed: 1.0, noiseAmplitude: 0.1, glowIntensity: 1.0 },
+    thinking: { speed: 1.8, noiseAmplitude: 0.15, glowIntensity: 1.4 },
+    speaking: { speed: 1.2, noiseAmplitude: 0.12, glowIntensity: 1.2 },
+};
+const LiquidScene = ({ colors, meshColor, speed, roughness, metalness, noiseScale, noiseAmplitude, glowIntensity, glowSize, state, }) => {
+    const shouldReduceMotion = useReducedMotion();
+    const groupRef = useRef(null);
+    const meshRef = useRef(null);
+    const atmosphereRef = useRef(null);
+    // Store original positions + normals for noise deformation
+    const origData = useRef(null);
+    // Keep latest props in a ref so useFrame always reads current values
+    const propsRef = useRef({ speed, noiseScale, noiseAmplitude });
+    propsRef.current = { speed, noiseScale, noiseAmplitude };
+    // ── State-driven interpolation ─────────────────────────────────────────
+    const stateProps = useMemo(() => ({ speed, noiseAmplitude, glowIntensity }), [speed, noiseAmplitude, glowIntensity]);
+    const { valuesRef: stateRef, tick: stateTick } = useOrbState(state, STATE_CONFIG, stateProps);
+    // Colour objects (rebuilt only when hex strings change)
+    const [c1, c2, c3] = colors;
+    const colorObjs = useMemo(() => ({
+        c1: new Color(c1),
+        c2: new Color(c2),
+        c3: new Color(c3),
+    }), [c1, c2, c3]);
+    // ── Atmosphere uniforms – created once, mutated in useFrame / useEffect ────
+    // Atmosphere: soft diffuse haze (BackSide)
+    const atmosphereUniforms = useMemo(() => ({
+        u_time: { value: 0 },
+        u_color1: { value: new Color(c1) },
+        u_color2: { value: new Color(c2) },
+        u_color3: { value: new Color(c3) },
+        u_intensity: { value: glowIntensity * 0.65 },
+    }), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    // ── Capture original geometry on mount ───────────────────────────────────
+    useEffect(() => {
+        if (!meshRef.current)
+            return;
+        const geo = meshRef.current.geometry;
+        origData.current = {
+            orig: new Float32Array(geo.attributes.position.array),
+            norms: new Float32Array(geo.attributes.normal.array),
+        };
+    }, []);
+    // ── Sync prop changes → material / uniforms ─────────────────────────────
+    useEffect(() => {
+        if (meshRef.current) {
+            const mat = meshRef.current.material;
+            mat.color.set(meshColor);
+            mat.roughness = roughness;
+            mat.metalness = metalness;
+        }
+        if (atmosphereRef.current) {
+            atmosphereRef.current.uniforms.u_color1.value.copy(colorObjs.c1);
+            atmosphereRef.current.uniforms.u_color2.value.copy(colorObjs.c2);
+            atmosphereRef.current.uniforms.u_color3.value.copy(colorObjs.c3);
+            atmosphereRef.current.uniforms.u_intensity.value = glowIntensity * 0.65;
+        }
+    }, [colorObjs, meshColor, roughness, metalness, glowIntensity]);
+    // ── Animation loop ──────────────────────────────────────────────────────
+    useFrame(({ clock }, delta) => {
+        // Tick state interpolation
+        stateTick(delta);
+        const sv = stateRef.current;
+        // Every motion term below (vertex noise, rotation, breathing scale,
+        // atmosphere time) is a function of `t` — freezing it at 0 settles the
+        // whole scene at its baseline pose per prefers-reduced-motion.
+        const t = shouldReduceMotion ? 0 : clock.getElapsedTime();
+        const spd = sv.speed;
+        const na = sv.noiseAmplitude;
+        const ns = propsRef.current.noiseScale;
+        // Sync interpolated glowIntensity into atmosphere uniform
+        if (atmosphereRef.current) {
+            atmosphereRef.current.uniforms.u_intensity.value = sv.glowIntensity * 0.65;
+        }
+        // Vertex deformation
+        if (meshRef.current && origData.current) {
+            const geo = meshRef.current.geometry;
+            const pos = geo.attributes.position.array;
+            const { orig, norms } = origData.current;
+            const count = geo.attributes.position.count;
+            for (let i = 0; i < count; i++) {
+                const i3 = i * 3;
+                const ox = orig[i3], oy = orig[i3 + 1], oz = orig[i3 + 2];
+                const nx = norms[i3], ny = norms[i3 + 1], nz = norms[i3 + 2];
+                const n = simplex3(ox * ns + t * 0.15 * spd, oy * ns + t * 0.12 * spd, oz * ns + t * 0.1 * spd);
+                pos[i3] = ox + nx * n * na;
+                pos[i3 + 1] = oy + ny * n * na;
+                pos[i3 + 2] = oz + nz * n * na;
+            }
+            geo.attributes.position.needsUpdate = true;
+            geo.computeVertexNormals();
+            meshRef.current.rotation.y = t * 0.03 * spd;
+        }
+        // Breathing — gentle scale on the whole group
+        if (groupRef.current) {
+            const breath = Math.sin(t * 0.6 * spd);
+            const s = 1 + 0.025 * breath;
+            groupRef.current.scale.set(s, s, s);
+        }
+        // Update atmosphere time uniform
+        if (atmosphereRef.current) {
+            atmosphereRef.current.uniforms.u_time.value = t * spd;
+        }
+    });
+    return (jsxs("group", { ref: groupRef, children: [jsx(Environment, { preset: "sunset" }), jsx("ambientLight", { intensity: 2 }), jsx("pointLight", { color: colors[0], intensity: 18, distance: 50, position: [-3, 1, 2] }), jsx("pointLight", { color: colors[1], intensity: 18, distance: 50, position: [3, -1, 2] }), jsx("pointLight", { color: colors[2], intensity: 10, distance: 50, position: [0, 0, 4] }), jsx("pointLight", { color: "#6428b4", intensity: 12, distance: 50, position: [0, -3, 2] }), jsxs("mesh", { ref: meshRef, children: [jsx("sphereGeometry", { args: [1, 64, 64] }), jsx("meshStandardMaterial", { color: meshColor, roughness: roughness, metalness: metalness, envMapIntensity: 2.5, emissive: "#5A1878", emissiveIntensity: 0.8 })] }), jsxs("mesh", { scale: glowSize, children: [jsx("sphereGeometry", { args: [1, 32, 32] }), jsx("shaderMaterial", { ref: atmosphereRef, vertexShader: glowVertex, fragmentShader: atmosphereFragment, uniforms: atmosphereUniforms, transparent: true, side: BackSide, blending: CustomBlending, blendEquation: AddEquation, blendSrc: OneFactor, blendDst: OneFactor, blendSrcAlpha: ZeroFactor, blendDstAlpha: OneFactor, depthWrite: false })] })] }));
+};
+// ── Public Liquid variant implementation (dynamically imported — see Liquid.tsx) ──
+const DEFAULT_COLORS = ["#2C35B7", "#C9242F", "#9DD9EB"];
+const LiquidImpl = ({ colors = DEFAULT_COLORS, meshColor = "#350F3F", speed = 1.0, roughness = 0.15, metalness = 0.95, noiseScale = 0.8, noiseAmplitude = 0.1, glowIntensity = 1.0, glowSize = 1.8, state, }) => {
+    return (jsxs(Fragment, { children: [jsx(Canvas, { className: "!absolute inset-0 w-full h-full", style: {
+                    filter: [
+                        'drop-shadow(0 0 10px rgba(192, 132, 252, 0.7))',
+                        'drop-shadow(0 0 25px rgba(147, 51, 234, 0.35))',
+                        'drop-shadow(0 0 50px rgba(124, 58, 237, 0.15))',
+                    ].join(' '),
+                }, dpr: [1, 2], camera: { position: [0, 0, 3.2], fov: 50 }, gl: { antialias: true, alpha: true, premultipliedAlpha: false, toneMapping: ACESFilmicToneMapping }, onCreated: ({ gl }) => {
+                    gl.toneMappingExposure = 1.8;
+                    gl.setClearColor(0x000000, 0);
+                }, children: jsx(LiquidScene, { colors: colors, meshColor: meshColor, speed: speed, roughness: roughness, metalness: metalness, noiseScale: noiseScale, noiseAmplitude: noiseAmplitude, glowIntensity: glowIntensity, glowSize: glowSize, state: state }) }), jsx("div", { className: "absolute inset-0 pointer-events-none", style: {
+                    background: "radial-gradient(circle at center, rgba(255,255,255,0.35) 0%, rgba(180,120,255,0.2) 15%, rgba(100,40,180,0.08) 35%, transparent 55%)",
+                    mixBlendMode: "screen",
+                } })] }));
+};
+
+export { LiquidImpl };