Animated film grain overlay built from SVG turbulence, cycling through four pre-rendered frames.
npx shadcn@latest add https://hyperblur.dev/r/film-grain.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/film-grain.tsx.
import { FilmGrain } from "@/components/hyperblur/film-grain"
<div className="relative"><img ... /><FilmGrain /></div>| Prop | Type | Default | Description |
|---|---|---|---|
| opacity | number | 0.18 | Grain strength. |
| size | number | 1 | Grain scale. Larger values give coarser grain. |
| speed | number | 1 | Frame rate multiplier. |
| monochrome | boolean | true | Gray grain instead of colored. |