@flikk/ui 1.0.0-beta.1

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

@@ -0,0 +1,136 @@
+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';
+
+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 ──────────────────────────────────────
+    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 }) => {
+        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 }) }));
+};
+
+export { DotSphere };

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

@@ -0,0 +1,16 @@
+/**
+ * Custom GLSL shaders for the AIOrb effect.
+ *
+ * Uses Three.js ShaderMaterial conventions (GLSL 100-style syntax;
+ * Three.js auto-converts to GLSL 300 es for WebGL2).
+ *
+ * Built-in uniforms/attributes provided by Three.js:
+ *   modelMatrix, viewMatrix, projectionMatrix, modelViewMatrix,
+ *   normalMatrix, cameraPosition, position, normal, uv
+ */
+export declare const dotSphereVertex = "\nuniform float u_time;\n\nvarying vec3 vNormal;\nvarying vec3 vWorldPosition;\nvarying vec3 vViewDirection;\nvarying float vDisplacement;\n\n\nfloat hash(vec3 p) {\n    p = fract(p * vec3(0.1031, 0.1030, 0.0973));\n    p += dot(p, p.yxz + 33.33);\n    return fract((p.x + p.y) * p.z);\n}\n\nfloat noise(vec3 x) {\n    vec3 i = floor(x);\n    vec3 f = fract(x);\n    f = f * f * (3.0 - 2.0 * f);\n\n    return mix(\n        mix(mix(hash(i + vec3(0,0,0)), hash(i + vec3(1,0,0)), f.x),\n            mix(hash(i + vec3(0,1,0)), hash(i + vec3(1,1,0)), f.x), f.y),\n        mix(mix(hash(i + vec3(0,0,1)), hash(i + vec3(1,0,1)), f.x),\n            mix(hash(i + vec3(0,1,1)), hash(i + vec3(1,1,1)), f.x), f.y),\n        f.z);\n}\n\n\nvoid main() {\n    // Multi-octave noise for organic surface displacement\n    float n1 = noise(normal * 1.8 + u_time * 0.8);\n    float n2 = noise(normal * 3.6 - u_time * 0.5) * 0.5;\n    float disp = (n1 + n2 - 0.75) * 0.15;\n\n    // Visible traveling wave across the surface\n    disp += sin(normal.x * 4.0 + u_time * 2.5) *\n            sin(normal.z * 4.0 + u_time * 1.8) * 0.06;\n\n    // Global breathing\n    disp += sin(u_time * 1.5) * 0.025;\n\n    vec3 newPos = position + normal * disp;\n    vDisplacement = disp;\n\n    vNormal = normalize(normalMatrix * normal);\n    vec4 worldPos = modelMatrix * vec4(newPos, 1.0);\n    vWorldPosition = worldPos.xyz;\n    vViewDirection = normalize(cameraPosition - worldPos.xyz);\n    gl_Position = projectionMatrix * modelViewMatrix * vec4(newPos, 1.0);\n}\n";
+export declare const dotSphereFragment = "\nprecision highp float;\n\nuniform float u_time;\nuniform vec3  u_color1;\nuniform vec3  u_color2;\nuniform vec3  u_color3;\nuniform float u_dotSize;\nuniform float u_gridDensity;\nuniform float u_rimIntensity;\n\nvarying vec3 vNormal;\nvarying vec3 vWorldPosition;\nvarying vec3 vViewDirection;\nvarying float vDisplacement;\n\nvoid main() {\n    vec3 N = normalize(vNormal);\n    vec3 V = normalize(vViewDirection);\n\n    // \u2500\u2500 Fresnel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    float NdotV   = max(dot(N, V), 0.0);\n    float fresnel = pow(1.0 - NdotV, 2.5);\n\n    // \u2500\u2500 Dot pattern on the sphere surface \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    vec3 pos = normalize(vWorldPosition);\n\n    // Multi-axis rotation so dots tumble in 3D, not just left-to-right\n    // Y-axis\n    float rY = u_time * 0.2;\n    float cY = cos(rY), sY = sin(rY);\n    vec3 rotPos = vec3(\n        pos.x * cY - pos.z * sY,\n        pos.y,\n        pos.x * sY + pos.z * cY\n    );\n    // X-axis (tilt)\n    float rX = u_time * 0.13;\n    float cX = cos(rX), sX = sin(rX);\n    rotPos = vec3(\n        rotPos.x,\n        rotPos.y * cX - rotPos.z * sX,\n        rotPos.y * sX + rotPos.z * cX\n    );\n    // Z-axis (slow roll)\n    float rZ = u_time * 0.08;\n    float cZ = cos(rZ), sZ = sin(rZ);\n    rotPos = vec3(\n        rotPos.x * cZ - rotPos.y * sZ,\n        rotPos.x * sZ + rotPos.y * cZ,\n        rotPos.z\n    );\n\n    float theta    = acos(clamp(rotPos.y, -1.0, 1.0));\n    float phi      = atan(rotPos.z, rotPos.x);\n    float sinTheta = sin(theta);\n\n    float latGrid = theta * u_gridDensity / 3.14159265;\n    float lonGrid = phi  * u_gridDensity * max(sinTheta, 0.15) / 3.14159265;\n\n    vec2  cell    = fract(vec2(latGrid, lonGrid));\n    float dotDist = length(cell - 0.5);\n\n    // Dots react to surface displacement \u2013 swell on peaks, shrink in valleys\n    float dispInfluence = smoothstep(-0.05, 0.15, vDisplacement);\n    float pulse = 0.75 + dispInfluence * 0.5\n                + sin(u_time * 1.5 + theta * 3.0 + phi * 2.0) * 0.15;\n    float adjustedDotSize = u_dotSize * pulse;\n    // Sharper edge for more visible dots\n    float dotMask = 1.0 - smoothstep(adjustedDotSize - 0.008, adjustedDotSize + 0.008, dotDist);\n\n    // \u2500\u2500 Multi-colour rim based on normal direction \u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    float cAngle = u_time * 0.35;\n    float cc = cos(cAngle), sc = sin(cAngle);\n    vec3 colorDir = vec3(\n        N.x * cc - N.z * sc,\n        N.y,\n        N.x * sc + N.z * cc\n    );\n\n    float vert = colorDir.y * 0.5 + 0.5;\n    vec3  rimColor = mix(u_color3, u_color1, vert);\n    float midW     = 1.0 - abs(vert - 0.5) * 2.0;\n    rimColor = mix(rimColor, u_color2, midW * 0.6);\n\n    // \u2500\u2500 Compose \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    // Dots: bright coloured points with hot white core\n    vec3  dotColor  = rimColor * 2.0 + vec3(0.2);\n    float dotBright = dotMask * 0.85;\n\n    // Rim glow (independent of dots \u2013 visible at edges)\n    float rimGlow   = pow(fresnel, 1.5) * u_rimIntensity;\n    vec3  glowColor = rimColor * rimGlow;\n\n    vec3  col   = dotColor * dotBright + glowColor;\n    // Between dots: transparent \u2192 waves show through; on dots: near-opaque\n    float alpha = max(dotBright, pow(fresnel, 1.0) * 0.7);\n\n    gl_FragColor = vec4(col, alpha);\n}\n";
+export declare const waveVertex = "\nuniform float u_time;\nuniform float u_flowSpeed;\n\nvarying vec3 vNormal;\nvarying vec3 vWorldPosition;\nvarying vec3 vViewDirection;\n\n\nfloat hash(vec3 p) {\n    p = fract(p * vec3(0.1031, 0.1030, 0.0973));\n    p += dot(p, p.yxz + 33.33);\n    return fract((p.x + p.y) * p.z);\n}\n\nfloat noise(vec3 x) {\n    vec3 i = floor(x);\n    vec3 f = fract(x);\n    f = f * f * (3.0 - 2.0 * f);\n\n    return mix(\n        mix(mix(hash(i + vec3(0,0,0)), hash(i + vec3(1,0,0)), f.x),\n            mix(hash(i + vec3(0,1,0)), hash(i + vec3(1,1,0)), f.x), f.y),\n        mix(mix(hash(i + vec3(0,0,1)), hash(i + vec3(1,0,1)), f.x),\n            mix(hash(i + vec3(0,1,1)), hash(i + vec3(1,1,1)), f.x), f.y),\n        f.z);\n}\n\n\nvoid main() {\n    // Organic displacement matching the outer dot sphere deformation\n    float t = u_time * 0.8;\n    float n1 = noise(normal * 1.8 + t);\n    float n2 = noise(normal * 3.6 - t * 0.625) * 0.5;\n    float disp = (n1 + n2 - 0.75) * 0.15;\n    disp += sin(normal.x * 4.0 + t * 3.125) *\n            sin(normal.z * 4.0 + t * 2.25) * 0.06;\n    disp += sin(t * 1.875) * 0.025;\n\n    vec3 newPos = position + normal * disp;\n\n    vNormal = normalize(normalMatrix * normal);\n    vec4 worldPos = modelMatrix * vec4(newPos, 1.0);\n    vWorldPosition = worldPos.xyz;\n    vViewDirection = normalize(cameraPosition - worldPos.xyz);\n    gl_Position = projectionMatrix * modelViewMatrix * vec4(newPos, 1.0);\n}\n";
+export declare const waveFragment = "\nprecision highp float;\n\nuniform float u_time;\nuniform vec3  u_color1;\nuniform vec3  u_color2;\nuniform vec3  u_color3;\nuniform float u_intensity;\nuniform float u_noiseScale;\nuniform float u_flowSpeed;\n\nvarying vec3 vNormal;\nvarying vec3 vWorldPosition;\nvarying vec3 vViewDirection;\n\n\nfloat hash(vec3 p) {\n    p = fract(p * vec3(0.1031, 0.1030, 0.0973));\n    p += dot(p, p.yxz + 33.33);\n    return fract((p.x + p.y) * p.z);\n}\n\nfloat noise(vec3 x) {\n    vec3 i = floor(x);\n    vec3 f = fract(x);\n    f = f * f * (3.0 - 2.0 * f);\n\n    return mix(\n        mix(mix(hash(i + vec3(0,0,0)), hash(i + vec3(1,0,0)), f.x),\n            mix(hash(i + vec3(0,1,0)), hash(i + vec3(1,1,0)), f.x), f.y),\n        mix(mix(hash(i + vec3(0,0,1)), hash(i + vec3(1,0,1)), f.x),\n            mix(hash(i + vec3(0,1,1)), hash(i + vec3(1,1,1)), f.x), f.y),\n        f.z);\n}\n\n\nvoid main() {\n    vec3 N = normalize(vNormal);\n    vec3 V = normalize(vViewDirection);\n    vec3 pos = normalize(vWorldPosition);\n\n    float t = u_time * u_flowSpeed;\n\n    // \u2500\u2500 Three overlapping soft wave layers \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n\n    // Layer 1 \u2013 large blobs, clearly moving\n    vec3 flow1 = vec3(sin(t * 0.8), cos(t * 0.6), sin(t * 0.5)) * 0.8;\n    float w1 = noise(pos * u_noiseScale + flow1);\n    w1 = smoothstep(0.2, 0.8, w1);\n\n    // Layer 2 \u2013 medium detail, different axis\n    vec3 flow2 = vec3(cos(t * 0.7), sin(t * 0.9), cos(t * 0.6)) * 0.7;\n    float w2 = noise(pos * u_noiseScale * 1.6 + flow2 + 100.0);\n    w2 = smoothstep(0.25, 0.75, w2);\n\n    // Layer 3 \u2013 faster, finer detail\n    vec3 flow3 = vec3(sin(t * 1.1), cos(t * 0.8), sin(t * 1.2)) * 0.6;\n    float w3 = noise(pos * u_noiseScale * 2.8 + flow3 + 200.0);\n    w3 = smoothstep(0.3, 0.7, w3);\n\n    // \u2500\u2500 Colour each layer \u2013 bright and glowing \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n    vec3 col = u_color1 * w1 * 0.8\n             + u_color2 * w2 * 0.6\n             + u_color3 * w3 * 0.5;\n\n    // Vertical base wash\n    float yGrad = pos.y * 0.5 + 0.5;\n    col += mix(u_color3, u_color1, yGrad) * 0.15;\n\n    // \u2500\u2500 Edge fade \u2013 glowing centre, soft feathered rim \u2500\u2500\u2500\u2500\n    float NdotV = max(dot(N, V), 0.0);\n    float centerFade = smoothstep(0.0, 0.55, NdotV);\n\n    col *= u_intensity;\n    float alpha = centerFade * 0.85;\n\n    gl_FragColor = vec4(col, alpha);\n}\n";
+export declare const glowVertex = "\nvarying vec3 vNormal;\nvarying vec3 vViewDirection;\n\nvoid main() {\n    vNormal = normalize(normalMatrix * normal);\n    vec4 worldPos = modelMatrix * vec4(position, 1.0);\n    vViewDirection = normalize(cameraPosition - worldPos.xyz);\n    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}\n";
+export declare const glowFragment = "\nprecision highp float;\n\nuniform float u_time;\nuniform vec3  u_color1;\nuniform vec3  u_color2;\nuniform vec3  u_color3;\nuniform float u_intensity;\nuniform float u_falloff;\n\nvarying vec3 vNormal;\nvarying vec3 vViewDirection;\n\nvoid main() {\n    vec3 N = normalize(vNormal);\n    vec3 V = normalize(vViewDirection);\n\n    float NdotV   = max(dot(N, V), 0.0);\n    float fresnel = pow(1.0 - NdotV, u_falloff);\n\n    // Rotate colour mapping\n    float a  = u_time * 0.35;\n    float ca = cos(a), sa = sin(a);\n    vec3 dir = vec3(\n        N.x * ca - N.z * sa,\n        N.y,\n        N.x * sa + N.z * ca\n    );\n\n    float vert = dir.y * 0.5 + 0.5;\n    vec3  col  = mix(u_color3, u_color1, vert);\n    float midW = 1.0 - abs(vert - 0.5) * 2.0;\n    col = mix(col, u_color2, midW * 0.6);\n\n    // Subtle glow pulsing\n    float pulse = 0.88 + sin(u_time * 1.0) * 0.12;\n    float alpha = fresnel * u_intensity * pulse;\n\n    gl_FragColor = vec4(col * alpha, alpha);\n}\n";

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

