@waveso/ui 0.0.10 → 0.1.0

package/dist/film-grain-webgl.js

@@ -0,0 +1,306 @@
+import { fragmentShader, vertexShader } from "./film-grain-shader.js";
+import { useEffect, useMemo, useRef } from "react";
+//#region src/film-grain-webgl.ts
+/** Parse hex color safely */
+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
+	};
+}
+/** Safe uniform setters */
+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) pixels[i] = (Math.round(a * (.4 + Math.random() * .6)) << 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: .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, h } = getDimensions();
+				if (w === 0 || h === 0) return;
+				canvas.width = w;
+				canvas.height = h;
+				gl.viewport(0, 0, w, h);
+				setUniform2f(gl, uniforms.uResolution, w, h);
+			};
+			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 onResize = () => {
+				if (resizeTimerRef.current) clearTimeout(resizeTimerRef.current);
+				resizeTimerRef.current = setTimeout(resize, 150);
+			};
+			window.addEventListener("resize", onResize);
+			return () => {
+				cancelAnimationFrame(rafRef.current);
+				if (resizeTimerRef.current) clearTimeout(resizeTimerRef.current);
+				window.removeEventListener("resize", onResize);
+				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 = .3;
+		const getPad = (w, h) => Math.round(Math.max(w, h) * padFactor);
+		const setup = () => {
+			const { w, h } = getDimensions();
+			if (w === 0 || h === 0) return {
+				w: 0,
+				h: 0,
+				pad: 0
+			};
+			const pad = getPad(w, h);
+			canvas.width = w;
+			canvas.height = h;
+			if (!grainTextureRef.current || grainTextureRef.current.width < w + pad || grainTextureRef.current.height < h + pad) grainTextureRef.current = generateGrainTexture(w + pad, h + pad, density, color);
+			return {
+				w,
+				h,
+				pad
+			};
+		};
+		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(${.3 * dpr}px)`;
+			offsetX = (offsetX + .7) % pad;
+			offsetY = (offsetY + .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;
+}
+//#endregion
+export { useFilmGrain };
+
+//# sourceMappingURL=film-grain-webgl.js.map

package/dist/film-grain-webgl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"film-grain-webgl.js","names":[],"sources":["../src/film-grain-webgl.ts"],"sourcesContent":["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"],"mappings":"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"}

package/dist/film-grain.d.ts

@@ -1,15 +1,25 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
+import * as React from "react";
+import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
+//#region src/film-grain.d.ts
 interface FilmGrainProps {
-    density?: number;
-    opacity?: number;
-    blendMode?: React.CSSProperties["mixBlendMode"];
-    fps?: number;
-    color?: string;
-    className?: string;
-    style?: React.CSSProperties;
+  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;
-
+declare function FilmGrain({
+  density,
+  opacity,
+  blendMode,
+  fps,
+  color,
+  className,
+  style
+}: FilmGrainProps): _$react_jsx_runtime0.JSX.Element;
+//#endregion
 export { FilmGrain, type FilmGrainProps };
+//# sourceMappingURL=film-grain.d.ts.map

package/dist/film-grain.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"film-grain.d.ts","names":[],"sources":["../src/film-grain.tsx"],"mappings":";;;;UAKU,cAAA;EACR,OAAA;EACA,OAAA;EACA,SAAA,GAAY,KAAA,CAAM,aAAA;EAClB,GAAA;EACA,KAAA;EACA,SAAA;EACA,KAAA,GAAQ,KAAA,CAAM,aAAA;AAAA;AAAA,iBAGP,SAAA,CAAA;EACP,OAAA;EACA,OAAA;EACA,SAAA;EACA,GAAA;EACA,KAAA;EACA,SAAA;EACA;AAAA,GACC,cAAA,GAAc,oBAAA,CAAA,GAAA,CAAA,OAAA"}