@flikk/ui 1.0.0-beta.2 → 1.0.0-beta.21

package/dist/components/effects/AIOrb/variants/Aura/ShaderCanvas.js

@@ -0,0 +1,149 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useEffect } from 'react';
+
+const VERTEX_SHADER = `#version 300 es
+in vec2 a_position;
+void main() {
+  gl_Position = vec4(a_position, 0.0, 1.0);
+}`;
+/**
+ * Minimal raw WebGL2 canvas renderer for fullscreen fragment shaders.
+ * - Built-in uniforms: iTime (float), iResolution (vec2)
+ * - Custom uniforms read from `uniformsRef` each frame (no stale closures)
+ * - ResizeObserver for responsive canvas sizing
+ * - rAF animation loop with cleanup on unmount
+ * - Graceful degradation: renders nothing if WebGL2 unavailable
+ */
+const ShaderCanvas = ({ fragmentShader, uniformsRef, maxDpr = 2, className, style, }) => {
+    const canvasRef = useRef(null);
+    useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const gl = canvas.getContext("webgl2", {
+            alpha: true,
+            premultipliedAlpha: false,
+            antialias: false,
+        });
+        if (!gl)
+            return;
+        // ── Compile shaders ────────────────────────────────────────────────
+        const compileShader = (type, src) => {
+            const shader = gl.createShader(type);
+            if (!shader)
+                return null;
+            gl.shaderSource(shader, src);
+            gl.compileShader(shader);
+            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+                if (process.env.NODE_ENV !== "production") {
+                    console.error("[ShaderCanvas]", gl.getShaderInfoLog(shader));
+                }
+                gl.deleteShader(shader);
+                return null;
+            }
+            return shader;
+        };
+        const vs = compileShader(gl.VERTEX_SHADER, VERTEX_SHADER);
+        const fs = compileShader(gl.FRAGMENT_SHADER, fragmentShader);
+        if (!vs || !fs)
+            return;
+        const program = gl.createProgram();
+        gl.attachShader(program, vs);
+        gl.attachShader(program, fs);
+        gl.linkProgram(program);
+        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+            if (process.env.NODE_ENV !== "production") {
+                console.error("[ShaderCanvas]", gl.getProgramInfoLog(program));
+            }
+            return;
+        }
+        gl.useProgram(program);
+        // ── Fullscreen quad ────────────────────────────────────────────────
+        const positions = new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]);
+        const vao = gl.createVertexArray();
+        gl.bindVertexArray(vao);
+        const buf = gl.createBuffer();
+        gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+        gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
+        const aPos = gl.getAttribLocation(program, "a_position");
+        gl.enableVertexAttribArray(aPos);
+        gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);
+        // ── Uniform locations ──────────────────────────────────────────────
+        const uTime = gl.getUniformLocation(program, "iTime");
+        const uRes = gl.getUniformLocation(program, "iResolution");
+        // Cache custom uniform locations
+        const customLocs = new Map();
+        const getCustomLoc = (name) => {
+            var _a;
+            if (!customLocs.has(name)) {
+                customLocs.set(name, gl.getUniformLocation(program, name));
+            }
+            return (_a = customLocs.get(name)) !== null && _a !== void 0 ? _a : null;
+        };
+        // ── Resize handling ────────────────────────────────────────────────
+        const dpr = Math.min(window.devicePixelRatio || 1, maxDpr);
+        let width = 0;
+        let height = 0;
+        const resize = () => {
+            const rect = canvas.getBoundingClientRect();
+            const w = Math.round(rect.width * dpr);
+            const h = Math.round(rect.height * dpr);
+            if (w !== width || h !== height) {
+                width = w;
+                height = h;
+                canvas.width = w;
+                canvas.height = h;
+                gl.viewport(0, 0, w, h);
+            }
+        };
+        const observer = new ResizeObserver(resize);
+        observer.observe(canvas);
+        resize();
+        // ── Animation loop ─────────────────────────────────────────────────
+        gl.enable(gl.BLEND);
+        gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+        let rafId = 0;
+        const startTime = performance.now();
+        const frame = () => {
+            rafId = requestAnimationFrame(frame);
+            const t = (performance.now() - startTime) / 1000;
+            gl.uniform1f(uTime, t);
+            gl.uniform2f(uRes, width, height);
+            // Set custom uniforms from ref
+            const uniforms = uniformsRef.current;
+            for (const name in uniforms) {
+                const loc = getCustomLoc(name);
+                if (!loc)
+                    continue;
+                const val = uniforms[name];
+                if (typeof val === "number") {
+                    gl.uniform1f(loc, val);
+                }
+                else if (Array.isArray(val)) {
+                    if (val.length === 2)
+                        gl.uniform2f(loc, val[0], val[1]);
+                    else if (val.length === 3)
+                        gl.uniform3f(loc, val[0], val[1], val[2]);
+                    else if (val.length === 4)
+                        gl.uniform4f(loc, val[0], val[1], val[2], val[3]);
+                }
+            }
+            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        };
+        rafId = requestAnimationFrame(frame);
+        return () => {
+            cancelAnimationFrame(rafId);
+            observer.disconnect();
+            gl.deleteProgram(program);
+            gl.deleteShader(vs);
+            gl.deleteShader(fs);
+            gl.deleteBuffer(buf);
+            gl.deleteVertexArray(vao);
+        };
+        // Fragment shader is static — only set up once
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (jsx("canvas", { ref: canvasRef, className: className, style: { display: "block", width: "100%", height: "100%", ...style } }));
+};
+
+export { ShaderCanvas };

