Browse components
Noise
An animated film-grain overlay. Pre-baked canvas frames, so it costs almost nothing to run.
Installation
npx shadcn@latest add @glint-ui/noiseFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/noise.json
Usage
import { Noise } from "@/components/ui/noise";
<div className="relative">
{/* content */}
<Noise opacity={0.14} />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| opacity | number | 0.14 | Grain opacity. |
| size | number | 1.5 | Grain size in px. |
| refreshRate | number | 24 | Grain frames per second (0 = static). |
| blendMode | "normal" | "overlay" | "soft-light" | "screen" | "multiply" | "normal" | Blend mode against the content below. |
| className | string | — | Extra classes for the root element. |