Retro Grid
A CSS-3D perspective floor scrolling toward the viewer, with a horizon glow. The lightweight sibling of Synthwave Grid.
css3dzero-jsrsc2 files · 66 locdeps: clsx, tailwind-merge
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/retro-grid.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs retro-gridUsage
import { RetroGrid } from "@/components/opus/backgrounds/retro-grid";
<RetroGrid className="absolute inset-0" />API
| Prop | Type | Default | Description |
|---|---|---|---|
| lineColor / glow / background | string | — | Grid, horizon glow and sky. |
| angle | number | 68 | Floor tilt (deg). |
| cell | number | 60 | Cell size (px). |
| duration | number | 1.4 | Seconds per cell of travel. |
| className | string | — | Wrapper classes — `absolute inset-0` to fill a relative parent. |
| children | ReactNode | — | Content rendered on top. |
Notes
- No canvas, no WebGL — only CSS gradients/masks and compositor-friendly transform animations.
- Server-component safe unless marked otherwise; animations stop under
prefers-reduced-motion.