Film grainPro

Grain for media from a tiled blue noise texture: still by default inside product UI, moving at 24 fps on request, with intensity, size and blend.

Markdown

On this page

ProGrain over a photo at four strengths, still or moving at 24 fps.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/film-grain

Usage

tsx

import { FilmGrain } from "@/components/ui/chatcn/pro/film-grain"

<FilmGrain intensity={0.1}>
  <img src={still.url} alt={still.prompt} />
</FilmGrain>

Wrap media, or place <FilmGrain /> with no children inside any positioned frame to overlay it. Blue noise has no clumps and no banding, so even heavy grain reads as texture. Moving grain only shifts the tile with transforms: nothing is drawn per frame.

Examples

Options

ProSoft light on a portrait, coarse grain, and gray grain over a surface.

Props

Prop	Type	Notes
`intensity`	`number`	0 to 1. Product UI reads best at 0.06 to 0.15. Default 0.1
`grainSize`	`1 \| 2 \| 3`	CSS px per grain. Default 1
`blend`	`"overlay" \| "soft-light" \| "normal"`	Default `overlay`
`animated`	`boolean`	Move at 24 fps. Default false
`paused`, `defaultPaused`, `onPausedChange`, `pauseControl`		For the moving grain

Accessibility

Purely visual and aria-hidden. Hidden under forced colors.
Moving grain shows the pause control; it loops forever.

Motion

Still by default. When animated, the tile jumps to a new offset 24 times a second, which reads as film, not as a slide.
Under reduced motion it stays still even when animated is set.