Background Snippets Noise effect11

Heroes 28

About

Here is Background Snippets Noise effect component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Background Snippets Noise effect11 to your project and fits it to your theme.

Code

How Background Snippets Noise effect11 is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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

const Noise: React.FC<{ patternRefreshInterval?: number; patternAlpha?: number }> = ({ patternRefreshInterval = 2, patternAlpha = 15 }) => {
  const ref = useRef<HTMLCanvasElement | null>(null);
  useEffect(() => {
    const c = ref.current; if (!c) return;
    const ctx = c.getContext("2d", { alpha: true }); if (!ctx) 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=ctx.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;}ctx.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={ref} className="pointer-events-none absolute inset-0" style={{ imageRendering: "pixelated" }}/>;
};

export default function Component() {
  return (
    <div className="fixed inset-0 -z-10 bg-neutral-950">
      <div className="absolute inset-0 bg-[radial-gradient(circle_640px_at_50%_180px,#8b5cf633,transparent_70%)]" />
      <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_right,#94a3b833_1px,transparent_1px),linear-gradient(to_bottom,#94a3b833_1px,transparent_1px)] bg-[size:20px_24px] [mask-image:radial-gradient(ellipse_80%_55%_at_50%_15%,#000_70%,transparent_100%)] [-webkit-mask-image:radial-gradient(ellipse_80%_55%_at_50%_15%,#000_70%,transparent_100%)] [mask-repeat:no-repeat] [-webkit-mask-repeat:no-repeat]" />
      <Noise patternAlpha={16}/>
    </div>
  );
}