NoiseGrain

A film-grain overlay that gives flat surfaces texture, optionally shimmering.

Analog warmth

Installation

bash
npx shadcn@latest add https://www.rad-ui.com/r/noise-grain.json

React
import NoiseGrain from "@/components/fx/noise-grain"

<NoiseGrain opacity={0.18} className="rounded-2xl bg-violet-950 p-16">…</NoiseGrain>

The effect layer is aria-hidden and ignores pointer events; only children are exposed.
Keep `opacity` low and re-check text contrast with the grain on.
Pauses offscreen; `paused` stops it on demand.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) freezes the grain.

Prop	Type	Default	Description
opacity	number	0.14	Grain opacity, 0–1.
animated	boolean	true	Let the grain shimmer.
paused	boolean	false	Stop the animation. It also pauses itself offscreen.
...props	ComponentProps<'div'>	—	Passed to the root div; children render above the effect.