Noise
A lightweight Canvas grain/noise texture overlay for adding visual depth
Preview
Noise Overlay
Overview
Noise renders a full-viewport grain texture overlay using Canvas 2D pixel manipulation. Refreshes at a configurable interval for a subtle animated film-grain effect. Perfect as a background texture layer.
Features
- Lightweight — simple pixel randomization, minimal CPU usage
- Configurable opacity — control grain visibility
- Refresh rate — adjust animation speed
- Full viewport — covers entire screen as overlay
- Non-interactive —
pointer-events: nonefor zero UX impact
Usage
import Noise from '@/components/noise'
<div className="relative">
<Noise patternAlpha={20} patternRefreshInterval={3} />
{/* Your content on top */}
</div>