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

package/dist/components/effects/MeshGradient/MeshGradient.utils.js

@@ -0,0 +1,112 @@
+import { contrastTone } from '../../../utils/colorUtils.js';
+
+/**
+ * Deterministic hashing + color helpers for MeshGradient.
+ *
+ * The string-hash idea comes from boring-avatars
+ * (https://github.com/boringdesigners/boring-avatars, MIT License). We turn the
+ * `seed` into a numeric seed, then draw well-distributed blob positions/colors
+ * from a tiny deterministic PRNG so the same `seed` always yields the same
+ * mesh — but the blobs spread across the surface instead of clustering.
+ */
+/**
+ * Curated vibrant palettes. Each is a designer-grade cool→warm sweep (so within
+ * one tile distinct colors meet and blend, the way boring-avatars' marble does).
+ * The DEFAULT is the boring-avatars marble palette itself — variety comes from
+ * each `seed` emphasizing different colors *within* the palette (not from
+ * swapping palettes), which keeps a whole set cohesive yet distinct. Pass any of
+ * these (or your own) to the `colors` prop; `pickPalette` is offered for
+ * consumers who instead want the seed to choose a palette.
+ */
+const MESH_PALETTES = [
+    ["#00686C", "#32C2B9", "#EDECB3", "#FAD928", "#FF9915"], // Marble (boring-avatars) — default
+    ["#264653", "#2A9D8F", "#E9C46A", "#F4A261", "#E76F51"], // Terra    (teal→sand→terracotta)
+    ["#F72585", "#B5179E", "#7209B7", "#4361EE", "#4CC9F0"], // Spectrum (magenta→violet→cyan)
+    ["#2EC4B6", "#80ED99", "#CBF3F0", "#FFBF69", "#FF9F1C"], // Mint     (teal→mint→peach)
+    ["#00F5D4", "#00BBF9", "#9B5DE5", "#F15BB5", "#FEE440"], // Neon     (cyan→violet→pink→yellow)
+];
+/** Default palette — the boring-avatars marble set. */
+const DEFAULT_MESH_COLORS = MESH_PALETTES[0];
+/** Named handles for the curated palettes (ergonomic alternative to indexing). */
+const MESH_PALETTE_BY_NAME = {
+    marble: MESH_PALETTES[0],
+    terra: MESH_PALETTES[1],
+    spectrum: MESH_PALETTES[2],
+    mint: MESH_PALETTES[3],
+    neon: MESH_PALETTES[4],
+};
+/** Deterministic 32-bit hash of a string. Same input → same output. */
+const hashCode = (name) => {
+    let hash = 0;
+    for (let i = 0; i < name.length; i++) {
+        const character = name.charCodeAt(i);
+        hash = (hash << 5) - hash + character;
+        hash = hash & hash; // Convert to 32-bit integer
+    }
+    return Math.abs(hash);
+};
+/** Deterministically pick one of the curated `MESH_PALETTES` from a seed. */
+const pickPalette = (seed) => MESH_PALETTES[hashCode(seed) % MESH_PALETTES.length];
+/** viewBox size the marble is authored in (mirrors boring-avatars). */
+const MESH_SIZE = 80;
+/**
+ * Two fixed, irregular polygon paths (verbatim from boring-avatars' marble,
+ * MIT). Filled with a color, transformed per-seed, and heavily Gaussian-blurred,
+ * they melt into the smooth flowing veins that define the marble look.
+ */
+const MARBLE_PATHS = [
+    "M32.414 59.35L50.376 70.5H72.5v-71H33.728L26.5 13.381l19.057 27.08L32.414 59.35z",
+    "M22.216 24L0 46.75l14.108 38.129L78 86l-3.081-59.276-22.378 4.005 12.972 20.186-23.35 27.395L22.215 24z",
+];
+/** nth decimal digit of a number (boring-avatars helper). */
+const getDigit = (number, ntn) => Math.floor((number / Math.pow(10, ntn)) % 10);
+/** Value in (−range, range) seeded by `number`; sign flips on an even digit. */
+const getUnit = (number, range, index) => {
+    const value = number % range;
+    if (index && getDigit(number, index) % 2 === 0)
+        return -value;
+    return value;
+};
+/** First shape sits normal on the base; the rest composite to enrich the blend. */
+const BLENDS = ["normal", "overlay", "soft-light", "overlay"];
+/**
+ * Derive a deterministic marble field from a seed + palette — a faithful port of
+ * boring-avatars' marble. Colors are *consecutive* palette entries
+ * (`palette[(hash + i) % len]`): always neighbouring hues, which is what keeps
+ * every tile harmonious and smooth. Each shape gets a seeded translate/rotate/
+ * scale and is heavily blurred at render; the 2nd shape onward composites with
+ * overlay/soft-light. Same `seed` → same field.
+ */
+const generateMarble = (seed, colors, count) => {
+    const num = hashCode(seed);
+    const range = colors.length || 1;
+    const color = (i) => { var _a; return (_a = colors[(num + i) % range]) !== null && _a !== void 0 ? _a : colors[0]; };
+    const shapes = Array.from({ length: count }, (_unused, k) => {
+        const i = k + 1; // element index — 0 is the base
+        return {
+            color: color(i),
+            translateX: getUnit(num * (i + 1), MESH_SIZE / 10, 1),
+            translateY: getUnit(num * (i + 1), MESH_SIZE / 10, 2),
+            rotate: getUnit(num * (i + 1), 360, 1),
+            scale: 1.2 + getUnit(num * (i + 1), MESH_SIZE / 20) / 10,
+            path: MARBLE_PATHS[k % MARBLE_PATHS.length],
+            blend: BLENDS[k % BLENDS.length],
+        };
+    });
+    return { base: color(0), shapes };
+};
+/**
+ * The text tone (`"light"` | `"dark"`) that reads best over the mesh a given
+ * seed produces. Decided from the **base** color — the full-tile ground that
+ * best predicts overall darkness. (Averaging in the small, blurred bright shapes
+ * mis-reads dark tiles like a teal base with a cream accent.) Pass `threshold`
+ * to bias toward light text on more mid-tones (see `contrastTone`). Map the
+ * result to the theme-stable neutral tokens at the call site, e.g.
+ * `tone === "dark" ? "var(--color-neutral-950)" : "var(--color-neutral-50)"`.
+ */
+const getMeshTextTone = (seed, colors, count, threshold) => {
+    const { base } = generateMarble(seed, colors, count);
+    return contrastTone(base, { threshold });
+};
+
+export { DEFAULT_MESH_COLORS, MARBLE_PATHS, MESH_PALETTES, MESH_PALETTE_BY_NAME, MESH_SIZE, generateMarble, getMeshTextTone, hashCode, pickPalette };

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

