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

package/dist/components/effects/index.js

@@ -1,19 +1,41 @@
-export { CustomCursor } from './CustomCursor/CustomCursor.js';
+export { CustomCursor, CustomCursorFollow, CustomCursorProvider, useCustomCursor } from './CustomCursor/CustomCursor.js';
 export { GlassEffect } from './GlassEffect/GlassEffect.js';
 export { Overlay } from './Overlay/Overlay.js';
-export { SpotlightBorder } from './SpotlightBorder/SpotlightBorder.js';
 export { GlassSurface } from './GlassSurface/GlassSurface.js';
-export { AIOrb } from './AIOrb/AIOrb.js';
 export { Animated } from './Animated/Animated.js';
 export { ProgressiveBlur } from './ProgressiveBlur/ProgressiveBlur.js';
 export { Aurora } from './Aurora/Aurora.js';
 export { MagneticElement } from './MagneticElement/MagneticElement.js';
-export { MorphingText } from './MorphingText/MorphingText.js';
 export { GridPattern } from './GridPattern/GridPattern.js';
 export { DotPattern } from './DotPattern/DotPattern.js';
+export { StripePattern } from './StripePattern/StripePattern.js';
 export { NoiseOverlay } from './NoiseOverlay/NoiseOverlay.js';
-export { Spotlight } from './Spotlight/Spotlight.js';
-export { Particles } from './Particles/Particles.js';
-export { ParallaxSection } from './ParallaxSection/ParallaxSection.js';
+export { TiltCard } from './TiltCard/TiltCard.js';
 export { ScrollReveal } from './ScrollReveal/ScrollReveal.js';
-export { StickyScroll } from './StickyScroll/StickyScroll.js';
+export { Preloader } from './Preloader/Preloader.js';
+export { InteractiveCharacters } from './InteractiveCharacters/InteractiveCharacters.js';
+export { InsetCircleButton } from './Neumorphic/InsetCircleButton.js';
+export { InsetPill } from './Neumorphic/InsetPill.js';
+export { AIOrb } from './AIOrb/AIOrb.js';
+export { Particles } from './Particles/Particles.js';
+export { MeshGradient } from './MeshGradient/MeshGradient.js';
+export { DEFAULT_MESH_COLORS, MESH_PALETTES, getMeshTextTone, pickPalette } from './MeshGradient/MeshGradient.utils.js';
+export { Shimmer } from './Shimmer/Shimmer.js';
+export { Dithering } from './Dithering/Dithering.js';
+export { GradientMesh } from './GradientMesh/GradientMesh.js';
+export { StaticGradientMesh } from './StaticGradientMesh/StaticGradientMesh.js';
+export { StaticRadialGradient } from './StaticRadialGradient/StaticRadialGradient.js';
+export { Metaballs } from './Metaballs/Metaballs.js';
+export { ColorPanels } from './ColorPanels/ColorPanels.js';
+export { SmokeRing } from './SmokeRing/SmokeRing.js';
+export { GodRays } from './GodRays/GodRays.js';
+export { GrainGradient } from './GrainGradient/GrainGradient.js';
+export { PulsingBorder } from './PulsingBorder/PulsingBorder.js';
+export { LiquidMetal } from './LiquidMetal/LiquidMetal.js';
+export { GemSmoke } from './GemSmoke/GemSmoke.js';
+export { Water } from './Water/Water.js';
+export { ImageDithering } from './ImageDithering/ImageDithering.js';
+export { PaperTexture } from './PaperTexture/PaperTexture.js';
+export { FlutedGlass } from './FlutedGlass/FlutedGlass.js';
+export { HalftoneDots } from './HalftoneDots/HalftoneDots.js';
+export { HalftoneCmyk } from './HalftoneCmyk/HalftoneCmyk.js';

package/dist/components/effects/shared/ShaderCanvas/ShaderCanvas.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import type { ShaderCanvasProps } from "./ShaderCanvas.types";
+/**
+ * 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)
+ * - Optional sampler2D uniforms read from `texturesRef` (image loading,
+ *   texture upload, mipmaps, transparent-pixel placeholder while unset/loading)
+ * - ResizeObserver for responsive canvas sizing
+ * - rAF animation loop, paused while the tab is hidden, with cleanup on unmount
+ * - Graceful degradation: renders nothing if WebGL2 unavailable
+ */
+export declare const ShaderCanvas: React.FC<ShaderCanvasProps>;

