Background Snippets Noise effect11

import React, { useRef, useEffect } from "react";

const Noise: React.FC<{ patternRefreshInterval?: number; patternAlpha?: number }> = ({ patternRefreshInterval = 2, patternAlpha = 12 }) => {
  const r = useRef<HTMLCanvasElement | null>(null);
  useEffect(() => {
    const c = r.current; if (!c) return;
    const x = c.getContext("2d", { alpha: true }); if (!x) return;
    let f=0,id=0,S=1024;
    const resize=()=>{c.width=S;c.height=S;c.style.width="100vw";c.style.height="100vh";};
    const draw=()=>{const img=x.createImageData(S,S);const d=img.data;for(let i=0;i<d.length;i+=4){const v=Math.random()*255;d[i]=v;d[i+1]=v;d[i+2]=v;d[i+3]=patternAlpha;}x.putImageData(img,0,0);};
    const loop=()=>{if(f%patternRefreshInterval===0)draw();f++;id=requestAnimationFrame(loop);};
    addEventListener("resize",resize);resize();loop();return()=>{removeEventListener("resize",resize);cancelAnimationFrame(id);};
  },[patternRefreshInterval,patternAlpha]);
  return <canvas ref={r} className="pointer-events-none absolute inset-0" style={{ imageRendering: "pixelated" }}/>;
};

export default function Component() {
  return (
    <div className="fixed inset-0 -z-10 bg-white">
      {/* subtle grid */}
      <div className="absolute inset-0 z-0 bg-[linear-gradient(to_right,#cbd5e133_1px,transparent_1px),linear-gradient(to_bottom,#cbd5e133_1px,transparent_1px)] bg-[size:24px_24px]" />
      {/* blur glow */}
      <div className="absolute left-1/3 top-1/4 z-10 h-[520px] w-[520px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-emerald-400 opacity-25 blur-[140px]" />
      <Noise patternAlpha={18} />
    </div>
  );
}