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 = 2, patternAlpha = 12 }) => {
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-white">
<div className="absolute inset-0 bg-[linear-gradient(to_right,#e5e7eb66_1px,transparent_1px),linear-gradient(to_bottom,#e5e7eb66_1px,transparent_1px)] bg-[size:18px_18px]" />
<div className="absolute left-[65%] top-[35%] h-[560px] w-[560px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-teal-400 opacity-30 blur-[160px]" />
<div className="absolute inset-0 [mask-image:radial-gradient(ellipse_85%_65%_at_50%_45%,#000_80%,transparent_100%)] [-webkit-mask-image:radial-gradient(ellipse_85%_65%_at_50%_45%,#000_80%,transparent_100%)] [mask-repeat:no-repeat] [-webkit-mask-repeat:no-repeat]" />
<Noise patternAlpha={16}/>
</div>
);
}