The RetroGrid component lays an infinite grid back in 3D and scrolls it toward the viewer, fading out into a horizon. A synthwave backdrop drawn entirely in CSS.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/retro-grid.jsonEverything Retro Grid accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| cellSize | number | 60 | Size of one grid cell, in pixels |
| duration | number | 2.2 | Seconds for the grid to travel one full cell (lower is faster) |
| angle | number | 65 | How far the plane is laid back, in degrees |
| lineWidth | number | 1 | Thickness of the grid lines, in pixels |
| height | number | 0.7 | Fraction of the frame the grid fills, measured up from the bottom |
| className | string | '' | Additional CSS classes. Set the line colour here, e.g. text-brand/40 |
An endless grid running to the horizon, drawn in whatever colour you set on it.