50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T9c2,"use client"; import { useEffect, useRef } from "react"; import { cn } from "@/lib/utils"; export interface NoiseProps { /** Grain opacity, 0–1. */ opacity?: number; /** Grain size in px. */ size?: number; /** New grain frames per second. */ refreshRate?: number; /** CSS blend mode against the content below. */ blendMode?: "normal" | "overlay" | "soft-light" | "screen" | "multiply"; className?: string; } const FRAMES = 8; export function Noise({ opacity = 0.14, size = 1.5, refreshRate = 24, blendMode = "normal", className }: NoiseProps) { const ref = useRef(null); useEffect(() => { const canvas = ref.current!; const ctx = canvas.getContext("2d")!; const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; let frames: ImageData[] = []; let i = 0; let timer = 0; let visible = true; // Pre-bake a handful of grain frames at 1 canvas px per grain, then just cycle them. const bake = () => { const w = Math.max(1, Math.ceil(canvas.offsetWidth / size)); const h = Math.max(1, Math.ceil(canvas.offsetHeight / size)); canvas.width = w; canvas.height = h; frames = Array.from({ length: reduced ? 1 : FRAMES }, () => { const img = ctx.createImageData(w, h); const d = new Uint32Array(img.data.buffer); for (let k = 0; k < d.length; k++) { const v = (Math.random() * 255) | 0; d[k] = (255 << 24) | (v << 16) | (v << 8) | v; } return img; }); ctx.putImageData(frames[0], 0, 0); }; const tick = () => { if (!visible || frames.length < 2) return; i = (i + 1) % frames.length; ctx.putImageData(frames[i], 0, 0); }; const ro = new ResizeObserver(bake); ro.observe(canvas); const io = new IntersectionObserver(([entry]) => (visible = entry.isIntersecting)); io.observe(canvas); if (!reduced && refreshRate > 0) timer = window.setInterval(tick, 1000 / refreshRate); return () => { clearInterval(timer); ro.disconnect(); io.disconnect(); }; }, [size, refreshRate]); return (