A tiling of drifting Voronoi cells separated by thin gaps, each shaded like a glass tile. Cells light up one by one, a soft band sweeps across them, and the cell under the pointer glows.
Sharded
by default
npx shadcn@latest add https://hyperblur.dev/r/bg-voronoi.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-voronoi.tsx.
import { BgVoronoi } from "@/components/hyperblur/bg-voronoi"
<div className="relative h-96"><BgVoronoi><h1>Sharded by default</h1></BgVoronoi></div>| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#121722" | Base color of the cells. Hex color. |
| accent | string | "#2f7bff" | Color of lit cells, edges and nuclei. Hex color. |
| background | string | "#05060a" | Color seen in the gaps between cells. Hex color. |
| cells | number | 24 | Number of cells, from 6 to 80. |
| gap | number | 3 | Gap between cells in pixels. |
| speed | number | 1 | Speed of the drift and the lighting. |
| className | string | "" | Extra classes for the root. The root is absolutely positioned and fills its parent. |
| children | ReactNode | Content rendered on top of the background. |