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

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

@@ -1,134 +1,36 @@
-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, 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';
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
 
-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);
-    // 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 ───────────────────────────────────
+/**
+ * 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`).
+ */
+const Liquid = (props) => {
+    const [Impl, setImpl] = useState(null);
     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),
+        let cancelled = false;
+        import('./Liquid.impl.js')
+            .then(({ LiquidImpl }) => {
+            if (!cancelled)
+                setImpl(() => LiquidImpl);
+        })
+            .catch((err) => {
+            if (process.env.NODE_ENV !== "production") {
+                console.error('[AIOrb.Liquid] requires the optional "three", "@react-three/fiber", and "@react-three/drei" peer dependencies.', err);
+            }
+        });
+        return () => {
+            cancelled = true;
         };
     }, []);
-    // ── 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;
-        const t = 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 ────────────────────────────────────────────────────
-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, 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",
-                } })] }));
+    if (!Impl)
+        return null;
+    return jsx(Impl, { ...props });
 };
 
 export { Liquid };

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

@@ -1,5 +1,5 @@
-import type { AnimatedContextValue, AnimatedGroupProps } from './Animated.types';
-export declare const useAnimatedContext: () => AnimatedContextValue | undefined;
+import type { AnimatedGroupProps } from './Animated.types';
+export { AnimatedContext, useAnimatedContext } from './AnimatedContext';
 export declare const Animated: {
     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

@@ -1,14 +1,13 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useMemo, useContext } from 'react';
+import { useMemo } from 'react';
 import { useReducedMotion, motion, AnimatePresence } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
 import { getGroupVariants } from './Animated.animations.js';
+import { AnimatedContext } from './AnimatedContext.js';
+export { useAnimatedContext } from './AnimatedContext.js';
 import { AnimatedItem } from './AnimatedItem.js';
 
