A living mesh gradient: large blurred color fields drift on independent looping paths and blend where they meet, with optional film grain.
npx shadcn@latest add https://hyperblur.dev/r/mesh-gradient.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/mesh-gradient.tsx.
import { MeshGradient } from "@/components/hyperblur/mesh-gradient"
<div className="relative h-80 overflow-hidden rounded-2xl"><MeshGradient colors={["#ff4d8d", "#7c3aed", "#2f7bff", "#19c3f5"]} /></div>| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ["#ff4d8d", "#7c3aed", "#2f7bff", "#19c3f5", "#ffb547"] | Blob colors. Four to six blobs are drawn, cycling through the list. |
| speed | number | 1 | Drift speed multiplier. |
| grain | number | 0.18 | Film grain opacity from 0 to 1. 0 removes the grain layer. |
| blur | number | 60 | Blur radius applied to the color fields, in pixels. |
| background | string | "#0b0a1a" | Base color behind the blobs. |
| blend | CSSProperties["mixBlendMode"] | "lighten" | Blend mode used where blobs overlap. Try "screen" for a brighter, pastel mix. |