A dim grid where a spotlight follows the pointer, or roams on its own, and reveals bright lines, crossing dots and glowing tiles that blink on and off.
Find the signal in the noise
npx shadcn@latest add https://hyperblur.dev/r/bg-spotlight-grid.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-spotlight-grid.tsx.
import { BgSpotlightGrid } from "@/components/hyperblur/bg-spotlight-grid"
<div className="relative h-96"><BgSpotlightGrid><h1>Find your edge</h1></BgSpotlightGrid></div>| Prop | Type | Default | Description |
|---|---|---|---|
| cell | number | 34 | Grid cell size in pixels. |
| radius | number | 220 | Spotlight radius in pixels. |
| color | string | "#ffffff" | Grid line color. |
| accent | string | "#2f7bff" | Color of the glowing tiles and the light halo. |
| background | string | "#060607" | Fill color. |
| cells | number | 22 | Number of tiles that blink inside the light, up to 120. |
| follow | boolean | true | Moves the spotlight to the pointer over the parent element. |
| speed | number | 1 | Speed of the roaming light and the blinking tiles. |
| children | ReactNode | Content rendered above the background. | |
| className | string | "" | Extra classes for the root element. |