Components
Noise
A canvas-based noise effect component that generates dynamic grain patterns. It creates an animated noise overlay, which can be used to add texture to backgrounds or elements.
Features: 1. Canvas-based rendering 2. Dynamic pattern generation 3. Configurable noise density 4. Adjustable opacity 5. Responsive scaling 6. Performance optimized 7. Customizable refresh rate 8. High DPI support 9. Automatic cleanup 10. Memory efficient
import { Noise } from "@/components/ui/noise"
export function NoiseDemo() {
return (
<div className="w-full flex items-center justify-center relative">
{/* Text with noise mask */}
<div className="relative px-12 py-[200px]">
<h1 className="text-[8rem] font-black text-muted text-center text-black">
Oh, edgy!
</h1>
<div className="absolute inset-0 mix-blend-overlay rounded-lg"></div>
<Noise
patternSize={75}
patternScaleX={1}
patternScaleY={1}
patternRefreshInterval={2}
patternAlpha={35}
className="w-full h-full"
/>
</div>
</div>
)
}