A smooth mesh gradient whose color points drift on their own paths, drawn with the lattice and handles of a design tool. One handle at a time is selected and shows its color value.
Color that
moves with you
npx shadcn@latest add https://hyperblur.dev/r/bg-mesh-lattice.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-mesh-lattice.tsx.
import { BgMeshLattice } from "@/components/hyperblur/bg-mesh-lattice"
<div className="relative h-96"><BgMeshLattice><h1>Design in color</h1></BgMeshLattice></div>| Prop | Type | Default | Description |
|---|---|---|---|
| colors | string[] | ["#2f7bff", "#0b1f4d", "#7fb3ff", "#5b3df5", "#0a0a12", "#1e4fd6"] | Palette spread across the twelve mesh points. Hex colors. |
| accent | string | "#ffffff" | Color of the lattice, handles and the selected value label. |
| background | string | "#06070d" | Base color mixed in at the far edges. Hex color. |
| handles | boolean | true | Shows the lattice lines and handles. Set false for a plain mesh gradient. |
| softness | number | 1 | How far each color spreads, from 0.3 to about 2. |
| speed | number | 1 | Speed of the point drift and the handle selection. |
| children | ReactNode | Content rendered above the background. | |
| className | string | "" | Extra classes for the root element. |