Retro Grid
NewPro
A synthwave floor grid that scrolls toward the viewer, with a horizon glow, stars and an optional striped sun.
Night drive
Move left and right to steer
Customize
1
0.52
16
Sun
#ff784f
When to use it
- Title screens for arcade and racing games
- Landing pages for synthwave music or retro gaming events
- A full-bleed hero with a big headline sitting on the horizon
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- 2D canvas
- Reduced motion
- Respected
- Lines of code
- 316
Installation
Retro Grid is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy retro-grid.tsx into components/ui and run npm install motion.
Usage
import { RetroGrid } from "@/components/ui/retro-grid";
<section className="relative h-[600px] bg-ink-950">
<RetroGrid speed={1} horizon={0.52} sun />
</section>Props
9 properties| Property | Type | Default | Description |
|---|---|---|---|
| color | string | "#ff784f" | Grid and horizon color, as a hex value. |
| sunColor | string | "#ffc24a" | Top color of the sun, as a hex value. The bottom fades to the grid color. |
| sun | boolean | true | Draw the striped sun on the horizon. |
| stars | boolean | true | Draw twinkling stars in the sky. |
| speed | number | 1 | Scroll speed multiplier. |
| horizon | number | 0.52 | Height of the horizon, from 0 (top) to 1 (bottom). |
| columns | number | 16 | Grid columns across the bottom edge. More columns make smaller squares. |
| interactive | boolean | true | Let the pointer steer the view left and right. |
| className | string | — | Extra classes for the canvas. It fills its nearest positioned parent. |
Dependencies: motion