Grain Gradient

Three pools of colour drift and breathe across the page under a layer of film grain, mixed into the theme's own background — works on paper and on night.

npx shadcn@latest add https://mellowui.com/r/grain-gradient.json

Playground

Dusk, on 35mm

Colour that breathes

Three pools of colour drift under film grain, mixed into the theme's own paper — no two seconds alike.

Installation

▸ Run the following command

npx shadcn@latest add https://www.mellowui.com/r/grain-gradient.json

▸ Or install manually

Copy the source from the Code tab above.
Place it at components/mellow/grain-gradient.tsx
Import and use.

API Reference

Prop	Type	Default	Description
colors	[string, string, string]	["236, 122, 92", "142, 108, 220", "62, 168, 162"]	Three pool colours as "R, G, B" triplets.
speed	number	1	Drift speed multiplier.
blend	number	0.55	How strongly the colours saturate the page, 0–1.
grain	number	0.05	Film grain amount, 0–0.2.
children	React.ReactNode	—	Content rendered above the gradient.
className	string	—	Additional CSS classes.