@waveso/ui 0.0.7 → 0.0.8

package/dist/film-grain.d.ts

@@ -0,0 +1,14 @@
+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;
+}
+declare function FilmGrain({ density, opacity, blendMode, fps, color, className, }: FilmGrainProps): react_jsx_runtime.JSX.Element;
+
+export { FilmGrain, type FilmGrainProps };

package/dist/film-grain.js

@@ -0,0 +1,421 @@
+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
+}) {
+  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 },
+      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

package/dist/film-grain.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waveso/ui",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Wave UI component library built on Base UI and Tailwind CSS",
   "type": "module",
   "sideEffects": [