Warm color fields that drift and blend under a heavy, tactile grain with soft mottling, like a risograph print. The grain can flicker like film or stay still.
Slow mornings
npx shadcn@latest add https://hyperblur.dev/r/bg-grain-gradient.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-grain-gradient.tsx.
import { BgGrainGradient } from "@/components/hyperblur/bg-grain-gradient"
<div className="relative h-96"><BgGrainGradient><h1>Issue 12</h1></BgGrainGradient></div>| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ["#ff6a3d", "#2f7bff", "#ffb38a", "#2a1f8f"] | Up to six colors, one per drifting field. |
| background | string | "#0b0a10" | Base color under the fields. |
| grain | number | 0.42 | Grain strength from 0 to 1. |
| animateGrain | boolean | true | Makes the grain flicker like film. |
| speed | number | 1 | Speed of the color drift. |
| children | ReactNode | Content rendered above the background. | |
| className | string | "" | Extra classes for the root element. |