# Retro Grid
> Synthwave perspective grid that scrolls toward the horizon.
Category: Backgrounds. Docs: https://neonkit.heyaadi.com/components/retro-grid
## Installation
```bash
npx shadcn@latest add https://neonkit.heyaadi.com/r/retro-grid.json
```
With the `@neonkit` namespace configured: `npx shadcn@latest add @neonkit/retro-grid`.
npm dependencies: none. Also needs `lib/utils.ts` (`cn`) and `lib/neon.ts` (`neonVars`), which the CLI adds.
## Usage
```tsx
import { RetroGrid } from "@/components/ui/retro-grid"
Hello
```
## Examples
### Hero background
The floor is one long plane in real perspective, so rows compress toward the horizon and the nearest squares draw at twice cellSize.
```tsx
import { RetroGrid } from "@/components/ui/retro-grid";
export default function RetroGridDemo() {
return (
Nightcall, side B
Nine tracks at 118 BPM. Out Friday on tape and everywhere else.
);
}
```
### Angle, cell size and speed
```tsx
import { RetroGrid } from "@/components/ui/retro-grid";
export default function RetroGridSettings() {
return (
angle 60 · cell 40 · speed 0.8
angle 78 · cell 72 · still, no horizon
);
}
```
## API reference
### RetroGrid
Fills its nearest positioned parent. The horizon sits halfway down.
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `color` | `NeonColor` | `inherited` | Line color. |
| `angle` | `number` | `70` | Floor tilt in degrees, 20 to 88. Higher is a flatter, longer floor. |
| `cellSize` | `number` | `56` | Grid square size in pixels on the floor; the row nearest the viewer draws at twice this. |
| `speed` | `number` | `1.2` | Seconds to travel one cell. 0 stops it. |
| `opacity` | `number` | `0.55` | Line opacity. |
| `horizon` | `boolean` | `true` | Glowing horizon line. |
## Accessibility
- Decorative: rendered with aria-hidden and no pointer events. Stops moving under reduced motion.
- The horizon is computed from the angle with container query units, so it stays on the glowing line at any height. Needs container units (every browser since 2023).
## Source
`components/ui/retro-grid.tsx`
```tsx
"use client";
import * as React from "react";
import { cn } from "@/lib/utils";
import { neonVars, type NeonColor } from "@/lib/neon";
const css = `
@keyframes nk-retro-grid { from { transform: translateY(calc(var(--cell) * -1)); } to { transform: translateY(0); } }
.nk-retro-grid { animation: nk-retro-grid var(--speed) linear infinite; }
@media (prefers-reduced-motion: reduce) { .nk-retro-grid { animation: none; } }
`;
export interface RetroGridProps
extends Omit, "color"> {
/** Line color. Inherits `--neon-accent` when omitted. */
color?: NeonColor;
/** Tilt of the floor in degrees. */
angle?: number;
/** Size of one grid square in pixels. */
cellSize?: number;
/** Seconds for the floor to travel one cell. 0 stops it. */
speed?: number;
/** Line opacity, 0 to 1. */
opacity?: number;
/** Glowing line where the floor meets the sky. */
horizon?: boolean;
}
/**
* A background layer. Place it inside a `relative` parent; it fills it.
*/
const RetroGrid = React.forwardRef(
(
{
className,
style,
color,
angle = 70,
cellSize = 56,
speed = 1.2,
opacity = 0.55,
horizon = true,
...props
},
ref,
) => {
const tilt = Math.min(88, Math.max(20, angle));
const tan = Math.tan((tilt * Math.PI) / 180).toFixed(4);
// How far the plane runs, in container heights × 100. A row at distance s draws at s·sin / (tan/2 + s·sin) of
// the way to the horizon, so 4.5 / cos(angle) reaches 90%, where the mask has already faded it out. Anything
// longer is a bigger layer to repaint for nothing: the old fixed 3000 made pages stutter whenever something
// else on them changed every frame.
const length = Math.min(3000, Math.max(1500, Math.ceil(450 / Math.cos((tilt * Math.PI) / 180))));
const vars = {
"--cell": `${cellSize}px`,
"--speed": `${speed}s`,
"--line": `${opacity}`,
...style,
} as React.CSSProperties;
return (
{/* Sky glow: the horizon's light falling off upward */}
{horizon && (
)}
{/* The floor is a long plane tipped away from the viewer, so its rows really recede. A plane's vanishing
line sits perspective × cot(angle) above the perspective origin, so with the origin on the floor's
bottom edge and perspective = floor height × tan(angle), the horizon lands on the glowing line at
any size. Container units carry the floor height into CSS. */}
{/* Each line is a hot core with a soft falloff either side, painted into the tile */}
0 && "nk-retro-grid",
)}
/>
{/* Haze on the floor where it meets the horizon */}