@@ -0,0 +1,311 @@
+/**
+ * Custom GLSL shaders for the AIOrb effect.
+ *
+ * Uses Three.js ShaderMaterial conventions (GLSL 100-style syntax;
+ * Three.js auto-converts to GLSL 300 es for WebGL2).
+ *
+ * Built-in uniforms/attributes provided by Three.js:
+ *   modelMatrix, viewMatrix, projectionMatrix, modelViewMatrix,
+ *   normalMatrix, cameraPosition, position, normal, uv
+ */
+// ─── Shared noise utilities ────────────────────────────────────────────────
+const noiseGLSL = /* glsl */ `
+float hash(vec3 p) {
+    p = fract(p * vec3(0.1031, 0.1030, 0.0973));
+    p += dot(p, p.yxz + 33.33);
+    return fract((p.x + p.y) * p.z);
+}
+
+float noise(vec3 x) {
+    vec3 i = floor(x);
+    vec3 f = fract(x);
+    f = f * f * (3.0 - 2.0 * f);
+
+    return mix(
+        mix(mix(hash(i + vec3(0,0,0)), hash(i + vec3(1,0,0)), f.x),
+            mix(hash(i + vec3(0,1,0)), hash(i + vec3(1,1,0)), f.x), f.y),
+        mix(mix(hash(i + vec3(0,0,1)), hash(i + vec3(1,0,1)), f.x),
+            mix(hash(i + vec3(0,1,1)), hash(i + vec3(1,1,1)), f.x), f.y),
+        f.z);
+}
+`;
+// ─── Dot Sphere ─────────────────────────────────────────────────────────────
+const dotSphereVertex = /* glsl */ `
+uniform float u_time;
+
+varying vec3 vNormal;
+varying vec3 vWorldPosition;
+varying vec3 vViewDirection;
+varying float vDisplacement;
+
+${noiseGLSL}
+
+void main() {
+    // Multi-octave noise for organic surface displacement
+    float n1 = noise(normal * 1.8 + u_time * 0.8);
+    float n2 = noise(normal * 3.6 - u_time * 0.5) * 0.5;
+    float disp = (n1 + n2 - 0.75) * 0.15;
+
+    // Visible traveling wave across the surface
+    disp += sin(normal.x * 4.0 + u_time * 2.5) *
+            sin(normal.z * 4.0 + u_time * 1.8) * 0.06;
+
+    // Global breathing
+    disp += sin(u_time * 1.5) * 0.025;
+
+    vec3 newPos = position + normal * disp;
+    vDisplacement = disp;
+
+    vNormal = normalize(normalMatrix * normal);
+    vec4 worldPos = modelMatrix * vec4(newPos, 1.0);
+    vWorldPosition = worldPos.xyz;
+    vViewDirection = normalize(cameraPosition - worldPos.xyz);
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(newPos, 1.0);
+}
+`;
+const dotSphereFragment = /* glsl */ `
+precision highp float;
+
+uniform float u_time;
+uniform vec3  u_color1;
+uniform vec3  u_color2;
+uniform vec3  u_color3;
+uniform float u_dotSize;
+uniform float u_gridDensity;
+uniform float u_rimIntensity;
+
+varying vec3 vNormal;
+varying vec3 vWorldPosition;
+varying vec3 vViewDirection;
+varying float vDisplacement;
+
+void main() {
+    vec3 N = normalize(vNormal);
+    vec3 V = normalize(vViewDirection);
+
+    // ── Fresnel ──────────────────────────────────────────
+    float NdotV   = max(dot(N, V), 0.0);
+    float fresnel = pow(1.0 - NdotV, 2.5);
+
+    // ── Dot pattern on the sphere surface ────────────────
+    vec3 pos = normalize(vWorldPosition);
+
+    // Multi-axis rotation so dots tumble in 3D, not just left-to-right
+    // Y-axis
+    float rY = u_time * 0.2;
+    float cY = cos(rY), sY = sin(rY);
+    vec3 rotPos = vec3(
+        pos.x * cY - pos.z * sY,
+        pos.y,
+        pos.x * sY + pos.z * cY
+    );
+    // X-axis (tilt)
+    float rX = u_time * 0.13;
+    float cX = cos(rX), sX = sin(rX);
+    rotPos = vec3(
+        rotPos.x,
+        rotPos.y * cX - rotPos.z * sX,
+        rotPos.y * sX + rotPos.z * cX
+    );
+    // Z-axis (slow roll)
+    float rZ = u_time * 0.08;
+    float cZ = cos(rZ), sZ = sin(rZ);
+    rotPos = vec3(
+        rotPos.x * cZ - rotPos.y * sZ,
+        rotPos.x * sZ + rotPos.y * cZ,
+        rotPos.z
+    );
+
+    float theta    = acos(clamp(rotPos.y, -1.0, 1.0));
+    float phi      = atan(rotPos.z, rotPos.x);
+    float sinTheta = sin(theta);
+
+    float latGrid = theta * u_gridDensity / 3.14159265;
+    float lonGrid = phi  * u_gridDensity * max(sinTheta, 0.15) / 3.14159265;
+
+    vec2  cell    = fract(vec2(latGrid, lonGrid));
+    float dotDist = length(cell - 0.5);
+
+    // Dots react to surface displacement – swell on peaks, shrink in valleys
+    float dispInfluence = smoothstep(-0.05, 0.15, vDisplacement);
+    float pulse = 0.75 + dispInfluence * 0.5
+                + sin(u_time * 1.5 + theta * 3.0 + phi * 2.0) * 0.15;
+    float adjustedDotSize = u_dotSize * pulse;
+    // Sharper edge for more visible dots
+    float dotMask = 1.0 - smoothstep(adjustedDotSize - 0.008, adjustedDotSize + 0.008, dotDist);
+
+    // ── Multi-colour rim based on normal direction ───────
+    float cAngle = u_time * 0.35;
+    float cc = cos(cAngle), sc = sin(cAngle);
+    vec3 colorDir = vec3(
+        N.x * cc - N.z * sc,
+        N.y,
+        N.x * sc + N.z * cc
+    );
+
+    float vert = colorDir.y * 0.5 + 0.5;
+    vec3  rimColor = mix(u_color3, u_color1, vert);
+    float midW     = 1.0 - abs(vert - 0.5) * 2.0;
+    rimColor = mix(rimColor, u_color2, midW * 0.6);
+
+    // ── Compose ──────────────────────────────────────────
+    // Dots: bright coloured points with hot white core
+    vec3  dotColor  = rimColor * 2.0 + vec3(0.2);
+    float dotBright = dotMask * 0.85;
+
+    // Rim glow (independent of dots – visible at edges)
+    float rimGlow   = pow(fresnel, 1.5) * u_rimIntensity;
+    vec3  glowColor = rimColor * rimGlow;
+
+    vec3  col   = dotColor * dotBright + glowColor;
+    // Between dots: transparent → waves show through; on dots: near-opaque
+    float alpha = max(dotBright, pow(fresnel, 1.0) * 0.7);
+
+    gl_FragColor = vec4(col, alpha);
+}
+`;
+// ─── Inner wave layers (blurred flowing colour inside the orb) ──────────────
+const waveVertex = /* glsl */ `
+uniform float u_time;
+uniform float u_flowSpeed;
+
+varying vec3 vNormal;
+varying vec3 vWorldPosition;
+varying vec3 vViewDirection;
+
+${noiseGLSL}
+
+void main() {
+    // Organic displacement matching the outer dot sphere deformation
+    float t = u_time * 0.8;
+    float n1 = noise(normal * 1.8 + t);
+    float n2 = noise(normal * 3.6 - t * 0.625) * 0.5;
+    float disp = (n1 + n2 - 0.75) * 0.15;
+    disp += sin(normal.x * 4.0 + t * 3.125) *
+            sin(normal.z * 4.0 + t * 2.25) * 0.06;
+    disp += sin(t * 1.875) * 0.025;
+
+    vec3 newPos = position + normal * disp;
+
+    vNormal = normalize(normalMatrix * normal);
+    vec4 worldPos = modelMatrix * vec4(newPos, 1.0);
+    vWorldPosition = worldPos.xyz;
+    vViewDirection = normalize(cameraPosition - worldPos.xyz);
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(newPos, 1.0);
+}
+`;
+const waveFragment = /* glsl */ `
+precision highp float;
+
+uniform float u_time;
+uniform vec3  u_color1;
+uniform vec3  u_color2;
+uniform vec3  u_color3;
+uniform float u_intensity;
+uniform float u_noiseScale;
+uniform float u_flowSpeed;
+
+varying vec3 vNormal;
+varying vec3 vWorldPosition;
+varying vec3 vViewDirection;
+
+${noiseGLSL}
+
+void main() {
+    vec3 N = normalize(vNormal);
+    vec3 V = normalize(vViewDirection);
+    vec3 pos = normalize(vWorldPosition);
+
+    float t = u_time * u_flowSpeed;
+
+    // ── Three overlapping soft wave layers ───────────────
+
+    // Layer 1 – large blobs, clearly moving
+    vec3 flow1 = vec3(sin(t * 0.8), cos(t * 0.6), sin(t * 0.5)) * 0.8;
+    float w1 = noise(pos * u_noiseScale + flow1);
+    w1 = smoothstep(0.2, 0.8, w1);
+
+    // Layer 2 – medium detail, different axis
+    vec3 flow2 = vec3(cos(t * 0.7), sin(t * 0.9), cos(t * 0.6)) * 0.7;
+    float w2 = noise(pos * u_noiseScale * 1.6 + flow2 + 100.0);
+    w2 = smoothstep(0.25, 0.75, w2);
+
+    // Layer 3 – faster, finer detail
+    vec3 flow3 = vec3(sin(t * 1.1), cos(t * 0.8), sin(t * 1.2)) * 0.6;
+    float w3 = noise(pos * u_noiseScale * 2.8 + flow3 + 200.0);
+    w3 = smoothstep(0.3, 0.7, w3);
+
+    // ── Colour each layer – bright and glowing ───────────
+    vec3 col = u_color1 * w1 * 0.8
+             + u_color2 * w2 * 0.6
+             + u_color3 * w3 * 0.5;
+
+    // Vertical base wash
+    float yGrad = pos.y * 0.5 + 0.5;
+    col += mix(u_color3, u_color1, yGrad) * 0.15;
+
+    // ── Edge fade – glowing centre, soft feathered rim ────
+    float NdotV = max(dot(N, V), 0.0);
+    float centerFade = smoothstep(0.0, 0.55, NdotV);
+
+    col *= u_intensity;
+    float alpha = centerFade * 0.85;
+
+    gl_FragColor = vec4(col, alpha);
+}
+`;
+// ─── Glow layers (inner rim + outer atmosphere) ─────────────────────────────
+const glowVertex = /* glsl */ `
+varying vec3 vNormal;
+varying vec3 vViewDirection;
+
+void main() {
+    vNormal = normalize(normalMatrix * normal);
+    vec4 worldPos = modelMatrix * vec4(position, 1.0);
+    vViewDirection = normalize(cameraPosition - worldPos.xyz);
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+}
+`;
+const glowFragment = /* glsl */ `
+precision highp float;
+
+uniform float u_time;
+uniform vec3  u_color1;
+uniform vec3  u_color2;
+uniform vec3  u_color3;
+uniform float u_intensity;
+uniform float u_falloff;
+
+varying vec3 vNormal;
+varying vec3 vViewDirection;
+
+void main() {
+    vec3 N = normalize(vNormal);
+    vec3 V = normalize(vViewDirection);
+
+    float NdotV   = max(dot(N, V), 0.0);
+    float fresnel = pow(1.0 - NdotV, u_falloff);
+
+    // Rotate colour mapping
+    float a  = u_time * 0.35;
+    float ca = cos(a), sa = sin(a);
+    vec3 dir = vec3(
+        N.x * ca - N.z * sa,
+        N.y,
+        N.x * sa + N.z * ca
+    );
+
+    float vert = dir.y * 0.5 + 0.5;
+    vec3  col  = mix(u_color3, u_color1, vert);
+    float midW = 1.0 - abs(vert - 0.5) * 2.0;
+    col = mix(col, u_color2, midW * 0.6);
+
+    // Subtle glow pulsing
+    float pulse = 0.88 + sin(u_time * 1.0) * 0.12;
+    float alpha = fresnel * u_intensity * pulse;
+
+    gl_FragColor = vec4(col * alpha, alpha);
+}
+`;
+
+export { dotSphereFragment, dotSphereVertex, glowFragment, glowVertex, waveFragment, waveVertex };

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

