Background Snippets Noise effect11

Heroes 58

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";

/** Inline Noise overlay */
const Noise: React.FC<{ patternRefreshInterval?: number; patternAlpha?: number }> = ({
  patternRefreshInterval = 2,
  patternAlpha = 16,
}) => {
  const ref = useRef<HTMLCanvasElement | null>(null);
  useEffect(() => {
    const canvas = ref.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d", { alpha: true });
    if (!ctx) return;
    let frame = 0;
    let id = 0;
    const size = 1024;
    const resize = () => {
      canvas.width = size;
      canvas.height = size;
      canvas.style.width = "100vw";
      canvas.style.height = "100vh";
    };
    const draw = () => {
      const img = ctx.createImageData(size, size);
      const data = img.data;
      for (let i = 0; i < data.length; i += 4) {
        const v = Math.random() * 255;
        data[i] = v; data[i + 1] = v; data[i + 2] = v; data[i + 3] = patternAlpha;
      }
      ctx.putImageData(img, 0, 0);
    };
    const loop = () => { if (frame % patternRefreshInterval === 0) draw(); frame++; 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">
      {/* spotlight */}
      <div className="absolute inset-0 z-0 bg-[radial-gradient(circle_560px_at_50%_220px,#22d3ee33,transparent_70%)]" />
      {/* grid with top fade mask */}
      <div className="pointer-events-none absolute inset-0 z-10 bg-[linear-gradient(to_right,#64748b3a_1px,transparent_1px),linear-gradient(to_bottom,#64748b3a_1px,transparent_1px)] bg-[size:22px_22px] [mask-image:radial-gradient(ellipse_90%_60%_at_50%_20%,#000_70%,transparent_100%)] [-webkit-mask-image:radial-gradient(ellipse_90%_60%_at_50%_20%,#000_70%,transparent_100%)] [mask-repeat:no-repeat] [-webkit-mask-repeat:no-repeat]" />
      <Noise patternAlpha={18} />
    </div>
  );
}