A flat grid crossed by a horizontal and a vertical scan line. The cell under the pointer lights up and leaves a trail of fading cells.
npx shadcn@latest add https://hyperblur.dev/r/bg-grid-scan.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-grid-scan.tsx.
import { BgGridScan } from "@/components/hyperblur/bg-grid-scan"
<div className="relative h-96"><BgGridScan cellSize={32}><h1>Scanning</h1></BgGridScan></div>| Prop | Type | Default | Description |
|---|---|---|---|
| cellSize | number | 28 | Cell size in pixels. Grows automatically on very large areas. |
| accent | string | "#2f7bff" | Color of the scan lines and the lit cells. |
| color | string | "rgba(255,255,255,0.07)" | Color of the grid lines. |
| background | string | "#08090c" | Fill color behind the grid. |
| trail | number | 1.2 | How long a lit cell takes to fade, in seconds. |
| speed | number | 1 | Speed of the scan lines and the idle path. |
| children | ReactNode | Content rendered on top of the grid. |