@@ -0,0 +1,4 @@
+export { MeshGradient } from "./MeshGradient";
+export type { MeshGradientProps, MeshGradientBlendMode, } from "./MeshGradient.types";
+export { DEFAULT_MESH_COLORS, MESH_PALETTES, MESH_PALETTE_BY_NAME, pickPalette, getMeshTextTone, } from "./MeshGradient.utils";
+export type { MeshPaletteName } from "./MeshGradient.utils";

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

@@ -0,0 +1,8 @@
+import React from "react";
+import type { MetaballsProps } from "./Metaballs.types";
+/**
+ * Animated lava-lamp-style blobby merging balls. WebGL2-powered; falls back
+ * to a static CSS radial-gradient cluster when WebGL2 is unavailable or the
+ * user prefers reduced motion.
+ */
+export declare const Metaballs: React.FC<MetaballsProps>;

package/dist/components/effects/Metaballs/Metaballs.js

@@ -0,0 +1,59 @@
+"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 { metaballsFragmentShader } from './Metaballs.shaders.js';
+import { METABALLS_MAX_COLORS } from './Metaballs.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 lava-lamp-style blobby merging balls. WebGL2-powered; falls back
+ * to a static CSS radial-gradient cluster when WebGL2 is unavailable or the
+ * user prefers reduced motion.
+ */
+const Metaballs = ({ colorBack = DEFAULT_COLOR_BACK, colors = DEFAULT_COLORS, count = 10, size = 0.6, speed = 1, className, style, ...props }) => {
+    var _a, _b, _c, _d;
+    const isClient = useIsClient();
+    const shouldReduceMotion = useReducedMotion();
+    const isDark = useDarkMode();
+    const webglSupported = useWebgl2Supported(!!shouldReduceMotion);
+    const safeColors = colors.length > 0 ? colors.slice(0, METABALLS_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 < METABALLS_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_count = count;
+    uniformsRef.current.u_size = size;
+    uniformsRef.current.u_speed = speed;
+    const fallbackGradient = `radial-gradient(circle at 30% 40%, ${(_c = safeColors[0]) !== null && _c !== void 0 ? _c : "var(--color-primary)"}, transparent 60%), radial-gradient(circle at 70% 60%, ${(_d = safeColors[safeColors.length - 1]) !== null && _d !== void 0 ? _d : "var(--color-primary)"}, transparent 60%), ${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: metaballsFragmentShader, uniformsRef: uniformsRef })) : (jsx("div", { className: "absolute inset-0", style: { background: fallbackGradient } })) }));
+};
+
+export { Metaballs };

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

@@ -0,0 +1,10 @@
+/**
+ * Metaballs fragment shader — adapted from paper-design/shaders' `metaballs.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; pure-hash GLSL (see shared/shaderNoise.glsl.ts)
+ * instead of pre-generated noise-texture sampling.
+ */
+export declare const metaballsFragmentShader = "#version 300 es\nprecision mediump float;\n\nuniform float iTime;\nuniform vec2 iResolution;\n\nuniform vec4 u_colorBack;\nuniform vec4 u_colors[8];\nuniform float u_colorsCount;\nuniform float u_size;\nuniform float u_count;\nuniform float u_speed;\n\nout vec4 fragColor;\n\n\nconst float PI = 3.14159265359;\nconst float TWO_PI = 6.28318530718;\n\n\nfloat randomR(vec2 st) {\n  return fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453123);\n}\n\n\nfloat noise(float x) {\n  float i = floor(x);\n  float f = fract(x);\n  float u = f * f * (3.0 - 2.0 * f);\n  vec2 p0 = vec2(i, 0.0);\n  vec2 p1 = vec2(i + 1.0, 0.0);\n  return mix(randomR(p0), randomR(p1), u);\n}\n\nfloat getBallShape(vec2 uv, vec2 c, float p) {\n  float s = .5 * length(uv - c);\n  s = 1. - clamp(s, 0., 1.);\n  s = pow(s, p);\n  return s;\n}\n\nvoid main() {\n  vec2 objectUV = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);\n  vec2 shape_uv = objectUV + .5;\n\n  const float firstFrameOffset = 2503.4;\n  float t = .2 * u_speed * iTime + firstFrameOffset;\n\n  vec3 totalColor = vec3(0.);\n  float totalShape = 0.;\n  float totalOpacity = 0.;\n\n  for (int i = 0; i < 20; i++) {\n    if (i >= int(ceil(u_count))) break;\n    float idxFract = float(i) / float(20);\n    float angle = TWO_PI * idxFract;\n    float speed = 1. - .2 * idxFract;\n    float noiseX = noise(angle * 10. + float(i) + t * speed);\n    float noiseY = noise(angle * 20. + float(i) - t * speed);\n    vec2 pos = vec2(.5) + 1e-4 + .9 * (vec2(noiseX, noiseY) - .5);\n\n    int safeIndex = i % int(u_colorsCount + 0.5);\n    vec4 ballColor = u_colors[safeIndex];\n    ballColor.rgb *= ballColor.a;\n\n    float sizeFrac = 1.;\n    if (float(i) > floor(u_count - 1.)) {\n      sizeFrac *= fract(u_count);\n    }\n\n    float shape = getBallShape(shape_uv, pos, 45. - 30. * u_size * sizeFrac);\n    shape *= pow(u_size, .2);\n    shape = smoothstep(0., 1., shape);\n\n    totalColor += ballColor.rgb * shape;\n    totalShape += shape;\n    totalOpacity += ballColor.a * shape;\n  }\n\n  totalColor /= max(totalShape, 1e-4);\n  totalOpacity /= max(totalShape, 1e-4);\n\n  float edge_width = fwidth(totalShape);\n  float finalShape = smoothstep(.4, .4 + edge_width, totalShape);\n\n  vec3 color = totalColor * finalShape;\n  float opacity = totalOpacity * finalShape;\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  color = color + bgColor * (1. - opacity);\n  opacity = opacity + u_colorBack.a * (1. - opacity);\n\n  fragColor = vec4(color, opacity);\n}\n";

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

@@ -0,0 +1,102 @@
+import 'react/jsx-runtime';
+import 'react';
+import { glslDeclarePI, glslHashFloat } from '../shared/shaderNoise.glsl.js';
+
+/**
+ * Metaballs fragment shader — adapted from paper-design/shaders' `metaballs.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; pure-hash GLSL (see shared/shaderNoise.glsl.ts)
+ * instead of pre-generated noise-texture sampling.
+ */
+const metaballsFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform float iTime;
+uniform vec2 iResolution;
+
+uniform vec4 u_colorBack;
+uniform vec4 u_colors[8];
+uniform float u_colorsCount;
+uniform float u_size;
+uniform float u_count;
+uniform float u_speed;
+
+out vec4 fragColor;
+
+${glslDeclarePI}
+${glslHashFloat}
+
+float noise(float x) {
+  float i = floor(x);
+  float f = fract(x);
+  float u = f * f * (3.0 - 2.0 * f);
+  vec2 p0 = vec2(i, 0.0);
+  vec2 p1 = vec2(i + 1.0, 0.0);
+  return mix(randomR(p0), randomR(p1), u);
+}
+
+float getBallShape(vec2 uv, vec2 c, float p) {
+  float s = .5 * length(uv - c);
+  s = 1. - clamp(s, 0., 1.);
+  s = pow(s, p);
+  return s;
+}
+
+void main() {
+  vec2 objectUV = (gl_FragCoord.xy - 0.5 * iResolution.xy) / min(iResolution.x, iResolution.y);
+  vec2 shape_uv = objectUV + .5;
+
+  const float firstFrameOffset = 2503.4;
+  float t = .2 * u_speed * iTime + firstFrameOffset;
+
+  vec3 totalColor = vec3(0.);
+  float totalShape = 0.;
+  float totalOpacity = 0.;
+
+  for (int i = 0; i < 20; i++) {
+    if (i >= int(ceil(u_count))) break;
+    float idxFract = float(i) / float(20);
+    float angle = TWO_PI * idxFract;
+    float speed = 1. - .2 * idxFract;
+    float noiseX = noise(angle * 10. + float(i) + t * speed);
+    float noiseY = noise(angle * 20. + float(i) - t * speed);
+    vec2 pos = vec2(.5) + 1e-4 + .9 * (vec2(noiseX, noiseY) - .5);
+
+    int safeIndex = i % int(u_colorsCount + 0.5);
+    vec4 ballColor = u_colors[safeIndex];
+    ballColor.rgb *= ballColor.a;
+
+    float sizeFrac = 1.;
+    if (float(i) > floor(u_count - 1.)) {
+      sizeFrac *= fract(u_count);
+    }
+
+    float shape = getBallShape(shape_uv, pos, 45. - 30. * u_size * sizeFrac);
+    shape *= pow(u_size, .2);
+    shape = smoothstep(0., 1., shape);
+
+    totalColor += ballColor.rgb * shape;
+    totalShape += shape;
+    totalOpacity += ballColor.a * shape;
+  }
+
+  totalColor /= max(totalShape, 1e-4);
+  totalOpacity /= max(totalShape, 1e-4);
+
+  float edge_width = fwidth(totalShape);
+  float finalShape = smoothstep(.4, .4 + edge_width, totalShape);
+
+  vec3 color = totalColor * finalShape;
+  float opacity = totalOpacity * finalShape;
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  color = color + bgColor * (1. - opacity);
+  opacity = opacity + u_colorBack.a * (1. - opacity);
+
+  fragColor = vec4(color, opacity);
+}
+`;
+
+export { metaballsFragmentShader };

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

@@ -0,0 +1,16 @@
+import type React from "react";
+export declare const METABALLS_MAX_COLORS = 8;
+export declare const METABALLS_MAX_COUNT = 20;
+export interface MetaballsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Background CSS color. Default: 'var(--color-background)'. */
+    colorBack?: string;
+    /** Ball colors, cycled across balls, up to 8. Default: a 3-stop primary ramp. */
+    colors?: string[];
+    /** Number of balls, 1-20 (fractional values fade the last ball in). Default: 10. */
+    count?: number;
+    /** Ball size multiplier. Default: 0.6. */
+    size?: number;
+    /** Animation speed multiplier. Default: 1. */
+    speed?: number;
+    className?: string;
+}

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

@@ -0,0 +1,3 @@
+const METABALLS_MAX_COLORS = 8;
+
+export { METABALLS_MAX_COLORS };

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

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

package/dist/components/effects/Neumorphic/InsetCircleButton.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { motion } from 'motion/react';
 import { cn } from '../../../utils/cn.js';

package/dist/components/effects/Neumorphic/InsetPill.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 
 function InsetPill({ children, className, padding = "10px 18px", onClick, }) {

package/dist/components/effects/NoiseOverlay/NoiseOverlay.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useId, useRef, useEffect } from 'react';
 import { useReducedMotion } from 'motion/react';

package/dist/components/effects/Overlay/Overlay.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React__default, { useRef, useCallback, useEffect } from 'react';
 import { createPortal } from 'react-dom';

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

@@ -0,0 +1,9 @@
+import React from "react";
+import type { PaperTextureProps } from "./PaperTexture.types";
+/**
+ * Paper-grain image filter — normal-maps a source image with a fiber/
+ * roughness texture and re-lights it, giving it a textured-paper look.
+ * WebGL2-powered; falls back to the plain source image (via
+ * `object-fit: cover`) when WebGL2 is unavailable.
+ */
+export declare const PaperTexture: React.FC<PaperTextureProps>;

package/dist/components/effects/PaperTexture/PaperTexture.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState, useMemo, useRef, useCallback } from 'react';
+import { useIsClient } from '../../../hooks/useIsClient.js';
+import 'motion/react';
+import { useDarkMode } from '../../../hooks/useDarkMode.js';
+import { cn } from '../../../utils/cn.js';
+import { ShaderCanvas } from '../shared/ShaderCanvas/ShaderCanvas.js';
+import { resolveShaderColor } from '../shared/resolveShaderColor.js';
+import { paperTextureFragmentShader } from './PaperTexture.shaders.js';
+
+const DEFAULT_COLOR_FRONT = "var(--color-text-primary)";
+const DEFAULT_COLOR_BACK = "var(--color-background)";
+function useWebgl2Supported() {
+    return useMemo(() => {
+        if (typeof document === "undefined")
+            return false;
+        try {
+            return !!document.createElement("canvas").getContext("webgl2");
+        }
+        catch (_a) {
+            return false;
+        }
+    }, []);
+}
+/**
+ * Paper-grain image filter — normal-maps a source image with a fiber/
+ * roughness texture and re-lights it, giving it a textured-paper look.
+ * WebGL2-powered; falls back to the plain source image (via
+ * `object-fit: cover`) when WebGL2 is unavailable.
+ */
+const PaperTexture = ({ image, colorFront = DEFAULT_COLOR_FRONT, colorBack = DEFAULT_COLOR_BACK, contrast = 0.5, roughness = 0.5, fiber = 0.5, fiberSize = 1, className, style, ...props }) => {
+    const isClient = useIsClient();
+    const isDark = useDarkMode();
+    const webglSupported = useWebgl2Supported();
+    const [imageAspectRatio, setImageAspectRatio] = useState(16 / 9);
+    const resolvedFront = useMemo(() => resolveShaderColor(colorFront), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [colorFront, isDark]);
+    const resolvedBack = useMemo(() => resolveShaderColor(colorBack), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [colorBack, isDark]);
+    const texturesRef = useRef({ u_image: image });
+    texturesRef.current.u_image = image;
+    const handleTextureLoad = useCallback((name, aspectRatio) => {
+        if (name === "u_image")
+            setImageAspectRatio(aspectRatio);
+    }, []);
+    const uniformsRef = useRef({});
+    uniformsRef.current.u_colorFront = resolvedFront;
+    uniformsRef.current.u_colorBack = resolvedBack;
+    uniformsRef.current.u_imageAspectRatio = imageAspectRatio;
+    uniformsRef.current.u_contrast = contrast;
+    uniformsRef.current.u_roughness = roughness;
+    uniformsRef.current.u_fiber = fiber;
+    uniformsRef.current.u_fiberSize = fiberSize;
+    const imageSrc = typeof image === "string" ? image : image.src;
+    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: paperTextureFragmentShader, uniformsRef: uniformsRef, texturesRef: texturesRef, onTextureLoad: handleTextureLoad })) : (jsx("img", { src: imageSrc, alt: "", className: "absolute inset-0 w-full h-full object-cover" })) }));
+};
+
+export { PaperTexture };

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

@@ -0,0 +1,22 @@
+/**
+ * PaperTexture fragment shader — adapted from paper-design/shaders'
+ * `paper-texture.ts` (https://github.com/paper-design/shaders, Apache
+ * License 2.0). An image filter: normal-maps a source image with a
+ * paper-grain fiber/roughness texture and re-lights it.
+ *
+ * Simplified from the original: image UV computed via the shared
+ * `getImageCoverUV` cover-fit helper (see shared/imageUV.glsl.ts) instead of
+ * paper-design's ShaderSizingParams fit engine; pure-hash GLSL instead of
+ * pre-generated noise-texture sampling.
+ *
+ * Trimmed for v1: keeps the core `fiber`/`roughness`/`contrast` normal-map
+ * layers (the essential "paper grain" look) and drops the elaborate
+ * `crumples`/`folds`/`drops`/`fade` secondary normal-perturbation layers —
+ * those are the most GLSL-dense part of the original and least essential to
+ * "paper texture" reading as itself. May be added later as a follow-up.
+ *
+ * `fiberNoise` below is an original approximation (directional streaked
+ * value-noise), NOT a port — paper-design's own `fiberNoise` implementation
+ * wasn't available in the extracted source material for this port.
+ */
+export declare const paperTextureFragmentShader = "#version 300 es\nprecision mediump float;\n\nuniform vec2 iResolution;\n\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\n\nuniform sampler2D u_image;\nuniform float u_imageAspectRatio;\n\nuniform float u_contrast;\nuniform float u_roughness;\nuniform float u_fiber;\nuniform float u_fiberSize;\n\nout vec4 fragColor;\n\n\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\n\nfloat randomR(vec2 st) {\n  return fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453123);\n}\n\n\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\n\nfloat getUvFrame(vec2 uv) {\n  float aax = 2. * fwidth(uv.x);\n  float aay = 2. * fwidth(uv.y);\n  float left = smoothstep(0., aax, uv.x);\n  float right = 1. - smoothstep(1. - aax, 1., uv.x);\n  float bottom = smoothstep(0., aay, uv.y);\n  float top = 1. - smoothstep(1. - aay, 1., uv.y);\n  return left * right * bottom * top;\n}\n\nfloat roughnessTex(vec2 p) {\n  p *= .1;\n  float o = 0.;\n  for (float i = 0.; ++i < 4.; p *= 2.1) {\n    vec4 w = vec4(floor(p), ceil(p));\n    vec2 f = fract(p);\n    o += mix(mix(randomR(w.xy), randomR(w.xw), f.y), mix(randomR(w.zy), randomR(w.zw), f.y), f.x);\n    o += .2 / exp(2. * abs(sin(.2 * p.x + .5 * p.y)));\n  }\n  return o / 3.;\n}\n\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\nfloat fiberNoise(vec2 p, vec2 seed) {\n  p += seed;\n  float n = 0.0;\n  float amp = 1.0;\n  for (int i = 0; i < 3; i++) {\n    float stretch = 6.0 + float(i) * 4.0;\n    vec2 sp = vec2(p.x * stretch, p.y * 1.5);\n    n += amp * valueNoise(sp);\n    amp *= 0.5;\n    p = rotate(p, 0.3);\n  }\n  return n;\n}\n\nvoid main() {\n  vec2 fragUV = gl_FragCoord.xy / iResolution.xy;\n  vec2 imageUV = getImageCoverUV(fragUV, iResolution, u_imageAspectRatio);\n  vec2 patternUV = imageUV - .5;\n  patternUV = 5. * (patternUV * vec2(u_imageAspectRatio, 1.));\n\n  vec2 roughnessUv = 1.5 * (gl_FragCoord.xy - .5 * iResolution.xy);\n  float roughnessVal = roughnessTex(roughnessUv + vec2(1., 0.)) - roughnessTex(roughnessUv - vec2(1., 0.));\n\n  vec2 fiberUV = 2. / max(u_fiberSize, 0.01) * patternUV;\n  float fiber = fiberNoise(fiberUV, vec2(0.));\n  fiber = .5 * u_fiber * (fiber - 1.);\n\n  vec2 normal = vec2(0.);\n  vec2 normalImage = vec2(0.);\n\n  normal.xy += u_roughness * 1.5 * roughnessVal;\n  normal.xy += fiber;\n  normalImage += u_roughness * .75 * roughnessVal;\n  normalImage += .2 * fiber;\n\n  vec3 lightPos = vec3(1., 2., 1.);\n  float res = dot(normalize(vec3(normal, 9.5 - 9. * pow(u_contrast, .1))), normalize(lightPos));\n\n  vec3 fgColor = u_colorFront.rgb * u_colorFront.a;\n  float fgOpacity = u_colorFront.a;\n  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;\n  float bgOpacity = u_colorBack.a;\n\n  imageUV += .02 * normalImage;\n  float frame = getUvFrame(imageUV);\n  vec4 image = texture(u_image, imageUV);\n  image.rgb += .6 * pow(u_contrast, .4) * (res - .7);\n  frame *= image.a;\n\n  vec3 color = fgColor * res;\n  float opacity = fgOpacity * res;\n  color += bgColor * (1. - opacity);\n  opacity += bgOpacity * (1. - opacity);\n  opacity = mix(opacity, 1., frame);\n\n  color.rgb = mix(color, image.rgb, frame);\n\n  fragColor = vec4(color, opacity);\n}\n";

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

@@ -0,0 +1,145 @@
+import 'react/jsx-runtime';
+import 'react';
+import { glslRotate2, glslHashFloat } from '../shared/shaderNoise.glsl.js';
+import { glslImageCoverUV } from '../shared/imageUV.glsl.js';
+
+/**
+ * PaperTexture fragment shader — adapted from paper-design/shaders'
+ * `paper-texture.ts` (https://github.com/paper-design/shaders, Apache
+ * License 2.0). An image filter: normal-maps a source image with a
+ * paper-grain fiber/roughness texture and re-lights it.
+ *
+ * Simplified from the original: image UV computed via the shared
+ * `getImageCoverUV` cover-fit helper (see shared/imageUV.glsl.ts) instead of
+ * paper-design's ShaderSizingParams fit engine; pure-hash GLSL instead of
+ * pre-generated noise-texture sampling.
+ *
+ * Trimmed for v1: keeps the core `fiber`/`roughness`/`contrast` normal-map
+ * layers (the essential "paper grain" look) and drops the elaborate
+ * `crumples`/`folds`/`drops`/`fade` secondary normal-perturbation layers —
+ * those are the most GLSL-dense part of the original and least essential to
+ * "paper texture" reading as itself. May be added later as a follow-up.
+ *
+ * `fiberNoise` below is an original approximation (directional streaked
+ * value-noise), NOT a port — paper-design's own `fiberNoise` implementation
+ * wasn't available in the extracted source material for this port.
+ */
+const paperTextureFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform vec2 iResolution;
+
+uniform vec4 u_colorFront;
+uniform vec4 u_colorBack;
+
+uniform sampler2D u_image;
+uniform float u_imageAspectRatio;
+
+uniform float u_contrast;
+uniform float u_roughness;
+uniform float u_fiber;
+uniform float u_fiberSize;
+
+out vec4 fragColor;
+
+${glslRotate2}
+${glslHashFloat}
+${glslImageCoverUV}
+
+float getUvFrame(vec2 uv) {
+  float aax = 2. * fwidth(uv.x);
+  float aay = 2. * fwidth(uv.y);
+  float left = smoothstep(0., aax, uv.x);
+  float right = 1. - smoothstep(1. - aax, 1., uv.x);
+  float bottom = smoothstep(0., aay, uv.y);
+  float top = 1. - smoothstep(1. - aay, 1., uv.y);
+  return left * right * bottom * top;
+}
+
+float roughnessTex(vec2 p) {
+  p *= .1;
+  float o = 0.;
+  for (float i = 0.; ++i < 4.; p *= 2.1) {
+    vec4 w = vec4(floor(p), ceil(p));
+    vec2 f = fract(p);
+    o += mix(mix(randomR(w.xy), randomR(w.xw), f.y), mix(randomR(w.zy), randomR(w.zw), f.y), f.x);
+    o += .2 / exp(2. * abs(sin(.2 * p.x + .5 * p.y)));
+  }
+  return o / 3.;
+}
+
+float valueNoise(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  float a = randomR(i);
+  float b = randomR(i + vec2(1.0, 0.0));
+  float c = randomR(i + vec2(0.0, 1.0));
+  float d = randomR(i + vec2(1.0, 1.0));
+  vec2 u = f * f * (3.0 - 2.0 * f);
+  float x1 = mix(a, b, u.x);
+  float x2 = mix(c, d, u.x);
+  return mix(x1, x2, u.y);
+}
+
+float fiberNoise(vec2 p, vec2 seed) {
+  p += seed;
+  float n = 0.0;
+  float amp = 1.0;
+  for (int i = 0; i < 3; i++) {
+    float stretch = 6.0 + float(i) * 4.0;
+    vec2 sp = vec2(p.x * stretch, p.y * 1.5);
+    n += amp * valueNoise(sp);
+    amp *= 0.5;
+    p = rotate(p, 0.3);
+  }
+  return n;
+}
+
+void main() {
+  vec2 fragUV = gl_FragCoord.xy / iResolution.xy;
+  vec2 imageUV = getImageCoverUV(fragUV, iResolution, u_imageAspectRatio);
+  vec2 patternUV = imageUV - .5;
+  patternUV = 5. * (patternUV * vec2(u_imageAspectRatio, 1.));
+
+  vec2 roughnessUv = 1.5 * (gl_FragCoord.xy - .5 * iResolution.xy);
+  float roughnessVal = roughnessTex(roughnessUv + vec2(1., 0.)) - roughnessTex(roughnessUv - vec2(1., 0.));
+
+  vec2 fiberUV = 2. / max(u_fiberSize, 0.01) * patternUV;
+  float fiber = fiberNoise(fiberUV, vec2(0.));
+  fiber = .5 * u_fiber * (fiber - 1.);
+
+  vec2 normal = vec2(0.);
+  vec2 normalImage = vec2(0.);
+
+  normal.xy += u_roughness * 1.5 * roughnessVal;
+  normal.xy += fiber;
+  normalImage += u_roughness * .75 * roughnessVal;
+  normalImage += .2 * fiber;
+
+  vec3 lightPos = vec3(1., 2., 1.);
+  float res = dot(normalize(vec3(normal, 9.5 - 9. * pow(u_contrast, .1))), normalize(lightPos));
+
+  vec3 fgColor = u_colorFront.rgb * u_colorFront.a;
+  float fgOpacity = u_colorFront.a;
+  vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+  float bgOpacity = u_colorBack.a;
+
+  imageUV += .02 * normalImage;
+  float frame = getUvFrame(imageUV);
+  vec4 image = texture(u_image, imageUV);
+  image.rgb += .6 * pow(u_contrast, .4) * (res - .7);
+  frame *= image.a;
+
+  vec3 color = fgColor * res;
+  float opacity = fgOpacity * res;
+  color += bgColor * (1. - opacity);
+  opacity += bgOpacity * (1. - opacity);
+  opacity = mix(opacity, 1., frame);
+
+  color.rgb = mix(color, image.rgb, frame);
+
+  fragColor = vec4(color, opacity);
+}
+`;
+
+export { paperTextureFragmentShader };

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

@@ -0,0 +1,19 @@
+import type React from "react";
+import type { ShaderTextureSource } from "../shared";
+export interface PaperTextureProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Source image (URL or an existing HTMLImageElement). Required. */
+    image: ShaderTextureSource;
+    /** Shadow-side color mixed into the paper-grain lighting. Default: 'var(--color-text-primary)'. */
+    colorFront?: string;
+    /** Highlight-side color mixed into the paper-grain lighting. Default: 'var(--color-background)'. */
+    colorBack?: string;
+    /** Lighting contrast, 0-1+. Default: 0.5. */
+    contrast?: number;
+    /** Fine paper roughness strength, 0-1+. Default: 0.5. */
+    roughness?: number;
+    /** Fiber streak strength, 0-1+. Default: 0.5. */
+    fiber?: number;
+    /** Fiber streak scale. Default: 1. */
+    fiberSize?: number;
+    className?: string;
+}

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

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

package/dist/components/effects/Particles/Particles.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
 import { Canvas } from '@react-three/fiber';
 import { useReducedMotion } from 'motion/react';

package/dist/components/effects/Particles/Particles.scene.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useRef, useMemo, useEffect, useCallback } from 'react';
 import { useThree, useFrame } from '@react-three/fiber';

package/dist/components/effects/Preloader/Preloader.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
 import { useReducedMotion, motion } from 'motion/react';

package/dist/components/effects/ProgressiveBlur/ProgressiveBlur.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, Fragment } from 'react/jsx-runtime';
 import { forwardRef, useMemo } from 'react';
 import { cn } from '../../../utils/cn.js';