-const AnimatedContext = createContext(undefined);
-const useAnimatedContext = () => {
-    return useContext(AnimatedContext);
-};
 const AnimatedGroup = ({ stagger = 0.1, delay = 0, as = 'div', children, className, style, ...props }) => {
     const shouldReduceMotion = useReducedMotion();
     const groupVariants = useMemo(() => getGroupVariants(stagger, delay), [stagger, delay]);
@@ -33,4 +32,4 @@ const Animated = Object.assign({}, {
     Item: AnimatedItem,
 });
 
-export { Animated, useAnimatedContext };
+export { Animated, AnimatedContext };

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

@@ -0,0 +1,3 @@
+import type { AnimatedContextValue } from './Animated.types';
+export declare const AnimatedContext: import("react").Context<AnimatedContextValue | undefined>;
+export declare const useAnimatedContext: () => AnimatedContextValue | undefined;

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

@@ -0,0 +1,12 @@
+"use client";
+import { createContext, useContext } from 'react';
+
+// Lives in its own module (not Animated.tsx) so AnimatedItem can consume the
+// context without importing Animated.tsx, which imports it back (circular dep).
+// Animated.tsx re-exports `useAnimatedContext`, so `from './Animated'` keeps working.
+const AnimatedContext = createContext(undefined);
+const useAnimatedContext = () => {
+    return useContext(AnimatedContext);
+};
+
+export { AnimatedContext, useAnimatedContext };

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

@@ -1,8 +1,9 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import { useReducedMotion, motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';
-import { useAnimatedContext } from './Animated.js';
+import { useAnimatedContext } from './AnimatedContext.js';
 import { getAnimationVariants, getExitVariant } from './Animated.animations.js';
 
 const AnimatedItem = ({ animation = 'fadeUp', transition, as = 'div', delay, className, children, style, ...props }) => {

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useRef, useState, useEffect } from 'react';
 import { useReducedMotion } from 'motion/react';
@@ -185,7 +186,9 @@ const Aurora = ({ colors = DEFAULT_COLORS, blur = 80, speed = 1, opacity = 0.3,
         const gl = canvas.getContext('webgl', { antialias: false, alpha: true }) ||
             canvas.getContext('experimental-webgl', { antialias: false, alpha: true });
         if (!gl) {
-            console.warn('WebGL is not supported in this browser. Falling back to static CSS.');
+            if (process.env.NODE_ENV !== 'production') {
+                console.warn('WebGL is not supported in this browser. Falling back to static CSS.');
+            }
             setWebglSupported(false);
             return;
         }
@@ -197,7 +200,9 @@ const Aurora = ({ colors = DEFAULT_COLORS, blur = 80, speed = 1, opacity = 0.3,
             gl.shaderSource(shader, source);
             gl.compileShader(shader);
             if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-                console.error('Shader compile error:', gl.getShaderInfoLog(shader));
+                if (process.env.NODE_ENV !== 'production') {
+                    console.error('Shader compile error:', gl.getShaderInfoLog(shader));
+                }
                 gl.deleteShader(shader);
                 return null;
             }
@@ -215,7 +220,9 @@ const Aurora = ({ colors = DEFAULT_COLORS, blur = 80, speed = 1, opacity = 0.3,
             gl.attachShader(prog, fs);
             gl.linkProgram(prog);
             if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) {
-                console.error('Program link error:', gl.getProgramInfoLog(prog));
+                if (process.env.NODE_ENV !== 'production') {
+                    console.error('Program link error:', gl.getProgramInfoLog(prog));
+                }
                 gl.deleteProgram(prog);
                 return null;
             }
@@ -255,7 +262,7 @@ const Aurora = ({ colors = DEFAULT_COLORS, blur = 80, speed = 1, opacity = 0.3,
             rgbList.push(rgbList[rgbList.length - 1] || [0.23, 0.51, 0.96]);
         }
         let animationFrameId = 0;
-        let startTime = performance.now();
+        const startTime = performance.now();
         const resizeCanvas = () => {
             const container = containerRef.current;
             if (!container || !canvas)
@@ -297,9 +304,24 @@ const Aurora = ({ colors = DEFAULT_COLORS, blur = 80, speed = 1, opacity = 0.3,
             gl.drawArrays(gl.TRIANGLES, 0, 6);
             animationFrameId = requestAnimationFrame(render);
         };
-        render();
+        // Pause the render loop while the tab is hidden — resume from wherever
+        // the (still-running) clock is when it becomes visible again.
+        const handleVisibilityChange = () => {
+            if (document.hidden) {
+                cancelAnimationFrame(animationFrameId);
+                animationFrameId = 0;
+            }
+            else if (animationFrameId === 0) {
+                animationFrameId = requestAnimationFrame(render);
+            }
+        };
+        if (!document.hidden) {
+            animationFrameId = requestAnimationFrame(render);
+        }
+        document.addEventListener('visibilitychange', handleVisibilityChange);
         // Clean up WebGL assets on unmount
         return () => {
+            document.removeEventListener('visibilitychange', handleVisibilityChange);
             cancelAnimationFrame(animationFrameId);
             window.removeEventListener('resize', resizeCanvas);
             gl.deleteBuffer(positionBuffer);

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

@@ -0,0 +1,8 @@
+import React from "react";
+import type { ColorPanelsProps } from "./ColorPanels.types";
+/**
+ * Animated perspective "venetian blind" color panels sweeping toward a
+ * vanishing point. WebGL2-powered; falls back to a static CSS gradient when
+ * WebGL2 is unavailable or the user prefers reduced motion.
+ */
+export declare const ColorPanels: React.FC<ColorPanelsProps>;

package/dist/components/effects/ColorPanels/ColorPanels.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useMemo, useRef } from 'react';
+import { useReducedMotion } from 'motion/react';
+import { useIsClient } from '../../../hooks/useIsClient.js';
+import { useDarkMode } from '../../../hooks/useDarkMode.js';
+import { cn } from '../../../utils/cn.js';
+import { ShaderCanvas } from '../shared/ShaderCanvas/ShaderCanvas.js';
+import { resolveShaderColors, resolveShaderColor } from '../shared/resolveShaderColor.js';
+import { colorPanelsFragmentShader } from './ColorPanels.shaders.js';
+import { COLOR_PANELS_MAX_COLORS } from './ColorPanels.types.js';
+
+const DEFAULT_COLORS = ["var(--color-primary-300)", "var(--color-primary)", "var(--color-primary-700)"];
+const DEFAULT_COLOR_BACK = "var(--color-background)";
+function useWebgl2Supported(disabled) {
+    return useMemo(() => {
+        if (disabled || typeof document === "undefined")
+            return false;
+        try {
+            return !!document.createElement("canvas").getContext("webgl2");
+        }
+        catch (_a) {
+            return false;
+        }
+    }, [disabled]);
+}
+/**
+ * Animated perspective "venetian blind" color panels sweeping toward a
+ * vanishing point. WebGL2-powered; falls back to a static CSS gradient when
+ * WebGL2 is unavailable or the user prefers reduced motion.
+ */
+const ColorPanels = ({ colors = DEFAULT_COLORS, colorBack = DEFAULT_COLOR_BACK, angle1 = 0.3, angle2 = 0.3, length = 1, edges = false, blur = 0.3, fadeIn = 0.3, fadeOut = 0.3, density = 0.5, gradient = 0.2, speed = 1, className, style, ...props }) => {
+    var _a, _b;
+    const isClient = useIsClient();
+    const shouldReduceMotion = useReducedMotion();
+    const isDark = useDarkMode();
+    const webglSupported = useWebgl2Supported(!!shouldReduceMotion);
+    const safeColors = colors.length > 0 ? colors.slice(0, COLOR_PANELS_MAX_COLORS) : DEFAULT_COLORS;
+    const resolvedColors = useMemo(() => resolveShaderColors(safeColors), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [safeColors.join("|"), isDark]);
+    const resolvedBack = useMemo(() => resolveShaderColor(colorBack), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [colorBack, isDark]);
+    const uniformsRef = useRef({});
+    for (let i = 0; i < COLOR_PANELS_MAX_COLORS; i++) {
+        uniformsRef.current[`u_colors[${i}]`] =
+            (_b = (_a = resolvedColors[i]) !== null && _a !== void 0 ? _a : resolvedColors[resolvedColors.length - 1]) !== null && _b !== void 0 ? _b : [0, 0, 0, 0];
+    }
+    uniformsRef.current.u_colorsCount = resolvedColors.length;
+    uniformsRef.current.u_colorBack = resolvedBack;
+    uniformsRef.current.u_angle1 = angle1;
+    uniformsRef.current.u_angle2 = angle2;
+    uniformsRef.current.u_length = length;
+    uniformsRef.current.u_edges = edges ? 1 : 0;
+    uniformsRef.current.u_blur = blur;
+    uniformsRef.current.u_fadeIn = fadeIn;
+    uniformsRef.current.u_fadeOut = fadeOut;
+    uniformsRef.current.u_density = density;
+    uniformsRef.current.u_gradient = gradient;
+    uniformsRef.current.u_speed = speed;
+    const fallbackGradient = `linear-gradient(100deg, ${safeColors.join(", ")}, ${colorBack})`;
+    return (jsx("div", { className: cn("absolute inset-0 overflow-hidden pointer-events-none select-none", className), style: style, "aria-hidden": "true", ...props, children: isClient && webglSupported ? (jsx(ShaderCanvas, { fragmentShader: colorPanelsFragmentShader, uniformsRef: uniformsRef })) : (jsx("div", { className: "absolute inset-0", style: { background: fallbackGradient } })) }));
+};
+
+export { ColorPanels };

package/dist/components/effects/ColorPanels/ColorPanels.shaders.d.ts

@@ -0,0 +1,12 @@
+/**
+ * ColorPanels fragment shader — adapted from paper-design/shaders'
+ * `color-panels.ts` (https://github.com/paper-design/shaders, Apache License
+ * 2.0).
+ *
+ * Simplified from the original: plain centered/aspect-corrected UV
+ * (gl_FragCoord/iResolution) instead of paper-design's ShaderSizingParams
+ * fit/scale/rotation engine — the `u_scale` uniform that engine supplied
+ * (used only for an anti-aliasing threshold) is hardcoded to 1.0 here since
+ * there's no external scale/zoom control in this port.
+ */
+export declare const colorPanelsFragmentShader = "#version 300 es\nprecision lowp float;\n\nuniform float iTime;\nuniform vec2 iResolution;\n\nuniform vec4 u_colors[7];\nuniform float u_colorsCount;\nuniform vec4 u_colorBack;\nuniform float u_density;\nuniform float u_angle1;\nuniform float u_angle2;\nuniform float u_length;\nuniform float u_edges;\nuniform float u_blur;\nuniform float u_fadeIn;\nuniform float u_fadeOut;\nuniform float u_gradient;\nuniform float u_speed;\n\nout vec4 fragColor;\n\n\nconst float PI = 3.14159265359;\nconst float TWO_PI = 6.28318530718;\n\n\nconst float zLimit = .5;\nconst float SCALE = 1.0;\n\nvec2 getPanel(float angle, vec2 uv, float invLength, float aa) {\n  float sinA = sin(angle);\n  float cosA = cos(angle);\n\n  float denom = sinA - uv.y * cosA;\n  if (abs(denom) < .01) return vec2(0.);\n\n  float z = uv.y / denom;\n\n  if (z <= 0. || z > zLimit) return vec2(0.);\n\n  float zRatio = z / zLimit;\n  float panelMap = 1. - zRatio;\n  float x = uv.x * (cosA * z + 1.) * invLength;\n\n  float zOffset = zRatio - .5;\n  float left = -.5 + zOffset * u_angle1;\n  float right = .5 - zOffset * u_angle2;\n  float blurX = aa + 2. * panelMap * u_blur;\n\n  float leftEdge1 = left - blurX;\n  float leftEdge2 = left + .25 * blurX;\n  float rightEdge1 = right - .25 * blurX;\n  float rightEdge2 = right + blurX;\n\n  float panel = smoothstep(leftEdge1, leftEdge2, x) * (1.0 - smoothstep(rightEdge1, rightEdge2, x));\n  panel *= mix(0., panel, smoothstep(0., .01 / max(SCALE, 1e-6), panelMap));\n\n  float midScreen = abs(sinA);\n  if (u_edges > 0.5) {\n    panelMap = mix(.99, panelMap, panel * clamp(panelMap / (.15 * (1. - pow(midScreen, .1))), 0.0, 1.0));\n  } else if (midScreen < .07) {\n    panel *= (midScreen * 15.);\n  }\n\n  return vec2(panel, panelMap);\n}\n\nvec4 blendColor(vec4 colorA, float panelMask, float panelMap) {\n  float fade = 1. - smoothstep(.97 - .97 * u_fadeIn, 1., panelMap);\n  fade *= smoothstep(-.2 * (1. - u_fadeOut), u_fadeOut, panelMap);\n\n  vec3 blendedRGB = mix(vec3(0.), colorA.rgb, fade);\n  float blendedAlpha = mix(0., colorA.a, fade);\n\n  return vec4(blendedRGB, blendedAlpha) * panelMask;\n}\n\nvoid main() {\n  vec2 uv = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);\n  uv *= 1.25;\n\n  float t = .02 * u_speed * iTime;\n  t = fract(t);\n  bool reverseTime = (t < 0.5);\n\n  vec3 color = vec3(0.);\n  float opacity = 0.;\n\n  float aa = .005 / SCALE;\n  int colorsCount = int(u_colorsCount);\n\n  vec4 premultipliedColors[7];\n  for (int i = 0; i < 7; i++) {\n    if (i >= colorsCount) break;\n    vec4 c = u_colors[i];\n    c.rgb *= c.a;\n    premultipliedColors[i] = c;\n  }\n\n  float invLength = 1.5 / max(u_length, .001);\n\n  int panelsNumber = 12;\n  float densityNormalizer = 1.;\n  if (colorsCount == 4) {\n    panelsNumber = 16;\n    densityNormalizer = 1.34;\n  } else if (colorsCount == 5) {\n    panelsNumber = 20;\n    densityNormalizer = 1.67;\n  } else if (colorsCount == 7) {\n    panelsNumber = 14;\n    densityNormalizer = 1.17;\n  }\n\n  float fPanelsNumber = float(panelsNumber);\n  float panelGrad = 1. - clamp(u_gradient, 0., 1.);\n\n  for (int set = 0; set < 2; set++) {\n    bool isForward = (set == 0 && !reverseTime) || (set == 1 && reverseTime);\n    if (!isForward) continue;\n\n    for (int i = 0; i <= 20; i++) {\n      if (i >= panelsNumber) break;\n\n      int idx = panelsNumber - 1 - i;\n\n      float offset = float(idx) / fPanelsNumber;\n      if (set == 1) {\n        offset += .5;\n      }\n\n      float densityFract = densityNormalizer * fract(t + offset);\n      float angleNorm = densityFract / u_density;\n      if (densityFract >= .5 || angleNorm >= .3) continue;\n\n      float smoothDensity = clamp((.5 - densityFract) / .1, 0., 1.) * clamp(densityFract / .01, 0., 1.);\n      float smoothAngle = clamp((.3 - angleNorm) / .05, 0., 1.);\n      if (smoothDensity * smoothAngle < .001) continue;\n\n      if (angleNorm > .5) {\n        angleNorm = 0.5;\n      }\n      vec2 panel = getPanel(angleNorm * TWO_PI + PI, uv, invLength, aa);\n      if (panel[0] <= .001) continue;\n      float panelMask = panel[0] * smoothDensity * smoothAngle;\n      float panelMap = panel[1];\n\n      int colorIdx = idx % colorsCount;\n      int nextColorIdx = (idx + 1) % colorsCount;\n\n      vec4 colorA = premultipliedColors[colorIdx];\n      vec4 colorB = premultipliedColors[nextColorIdx];\n\n      colorA = mix(colorA, colorB, max(0., smoothstep(.0, .45, panelMap) - panelGrad));\n      vec4 blended = blendColor(colorA, panelMask, panelMap);\n      color = blended.rgb + color * (1. - blended.a);\n      opacity = blended.a + opacity * (1. - blended.a);\n    }\n\n    for (int i = 0; i <= 20; i++) {\n      if (i >= panelsNumber) break;\n\n      int idx = panelsNumber - 1 - i;\n\n      float offset = float(idx) / fPanelsNumber;\n      if (set == 0) {\n        offset += .5;\n      }\n\n      float densityFract = densityNormalizer * fract(-t + offset);\n      float angleNorm = -densityFract / u_density;\n      if (densityFract >= .5 || angleNorm < -.3) continue;\n\n      float smoothDensity = clamp((.5 - densityFract) / .1, 0., 1.) * clamp(densityFract / .01, 0., 1.);\n      float smoothAngle = clamp((angleNorm + .3) / .05, 0., 1.);\n      if (smoothDensity * smoothAngle < .001) continue;\n\n      vec2 panel = getPanel(angleNorm * TWO_PI + PI, uv, invLength, aa);\n      float panelMask = panel[0] * smoothDensity * smoothAngle;\n      if (panelMask <= .001) continue;\n      float panelMap = panel[1];\n\n      int colorIdx = (colorsCount - (idx % colorsCount)) % colorsCount;\n      if (colorIdx < 0) colorIdx += colorsCount;\n      int nextColorIdx = (colorIdx + 1) % colorsCount;\n\n      vec4 colorA = premultipliedColors[colorIdx];\n      vec4 colorB = premultipliedColors[nextColorIdx];\n\n      colorA = mix(colorA, colorB, max(0., smoothstep(.0, .45, panelMap) - panelGrad));\n      vec4 blended = blendColor(colorA, panelMask, panelMap);\n      color = blended.rgb + color * (1. - blended.a);\n      opacity = blended.a + opacity * (1. - blended.a);\n    }\n  }\n\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1.0 - opacity);\n  opacity = opacity + u_colorBack.a * (1.0 - opacity);\n\n  fragColor = vec4(color, opacity);\n}\n";

package/dist/components/effects/ColorPanels/ColorPanels.shaders.js

@@ -0,0 +1,218 @@
+import 'react/jsx-runtime';
+import 'react';
+import { glslDeclarePI } from '../shared/shaderNoise.glsl.js';
+
+/**
+ * ColorPanels fragment shader — adapted from paper-design/shaders'
+ * `color-panels.ts` (https://github.com/paper-design/shaders, Apache License
+ * 2.0).
+ *
+ * Simplified from the original: plain centered/aspect-corrected UV
+ * (gl_FragCoord/iResolution) instead of paper-design's ShaderSizingParams
+ * fit/scale/rotation engine — the `u_scale` uniform that engine supplied
+ * (used only for an anti-aliasing threshold) is hardcoded to 1.0 here since
+ * there's no external scale/zoom control in this port.
+ */
+const colorPanelsFragmentShader = `#version 300 es
+precision lowp float;
+
+uniform float iTime;
+uniform vec2 iResolution;
+
+uniform vec4 u_colors[7];
+uniform float u_colorsCount;
+uniform vec4 u_colorBack;
+uniform float u_density;
+uniform float u_angle1;
+uniform float u_angle2;
+uniform float u_length;
+uniform float u_edges;
+uniform float u_blur;
+uniform float u_fadeIn;
+uniform float u_fadeOut;
+uniform float u_gradient;
+uniform float u_speed;
+
+out vec4 fragColor;
+
+${glslDeclarePI}
+
+const float zLimit = .5;
+const float SCALE = 1.0;
+
+vec2 getPanel(float angle, vec2 uv, float invLength, float aa) {
+  float sinA = sin(angle);
+  float cosA = cos(angle);
+
+  float denom = sinA - uv.y * cosA;
+  if (abs(denom) < .01) return vec2(0.);
+
+  float z = uv.y / denom;
+
+  if (z <= 0. || z > zLimit) return vec2(0.);
+
+  float zRatio = z / zLimit;
+  float panelMap = 1. - zRatio;
+  float x = uv.x * (cosA * z + 1.) * invLength;
+
+  float zOffset = zRatio - .5;
+  float left = -.5 + zOffset * u_angle1;
+  float right = .5 - zOffset * u_angle2;
+  float blurX = aa + 2. * panelMap * u_blur;
+
+  float leftEdge1 = left - blurX;
+  float leftEdge2 = left + .25 * blurX;
+  float rightEdge1 = right - .25 * blurX;
+  float rightEdge2 = right + blurX;
+
+  float panel = smoothstep(leftEdge1, leftEdge2, x) * (1.0 - smoothstep(rightEdge1, rightEdge2, x));
+  panel *= mix(0., panel, smoothstep(0., .01 / max(SCALE, 1e-6), panelMap));
+
+  float midScreen = abs(sinA);
+  if (u_edges > 0.5) {
+    panelMap = mix(.99, panelMap, panel * clamp(panelMap / (.15 * (1. - pow(midScreen, .1))), 0.0, 1.0));
+  } else if (midScreen < .07) {
+    panel *= (midScreen * 15.);
+  }
+
+  return vec2(panel, panelMap);
+}
+
+vec4 blendColor(vec4 colorA, float panelMask, float panelMap) {
+  float fade = 1. - smoothstep(.97 - .97 * u_fadeIn, 1., panelMap);
+  fade *= smoothstep(-.2 * (1. - u_fadeOut), u_fadeOut, panelMap);
+
+  vec3 blendedRGB = mix(vec3(0.), colorA.rgb, fade);
+  float blendedAlpha = mix(0., colorA.a, fade);
+
+  return vec4(blendedRGB, blendedAlpha) * panelMask;
+}
+
+void main() {
+  vec2 uv = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);
+  uv *= 1.25;
+
+  float t = .02 * u_speed * iTime;
+  t = fract(t);
+  bool reverseTime = (t < 0.5);
+
+  vec3 color = vec3(0.);
+  float opacity = 0.;
+
+  float aa = .005 / SCALE;
+  int colorsCount = int(u_colorsCount);
+
+  vec4 premultipliedColors[7];
+  for (int i = 0; i < 7; i++) {
+    if (i >= colorsCount) break;
+    vec4 c = u_colors[i];
+    c.rgb *= c.a;
+    premultipliedColors[i] = c;
+  }
+
+  float invLength = 1.5 / max(u_length, .001);
+
+  int panelsNumber = 12;
+  float densityNormalizer = 1.;
+  if (colorsCount == 4) {
+    panelsNumber = 16;
+    densityNormalizer = 1.34;
+  } else if (colorsCount == 5) {
+    panelsNumber = 20;
+    densityNormalizer = 1.67;
+  } else if (colorsCount == 7) {
+    panelsNumber = 14;
+    densityNormalizer = 1.17;
+  }
+
+  float fPanelsNumber = float(panelsNumber);
+  float panelGrad = 1. - clamp(u_gradient, 0., 1.);
+
+  for (int set = 0; set < 2; set++) {
+    bool isForward = (set == 0 && !reverseTime) || (set == 1 && reverseTime);
+    if (!isForward) continue;
+
+    for (int i = 0; i <= 20; i++) {
+      if (i >= panelsNumber) break;
+
+      int idx = panelsNumber - 1 - i;
+
+      float offset = float(idx) / fPanelsNumber;
+      if (set == 1) {
+        offset += .5;
+      }
+
+      float densityFract = densityNormalizer * fract(t + offset);
+      float angleNorm = densityFract / u_density;
+      if (densityFract >= .5 || angleNorm >= .3) continue;
+
+      float smoothDensity = clamp((.5 - densityFract) / .1, 0., 1.) * clamp(densityFract / .01, 0., 1.);
+      float smoothAngle = clamp((.3 - angleNorm) / .05, 0., 1.);
+      if (smoothDensity * smoothAngle < .001) continue;
+
+      if (angleNorm > .5) {
+        angleNorm = 0.5;
+      }
+      vec2 panel = getPanel(angleNorm * TWO_PI + PI, uv, invLength, aa);
+      if (panel[0] <= .001) continue;
+      float panelMask = panel[0] * smoothDensity * smoothAngle;
+      float panelMap = panel[1];
+
+      int colorIdx = idx % colorsCount;
+      int nextColorIdx = (idx + 1) % colorsCount;
+
+      vec4 colorA = premultipliedColors[colorIdx];
+      vec4 colorB = premultipliedColors[nextColorIdx];
+
+      colorA = mix(colorA, colorB, max(0., smoothstep(.0, .45, panelMap) - panelGrad));
+      vec4 blended = blendColor(colorA, panelMask, panelMap);
+      color = blended.rgb + color * (1. - blended.a);
+      opacity = blended.a + opacity * (1. - blended.a);
+    }
+
+    for (int i = 0; i <= 20; i++) {
+      if (i >= panelsNumber) break;
+
+      int idx = panelsNumber - 1 - i;
+
+      float offset = float(idx) / fPanelsNumber;
+      if (set == 0) {
+        offset += .5;
+      }
+
+      float densityFract = densityNormalizer * fract(-t + offset);
+      float angleNorm = -densityFract / u_density;
+      if (densityFract >= .5 || angleNorm < -.3) continue;
+
+      float smoothDensity = clamp((.5 - densityFract) / .1, 0., 1.) * clamp(densityFract / .01, 0., 1.);
+      float smoothAngle = clamp((angleNorm + .3) / .05, 0., 1.);
+      if (smoothDensity * smoothAngle < .001) continue;
+
+      vec2 panel = getPanel(angleNorm * TWO_PI + PI, uv, invLength, aa);
+      float panelMask = panel[0] * smoothDensity * smoothAngle;
+      if (panelMask <= .001) continue;
+      float panelMap = panel[1];
+
+      int colorIdx = (colorsCount - (idx % colorsCount)) % colorsCount;
+      if (colorIdx < 0) colorIdx += colorsCount;
+      int nextColorIdx = (colorIdx + 1) % colorsCount;
+
+      vec4 colorA = premultipliedColors[colorIdx];
+      vec4 colorB = premultipliedColors[nextColorIdx];
+
+      colorA = mix(colorA, colorB, max(0., smoothstep(.0, .45, panelMap) - panelGrad));
+      vec4 blended = blendColor(colorA, panelMask, panelMap);
+      color = blended.rgb + color * (1. - blended.a);
+      opacity = blended.a + opacity * (1. - blended.a);
+    }
+  }
+
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  color = color + bgColor * (1.0 - opacity);
+  opacity = opacity + u_colorBack.a * (1.0 - opacity);
+
+  fragColor = vec4(color, opacity);
+}
+`;
+
+export { colorPanelsFragmentShader };

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

@@ -0,0 +1,29 @@
+import type React from "react";
+export declare const COLOR_PANELS_MAX_COLORS = 7;
+export interface ColorPanelsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Panel colors, cycled around the perspective sweep, up to 7. Default: a 3-stop primary ramp. */
+    colors?: string[];
+    /** Background CSS color. Default: 'var(--color-background)'. */
+    colorBack?: string;
+    /** Left-edge perspective skew. Default: 0.3. */
+    angle1?: number;
+    /** Right-edge perspective skew. Default: 0.3. */
+    angle2?: number;
+    /** Panel length (inverse of how stretched panels appear). Default: 1. */
+    length?: number;
+    /** Sharpen panel edges toward the vanishing point. Default: false. */
+    edges?: boolean;
+    /** Panel edge blur/softness. Default: 0.3. */
+    blur?: number;
+    /** Fade-in strength near the near edge. Default: 0.3. */
+    fadeIn?: number;
+    /** Fade-out strength near the vanishing point. Default: 0.3. */
+    fadeOut?: number;
+    /** Panel spacing/frequency. Default: 0.5. */
+    density?: number;
+    /** Cross-panel color gradient blend, 0-1. Default: 0.2. */
+    gradient?: number;
+    /** Animation speed multiplier. Default: 1. */
+    speed?: number;
+    className?: string;
+}

package/dist/components/effects/ColorPanels/ColorPanels.types.js

@@ -0,0 +1,3 @@
+const COLOR_PANELS_MAX_COLORS = 7;
+
+export { COLOR_PANELS_MAX_COLORS };