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

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

@@ -0,0 +1,296 @@
+import 'react/jsx-runtime';
+import 'react';
+import { glslDeclarePI, glslHashFloat } from '../shared/shaderNoise.glsl.js';
+import { glslImageCoverUV } from '../shared/imageUV.glsl.js';
+
+/**
+ * HalftoneDots fragment shader — adapted from paper-design/shaders'
+ * `halftone-dots.ts` (https://github.com/paper-design/shaders, Apache
+ * License 2.0). An image filter: renders a source image as a luminance-
+ * driven halftone dot grid (classic/gooey/holes/soft ball styles, square or
+ * hex grid).
+ *
+ * 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.
+ */
+const halftoneDotsFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform vec2 iResolution;
+
+uniform vec4 u_colorFront;
+uniform vec4 u_colorBack;
+uniform float u_radius;
+uniform float u_contrast;
+
+uniform sampler2D u_image;
+uniform float u_imageAspectRatio;
+
+uniform float u_size;
+uniform float u_grainMixer;
+uniform float u_grainOverlay;
+uniform float u_grainSize;
+uniform float u_grid;
+uniform float u_originalColors;
+uniform float u_inverted;
+uniform float u_type;
+
+out vec4 fragColor;
+
+${glslDeclarePI}
+${glslHashFloat}
+${glslImageCoverUV}
+
+float hash21(vec2 n) {
+  return randomR(n);
+}
+
+float valueNoise(vec2 st) {
+  vec2 i = floor(st);
+  vec2 f = fract(st);
+  float a = hash21(i);
+  float b = hash21(i + vec2(1.0, 0.0));
+  float c = hash21(i + vec2(0.0, 1.0));
+  float d = hash21(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 lst(float edge0, float edge1, float x) {
+  return clamp((x - edge0) / (edge1 - edge0), 0.0, 1.0);
+}
+
+float sst(float edge0, float edge1, float x) {
+  return smoothstep(edge0, edge1, x);
+}
+
+float getCircle(vec2 uv, float r, float baseR) {
+  r = mix(.25 * baseR, 0., r);
+  float d = length(uv - .5);
+  float aa = fwidth(d);
+  return 1. - smoothstep(r - aa, r + aa, d);
+}
+
+float getCell(vec2 uv) {
+  float insideX = step(0.0, uv.x) * (1.0 - step(1.0, uv.x));
+  float insideY = step(0.0, uv.y) * (1.0 - step(1.0, uv.y));
+  return insideX * insideY;
+}
+
+float getCircleWithHole(vec2 uv, float r, float baseR) {
+  float cell = getCell(uv);
+  r = mix(.75 * baseR, 0., r);
+  float rMod = mod(r, .5);
+  float d = length(uv - .5);
+  float aa = fwidth(d);
+  float circle = 1. - smoothstep(rMod - aa, rMod + aa, d);
+  if (r < .5) {
+    return circle;
+  } else {
+    return cell - circle;
+  }
+}
+
+float getGooeyBall(vec2 uv, float r, float baseR) {
+  float d = length(uv - .5);
+  float sizeRadius = .3;
+  if (u_grid == 1.) {
+    sizeRadius = .42;
+  }
+  sizeRadius = mix(sizeRadius * baseR, 0., r);
+  d = 1. - sst(0., sizeRadius, d);
+  d = pow(d, 2. + baseR);
+  return d;
+}
+
+float getSoftBall(vec2 uv, float r, float baseR) {
+  float d = length(uv - .5);
+  float sizeRadius = clamp(baseR, 0., 1.);
+  sizeRadius = mix(.5 * sizeRadius, 0., r);
+  d = 1. - lst(0., sizeRadius, d);
+  float powRadius = 1. - lst(0., 2., baseR);
+  d = pow(d, 4. + 3. * powRadius);
+  return d;
+}
+
+float getUvFrame(vec2 uv, vec2 pad) {
+  float aa = 0.0001;
+  float left = smoothstep(-pad.x, -pad.x + aa, uv.x);
+  float right = smoothstep(1.0 + pad.x, 1.0 + pad.x - aa, uv.x);
+  float bottom = smoothstep(-pad.y, -pad.y + aa, uv.y);
+  float top = smoothstep(1.0 + pad.y, 1.0 + pad.y - aa, uv.y);
+  return left * right * bottom * top;
+}
+
+float sigmoid(float x, float k) {
+  return 1.0 / (1.0 + exp(-k * (x - 0.5)));
+}
+
+float getLumAtPx(vec2 uv, float contrast) {
+  vec4 tex = texture(u_image, uv);
+  vec3 c = vec3(sigmoid(tex.r, contrast), sigmoid(tex.g, contrast), sigmoid(tex.b, contrast));
+  float lum = dot(vec3(0.2126, 0.7152, 0.0722), c);
+  lum = mix(1., lum, tex.a);
+  lum = mix(lum, 1. - lum, u_inverted);
+  return lum;
+}
+
+float getLumBall(vec2 p, vec2 pad, vec2 inCellOffset, float contrast, float baseR, float stepSize, out vec4 ballColor) {
+  p += inCellOffset;
+  vec2 uv_i = floor(p);
+  vec2 uv_f = fract(p);
+  vec2 samplingUV = (uv_i + .5 - inCellOffset) * pad + vec2(.5);
+  float outOfFrame = getUvFrame(samplingUV, pad * stepSize);
+
+  float lum = getLumAtPx(samplingUV, contrast);
+  ballColor = texture(u_image, samplingUV);
+  ballColor.rgb *= ballColor.a;
+  ballColor *= outOfFrame;
+
+  float ball = 0.;
+  if (u_type == 0.) {
+    ball = getCircle(uv_f, lum, baseR);
+  } else if (u_type == 1.) {
+    ball = getGooeyBall(uv_f, lum, baseR);
+  } else if (u_type == 2.) {
+    ball = getCircleWithHole(uv_f, lum, baseR);
+  } else if (u_type == 3.) {
+    ball = getSoftBall(uv_f, lum, baseR);
+  }
+
+  return ball * outOfFrame;
+}
+
+void main() {
+  float stepMultiplier = 1.;
+  if (u_type == 0.) {
+    stepMultiplier = 2.;
+  } else if (u_type == 1. || u_type == 3.) {
+    stepMultiplier = 6.;
+  }
+
+  float cellsPerSide = mix(300., 7., pow(u_size, .7));
+  cellsPerSide /= stepMultiplier;
+  float cellSizeY = 1. / cellsPerSide;
+  vec2 pad = cellSizeY * vec2(1. / u_imageAspectRatio, 1.);
+  if (u_type == 1. && u_grid == 1.) {
+    pad *= .7;
+  }
+
+  vec2 fragUV = gl_FragCoord.xy / iResolution.xy;
+  vec2 uv = getImageCoverUV(fragUV, iResolution, u_imageAspectRatio);
+  uv -= vec2(.5);
+  uv /= pad;
+
+  float contrast = mix(0., 15., pow(u_contrast, 1.5));
+  float baseRadius = u_radius;
+  if (u_originalColors > 0.5) {
+    contrast = mix(.1, 4., pow(u_contrast, 2.));
+    baseRadius = 2. * pow(.5 * u_radius, .3);
+  }
+
+  float totalShape = 0.;
+  vec3 totalColor = vec3(0.);
+  float totalOpacity = 0.;
+
+  vec4 ballColor;
+  float shape;
+  float stepSize = 1. / stepMultiplier;
+  for (float x = -0.5; x < 0.5; x += stepSize) {
+    for (float y = -0.5; y < 0.5; y += stepSize) {
+      vec2 offset = vec2(x, y);
+
+      if (u_grid == 1.) {
+        float rowIndex = floor((y + .5) / stepSize);
+        float colIndex = floor((x + .5) / stepSize);
+        if (stepSize == 1.) {
+          rowIndex = floor(uv.y + y + 1.);
+          if (u_type == 1.) {
+            colIndex = floor(uv.x + x + 1.);
+          }
+        }
+        if (u_type == 1.) {
+          if (mod(rowIndex + colIndex, 2.) == 1.) {
+            continue;
+          }
+        } else {
+          if (mod(rowIndex, 2.) == 1.) {
+            offset.x += .5 * stepSize;
+          }
+        }
+      }
+
+      shape = getLumBall(uv, pad, offset, contrast, baseRadius, stepSize, ballColor);
+      totalColor += ballColor.rgb * shape;
+      totalShape += shape;
+      totalOpacity += shape;
+    }
+  }
+
+  const float eps = 1e-4;
+  totalColor /= max(totalShape, eps);
+  totalOpacity /= max(totalShape, eps);
+
+  float finalShape = 0.;
+  if (u_type == 0.) {
+    finalShape = min(1., totalShape);
+  } else if (u_type == 1.) {
+    float aa = fwidth(totalShape);
+    float th = .5;
+    finalShape = smoothstep(th - aa, th + aa, totalShape);
+  } else if (u_type == 2.) {
+    finalShape = min(1., totalShape);
+  } else if (u_type == 3.) {
+    finalShape = totalShape;
+  }
+
+  vec2 grainSize = mix(2000., 200., u_grainSize) * vec2(1., 1. / u_imageAspectRatio);
+  vec2 grainUV = fragUV - .5;
+  grainUV *= grainSize;
+  grainUV += .5;
+  float grain = valueNoise(grainUV);
+  grain = smoothstep(.55, .7 + .2 * u_grainMixer, grain);
+  grain *= u_grainMixer;
+  finalShape = mix(finalShape, 0., grain);
+
+  vec3 color = vec3(0.);
+  float opacity = 0.;
+
+  if (u_originalColors > 0.5) {
+    color = totalColor * finalShape;
+    opacity = totalOpacity * finalShape;
+    vec3 bgColor = u_colorBack.rgb * u_colorBack.a;
+    color = color + bgColor * (1. - opacity);
+    opacity = opacity + u_colorBack.a * (1. - opacity);
+  } else {
+    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;
+
+    color = fgColor * finalShape;
+    opacity = fgOpacity * finalShape;
+    color += bgColor * (1. - opacity);
+    opacity += bgOpacity * (1. - opacity);
+  }
+
+  float grainOverlay = valueNoise(grainUV + vec2(3.));
+  grainOverlay = mix(grainOverlay, valueNoise(grainUV * 1.4 + vec2(-1.)), .5);
+  grainOverlay = pow(grainOverlay, 1.3);
+  float grainOverlayV = grainOverlay * 2. - 1.;
+  vec3 grainOverlayColor = vec3(step(0., grainOverlayV));
+  float grainOverlayStrength = u_grainOverlay * abs(grainOverlayV);
+  grainOverlayStrength = pow(grainOverlayStrength, .8);
+  color = mix(color, grainOverlayColor, .5 * grainOverlayStrength);
+  opacity += .5 * grainOverlayStrength;
+  opacity = clamp(opacity, 0., 1.);
+
+  fragColor = vec4(color, opacity);
+}
+`;
+
+export { halftoneDotsFragmentShader };

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

@@ -0,0 +1,43 @@
+import type React from "react";
+import type { ShaderTextureSource } from "../shared";
+export declare const HALFTONE_DOTS_TYPES: {
+    readonly classic: 0;
+    readonly gooey: 1;
+    readonly holes: 2;
+    readonly soft: 3;
+};
+export type HalftoneDotsType = keyof typeof HALFTONE_DOTS_TYPES;
+export declare const HALFTONE_DOTS_GRIDS: {
+    readonly square: 0;
+    readonly hex: 1;
+};
+export type HalftoneDotsGrid = keyof typeof HALFTONE_DOTS_GRIDS;
+export interface HalftoneDotsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Source image (URL or an existing HTMLImageElement). Required. */
+    image: ShaderTextureSource;
+    /** Dot color, used when `originalColors` is false. Default: 'var(--color-text-primary)'. */
+    colorFront?: string;
+    /** Background CSS color. Default: 'var(--color-background)'. */
+    colorBack?: string;
+    /** Ball rendering style. Default: 'classic'. */
+    type?: HalftoneDotsType;
+    /** Grid layout. Default: 'square'. */
+    grid?: HalftoneDotsGrid;
+    /** Dot grid density, 0-1 (higher = finer grid). Default: 0.6. */
+    size?: number;
+    /** Max dot radius, 0-1. Default: 0.8. */
+    radius?: number;
+    /** Luminance contrast, 0-1. Default: 0.5. */
+    contrast?: number;
+    /** Keep the image's own colors per-dot instead of a flat `colorFront`. Default: false. */
+    originalColors?: boolean;
+    /** Invert the luminance before halftoning. Default: false. */
+    inverted?: boolean;
+    /** Grain influence on the dot mask, 0-1. Default: 0. */
+    grainMixer?: number;
+    /** Post-composite grain overlay strength, 0-1. Default: 0. */
+    grainOverlay?: number;
+    /** Grain texture scale, 0-1. Default: 0.5. */
+    grainSize?: number;
+    className?: string;
+}

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

@@ -0,0 +1,12 @@
+const HALFTONE_DOTS_TYPES = {
+    classic: 0,
+    gooey: 1,
+    holes: 2,
+    soft: 3,
+};
+const HALFTONE_DOTS_GRIDS = {
+    square: 0,
+    hex: 1,
+};
+
+export { HALFTONE_DOTS_GRIDS, HALFTONE_DOTS_TYPES };

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

@@ -0,0 +1,3 @@
+export { HalftoneDots } from "./HalftoneDots";
+export type { HalftoneDotsProps, HalftoneDotsType, HalftoneDotsGrid } from "./HalftoneDots.types";
+export { HALFTONE_DOTS_TYPES, HALFTONE_DOTS_GRIDS } from "./HalftoneDots.types";

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

@@ -0,0 +1,9 @@
+import React from "react";
+import type { ImageDitheringProps } from "./ImageDithering.types";
+/**
+ * Ordered-dithering image filter — quantizes a source image's luminance
+ * through a Bayer or random dither matrix into flat color steps. WebGL2-
+ * powered; falls back to the plain source image (via `object-fit: cover`)
+ * when WebGL2 is unavailable.
+ */
+export declare const ImageDithering: React.FC<ImageDitheringProps>;

package/dist/components/effects/ImageDithering/ImageDithering.js

@@ -0,0 +1,68 @@
+"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 { imageDitheringFragmentShader } from './ImageDithering.shaders.js';
+import { IMAGE_DITHERING_TYPES } from './ImageDithering.types.js';
+
+const DEFAULT_COLOR_FRONT = "var(--color-text-primary)";
+const DEFAULT_COLOR_BACK = "var(--color-background)";
+const DEFAULT_COLOR_HIGHLIGHT = "var(--color-primary)";
+function useWebgl2Supported() {
+    return useMemo(() => {
+        if (typeof document === "undefined")
+            return false;
+        try {
+            return !!document.createElement("canvas").getContext("webgl2");
+        }
+        catch (_a) {
+            return false;
+        }
+    }, []);
+}
+/**
+ * Ordered-dithering image filter — quantizes a source image's luminance
+ * through a Bayer or random dither matrix into flat color steps. WebGL2-
+ * powered; falls back to the plain source image (via `object-fit: cover`)
+ * when WebGL2 is unavailable.
+ */
+const ImageDithering = ({ image, colorFront = DEFAULT_COLOR_FRONT, colorBack = DEFAULT_COLOR_BACK, colorHighlight = DEFAULT_COLOR_HIGHLIGHT, type = "4x4", size = 4, colorSteps = 4, originalColors = false, inverted = false, 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 resolvedHighlight = useMemo(() => resolveShaderColor(colorHighlight), 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [colorHighlight, 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_colorHighlight = resolvedHighlight;
+    uniformsRef.current.u_imageAspectRatio = imageAspectRatio;
+    uniformsRef.current.u_type = IMAGE_DITHERING_TYPES[type];
+    uniformsRef.current.u_pxSize = size;
+    uniformsRef.current.u_colorSteps = colorSteps;
+    uniformsRef.current.u_originalColors = originalColors ? 1 : 0;
+    uniformsRef.current.u_inverted = inverted ? 1 : 0;
+    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: imageDitheringFragmentShader, uniformsRef: uniformsRef, texturesRef: texturesRef, onTextureLoad: handleTextureLoad })) : (jsx("img", { src: imageSrc, alt: "", className: "absolute inset-0 w-full h-full object-cover" })) }));
+};
+
+export { ImageDithering };

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

@@ -0,0 +1,12 @@
+/**
+ * ImageDithering fragment shader — adapted from paper-design/shaders'
+ * `image-dithering.ts` (https://github.com/paper-design/shaders, Apache
+ * License 2.0). An image filter: ordered-dithers a source image's
+ * luminance into flat color steps.
+ *
+ * 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; reuses the same
+ * `shared/bayerMatrices.glsl.ts` module as `Dithering`.
+ */
+export declare const imageDitheringFragmentShader = "#version 300 es\nprecision mediump float;\n\nuniform vec2 iResolution;\n\nuniform vec4 u_colorFront;\nuniform vec4 u_colorBack;\nuniform vec4 u_colorHighlight;\n\nuniform sampler2D u_image;\nuniform float u_imageAspectRatio;\n\nuniform float u_type;\nuniform float u_pxSize;\nuniform float u_originalColors;\nuniform float u_inverted;\nuniform float u_colorSteps;\n\nout vec4 fragColor;\n\n\nfloat randomR(vec2 st) {\n  return fract(sin(dot(st, vec2(12.9898, 78.233))) * 43758.5453123);\n}\n\n\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\n\nfloat getUvFrame(vec2 uv, vec2 pad) {\n  float aa = 0.0001;\n  float left = smoothstep(-pad.x, -pad.x + aa, uv.x);\n  float right = smoothstep(1.0 + pad.x, 1.0 + pad.x - aa, uv.x);\n  float bottom = smoothstep(-pad.y, -pad.y + aa, uv.y);\n  float top = smoothstep(1.0 + pad.y, 1.0 + pad.y - aa, uv.y);\n  return left * right * bottom * top;\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\nvoid main() {\n  float pxSize = max(u_pxSize, 1.0);\n  vec2 pxSizeUV = gl_FragCoord.xy - .5 * iResolution;\n  pxSizeUV /= pxSize;\n  vec2 canvasPixelizedUV = (floor(pxSizeUV) + .5) * pxSize;\n  vec2 normalizedUV = canvasPixelizedUV / iResolution;\n\n  vec2 imageUV = getImageCoverUV(normalizedUV, iResolution, u_imageAspectRatio);\n  vec2 ditheringNoiseUV = canvasPixelizedUV;\n  vec4 image = texture(u_image, imageUV);\n  float frame = getUvFrame(imageUV, pxSize / iResolution);\n\n  int type = int(floor(u_type));\n  float dithering = 0.0;\n\n  float lum = dot(vec3(.2126, .7152, .0722), image.rgb);\n  lum = mix(lum, 1. - lum, u_inverted);\n\n  if (type == 1) {\n    dithering = step(randomR(ditheringNoiseUV), lum);\n  } else if (type == 2) {\n    dithering = getBayerValue(pxSizeUV, 2);\n  } else if (type == 3) {\n    dithering = getBayerValue(pxSizeUV, 4);\n  } else {\n    dithering = getBayerValue(pxSizeUV, 8);\n  }\n\n  float colorSteps = max(floor(u_colorSteps), 1.);\n  vec3 color = vec3(0.0);\n  float opacity = 1.;\n\n  dithering -= .5;\n  float brightness = clamp(lum + dithering / colorSteps, 0.0, 1.0);\n  brightness = mix(0.0, brightness, frame);\n  brightness = mix(0.0, brightness, image.a);\n  float quantLum = floor(brightness * colorSteps + 0.5) / colorSteps;\n  quantLum = mix(0.0, quantLum, frame);\n\n  if (u_originalColors > 0.5) {\n    vec3 normColor = image.rgb / max(lum, 0.001);\n    color = normColor * quantLum;\n    float quantAlpha = floor(image.a * colorSteps + 0.5) / colorSteps;\n    opacity = mix(quantLum, 1., quantAlpha);\n  } else {\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    vec3 hlColor = u_colorHighlight.rgb * u_colorHighlight.a;\n    float hlOpacity = u_colorHighlight.a;\n\n    fgColor = mix(fgColor, hlColor, step(1.02 - .02 * u_colorSteps, brightness));\n    fgOpacity = mix(fgOpacity, hlOpacity, step(1.02 - .02 * u_colorSteps, brightness));\n\n    color = fgColor * quantLum;\n    opacity = fgOpacity * quantLum;\n    color += bgColor * (1.0 - opacity);\n    opacity += bgOpacity * (1.0 - opacity);\n  }\n\n  fragColor = vec4(color, opacity);\n}\n";

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

@@ -0,0 +1,117 @@
+import 'react/jsx-runtime';
+import 'react';
+import { glslHashFloat } from '../shared/shaderNoise.glsl.js';
+import { glslBayerMatrices } from '../shared/bayerMatrices.glsl.js';
+import { glslImageCoverUV } from '../shared/imageUV.glsl.js';
+
+/**
+ * ImageDithering fragment shader — adapted from paper-design/shaders'
+ * `image-dithering.ts` (https://github.com/paper-design/shaders, Apache
+ * License 2.0). An image filter: ordered-dithers a source image's
+ * luminance into flat color steps.
+ *
+ * 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; reuses the same
+ * `shared/bayerMatrices.glsl.ts` module as `Dithering`.
+ */
+const imageDitheringFragmentShader = `#version 300 es
+precision mediump float;
+
+uniform vec2 iResolution;
+
+uniform vec4 u_colorFront;
+uniform vec4 u_colorBack;
+uniform vec4 u_colorHighlight;
+
+uniform sampler2D u_image;
+uniform float u_imageAspectRatio;
+
+uniform float u_type;
+uniform float u_pxSize;
+uniform float u_originalColors;
+uniform float u_inverted;
+uniform float u_colorSteps;
+
+out vec4 fragColor;
+
+${glslHashFloat}
+${glslBayerMatrices}
+
+float getUvFrame(vec2 uv, vec2 pad) {
+  float aa = 0.0001;
+  float left = smoothstep(-pad.x, -pad.x + aa, uv.x);
+  float right = smoothstep(1.0 + pad.x, 1.0 + pad.x - aa, uv.x);
+  float bottom = smoothstep(-pad.y, -pad.y + aa, uv.y);
+  float top = smoothstep(1.0 + pad.y, 1.0 + pad.y - aa, uv.y);
+  return left * right * bottom * top;
+}
+
+${glslImageCoverUV}
+
+void main() {
+  float pxSize = max(u_pxSize, 1.0);
+  vec2 pxSizeUV = gl_FragCoord.xy - .5 * iResolution;
+  pxSizeUV /= pxSize;
+  vec2 canvasPixelizedUV = (floor(pxSizeUV) + .5) * pxSize;
+  vec2 normalizedUV = canvasPixelizedUV / iResolution;
+
+  vec2 imageUV = getImageCoverUV(normalizedUV, iResolution, u_imageAspectRatio);
+  vec2 ditheringNoiseUV = canvasPixelizedUV;
+  vec4 image = texture(u_image, imageUV);
+  float frame = getUvFrame(imageUV, pxSize / iResolution);
+
+  int type = int(floor(u_type));
+  float dithering = 0.0;
+
+  float lum = dot(vec3(.2126, .7152, .0722), image.rgb);
+  lum = mix(lum, 1. - lum, u_inverted);
+
+  if (type == 1) {
+    dithering = step(randomR(ditheringNoiseUV), lum);
+  } else if (type == 2) {
+    dithering = getBayerValue(pxSizeUV, 2);
+  } else if (type == 3) {
+    dithering = getBayerValue(pxSizeUV, 4);
+  } else {
+    dithering = getBayerValue(pxSizeUV, 8);
+  }
+
+  float colorSteps = max(floor(u_colorSteps), 1.);
+  vec3 color = vec3(0.0);
+  float opacity = 1.;
+
+  dithering -= .5;
+  float brightness = clamp(lum + dithering / colorSteps, 0.0, 1.0);
+  brightness = mix(0.0, brightness, frame);
+  brightness = mix(0.0, brightness, image.a);
+  float quantLum = floor(brightness * colorSteps + 0.5) / colorSteps;
+  quantLum = mix(0.0, quantLum, frame);
+
+  if (u_originalColors > 0.5) {
+    vec3 normColor = image.rgb / max(lum, 0.001);
+    color = normColor * quantLum;
+    float quantAlpha = floor(image.a * colorSteps + 0.5) / colorSteps;
+    opacity = mix(quantLum, 1., quantAlpha);
+  } else {
+    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;
+    vec3 hlColor = u_colorHighlight.rgb * u_colorHighlight.a;
+    float hlOpacity = u_colorHighlight.a;
+
+    fgColor = mix(fgColor, hlColor, step(1.02 - .02 * u_colorSteps, brightness));
+    fgOpacity = mix(fgOpacity, hlOpacity, step(1.02 - .02 * u_colorSteps, brightness));
+
+    color = fgColor * quantLum;
+    opacity = fgOpacity * quantLum;
+    color += bgColor * (1.0 - opacity);
+    opacity += bgOpacity * (1.0 - opacity);
+  }
+
+  fragColor = vec4(color, opacity);
+}
+`;
+
+export { imageDitheringFragmentShader };

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

@@ -0,0 +1,30 @@
+import type React from "react";
+import type { ShaderTextureSource } from "../shared";
+export declare const IMAGE_DITHERING_TYPES: {
+    readonly random: 1;
+    readonly "2x2": 2;
+    readonly "4x4": 3;
+    readonly "8x8": 4;
+};
+export type ImageDitheringType = keyof typeof IMAGE_DITHERING_TYPES;
+export interface ImageDitheringProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Source image (URL or an existing HTMLImageElement). Required. */
+    image: ShaderTextureSource;
+    /** Foreground (dark-step) CSS color, used when `originalColors` is false. Default: 'var(--color-text-primary)'. */
+    colorFront?: string;
+    /** Background (light-step) CSS color, used when `originalColors` is false. Default: 'var(--color-background)'. */
+    colorBack?: string;
+    /** Highlight color for the brightest step, used when `originalColors` is false. Default: 'var(--color-primary)'. */
+    colorHighlight?: string;
+    /** Ordered-dithering matrix, or 'random' for noise dithering. Default: '4x4'. */
+    type?: ImageDitheringType;
+    /** Dither cell size in device pixels. Default: 4. */
+    size?: number;
+    /** Number of brightness quantization steps. Default: 4. */
+    colorSteps?: number;
+    /** Keep the image's own colors (quantized) instead of the two/three-tone palette. Default: false. */
+    originalColors?: boolean;
+    /** Invert the luminance before dithering. Default: false. */
+    inverted?: boolean;
+    className?: string;
+}

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

@@ -0,0 +1,8 @@
+const IMAGE_DITHERING_TYPES = {
+    random: 1,
+    "2x2": 2,
+    "4x4": 3,
+    "8x8": 4,
+};
+
+export { IMAGE_DITHERING_TYPES };

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

@@ -0,0 +1,3 @@
+export { ImageDithering } from "./ImageDithering";
+export type { ImageDitheringProps, ImageDitheringType } from "./ImageDithering.types";
+export { IMAGE_DITHERING_TYPES } from "./ImageDithering.types";

package/dist/components/effects/InteractiveCharacters/InteractiveCharacters.js

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

package/dist/components/effects/InteractiveCharacters/characters/BlobCharacter.js

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

package/dist/components/effects/InteractiveCharacters/characters/SmallCharacter.js

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

package/dist/components/effects/InteractiveCharacters/characters/TallCharacter.js

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

package/dist/components/effects/InteractiveCharacters/hooks/useBlink.js

@@ -1,3 +1,4 @@
+"use client";
 import { useRef, useCallback, useEffect } from 'react';
 import { useMotionValue, useSpring } from 'motion/react';
 

package/dist/components/effects/InteractiveCharacters/hooks/useIdleAnimation.js

@@ -1,3 +1,4 @@
+"use client";
 import { useRef, useCallback, useEffect } from 'react';
 import { useReducedMotion, useMotionValue, useSpring } from 'motion/react';
 

package/dist/components/effects/InteractiveCharacters/hooks/useMouseTracking.js

@@ -1,3 +1,4 @@
+"use client";
 import { useCallback, useEffect } from 'react';
 import { useReducedMotion, useMotionValue, useSpring } from 'motion/react';
 

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

@@ -0,0 +1,9 @@
+import React from "react";
+import type { LiquidMetalProps } from "./LiquidMetal.types";
+/**
+ * Animated chrome/mercury-like liquid metal surface with chromatic-dispersion
+ * stripes, masked into a shape. WebGL2-powered; falls back to a static CSS
+ * metallic gradient when WebGL2 is unavailable or the user prefers reduced
+ * motion.
+ */
+export declare const LiquidMetal: React.FC<LiquidMetalProps>;