Components
Loading preview...
Here is Background Snippets Noise effect component
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/background-snippets-noise-effect11import React, { useRef, useEffect } from "react";
const Noise: React.FC<{ patternRefreshInterval?: number; patternAlpha?: number }> = ({ patternRefreshInterval = 3, patternAlpha = 14 }) => {
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-900">
<div className="absolute inset-0 bg-[radial-gradient(ellipse_90%_70%_at_50%_-10%,#fb923c33,transparent)]" />
<div className="absolute inset-0 bg-[radial-gradient(#e2e8f0_1px,transparent_1px)] [background-size:18px_18px] [mask-image:radial-gradient(circle_at_50%_50%,#000_70%,transparent_100%)] [-webkit-mask-image:radial-gradient(circle_at_50%_50%,#000_70%,transparent_100%)] [mask-repeat:no-repeat] [-webkit-mask-repeat:no-repeat]" />
<Noise patternAlpha={20} />
</div>
);
}