Blueprint Grid
A technical lattice — lines, dots, or a perspective floor — with a light sweep and cursor spotlight.
The engineering-blueprint backdrop: a precise lattice with a diagonal light
sweep traveling across it and a soft spotlight that follows the cursor. Choose
ruled lines, a dots matrix, or a floor-fading perspective grid. Pure CSS.
Drop it as the first child of a relative overflow-hidden container.
Built with precision
Move your cursor across the grid.
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/blueprint-grid.json"Usage
tsx
import { BlueprintGrid } from "@/components/godui/blueprint-grid";
<div className="relative overflow-hidden">
<BlueprintGrid />
<YourContent />
</div>The layer is absolute inset-0 z-base; parent must be relative overflow-hidden,
content at z-raised+. Color defaults to --color-border. The sweep hides under
prefers-reduced-motion; the static lattice remains.
Examples
Dots
Perspective
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "lines" | "dots" | "perspective" | "lines" | Grid style. |
cellSize | number | 32 | Cell size (px). |
color | string | --color-border | Line / dot color. |
sweep | boolean | true | Diagonal light sweep. |
sweepDuration | number | 8 | Seconds per sweep pass. |
spotlight | boolean | true | Cursor spotlight that lights up nearby cells (ignored for perspective). |
spotlightColor | string | --color-primary | Color the spotlit cells light up in. |
spotlightRadius | number | 200 | Spotlight radius (px). |
Also accepts standard div attributes (e.g. className, style).