A honeycomb grid where pulses ripple out from random cells, lighting outlines with a sharp leading edge and a slow afterglow. Moving or tapping the pointer sends a pulse from that spot.
1,284 nodes online
npx shadcn@latest add https://hyperblur.dev/r/bg-hex-pulse.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-hex-pulse.tsx.
import { BgHexPulse } from "@/components/hyperblur/bg-hex-pulse"
<div className="relative h-96"><BgHexPulse><h1>Mesh network</h1></BgHexPulse></div>| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#1c2433" | Resting outline color. Hex color. |
| accent | string | "#2f7bff" | Pulse color. Hex color. |
| background | string | "#05070b" | Background color. Hex color. |
| radius | number | 18 | Hexagon radius in pixels, minimum 8. |
| interval | number | 1.8 | Average seconds between automatic pulses. |
| interactive | boolean | true | Sends pulses from the pointer. |
| speed | number | 1 | Overall time scale. |
| 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. |