Synthwave perspective grid scrolling toward the viewer, with a glowing horizon fade. Pure CSS.
npx shadcn@latest add https://hyperblur.dev/r/grid-floor.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/grid-floor.tsx.
import { GridFloor } from "@/components/hyperblur/grid-floor"
<div className="relative"><GridFloor /><h1>...</h1></div>| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "#2f7bff" | Line color. |
| speed | number | 1 | Scroll speed multiplier. |
| cell | number | 48 | Grid cell size in pixels. |
| horizon | number | 0.45 | Where the floor starts, from 0 (top) to 1 (bottom). |
| glow | boolean | true | Soft glow on the lines and the horizon. |