Backgrounds
Grain
Fine animated film grain over anything — as a zero-JS CSS class, or on the GPU.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { Grain } from '@vizzele/react/gl';
<div style={{ position: 'relative' }}>
…
<Grain opacity={0.1} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
opacity | number | 0.08 | Strength. |
size | number | 1.5 | Grain size (px, GPU version). |
fps | number | 24 | Grain refresh rate (GPU version). |
--vz-grain-opacity | CSS number | 0.07 | Strength (CSS version). |
Accessibility
- Purely decorative. The CSS version stops animating with reduced motion.