@@ -0,0 +1,37 @@
+export interface DotSphereProps {
+    /**
+     * Three gradient colours [top, middle, bottom] as hex strings.
+     * @default ['#00d2ff', '#a855f7', '#f97316']
+     */
+    colors?: [string, string, string];
+    /**
+     * Global animation speed multiplier.
+     * @default 0.6
+     */
+    speed?: number;
+    /**
+     * Density of the dot grid on the sphere surface.
+     * @default 40
+     */
+    gridDensity?: number;
+    /**
+     * Radius of each dot (0-0.1).
+     * @default 0.055
+     */
+    dotSize?: number;
+    /**
+     * Brightness of the Fresnel rim glow (0-3).
+     * @default 1.5
+     */
+    rimIntensity?: number;
+    /**
+     * Brightness of the outer atmospheric glow (0-2).
+     * @default 1.0
+     */
+    glowIntensity?: number;
+    /**
+     * How far the outer glow extends (sphere scale multiplier).
+     * @default 1.5
+     */
+    glowSize?: number;
+}

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

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

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

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

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

@@ -0,0 +1,108 @@
+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 { simplex3 } from './Liquid.noise.js';
+import { atmosphereFragment, glowVertex } from './Liquid.shaders.js';
+
+const LiquidScene = ({ colors, meshColor, speed, roughness, metalness, noiseScale, noiseAmplitude, glowIntensity, glowSize, }) => {
+    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 };
+    // 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 }) => {
+        const t = clock.getElapsedTime();
+        const { speed: spd, noiseScale: ns, noiseAmplitude: na } = propsRef.current;
+        // 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: AdditiveBlending, 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 }) => {
+                    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: {
+                    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 { Liquid };

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

@@ -0,0 +1,4 @@
+/**
+ * Simplex 3D noise – deterministic, seedless implementation.
+ */
+export declare function simplex3(xin: number, yin: number, zin: number): number;