package/dist/components/effects/AIOrb/variants/Aura/index.d.ts

@@ -0,0 +1,2 @@
+export { Aura } from "./Aura";
+export type { AuraProps } from "./Aura.types";

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

@@ -1,10 +1,17 @@
 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 { 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 OrbScene = ({ colors, speed, gridDensity, dotSize, rimIntensity, glowIntensity, glowSize, }) => {
+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 groupRef = useRef(null);
     const dotMatRef = useRef(null);
     const innerGlowRef = useRef(null);
@@ -74,6 +81,9 @@ const OrbScene = ({ colors, speed, gridDensity, dotSize, rimIntensity, glowInten
     }), 
     // 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
@@ -108,8 +118,21 @@ const OrbScene = ({ colors, speed, gridDensity, dotSize, rimIntensity, glowInten
         }
     }, [colorObjs, dotSize, gridDensity, rimIntensity, glowIntensity]);
     // ── Animation loop ────────────────────────────────────────────────────
-    useFrame(({ clock }) => {
-        const t = clock.getElapsedTime() * speed;
+    useFrame(({ clock }, delta) => {
+        // Tick state interpolation
+        stateTick(delta);
+        const sv = stateRef.current;
+        const t = 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,
@@ -125,12 +148,20 @@ const OrbScene = ({ colors, speed, gridDensity, dotSize, rimIntensity, glowInten
             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 })] })] }));
+    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 ─────────────────────────────────────────────────
 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 }) }));
