A fine grid lit from the top, with beams of light that shoot along its lines and sparks that flash at the crossings. Beams snap to the grid at any size.
Deploy on every push
npx shadcn@latest add https://hyperblur.dev/r/bg-grid-beams.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-grid-beams.tsx.
import { BgGridBeams } from "@/components/hyperblur/bg-grid-beams"
<div className="relative h-96"><BgGridBeams><h1>Ship faster</h1></BgGridBeams></div>| Prop | Type | Default | Description |
|---|---|---|---|
| cell | number | 40 | Grid cell size in pixels. |
| beams | number | 14 | Number of beams, up to 60. |
| color | string | "rgba(255,255,255,0.07)" | Grid line color. |
| accent | string | "#2f7bff" | Color of the beams, sparks and the top glow. |
| background | string | "#050608" | Fill color behind the grid. |
| speed | number | 1 | Speed multiplier for the beams and sparks. |
| children | ReactNode | Content rendered above the background. | |
| className | string | "" | Extra classes for the root element. |