A beam sweeps back and forth over a grid of dots, lighting cells as it passes and marking a few as detected. The pointer takes hold of the beam.
npx shadcn@latest add https://hyperblur.dev/r/bg-scanner-sweep.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/bg-scanner-sweep.tsx.
import { BgScannerSweep } from "@/components/hyperblur/bg-scanner-sweep"
<div className="relative h-96"><BgScannerSweep><h1>Hello</h1></BgScannerSweep></div>| Prop | Type | Default | Description |
|---|---|---|---|
| cellSize | number | 14 | Grid cell size in pixels. |
| color | string | "rgba(255,255,255,0.16)" | Color of the idle dots. |
| accent | string | "#2f7bff" | Color of the beam and the lit cells. |
| hits | number | 0.1 | Share of cells, from 0 to 1, that stay lit longer and get a bracket. |
| decay | number | 1.1 | Seconds for a lit cell to fade. |
| trail | number | 70 | Length of the glow behind the beam in pixels. |
| seed | number | 9 | Seed for which cells are detected. |
| speed | number | 1 | Speed of the idle sweep. |
| children | ReactNode | Content rendered on top of the grid. |