# Grain

Animated film-grain overlay from SVG noise that re-seeds every few frames; place it last, over anything.

```bash
npx shadcn add https://www.reelcn.dev/r/grain.json
```

Usage:

```tsx
<AbsoluteFill>
  <GradientMesh />
  <Center><TextReveal text="Hello" /></Center>
  <Grain />
</AbsoluteFill>
```

Use for:

- A filmic, tactile finish over gradients, footage and flat color
- Breaking up banding in dark gradients such as `gradient-mesh` or `aurora`

Dependencies:

- `remotion`


## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| opacity? | `number` | `0.08` | Overall strength, 0–1. |
| blend? | `MixBlendMode` | `"normal"` | How the grain combines with what is under it. `overlay` and `soft-light` suit mid-tone footage. |
| size? | `number` | `1.4` | Grain size in design units. |
| every? | `number` | `2` | Frames each grain pattern holds before re-seeding; 1 boils every frame. |
| seed? | `number` | `0` | Starting seed; change it to get a different grain sequence. |
| style? | `CSSProperties` | — |  |
| className? | `string` | — |  |