package/dist/components/effects/shared/ShaderCanvas/ShaderCanvas.js

@@ -0,0 +1,255 @@
+"use client";
+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)
+ * - Optional sampler2D uniforms read from `texturesRef` (image loading,
+ *   texture upload, mipmaps, transparent-pixel placeholder while unset/loading)
+ * - ResizeObserver for responsive canvas sizing
+ * - rAF animation loop, paused while the tab is hidden, with cleanup on unmount
+ * - Graceful degradation: renders nothing if WebGL2 unavailable
+ */
+const ShaderCanvas = ({ fragmentShader, uniformsRef, texturesRef, onTextureLoad, 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;
+        };
+        // ── Texture uniforms ───────────────────────────────────────────────
+        const textureEntries = new Map();
+        let nextTextureUnit = 0;
+        // Operates on whatever texture is currently bound to TEXTURE_2D — every
+        // call site binds the target texture immediately before calling this.
+        const configureTexture = () => {
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        };
+        const createPlaceholderTexture = () => {
+            const texture = gl.createTexture();
+            gl.bindTexture(gl.TEXTURE_2D, texture);
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 0, 0]));
+            configureTexture();
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+            return texture;
+        };
+        const uploadImage = (entry, img, name) => {
+            if (hasBeenDisposed)
+                return;
+            gl.bindTexture(gl.TEXTURE_2D, entry.texture);
+            gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
+            gl.generateMipmap(gl.TEXTURE_2D);
+            configureTexture();
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
+            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+            gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);
+            const naturalWidth = img.naturalWidth || img.width;
+            const naturalHeight = img.naturalHeight || img.height;
+            if (naturalWidth > 0 && naturalHeight > 0) {
+                onTextureLoad === null || onTextureLoad === void 0 ? void 0 : onTextureLoad(name, naturalWidth / naturalHeight);
+            }
+        };
+        const loadTexture = (entry, source, name) => {
+            if (typeof source === "string") {
+                const img = new Image();
+                img.crossOrigin = "anonymous";
+                img.onload = () => uploadImage(entry, img, name);
+                img.src = source;
+            }
+            else if (source.complete && source.naturalWidth > 0) {
+                uploadImage(entry, source, name);
+            }
+            else {
+                source.addEventListener("load", () => uploadImage(entry, source, name), {
+                    once: true,
+                });
+            }
+        };
+        const syncTextures = () => {
+            const sources = texturesRef === null || texturesRef === void 0 ? void 0 : texturesRef.current;
+            if (!sources)
+                return;
+            for (const name in sources) {
+                let entry = textureEntries.get(name);
+                if (!entry) {
+                    entry = {
+                        texture: createPlaceholderTexture(),
+                        sourceKey: undefined,
+                        unit: nextTextureUnit++,
+                    };
+                    textureEntries.set(name, entry);
+                }
+                const source = sources[name];
+                if (source && source !== entry.sourceKey) {
+                    entry.sourceKey = source;
+                    loadTexture(entry, source, name);
+                }
+                else if (!source) {
+                    entry.sourceKey = undefined;
+                }
+            }
+        };
+        // ── 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;
+        let hasBeenDisposed = false;
+        const startTime = performance.now();
+        const frame = () => {
+            rafId = requestAnimationFrame(frame);
+            syncTextures();
+            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]);
+                }
+            }
+            // Bind texture uniforms
+            for (const [name, entry] of textureEntries) {
+                const loc = getCustomLoc(name);
+                if (!loc)
+                    continue;
+                gl.activeTexture(gl.TEXTURE0 + entry.unit);
+                gl.bindTexture(gl.TEXTURE_2D, entry.texture);
+                gl.uniform1i(loc, entry.unit);
+            }
+            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+        };
+        const handleVisibilityChange = () => {
+            if (document.hidden) {
+                cancelAnimationFrame(rafId);
+                rafId = 0;
+            }
+            else if (rafId === 0) {
+                rafId = requestAnimationFrame(frame);
+            }
+        };
+        if (!document.hidden) {
+            rafId = requestAnimationFrame(frame);
+        }
+        document.addEventListener("visibilitychange", handleVisibilityChange);
+        return () => {
+            hasBeenDisposed = true;
+            document.removeEventListener("visibilitychange", handleVisibilityChange);
+            cancelAnimationFrame(rafId);
+            observer.disconnect();
+            for (const entry of textureEntries.values()) {
+                gl.deleteTexture(entry.texture);
+            }
+            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/shared/ShaderCanvas/ShaderCanvas.types.d.ts

@@ -0,0 +1,18 @@
+import type React from "react";
+/** A texture source: a URL to fetch, or an already-available image element. */
+export type ShaderTextureSource = string | HTMLImageElement;
+export interface ShaderCanvasProps {
+    fragmentShader: string;
+    uniformsRef: React.MutableRefObject<Record<string, number | number[]>>;
+    /**
+     * Optional sampler2D uniforms, keyed by GLSL uniform name (e.g. "u_image").
+     * A key with an `undefined` value binds a 1x1 transparent placeholder so the
+     * shader never samples garbage while an image is loading or unset.
+     */
+    texturesRef?: React.MutableRefObject<Record<string, ShaderTextureSource | undefined>>;
+    /** Fires once a texture finishes loading, with its natural aspect ratio (width / height). */
+    onTextureLoad?: (name: string, aspectRatio: number) => void;
+    maxDpr?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}

package/dist/components/effects/shared/ShaderCanvas/index.d.ts

@@ -0,0 +1,2 @@
+export { ShaderCanvas } from "./ShaderCanvas";
+export type { ShaderCanvasProps, ShaderTextureSource } from "./ShaderCanvas.types";

package/dist/components/effects/shared/bayerMatrices.glsl.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Shared ordered-dithering (Bayer matrix) GLSL, adapted from paper-design/shaders'
+ * Dithering and ImageDithering fragment shaders
+ * (https://github.com/paper-design/shaders, Apache License 2.0). Both effects
+ * in this repo (`Dithering`, `ImageDithering`) interpolate this identical
+ * lookup-table logic rather than duplicating it.
+ *
+ * Consume via template-literal interpolation (e.g. `${glslBayerMatrices}`).
+ */
+export declare const glslBayerMatrices = "\nconst int bayer2x2[4] = int[4](0, 2, 3, 1);\nconst int bayer4x4[16] = int[16](\n  0, 8, 2, 10,\n  12, 4, 14, 6,\n  3, 11, 1, 9,\n  15, 7, 13, 5\n);\nconst int bayer8x8[64] = int[64](\n  0, 32, 8, 40, 2, 34, 10, 42,\n  48, 16, 56, 24, 50, 18, 58, 26,\n  12, 44, 4, 36, 14, 46, 6, 38,\n  60, 28, 52, 20, 62, 30, 54, 22,\n  3, 35, 11, 43, 1, 33, 9, 41,\n  51, 19, 59, 27, 49, 17, 57, 25,\n  15, 47, 7, 39, 13, 45, 5, 37,\n  63, 31, 55, 23, 61, 29, 53, 21\n);\n\nfloat getBayerValue(vec2 uv, int size) {\n  ivec2 pos = ivec2(fract(uv / float(size)) * float(size));\n  int index = pos.y * size + pos.x;\n\n  if (size == 2) {\n    return float(bayer2x2[index]) / 4.0;\n  } else if (size == 4) {\n    return float(bayer4x4[index]) / 16.0;\n  } else if (size == 8) {\n    return float(bayer8x8[index]) / 64.0;\n  }\n  return 0.0;\n}\n";

package/dist/components/effects/shared/bayerMatrices.glsl.js

@@ -0,0 +1,44 @@
+/**
+ * Shared ordered-dithering (Bayer matrix) GLSL, adapted from paper-design/shaders'
+ * Dithering and ImageDithering fragment shaders
+ * (https://github.com/paper-design/shaders, Apache License 2.0). Both effects
+ * in this repo (`Dithering`, `ImageDithering`) interpolate this identical
+ * lookup-table logic rather than duplicating it.
+ *
+ * Consume via template-literal interpolation (e.g. `${glslBayerMatrices}`).
+ */
+const glslBayerMatrices = `
+const int bayer2x2[4] = int[4](0, 2, 3, 1);
+const int bayer4x4[16] = int[16](
+  0, 8, 2, 10,
+  12, 4, 14, 6,
+  3, 11, 1, 9,
+  15, 7, 13, 5
+);
+const int bayer8x8[64] = int[64](
+  0, 32, 8, 40, 2, 34, 10, 42,
+  48, 16, 56, 24, 50, 18, 58, 26,
+  12, 44, 4, 36, 14, 46, 6, 38,
+  60, 28, 52, 20, 62, 30, 54, 22,
+  3, 35, 11, 43, 1, 33, 9, 41,
+  51, 19, 59, 27, 49, 17, 57, 25,
+  15, 47, 7, 39, 13, 45, 5, 37,
+  63, 31, 55, 23, 61, 29, 53, 21
+);
+
+float getBayerValue(vec2 uv, int size) {
+  ivec2 pos = ivec2(fract(uv / float(size)) * float(size));
+  int index = pos.y * size + pos.x;
+
+  if (size == 2) {
+    return float(bayer2x2[index]) / 4.0;
+  } else if (size == 4) {
+    return float(bayer4x4[index]) / 16.0;
+  } else if (size == 8) {
+    return float(bayer8x8[index]) / 64.0;
+  }
+  return 0.0;
+}
+`;
+
+export { glslBayerMatrices };

package/dist/components/effects/shared/imageUV.glsl.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Shared "cover fit" image-UV helper for the image-filter effects (Water,
+ * ImageDithering, PaperTexture, FlutedGlass, HalftoneDots, HalftoneCmyk).
+ * Maps the fullscreen fragment UV to the image's own UV space so the image
+ * fills its container edge-to-edge without distortion (matching CSS
+ * `object-fit: cover`), given the image's aspect ratio (natural width /
+ * natural height) as a uniform. Assumes the fragment UV is
+ * `gl_FragCoord.xy / iResolution.xy` and the texture was uploaded with
+ * `UNPACK_FLIP_Y_WEBGL = true` (see shared/ShaderCanvas), so this produces a
+ * right-side-up sample with no manual Y-flip needed at the call site.
+ */
+export declare const glslImageCoverUV = "\nvec2 getImageCoverUV(vec2 fragUV, vec2 resolution, float imageAspectRatio) {\n  float containerAspect = resolution.x / resolution.y;\n  // Container wider (relative to its height) than the image: sample a\n  // narrower vertical slice of the image (crop top/bottom) so it fills the\n  // container width with no letterboxing. Container narrower/taller than\n  // the image: sample a narrower horizontal slice (crop left/right) instead.\n  vec2 scale = containerAspect > imageAspectRatio\n    ? vec2(1.0, imageAspectRatio / containerAspect)\n    : vec2(containerAspect / imageAspectRatio, 1.0);\n  return (fragUV - 0.5) * scale + 0.5;\n}\n";

package/dist/components/effects/shared/imageUV.glsl.js

@@ -0,0 +1,26 @@
+/**
+ * Shared "cover fit" image-UV helper for the image-filter effects (Water,
+ * ImageDithering, PaperTexture, FlutedGlass, HalftoneDots, HalftoneCmyk).
+ * Maps the fullscreen fragment UV to the image's own UV space so the image
+ * fills its container edge-to-edge without distortion (matching CSS
+ * `object-fit: cover`), given the image's aspect ratio (natural width /
+ * natural height) as a uniform. Assumes the fragment UV is
+ * `gl_FragCoord.xy / iResolution.xy` and the texture was uploaded with
+ * `UNPACK_FLIP_Y_WEBGL = true` (see shared/ShaderCanvas), so this produces a
+ * right-side-up sample with no manual Y-flip needed at the call site.
+ */
+const glslImageCoverUV = `
+vec2 getImageCoverUV(vec2 fragUV, vec2 resolution, float imageAspectRatio) {
+  float containerAspect = resolution.x / resolution.y;
+  // Container wider (relative to its height) than the image: sample a
+  // narrower vertical slice of the image (crop top/bottom) so it fills the
+  // container width with no letterboxing. Container narrower/taller than
+  // the image: sample a narrower horizontal slice (crop left/right) instead.
+  vec2 scale = containerAspect > imageAspectRatio
+    ? vec2(1.0, imageAspectRatio / containerAspect)
+    : vec2(containerAspect / imageAspectRatio, 1.0);
+  return (fragUV - 0.5) * scale + 0.5;
+}
+`;
+
+export { glslImageCoverUV };

package/dist/components/effects/shared/index.d.ts

@@ -0,0 +1,7 @@
+export { ShaderCanvas } from "./ShaderCanvas";
+export type { ShaderCanvasProps, ShaderTextureSource } from "./ShaderCanvas";
+export { resolveShaderColor, resolveShaderColors } from "./resolveShaderColor";
+export type { RGBA } from "./resolveShaderColor";
+export { glslHashFloat, glslHashVec2, glslValueNoise, glslSimplexNoise2D, glslSimplexFbm, glslDeclarePI, glslRotate2, } from "./shaderNoise.glsl";
+export { glslBayerMatrices } from "./bayerMatrices.glsl";
+export { glslImageCoverUV } from "./imageUV.glsl";

package/dist/components/effects/shared/resolveShaderColor.d.ts

@@ -0,0 +1,13 @@
+/** Normalized RGBA color as 0-1 floats, suitable for a WebGL uniform. */
+export type RGBA = [number, number, number, number];
+/**
+ * Resolves any valid CSS color string — hex, rgb()/rgba(), oklch(), named
+ * colors, or a `var(--custom-property)` reference (including FlikkUI theme
+ * tokens defined on :root/.dark) — to a normalized [r, g, b, a] float array
+ * (0-1) suitable for a WebGL uniform. Client-only; must be called after
+ * mount, never at module scope (SSR safety, CLAUDE.md §11). Returns
+ * `fallback` if the string can't be resolved (e.g. during SSR).
+ */
+export declare function resolveShaderColor(colorStr: string, fallback?: RGBA): RGBA;
+/** Resolves an array of colors in one pass, reusing a single probe element. */
+export declare function resolveShaderColors(colorStrs: string[], fallback?: RGBA): RGBA[];

package/dist/components/effects/shared/resolveShaderColor.js

@@ -0,0 +1,62 @@
+"use client";
+const DEFAULT_FALLBACK = [0.5, 0.5, 0.5, 1];
+let probeEl = null;
+let probeCtx;
+function getProbeEl() {
+    if (!probeEl) {
+        probeEl = document.createElement("span");
+        probeEl.style.position = "absolute";
+        probeEl.style.width = "0";
+        probeEl.style.height = "0";
+        probeEl.style.overflow = "hidden";
+        probeEl.style.pointerEvents = "none";
+        probeEl.setAttribute("aria-hidden", "true");
+    }
+    return probeEl;
+}
+/** Lazily-created 1x1 canvas used to normalize any CSS color (rgb, hex, named,
+ *  oklch, lab, color(), etc.) to straight sRGB bytes via getImageData — canvas
+ *  fillStyle accepts every CSS color syntax and always renders into sRGB,
+ *  which getComputedStyle's `color` serialization does not reliably do (some
+ *  browsers echo back oklch()/lab() strings for tokens authored in that space). */
+function getProbeCtx() {
+    if (probeCtx === undefined) {
+        const canvas = document.createElement("canvas");
+        canvas.width = 1;
+        canvas.height = 1;
+        probeCtx = canvas.getContext("2d", { willReadFrequently: true });
+    }
+    return probeCtx;
+}
+/**
+ * Resolves any valid CSS color string — hex, rgb()/rgba(), oklch(), named
+ * colors, or a `var(--custom-property)` reference (including FlikkUI theme
+ * tokens defined on :root/.dark) — to a normalized [r, g, b, a] float array
+ * (0-1) suitable for a WebGL uniform. Client-only; must be called after
+ * mount, never at module scope (SSR safety, CLAUDE.md §11). Returns
+ * `fallback` if the string can't be resolved (e.g. during SSR).
+ */
+function resolveShaderColor(colorStr, fallback = DEFAULT_FALLBACK) {
+    if (typeof document === "undefined")
+        return fallback;
+    const el = getProbeEl();
+    el.style.color = "";
+    el.style.color = colorStr;
+    document.body.appendChild(el);
+    const computed = getComputedStyle(el).color;
+    document.body.removeChild(el);
+    const ctx = getProbeCtx();
+    if (!ctx)
+        return fallback;
+    ctx.clearRect(0, 0, 1, 1);
+    ctx.fillStyle = computed;
+    ctx.fillRect(0, 0, 1, 1);
+    const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
+    return [r / 255, g / 255, b / 255, a / 255];
+}
+/** Resolves an array of colors in one pass, reusing a single probe element. */
+function resolveShaderColors(colorStrs, fallback = DEFAULT_FALLBACK) {
+    return colorStrs.map((c) => resolveShaderColor(c, fallback));
+}
+
+export { resolveShaderColor, resolveShaderColors };

package/dist/components/effects/shared/resolveShaderColor.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/effects/shared/shaderNoise.glsl.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Shared GLSL noise primitives, consumed via template-literal interpolation
+ * (e.g. `${glslHashFloat}`) inside individual `*.shaders.ts` fragment shader
+ * sources. There is no GLSL `#include` mechanism, so consumers must
+ * interpolate snippets in dependency order (e.g. glslHashFloat before
+ * glslValueNoise, glslSimplexNoise2D before glslSimplexFbm).
+ *
+ * These pure-hash functions stand in for paper-design/shaders' pre-generated
+ * noise-texture sampling (`u_noiseTexture` + `textureRandomizerR`) — a
+ * deliberate simplification that removes an entire texture-generation
+ * subsystem in exchange for a tiny amount of extra ALU cost per pixel.
+ */
+/** Pure-hash pseudo-random float in [0,1) for a vec2 input, no texture lookup.
+ *  Adapted from paper-design/shaders' DotOrbit/GodRays/SmokeRing fragment
+ *  shaders (https://github.com/paper-design/shaders, Apache License 2.0). */
+export declare const glslHashFloat = "\nfloat randomR(vec2 st) {\n  return fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453123);\n}\n";
+/** Pure-hash pseudo-random vec2, no texture lookup. Same source as glslHashFloat. */
+export declare const glslHashVec2 = "\nvec2 randomGB(vec2 st) {\n  return vec2(\n    fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453123),\n    fract(sin(dot(st, vec2(93.9898, 67.345))) * 24634.6345123)\n  );\n}\n";
+/** Bilinear-interpolated value noise built on glslHashFloat. Requires
+ *  glslHashFloat to be interpolated earlier in the same shader source. */
+export declare const glslValueNoise = "\nfloat valueNoise(vec2 st) {\n  vec2 i = floor(st);\n  vec2 f = fract(st);\n  float a = randomR(i);\n  float b = randomR(i + vec2(1.0, 0.0));\n  float c = randomR(i + vec2(0.0, 1.0));\n  float d = randomR(i + vec2(1.0, 1.0));\n  vec2 u = f * f * (3.0 - 2.0 * f);\n  float x1 = mix(a, b, u.x);\n  float x2 = mix(c, d, u.x);\n  return mix(x1, x2, u.y);\n}\n";
+/** Ashima Arts / Stefan Gustavson 2D simplex noise (ISC license) — generic,
+ *  ubiquitous prior art in the WebGL shader ecosystem, NOT paper-design's own
+ *  IP. Used as the low-level noise primitive under some ported effects whose
+ *  higher-level composition logic IS credited to paper-design in their own
+ *  doc comments (e.g. GrainGradient, Dithering, Water, LiquidMetal). */
+export declare const glslSimplexNoise2D = "\nvec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }\nvec3 permute(vec3 x) { return mod289(((x * 34.0) + 1.0) * x); }\n\nfloat snoise(vec2 v) {\n  const vec4 C = vec4(0.211324865405187, 0.366025403784439,\n                       -0.577350269189626, 0.024390243902439);\n  vec2 i  = floor(v + dot(v, C.yy));\n  vec2 x0 = v - i + dot(i, C.xx);\n\n  vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);\n  vec4 x12 = x0.xyxy + C.xxzz;\n  x12.xy -= i1;\n\n  i = mod289(i);\n  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0));\n\n  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.0);\n  m = m * m;\n  m = m * m;\n\n  vec3 x = 2.0 * fract(p * C.www) - 1.0;\n  vec3 h = abs(x) - 0.5;\n  vec3 ox = floor(x + 0.5);\n  vec3 a0 = x - ox;\n\n  m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);\n\n  vec3 g;\n  g.x = a0.x * x0.x + h.x * x0.y;\n  g.yz = a0.yz * x12.xz + h.yz * x12.yw;\n  return 130.0 * dot(m, g);\n}\n";
+/** Small fractional-Brownian-motion built on glslSimplexNoise2D. Requires
+ *  glslSimplexNoise2D to be interpolated earlier in the same shader source. */
+export declare const glslSimplexFbm = "\nfloat fbm(vec2 st) {\n  float value = 0.0;\n  float amplitude = 0.5;\n  for (int i = 0; i < 4; i++) {\n    value += amplitude * snoise(st);\n    st *= 2.0;\n    amplitude *= 0.5;\n  }\n  return value;\n}\n";
+/** Common PI / TWO_PI constants, interpolated first in most shaders. */
+export declare const glslDeclarePI = "\nconst float PI = 3.14159265359;\nconst float TWO_PI = 6.28318530718;\n";
+/** 2D rotation helper matching paper-design's `rotate(vec2, float)` signature. */
+export declare const glslRotate2 = "\nvec2 rotate(vec2 v, float angle) {\n  float s = sin(angle);\n  float c = cos(angle);\n  return mat2(c, -s, s, c) * v;\n}\n";

package/dist/components/effects/shared/shaderNoise.glsl.js

@@ -0,0 +1,84 @@
+/**
+ * Shared GLSL noise primitives, consumed via template-literal interpolation
+ * (e.g. `${glslHashFloat}`) inside individual `*.shaders.ts` fragment shader
+ * sources. There is no GLSL `#include` mechanism, so consumers must
+ * interpolate snippets in dependency order (e.g. glslHashFloat before
+ * glslValueNoise, glslSimplexNoise2D before glslSimplexFbm).
+ *
+ * These pure-hash functions stand in for paper-design/shaders' pre-generated
+ * noise-texture sampling (`u_noiseTexture` + `textureRandomizerR`) — a
+ * deliberate simplification that removes an entire texture-generation
+ * subsystem in exchange for a tiny amount of extra ALU cost per pixel.
+ */
+/** Pure-hash pseudo-random float in [0,1) for a vec2 input, no texture lookup.
+ *  Adapted from paper-design/shaders' DotOrbit/GodRays/SmokeRing fragment
+ *  shaders (https://github.com/paper-design/shaders, Apache License 2.0). */
+const glslHashFloat = `
+float randomR(vec2 st) {
+  return fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453123);
+}
+`;
+/** Pure-hash pseudo-random vec2, no texture lookup. Same source as glslHashFloat. */
+const glslHashVec2 = `
+vec2 randomGB(vec2 st) {
+  return vec2(
+    fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453123),
+    fract(sin(dot(st, vec2(93.9898, 67.345))) * 24634.6345123)
+  );
+}
+`;
+/** Ashima Arts / Stefan Gustavson 2D simplex noise (ISC license) — generic,
+ *  ubiquitous prior art in the WebGL shader ecosystem, NOT paper-design's own
+ *  IP. Used as the low-level noise primitive under some ported effects whose
+ *  higher-level composition logic IS credited to paper-design in their own
+ *  doc comments (e.g. GrainGradient, Dithering, Water, LiquidMetal). */
+const glslSimplexNoise2D = `
+vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+vec2 mod289(vec2 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+vec3 permute(vec3 x) { return mod289(((x * 34.0) + 1.0) * x); }
+
+float snoise(vec2 v) {
+  const vec4 C = vec4(0.211324865405187, 0.366025403784439,
+                       -0.577350269189626, 0.024390243902439);
+  vec2 i  = floor(v + dot(v, C.yy));
+  vec2 x0 = v - i + dot(i, C.xx);
+
+  vec2 i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
+  vec4 x12 = x0.xyxy + C.xxzz;
+  x12.xy -= i1;
+
+  i = mod289(i);
+  vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0));
+
+  vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.0);
+  m = m * m;
+  m = m * m;
+
+  vec3 x = 2.0 * fract(p * C.www) - 1.0;
+  vec3 h = abs(x) - 0.5;
+  vec3 ox = floor(x + 0.5);
+  vec3 a0 = x - ox;
+
+  m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);
+
+  vec3 g;
+  g.x = a0.x * x0.x + h.x * x0.y;
+  g.yz = a0.yz * x12.xz + h.yz * x12.yw;
+  return 130.0 * dot(m, g);
+}
+`;
+/** Common PI / TWO_PI constants, interpolated first in most shaders. */
+const glslDeclarePI = `
+const float PI = 3.14159265359;
+const float TWO_PI = 6.28318530718;
+`;
+/** 2D rotation helper matching paper-design's `rotate(vec2, float)` signature. */
+const glslRotate2 = `
+vec2 rotate(vec2 v, float angle) {
+  float s = sin(angle);
+  float c = cos(angle);
+  return mat2(c, -s, s, c) * v;
+}
+`;
+
+export { glslDeclarePI, glslHashFloat, glslHashVec2, glslRotate2, glslSimplexNoise2D };