Retro Grid
A retro grid background scrolling in synthwave-style perspective.
A synthwave-style perspective horizon grid built with pure CSS 3D transforms — scrolling infinitely, with light and dark mode support and reduce motion handling.
Loading preview…
npx shadcn@latest add https://webberui.com/r/retro-grid.jsonPlayground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
65
60
12
0.5
<RetroGrid />
Installation
npx shadcn@latest add https://webberui.com/r/retro-grid.jsonOr, once registries are configured in components.json, install it as @webberui/retro-grid.
Usage
import { RetroGrid } from "@/components/ui/retro-grid";
<RetroGrid className="flex h-[340px] items-center justify-center rounded-xl">
<span className="text-5xl font-bold">Retro Grid</span>
</RetroGrid>The component is itself a relatively positioned, bounded container: the grid fills the background and children layer above it. Set the height and layout through className, and avoid viewport height units like 100vh.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
angle | number | 65 | Perspective angle of the grid's tilt (degrees) — higher lies closer to the ground plane |
cellSize | number | 60 | Edge length of a single cell (px) |
speed | number | 12 | Seconds for one scroll cycle — lower is faster |
opacity | number | 0.5 | Opacity of the grid lines and the layer overall (0 ~ 1) |
lightLineColor | string | "#6b7280" | Grid line color in light mode |
darkLineColor | string | "#9ca3af" | Grid line color in dark mode |
children | ReactNode | — | Foreground content layered above the grid |
Accessibility
- When the user has "reduce motion" enabled at the system level, the grid stands still instead of scrolling, while the perspective background is kept
- The grid layer carries
aria-hiddenandpointer-events-none, so it affects neither assistive technology nor interaction