Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProAn animated mesh gradient background of soft drifting blobs in your theme colours, with optional film grain and a still fallback for reduced motion.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
By default the blobs use --chart-1, --chart-2, --primary, --chart-4 and --chart-3, so the mesh changes with the active theme preset and with dark mode.
Pass any CSS colours. Up to five are used, repeating if you pass fewer.
| Prop | Type | Default | Description |
|---|---|---|---|
colors | string[] | theme tokens | Blob colours. |
speed | number | 1 | Drift speed multiplier. 0 holds the mesh still. |
blur | number | 72 | Blur radius in pixels. |
opacity | number | 0.55 | Opacity of the colour layer. |
grain | boolean | true | Overlay a fine film grain. |
layerClassName | string | - | Classes for the decorative layer. |
className | string | - | Classes for the root. Set its size here. |
Also accepts all div props. Children render above the gradient.
aria-hidden and ignores pointer events, so it never intercepts clicks or focus.prefers-reduced-motion: reduce the blobs hold still; the mesh keeps its colour.opacity keeps theme foreground text readable on the theme background; raise it with care, or put text on a translucent bg-background/70 surface as the demo's badge and outline button do.