@waveso/ui 0.0.7 → 0.0.9

package/dist/count.js

@@ -0,0 +1,176 @@
+import { useRef, useState, useEffect, isValidElement, cloneElement } from 'react';
+import { useInView } from 'motion/react';
+import { jsx } from 'react/jsx-runtime';
+
+function easeOut(t) {
+  return 1 - Math.pow(1 - t, 3);
+}
+function formatCountdown(ms) {
+  if (ms <= 0) return "00:00:00";
+  const totalSeconds = Math.floor(ms / 1e3);
+  const days = Math.floor(totalSeconds / 86400);
+  const hours = Math.floor(totalSeconds % 86400 / 3600);
+  const minutes = Math.floor(totalSeconds % 3600 / 60);
+  const seconds = totalSeconds % 60;
+  const pad = (n) => String(n).padStart(2, "0");
+  if (days > 0) {
+    return `${days}d ${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+  }
+  return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+}
+function mergeRef(internalRef, externalRef) {
+  return (el) => {
+    internalRef.current = el;
+    if (typeof externalRef === "function") externalRef(el);
+    else if (externalRef && typeof externalRef === "object") {
+      externalRef.current = el;
+    }
+  };
+}
+function Count({
+  to,
+  from: start = 0,
+  duration = 900,
+  delay = 0,
+  format,
+  prefix = "",
+  suffix = "",
+  children,
+  once = true,
+  easing = easeOut,
+  onComplete
+}) {
+  const isDate = to instanceof Date;
+  if (isDate) {
+    return /* @__PURE__ */ jsx(
+      DateCount,
+      {
+        to,
+        delay,
+        format,
+        prefix,
+        suffix,
+        once,
+        onComplete,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    NumberCount,
+    {
+      to,
+      from: start,
+      duration,
+      delay,
+      format,
+      prefix,
+      suffix,
+      once,
+      easing,
+      onComplete,
+      children
+    }
+  );
+}
+function NumberCount({
+  to,
+  from: start,
+  duration,
+  delay,
+  format,
+  prefix,
+  suffix,
+  children,
+  once,
+  easing,
+  onComplete
+}) {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once, margin: "-50px" });
+  const [display, setDisplay] = useState(start);
+  const hasAnimated = useRef(false);
+  const formatFn = format ?? ((n) => Number.isInteger(to) ? Math.round(n).toLocaleString() : n.toLocaleString());
+  useEffect(() => {
+    if (!isInView || hasAnimated.current) return;
+    hasAnimated.current = true;
+    const delayMs = delay * 1e3;
+    let raf;
+    let startTime;
+    const timer = setTimeout(() => {
+      const animate = (timestamp) => {
+        if (!startTime) startTime = timestamp;
+        const elapsed = timestamp - startTime;
+        const progress = Math.min(elapsed / duration, 1);
+        const easedProgress = easing(progress);
+        const current = start + (to - start) * easedProgress;
+        setDisplay(current);
+        if (progress < 1) {
+          raf = requestAnimationFrame(animate);
+        } else {
+          onComplete?.();
+        }
+      };
+      raf = requestAnimationFrame(animate);
+    }, delayMs);
+    return () => {
+      clearTimeout(timer);
+      cancelAnimationFrame(raf);
+    };
+  }, [isInView, to, start, duration, delay, easing, onComplete]);
+  if (!isValidElement(children)) return children;
+  const childProps = children.props;
+  const existingRef = childProps.ref;
+  return cloneElement(children, {
+    ref: mergeRef(ref, existingRef),
+    children: `${prefix}${formatFn(display)}${suffix}`
+  });
+}
+function DateCount({
+  to,
+  delay,
+  format,
+  prefix,
+  suffix,
+  children,
+  once,
+  onComplete
+}) {
+  const ref = useRef(null);
+  const isInView = useInView(ref, { once, margin: "-50px" });
+  const [remaining, setRemaining] = useState(() => Math.max(0, to.getTime() - Date.now()));
+  const [started, setStarted] = useState(false);
+  const completedRef = useRef(false);
+  const formatFn = format ?? formatCountdown;
+  useEffect(() => {
+    if (!isInView || started) return;
+    const timer = setTimeout(() => setStarted(true), delay * 1e3);
+    return () => clearTimeout(timer);
+  }, [isInView, delay, started]);
+  useEffect(() => {
+    if (!started) return;
+    const tick = () => {
+      const ms = Math.max(0, to.getTime() - Date.now());
+      setRemaining(ms);
+      if (ms <= 0 && !completedRef.current) {
+        completedRef.current = true;
+        onComplete?.();
+      }
+    };
+    tick();
+    const interval = setInterval(tick, 1e3);
+    return () => clearInterval(interval);
+  }, [started, to, onComplete]);
+  if (!isValidElement(children)) return children;
+  const childProps = children.props;
+  const existingRef = childProps.ref;
+  return cloneElement(children, {
+    ref: mergeRef(ref, existingRef),
+    children: `${prefix}${formatFn(remaining)}${suffix}`
+  });
+}
+var CountUp = Count;
+
+export { Count, CountUp, easeOut };
+//# sourceMappingURL=count.js.map
+//# sourceMappingURL=count.js.map

package/dist/count.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/count.tsx"],"names":[],"mappings":"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","file":"count.js","sourcesContent":["\"use client\"\n\nimport {\n  type ReactElement,\n  type Ref,\n  cloneElement,\n  isValidElement,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\"\nimport { useInView } from \"motion/react\"\n\n// ── Types ────────────────────────────────────────────────────────────\n\ninterface CountProps {\n  /** Target number or Date to count to */\n  to: number | Date\n  /** Starting number. Default: 0. Ignored when `to` is a Date. */\n  from?: number\n  /** Animation duration in milliseconds. Default: 900. Ignored when `to` is a Date. */\n  duration?: number\n  /** Delay before starting in seconds. Default: 0 */\n  delay?: number\n  /**\n   * Format the value for display.\n   * - For numbers: receives the current interpolated number.\n   * - For dates: receives remaining milliseconds.\n   * Default: toLocaleString() for numbers, dd:hh:mm:ss for dates.\n   */\n  format?: (value: number) => string\n  /** Prefix string (e.g., \"$\"). Default: '' */\n  prefix?: string\n  /** Suffix string (e.g., \"%\", \"+\"). Default: '' */\n  suffix?: string\n  /** Element to render into. Receives the formatted value as children. */\n  children: ReactElement\n  /** Trigger once. Default: true */\n  once?: boolean\n  /** Easing function. Default: easeOut. Ignored when `to` is a Date. */\n  easing?: (t: number) => number\n  /** Called when the count finishes (reaches target or date passes). */\n  onComplete?: () => void\n}\n\n/** @deprecated Use `Count` instead. `CountUp` is an alias kept for backwards compatibility. */\ntype CountUpProps = CountProps\n\n// ── Easing ───────────────────────────────────────────────────────────\n\n/** Cubic ease-out: fast start, smooth deceleration */\nfunction easeOut(t: number): number {\n  return 1 - Math.pow(1 - t, 3)\n}\n\n// ── Date Formatting ──────────────────────────────────────────────────\n\nfunction formatCountdown(ms: number): string {\n  if (ms <= 0) return \"00:00:00\"\n\n  const totalSeconds = Math.floor(ms / 1000)\n  const days = Math.floor(totalSeconds / 86400)\n  const hours = Math.floor((totalSeconds % 86400) / 3600)\n  const minutes = Math.floor((totalSeconds % 3600) / 60)\n  const seconds = totalSeconds % 60\n\n  const pad = (n: number) => String(n).padStart(2, \"0\")\n\n  if (days > 0) {\n    return `${days}d ${pad(hours)}:${pad(minutes)}:${pad(seconds)}`\n  }\n  return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`\n}\n\n// ── Ref Merge ────────────────────────────────────────────────────────\n\nfunction mergeRef(\n  internalRef: React.RefObject<HTMLElement | null>,\n  externalRef?: Ref<HTMLElement>,\n) {\n  return (el: HTMLElement | null) => {\n    ;(internalRef as { current: HTMLElement | null }).current = el\n    if (typeof externalRef === \"function\") externalRef(el)\n    else if (externalRef && typeof externalRef === \"object\") {\n      ;(externalRef as { current: HTMLElement | null }).current = el\n    }\n  }\n}\n\n// ── Count ────────────────────────────────────────────────────────────\n\n/**\n * Animated number counter. Counts up, counts down, or live-counts to a date.\n *\n * Direction is automatic — if `from < to` it counts up, if `from > to` it\n * counts down. When `to` is a Date, it becomes a live countdown that ticks\n * every second.\n *\n * Zero wrapper — injects the formatted value as children via cloneElement.\n *\n * @example\n * ```tsx\n * // Count up\n * <Count to={1234}>\n *   <span className=\"text-4xl font-bold tabular-nums\" />\n * </Count>\n *\n * // Count down\n * <Count from={100} to={0} onComplete={() => alert(\"Done!\")}>\n *   <span className=\"text-4xl font-bold tabular-nums\" />\n * </Count>\n *\n * // Live countdown to a date\n * <Count to={new Date(\"2026-04-01T00:00:00\")}>\n *   <span className=\"text-2xl font-mono tabular-nums\" />\n * </Count>\n *\n * // Custom date format\n * <Count to={launchDate} format={(ms) => `${Math.ceil(ms / 86400000)} days left`}>\n *   <span className=\"text-xl\" />\n * </Count>\n * ```\n */\nfunction Count({\n  to,\n  from: start = 0,\n  duration = 900,\n  delay = 0,\n  format,\n  prefix = \"\",\n  suffix = \"\",\n  children,\n  once = true,\n  easing = easeOut,\n  onComplete,\n}: CountProps) {\n  const isDate = to instanceof Date\n\n  if (isDate) {\n    return (\n      <DateCount\n        to={to}\n        delay={delay}\n        format={format}\n        prefix={prefix}\n        suffix={suffix}\n        once={once}\n        onComplete={onComplete}\n      >\n        {children}\n      </DateCount>\n    )\n  }\n\n  return (\n    <NumberCount\n      to={to}\n      from={start}\n      duration={duration}\n      delay={delay}\n      format={format}\n      prefix={prefix}\n      suffix={suffix}\n      once={once}\n      easing={easing}\n      onComplete={onComplete}\n    >\n      {children}\n    </NumberCount>\n  )\n}\n\n// ── Number Count (up or down) ────────────────────────────────────────\n\nfunction NumberCount({\n  to,\n  from: start,\n  duration,\n  delay,\n  format,\n  prefix,\n  suffix,\n  children,\n  once,\n  easing,\n  onComplete,\n}: {\n  to: number\n  from: number\n  duration: number\n  delay: number\n  format?: (value: number) => string\n  prefix: string\n  suffix: string\n  children: ReactElement\n  once: boolean\n  easing: (t: number) => number\n  onComplete?: () => void\n}) {\n  const ref = useRef<HTMLElement>(null)\n  const isInView = useInView(ref, { once, margin: \"-50px\" })\n  const [display, setDisplay] = useState(start)\n  const hasAnimated = useRef(false)\n\n  const formatFn = format ?? ((n: number) =>\n    Number.isInteger(to) ? Math.round(n).toLocaleString() : n.toLocaleString()\n  )\n\n  useEffect(() => {\n    if (!isInView || hasAnimated.current) return\n    hasAnimated.current = true\n\n    const delayMs = delay * 1000\n    let raf: number\n    let startTime: number\n\n    const timer = setTimeout(() => {\n      const animate = (timestamp: number) => {\n        if (!startTime) startTime = timestamp\n        const elapsed = timestamp - startTime\n        const progress = Math.min(elapsed / duration, 1)\n        const easedProgress = easing(progress)\n        const current = start + (to - start) * easedProgress\n\n        setDisplay(current)\n\n        if (progress < 1) {\n          raf = requestAnimationFrame(animate)\n        } else {\n          onComplete?.()\n        }\n      }\n\n      raf = requestAnimationFrame(animate)\n    }, delayMs)\n\n    return () => {\n      clearTimeout(timer)\n      cancelAnimationFrame(raf)\n    }\n  }, [isInView, to, start, duration, delay, easing, onComplete])\n\n  if (!isValidElement(children)) return children\n\n  const childProps = children.props as Record<string, unknown>\n  const existingRef = (childProps as { ref?: Ref<HTMLElement> }).ref\n\n  return cloneElement(children, {\n    ref: mergeRef(ref, existingRef),\n    children: `${prefix}${formatFn(display)}${suffix}`,\n  } as Record<string, unknown>)\n}\n\n// ── Date Count (live countdown) ──────────────────────────────────────\n\nfunction DateCount({\n  to,\n  delay,\n  format,\n  prefix,\n  suffix,\n  children,\n  once,\n  onComplete,\n}: {\n  to: Date\n  delay: number\n  format?: (value: number) => string\n  prefix: string\n  suffix: string\n  children: ReactElement\n  once: boolean\n  onComplete?: () => void\n}) {\n  const ref = useRef<HTMLElement>(null)\n  const isInView = useInView(ref, { once, margin: \"-50px\" })\n  const [remaining, setRemaining] = useState(() => Math.max(0, to.getTime() - Date.now()))\n  const [started, setStarted] = useState(false)\n  const completedRef = useRef(false)\n\n  const formatFn = format ?? formatCountdown\n\n  useEffect(() => {\n    if (!isInView || started) return\n    const timer = setTimeout(() => setStarted(true), delay * 1000)\n    return () => clearTimeout(timer)\n  }, [isInView, delay, started])\n\n  useEffect(() => {\n    if (!started) return\n\n    const tick = () => {\n      const ms = Math.max(0, to.getTime() - Date.now())\n      setRemaining(ms)\n\n      if (ms <= 0 && !completedRef.current) {\n        completedRef.current = true\n        onComplete?.()\n      }\n    }\n\n    tick()\n    const interval = setInterval(tick, 1000)\n    return () => clearInterval(interval)\n  }, [started, to, onComplete])\n\n  if (!isValidElement(children)) return children\n\n  const childProps = children.props as Record<string, unknown>\n  const existingRef = (childProps as { ref?: Ref<HTMLElement> }).ref\n\n  return cloneElement(children, {\n    ref: mergeRef(ref, existingRef),\n    children: `${prefix}${formatFn(remaining)}${suffix}`,\n  } as Record<string, unknown>)\n}\n\n// ── Exports ──────────────────────────────────────────────────────────\n\n/** @deprecated Use `Count` instead */\nconst CountUp = Count\n\nexport { Count, CountUp, easeOut }\nexport type { CountProps, CountUpProps }\n"]}

package/dist/dialog.js

@@ -1,5 +1,5 @@
-import { Button } from './chunk-OUFYQLVN.js';
 import { CloseIcon } from './chunk-DIGOLJIR.js';
+import { Button } from './chunk-OUFYQLVN.js';
 import { cn } from './chunk-76UQO56T.js';
 import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/drawer.js

@@ -1,6 +1,6 @@
-export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from './chunk-MO4KRZFJ.js';
-import './chunk-OUFYQLVN.js';
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from './chunk-BKTJYX4M.js';
 import './chunk-DIGOLJIR.js';
+import './chunk-OUFYQLVN.js';
 import './chunk-76UQO56T.js';
 //# sourceMappingURL=drawer.js.map
 //# sourceMappingURL=drawer.js.map

package/dist/film-grain.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+interface FilmGrainProps {
+    density?: number;
+    opacity?: number;
+    blendMode?: React.CSSProperties["mixBlendMode"];
+    fps?: number;
+    color?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+declare function FilmGrain({ density, opacity, blendMode, fps, color, className, style, }: FilmGrainProps): react_jsx_runtime.JSX.Element;
+
+export { FilmGrain, type FilmGrainProps };

package/dist/film-grain.js

@@ -0,0 +1,422 @@
+import { useRef, useMemo, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/film-grain-shader.ts
+var vertexShader = `
+attribute vec2 position;
+varying vec2 vUv;
+
+void main() {
+  vUv = position * 0.5 + 0.5;
+  gl_Position = vec4(position, 0.0, 1.0);
+}
+`;
+var fragmentShader = `
+precision highp float;
+
+uniform float uTime;
+uniform vec2 uResolution;
+uniform float uDensity;
+uniform float uOpacity;
+uniform float uFps;
+uniform vec3 uColor;
+
+varying vec2 vUv;
+
+// Stable hash
+float hash(vec2 p, float seed) {
+  return fract(sin(dot(p + seed, vec2(127.1, 311.7))) * 43758.5453123);
+}
+
+// Film response curve (soft toe + shoulder rolloff)
+float filmCurve(float x) {
+  return smoothstep(0.0, 0.2, x) * (1.0 - smoothstep(0.8, 1.0, x));
+}
+
+void main() {
+  vec2 uv = gl_FragCoord.xy;
+  vec2 p = floor(uv);
+
+  // Temporal coherence: blend between current and next frame seed
+  float frame = floor(uTime * uFps);
+  float t = fract(uTime * uFps);
+  float seed = frame * 0.1731;
+
+  // Multi-scale grain with inter-frame blending on fine layer
+  float fineA = hash(p, seed);
+  float fineB = hash(p, seed + 0.1731);
+  float fine = mix(fineA, fineB, t);
+
+  float medium = hash(floor(uv * 0.5), seed + 3.1);
+  float coarse = hash(floor(uv * 0.25), seed + 7.93);
+
+  float grain = fine * 0.65 + medium * 0.25 + coarse * 0.10;
+
+  // Emulsion clumping (organic structure)
+  float cluster = hash(floor(uv * 0.18), seed + 9.2);
+  grain *= mix(0.75, 1.35, cluster);
+
+  // Density threshold
+  grain = smoothstep(1.0 - uDensity, 1.0, grain);
+
+  // Film response curve (replaces raw pow gamma)
+  grain = filmCurve(grain);
+
+  // Micro-blur: sample neighbors for optical diffusion
+  float n1 = hash(p + vec2(1.0, 0.0), seed);
+  float n2 = hash(p - vec2(1.0, 0.0), seed);
+  float n3 = hash(p + vec2(0.0, 1.0), seed);
+  float n4 = hash(p - vec2(0.0, 1.0), seed);
+  float neighbors = (n1 + n2 + n3 + n4) * 0.25;
+  grain = mix(grain, neighbors, 0.15);
+
+  // Chromatic aberration (reuse neighbor hashes)
+  float rShift = n1 * 0.015;
+  float bShift = n2 * 0.015;
+
+  vec3 color = uColor * vec3(
+    grain + rShift,
+    grain,
+    grain + bShift
+  );
+
+  color = clamp(color, 0.0, 1.0);
+
+  gl_FragColor = vec4(color, grain * uOpacity);
+}
+`;
+
+// src/film-grain-webgl.ts
+function parseHex(hex) {
+  if (!/^#([0-9a-f]{3,8})$/i.test(hex)) return [255, 255, 255, 255];
+  let h = hex.replace("#", "");
+  if (h.length === 3) h = h.split("").map((c) => c + c).join("");
+  if (h.length === 6) h += "ff";
+  const n = parseInt(h, 16);
+  return [n >> 24 & 255, n >> 16 & 255, n >> 8 & 255, n & 255];
+}
+function initWebGL(gl) {
+  const createShader = (type, source) => {
+    const shader = gl.createShader(type);
+    if (!shader) return null;
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+      gl.deleteShader(shader);
+      return null;
+    }
+    return shader;
+  };
+  const vs = createShader(gl.VERTEX_SHADER, vertexShader);
+  const fs = createShader(gl.FRAGMENT_SHADER, fragmentShader);
+  if (!vs || !fs) return null;
+  const program = gl.createProgram();
+  if (!program) return null;
+  gl.attachShader(program, vs);
+  gl.attachShader(program, fs);
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    gl.deleteProgram(program);
+    return null;
+  }
+  gl.useProgram(program);
+  const buffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+  gl.bufferData(
+    gl.ARRAY_BUFFER,
+    new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+    gl.STATIC_DRAW
+  );
+  const position = gl.getAttribLocation(program, "position");
+  gl.enableVertexAttribArray(position);
+  gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);
+  return {
+    uTime: gl.getUniformLocation(program, "uTime"),
+    uResolution: gl.getUniformLocation(program, "uResolution"),
+    uDensity: gl.getUniformLocation(program, "uDensity"),
+    uOpacity: gl.getUniformLocation(program, "uOpacity"),
+    uFps: gl.getUniformLocation(program, "uFps"),
+    uColor: gl.getUniformLocation(program, "uColor"),
+    program,
+    vs,
+    fs,
+    buffer
+  };
+}
+function setUniform1f(gl, loc, val) {
+  if (loc) gl.uniform1f(loc, val);
+}
+function setUniform2f(gl, loc, x, y) {
+  if (loc) gl.uniform2f(loc, x, y);
+}
+function setUniform3f(gl, loc, x, y, z) {
+  if (loc) gl.uniform3f(loc, x, y, z);
+}
+function generateGrainTexture(width, height, density, color) {
+  const offscreen = document.createElement("canvas");
+  offscreen.width = width;
+  offscreen.height = height;
+  const ctx = offscreen.getContext("2d");
+  if (!ctx) return offscreen;
+  const [r, g, b, a] = parseHex(color);
+  const imageData = ctx.createImageData(width, height);
+  const pixels = new Uint32Array(imageData.data.buffer);
+  for (let i = 0; i < pixels.length; i++) {
+    if (Math.random() < density) {
+      const variation = Math.round(a * (0.4 + Math.random() * 0.6));
+      pixels[i] = (variation << 24 | b << 16 | g << 8 | r) >>> 0;
+    }
+  }
+  ctx.putImageData(imageData, 0, 0);
+  return offscreen;
+}
+function useFilmGrain({
+  density,
+  opacity,
+  fps = 18,
+  color = "#ffffff"
+}) {
+  const canvasRef = useRef(null);
+  const rafRef = useRef(0);
+  const visibleRef = useRef(true);
+  const grainTextureRef = useRef(null);
+  const resizeTimerRef = useRef(null);
+  const interval = useMemo(() => 1e3 / fps, [fps]);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const container = canvas.parentElement;
+    if (!container) return;
+    const prefersReducedMotion = window.matchMedia(
+      "(prefers-reduced-motion: reduce)"
+    ).matches;
+    const intersectionObs = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (entry) visibleRef.current = entry.isIntersecting;
+      },
+      { threshold: 0.01 }
+    );
+    intersectionObs.observe(container);
+    const getDimensions = () => {
+      const dpr = window.devicePixelRatio || 1;
+      return {
+        w: Math.round(canvas.clientWidth * dpr),
+        h: Math.round(canvas.clientHeight * dpr),
+        dpr
+      };
+    };
+    const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
+    const uniforms = gl ? initWebGL(gl) : null;
+    if (gl && uniforms) {
+      let contextLost = false;
+      const [cr, cg, cb] = parseHex(color);
+      const setUniforms = () => {
+        setUniform1f(gl, uniforms.uDensity, density);
+        setUniform1f(gl, uniforms.uOpacity, opacity);
+        setUniform1f(gl, uniforms.uFps, fps);
+        setUniform3f(gl, uniforms.uColor, cr / 255, cg / 255, cb / 255);
+      };
+      const onContextLost = (e) => {
+        e.preventDefault();
+        contextLost = true;
+        cancelAnimationFrame(rafRef.current);
+      };
+      const onContextRestored = () => {
+        contextLost = false;
+        const newUniforms = initWebGL(gl);
+        if (newUniforms) {
+          uniforms.uTime = newUniforms.uTime;
+          uniforms.uResolution = newUniforms.uResolution;
+          uniforms.uDensity = newUniforms.uDensity;
+          uniforms.uOpacity = newUniforms.uOpacity;
+          uniforms.uFps = newUniforms.uFps;
+          uniforms.uColor = newUniforms.uColor;
+          uniforms.program = newUniforms.program;
+          uniforms.vs = newUniforms.vs;
+          uniforms.fs = newUniforms.fs;
+          uniforms.buffer = newUniforms.buffer;
+          resize();
+          setUniforms();
+          if (!prefersReducedMotion)
+            rafRef.current = requestAnimationFrame(render);
+        }
+      };
+      canvas.addEventListener("webglcontextlost", onContextLost);
+      canvas.addEventListener("webglcontextrestored", onContextRestored);
+      const resize = () => {
+        const { w: w2, h: h2 } = getDimensions();
+        if (w2 === 0 || h2 === 0) return;
+        canvas.width = w2;
+        canvas.height = h2;
+        gl.viewport(0, 0, w2, h2);
+        setUniform2f(gl, uniforms.uResolution, w2, h2);
+      };
+      resize();
+      setUniforms();
+      gl.clearColor(0, 0, 0, 0);
+      const start = performance.now();
+      let lastSeed = -1;
+      const render = (now) => {
+        if (contextLost) return;
+        if (!document.hidden && visibleRef.current && canvas.width > 0 && canvas.height > 0) {
+          const time = (now - start) / 1e3;
+          const seed = Math.floor(time * fps);
+          if (seed !== lastSeed) {
+            lastSeed = seed;
+            gl.clear(gl.COLOR_BUFFER_BIT);
+            setUniform1f(gl, uniforms.uTime, time);
+            gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+          }
+        }
+        rafRef.current = requestAnimationFrame(render);
+      };
+      if (prefersReducedMotion) {
+        setUniform1f(gl, uniforms.uTime, 0);
+        gl.clear(gl.COLOR_BUFFER_BIT);
+        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+      } else {
+        rafRef.current = requestAnimationFrame(render);
+      }
+      const onResize2 = () => {
+        if (resizeTimerRef.current) clearTimeout(resizeTimerRef.current);
+        resizeTimerRef.current = setTimeout(resize, 150);
+      };
+      window.addEventListener("resize", onResize2);
+      return () => {
+        cancelAnimationFrame(rafRef.current);
+        if (resizeTimerRef.current) clearTimeout(resizeTimerRef.current);
+        window.removeEventListener("resize", onResize2);
+        canvas.removeEventListener("webglcontextlost", onContextLost);
+        canvas.removeEventListener("webglcontextrestored", onContextRestored);
+        intersectionObs.disconnect();
+        gl.deleteBuffer(uniforms.buffer);
+        gl.deleteShader(uniforms.vs);
+        gl.deleteShader(uniforms.fs);
+        gl.deleteProgram(uniforms.program);
+      };
+    }
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      intersectionObs.disconnect();
+      return;
+    }
+    const padFactor = 0.3;
+    const getPad = (w2, h2) => Math.round(Math.max(w2, h2) * padFactor);
+    const setup = () => {
+      const { w: w2, h: h2 } = getDimensions();
+      if (w2 === 0 || h2 === 0) return { w: 0, h: 0, pad: 0 };
+      const pad2 = getPad(w2, h2);
+      canvas.width = w2;
+      canvas.height = h2;
+      if (!grainTextureRef.current || grainTextureRef.current.width < w2 + pad2 || grainTextureRef.current.height < h2 + pad2) {
+        grainTextureRef.current = generateGrainTexture(
+          w2 + pad2,
+          h2 + pad2,
+          density,
+          color
+        );
+      }
+      return { w: w2, h: h2, pad: pad2 };
+    };
+    let { w, h, pad } = setup();
+    let offsetX = 0;
+    let offsetY = 0;
+    const drawFrame = () => {
+      const grain = grainTextureRef.current;
+      if (!grain || w === 0 || h === 0) return;
+      const dpr = window.devicePixelRatio || 1;
+      ctx.clearRect(0, 0, w, h);
+      ctx.filter = `blur(${0.3 * dpr}px)`;
+      offsetX = (offsetX + 0.7) % pad;
+      offsetY = (offsetY + 0.5) % pad;
+      ctx.drawImage(grain, -offsetX, -offsetY, w + pad, h + pad);
+      ctx.filter = "none";
+    };
+    if (prefersReducedMotion) {
+      drawFrame();
+      intersectionObs.disconnect();
+      grainTextureRef.current = null;
+      return;
+    }
+    let lastFrame = performance.now();
+    const tick = (now) => {
+      if (!document.hidden && visibleRef.current && w > 0 && h > 0) {
+        while (now - lastFrame >= interval) {
+          lastFrame += interval;
+          drawFrame();
+        }
+      }
+      rafRef.current = requestAnimationFrame(tick);
+    };
+    rafRef.current = requestAnimationFrame(tick);
+    const onResize = () => {
+      if (resizeTimerRef.current) clearTimeout(resizeTimerRef.current);
+      resizeTimerRef.current = setTimeout(() => {
+        const m = getDimensions();
+        const newPad = getPad(m.w, m.h);
+        if (grainTextureRef.current && grainTextureRef.current.width >= m.w + newPad && grainTextureRef.current.height >= m.h + newPad) {
+          w = m.w;
+          h = m.h;
+          pad = newPad;
+          canvas.width = w;
+          canvas.height = h;
+          return;
+        }
+        w = m.w;
+        h = m.h;
+        pad = newPad;
+        canvas.width = w;
+        canvas.height = h;
+        grainTextureRef.current = generateGrainTexture(
+          w + pad,
+          h + pad,
+          density,
+          color
+        );
+      }, 150);
+    };
+    window.addEventListener("resize", onResize);
+    return () => {
+      cancelAnimationFrame(rafRef.current);
+      if (resizeTimerRef.current) clearTimeout(resizeTimerRef.current);
+      window.removeEventListener("resize", onResize);
+      intersectionObs.disconnect();
+      grainTextureRef.current = null;
+    };
+  }, [density, opacity, fps, interval, color]);
+  return canvasRef;
+}
+function FilmGrain({
+  density = 0.6,
+  opacity = 0.08,
+  blendMode = "overlay",
+  fps = 18,
+  color = "#ffffff",
+  className,
+  style
+}) {
+  const canvasRef = useFilmGrain({ density, opacity, fps, color });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: [
+        "absolute inset-0 z-0 pointer-events-none select-none overflow-hidden",
+        className
+      ].filter(Boolean).join(" "),
+      style: { mixBlendMode: blendMode, opacity, ...style },
+      children: /* @__PURE__ */ jsx(
+        "canvas",
+        {
+          ref: canvasRef,
+          className: "w-full h-full will-change-transform"
+        }
+      )
+    }
+  );
+}
+
+export { FilmGrain };
+//# sourceMappingURL=film-grain.js.map
+//# sourceMappingURL=film-grain.js.map