Browse components
Grid Scan
A neon perspective grid floor swept by a glowing scan line, with a horizon that follows the cursor.
Grid Scan
Installation
npx shadcn@latest add @glint-ui/grid-scanFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/grid-scan.json
Usage
import { GridScan } from "@/components/ui/grid-scan";
<div className="relative h-96 bg-black">
<GridScan gridColor="#8b5cf6" scanColor="#22d3ee" />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| gridColor | string | "#8b5cf6" | Grid line color. |
| scanColor | string | "#22d3ee" | Scanning light color. |
| density | number | 1 | Grid cell density. |
| speed | number | 1 | Scan sweep speed. |
| scanWidth | number | 0.5 | Thickness of the scan band. |
| glow | number | 1 | Overall glow. |
| className | string | — | Extra classes for the root element. |