+const DotSphere = ({ 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 { 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.js

@@ -2,11 +2,18 @@ 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 { ACESFilmicToneMapping, Color, AdditiveBlending, BackSide } from 'three';
+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 LiquidScene = ({ colors, meshColor, speed, roughness, metalness, noiseScale, noiseAmplitude, glowIntensity, glowSize, }) => {
+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 groupRef = useRef(null);
     const meshRef = useRef(null);
     const atmosphereRef = useRef(null);
@@ -15,6 +22,9 @@ const LiquidScene = ({ colors, meshColor, speed, roughness, metalness, noiseScal
     // 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(() => ({
@@ -59,9 +69,18 @@ const LiquidScene = ({ colors, meshColor, speed, roughness, metalness, noiseScal
         }
     }, [colorObjs, meshColor, roughness, metalness, glowIntensity]);
     // ── Animation loop ──────────────────────────────────────────────────────
-    useFrame(({ clock }) => {
+    useFrame(({ clock }, delta) => {
+        // Tick state interpolation
+        stateTick(delta);
+        const sv = stateRef.current;
         const t = clock.getElapsedTime();
-        const { speed: spd, noiseScale: ns, noiseAmplitude: na } = propsRef.current;
+        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;
@@ -92,14 +111,21 @@ const LiquidScene = ({ colors, meshColor, speed, roughness, metalness, noiseScal
             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: AdditiveBlending, depthWrite: false })] })] }));
+    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 ────────────────────────────────────────────────────
 const DEFAULT_COLORS = ["#2C35B7", "#C9242F", "#9DD9EB"];
-const Liquid = ({ 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, }) => {
-    return (jsxs(Fragment, { children: [jsx(Canvas, { className: "!absolute inset-0 w-full h-full", dpr: [1, 2], camera: { position: [0, 0, 3.2], fov: 50 }, gl: { antialias: true, alpha: true, toneMapping: ACESFilmicToneMapping }, onCreated: ({ gl }) => {
+const Liquid = ({ 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;
-                }, children: jsx(LiquidScene, { colors: colors, meshColor: meshColor, speed: speed, roughness: roughness, metalness: metalness, noiseScale: noiseScale, noiseAmplitude: noiseAmplitude, glowIntensity: glowIntensity, glowSize: glowSize }) }), jsx("div", { className: "absolute inset-0 pointer-events-none", style: {
+                    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",
                 } })] }));

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

@@ -1,3 +1,4 @@
+import type { OrbState } from "../../AIOrb.types";
 export interface LiquidProps {
     /**
      * Three light colours as hex strings.
@@ -44,4 +45,9 @@ export interface LiquidProps {
      * @default 1.8
      */
     glowSize?: number;
+    /**
+     * State-driven animation. When set, smoothly interpolates speed,
+     * noiseAmplitude, and glowIntensity towards state targets.
+     */
+    state?: OrbState;
 }

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

@@ -2,3 +2,5 @@ export { DotSphere } from "./DotSphere";
 export type { DotSphereProps } from "./DotSphere";
 export { Liquid } from "./Liquid";
 export type { LiquidProps } from "./Liquid";
+export { Aura } from "./Aura";
+export type { AuraProps } from "./Aura";

package/dist/components/effects/Animated/Animated.animations.js

@@ -12,17 +12,36 @@ const ANIMATION_PRESETS = {
     slideLeft: { opacity: 0, x: -24 },
     slideRight: { opacity: 0, x: 24 },
 };
+const RESOLVED_VALUES = {
+    opacity: 1,
+    y: 0,
+    x: 0,
+    scale: 1,
+};
+// Pre-compute visible states per preset (only keys that the preset actually animates)
+const VISIBLE_STATES = Object.fromEntries(Object.entries(ANIMATION_PRESETS).map(([key, initial]) => {
+    const visible = {};
+    for (const k of Object.keys(initial)) {
+        visible[k] = RESOLVED_VALUES[k];
+    }
+    return [key, visible];
+}));
+// Pre-compute exit variants (same as hidden states)
+const EXIT_VARIANTS = Object.fromEntries(Object.entries(ANIMATION_PRESETS).map(([key, value]) => [key, { ...value }]));
+// Pre-compute full variant sets for default transition (zero-allocation fast path)
+const DEFAULT_VARIANTS = Object.fromEntries(Object.entries(ANIMATION_PRESETS).map(([key, initial]) => [
+    key,
+    {
+        hidden: { ...initial },
+        visible: { ...VISIBLE_STATES[key], transition: defaultSpringTransition },
+    },
+]));
 function getAnimationVariants(preset, customTransition) {
-    const initial = ANIMATION_PRESETS[preset];
+    if (!customTransition)
+        return DEFAULT_VARIANTS[preset];
     return {
-        hidden: { ...initial },
-        visible: {
-            opacity: 1,
-            y: 0,
-            x: 0,
-            scale: 1,
-            transition: customTransition !== null && customTransition !== void 0 ? customTransition : defaultSpringTransition,
-        },
+        hidden: { ...ANIMATION_PRESETS[preset] },
+        visible: { ...VISIBLE_STATES[preset], transition: customTransition },
     };
 }
 function getGroupVariants(stagger, delay) {
@@ -43,7 +62,7 @@ function getGroupVariants(stagger, delay) {
     };
 }
 function getExitVariant(preset) {
-    return { ...ANIMATION_PRESETS[preset] };
+    return EXIT_VARIANTS[preset];
 }
 
 export { ANIMATION_PRESETS, defaultSpringTransition, getAnimationVariants, getExitVariant, getGroupVariants };

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

@@ -1,6 +1,6 @@
 import type { AnimatedContextValue, AnimatedGroupProps } from './Animated.types';
 export declare const useAnimatedContext: () => AnimatedContextValue | undefined;
 export declare const Animated: {
-    Group: ({ stagger, delay, as, children, className, ...props }: AnimatedGroupProps) => import("react/jsx-runtime").JSX.Element;
-    Item: ({ animation, transition, as, delay, className, children, ...props }: import("./Animated.types").AnimatedItemProps) => import("react/jsx-runtime").JSX.Element;
+    Group: ({ stagger, delay, as, children, className, style, ...props }: AnimatedGroupProps) => import("react/jsx-runtime").JSX.Element;
+    Item: ({ animation, transition, as, delay, className, children, style, ...props }: import("./Animated.types").AnimatedItemProps) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/components/effects/Animated/Animated.js

@@ -9,14 +9,14 @@ const AnimatedContext = createContext(undefined);
 const useAnimatedContext = () => {
     return useContext(AnimatedContext);
 };
-const AnimatedGroup = ({ stagger = 0.1, delay = 0, as = 'div', children, className, ...props }) => {
+const AnimatedGroup = ({ stagger = 0.1, delay = 0, as = 'div', children, className, style, ...props }) => {
     const shouldReduceMotion = useReducedMotion();
+    const groupVariants = useMemo(() => getGroupVariants(stagger, delay), [stagger, delay]);
+    const MotionComponent = useMemo(() => motion[as], [as]);
     if (shouldReduceMotion) {
         const Tag = as;
         return (jsx(Tag, { className: className, ...props, children: children }));
     }
-    const groupVariants = useMemo(() => getGroupVariants(stagger, delay), [stagger, delay]);
-    const MotionComponent = motion[as];
     const motionProps = {
         initial: 'hidden',
         animate: 'visible',
@@ -24,6 +24,7 @@ const AnimatedGroup = ({ stagger = 0.1, delay = 0, as = 'div', children, classNa
         variants: groupVariants,
         className: cn(className),
         ...props,
+        style: { willChange: 'transform, opacity', ...style },
     };
     return (jsx(AnimatedContext.Provider, { value: { isInsideGroup: true, stagger, delay }, children: jsx(AnimatePresence, { children: jsx(MotionComponent, { ...motionProps, children: children }) }) }));
 };

package/dist/components/effects/Animated/AnimatedItem.d.ts

@@ -1,2 +1,2 @@
 import type { AnimatedItemProps } from './Animated.types';
-export declare const AnimatedItem: ({ animation, transition, as, delay, className, children, ...props }: AnimatedItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AnimatedItem: ({ animation, transition, as, delay, className, children, style, ...props }: AnimatedItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/effects/Animated/AnimatedItem.js

@@ -5,20 +5,22 @@ import { cn } from '../../../utils/cn.js';
 import { useAnimatedContext } from './Animated.js';
 import { getAnimationVariants, getExitVariant } from './Animated.animations.js';
 
-const AnimatedItem = ({ animation = 'fadeUp', transition, as = 'div', delay, className, children, ...props }) => {
+const AnimatedItem = ({ animation = 'fadeUp', transition, as = 'div', delay, className, children, style, ...props }) => {
     const shouldReduceMotion = useReducedMotion();
     const groupContext = useAnimatedContext();
+    const variants = useMemo(() => getAnimationVariants(animation, transition), [animation, transition]);
+    const exitState = useMemo(() => getExitVariant(animation), [animation]);
+    const MotionComponent = useMemo(() => motion[as], [as]);
     if (shouldReduceMotion) {
         const Tag = as;
         return (jsx(Tag, { className: className, ...props, children: children }));
     }
-    const variants = useMemo(() => getAnimationVariants(animation, transition), [animation, transition]);
-    const exitState = useMemo(() => getExitVariant(animation), [animation]);
     const motionProps = {
         variants,
         exit: exitState,
         className: cn(className),
         ...props,
+        style: { willChange: 'transform, opacity', ...style },
     };
     if (!groupContext) {
         motionProps.initial = 'hidden';
@@ -32,7 +34,6 @@ const AnimatedItem = ({ animation = 'fadeUp', transition, as = 'div', delay, cla
             };
         }
     }
-    const MotionComponent = motion[as];
     return (
     // @ts-expect-error -- polymorphic motion element type mismatch is safe at runtime
     jsx(MotionComponent, { ...motionProps, children: children }));

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { AuroraProps } from './Aurora.types';
+/**
+ * Aurora creates an animated multi-color gradient background effect.
+ *
+ * Renders several large, blurred, semi-transparent blobs that slowly drift
+ * and morph, producing an organic aurora-like glow. Ideal for hero sections
+ * and decorative backgrounds.
+ *
+ * The component renders as an absolutely-positioned layer with
+ * `pointer-events-none`, so it will not interfere with interactive content.
+ * The parent element should have `position: relative` and `overflow: hidden`.
+ *
+ * @example
+ * ```tsx
+ * <div className="relative overflow-hidden h-96 bg-gray-950">
+ *   <Aurora />
+ *   <div className="relative z-10 text-white p-8">
+ *     <h1>Hero Content</h1>
+ *   </div>
+ * </div>
+ * ```
+ */
+export declare const Aurora: React.FC<AuroraProps>;

package/dist/components/effects/Aurora/Aurora.js

@@ -0,0 +1,119 @@
+import { jsx } from 'react/jsx-runtime';
+import { useReducedMotion, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+
+const DEFAULT_COLORS = ['#3b82f6', '#8b5cf6', '#ec4899', '#06b6d4'];
+/**
+ * Each blob follows a unique organic path using keyframed x/y translations
+ * and scale changes. The durations are intentionally varied so the blobs
+ * never synchronize, producing a natural morphing look.
+ */
+const blobAnimations = [
+    {
+        // Blob 0 -- slow horizontal drift with vertical bob
+        x: ['0%', '30%', '-20%', '10%', '0%'],
+        y: ['0%', '-25%', '15%', '-10%', '0%'],
+        scale: [1, 1.15, 0.9, 1.05, 1],
+        baseDuration: 20,
+    },
+    {
+        // Blob 1 -- figure-8-ish path, slightly faster
+        x: ['0%', '-35%', '25%', '-15%', '0%'],
+        y: ['0%', '20%', '-30%', '25%', '0%'],
+        scale: [1, 0.9, 1.2, 0.95, 1],
+        baseDuration: 23,
+    },
+    {
+        // Blob 2 -- wide circular sweep
+        x: ['0%', '25%', '0%', '-25%', '0%'],
+        y: ['0%', '-20%', '25%', '-15%', '0%'],
+        scale: [1, 1.1, 0.85, 1.15, 1],
+        baseDuration: 27,
+    },
+    {
+        // Blob 3 -- gentle diagonal drift
+        x: ['0%', '-20%', '30%', '-10%', '0%'],
+        y: ['0%', '30%', '-20%', '10%', '0%'],
+        scale: [1, 0.95, 1.1, 0.9, 1],
+        baseDuration: 31,
+    },
+];
+/**
+ * Positions each blob at a different quadrant of the container so they
+ * begin spread out. Additional blobs beyond 4 cycle through positions.
+ */
+const blobPositions = [
+    { top: '10%', left: '15%' },
+    { top: '5%', right: '10%' },
+    { bottom: '10%', left: '20%' },
+    { bottom: '5%', right: '15%' },
+];
+/**
+ * Aurora creates an animated multi-color gradient background effect.
+ *
+ * Renders several large, blurred, semi-transparent blobs that slowly drift
+ * and morph, producing an organic aurora-like glow. Ideal for hero sections
+ * and decorative backgrounds.
+ *
+ * The component renders as an absolutely-positioned layer with
+ * `pointer-events-none`, so it will not interfere with interactive content.
+ * The parent element should have `position: relative` and `overflow: hidden`.
+ *
+ * @example
+ * ```tsx
+ * <div className="relative overflow-hidden h-96 bg-gray-950">
+ *   <Aurora />
+ *   <div className="relative z-10 text-white p-8">
+ *     <h1>Hero Content</h1>
+ *   </div>
+ * </div>
+ * ```
+ */
+const Aurora = ({ colors = DEFAULT_COLORS, blur = 80, speed = 1, opacity = 0.3, size = 1, className, style, ...props }) => {
+    const shouldReduceMotion = useReducedMotion();
+    // Compute base blob dimension from the size multiplier.
+    // Using percentage-based sizing so it scales with the container.
+    const blobDimension = `${40 * size}%`;
+    return (jsx("div", { className: cn('absolute inset-0 overflow-hidden pointer-events-none', className), style: {
+            opacity,
+            filter: `blur(${blur}px)`,
+            ...style,
+        }, "aria-hidden": "true", ...props, children: colors.map((color, index) => {
+            const anim = blobAnimations[index % blobAnimations.length];
+            const position = blobPositions[index % blobPositions.length];
+            const duration = anim.baseDuration / speed;
+            // When reduced motion is preferred, render static blobs with no animation.
+            if (shouldReduceMotion) {
+                return (jsx("div", { style: {
+                        position: 'absolute',
+                        ...position,
+                        width: blobDimension,
+                        height: blobDimension,
+                        borderRadius: '50%',
+                        background: `radial-gradient(circle at center, ${color}, transparent 70%)`,
+                        mixBlendMode: 'screen',
+                    } }, index));
+            }
+            return (jsx(motion.div, { animate: {
+                    x: anim.x,
+                    y: anim.y,
+                    scale: anim.scale,
+                }, transition: {
+                    duration,
+                    repeat: Infinity,
+                    repeatType: 'loop',
+                    ease: 'easeInOut',
+                }, style: {
+                    position: 'absolute',
+                    ...position,
+                    width: blobDimension,
+                    height: blobDimension,
+                    borderRadius: '50%',
+                    background: `radial-gradient(circle at center, ${color}, transparent 70%)`,
+                    mixBlendMode: 'screen',
+                    willChange: 'transform',
+                } }, index));
+        }) }));
+};
+
+export { Aurora };

package/dist/components/effects/Aurora/Aurora.types.d.ts

@@ -0,0 +1,15 @@
+import type React from 'react';
+export interface AuroraProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Array of CSS color values for the gradient blobs (default: ['#3b82f6', '#8b5cf6', '#ec4899', '#06b6d4']) */
+    colors?: string[];
+    /** Blur amount in pixels applied to blobs (default: 80) */
+    blur?: number;
+    /** Animation speed multiplier. Higher values = faster movement (default: 1) */
+    speed?: number;
+    /** Overall opacity of the aurora layer, 0-1 (default: 0.3) */
+    opacity?: number;
+    /** Blob size multiplier. Higher values = larger blobs (default: 1) */
+    size?: number;
+    /** Additional className for the container */
+    className?: string;
+}