Retro Grid Background for React

Q: Can I make it neon?

Yes: lineColor takes any CSS colour, for example #ff2fd6 on a dark section, and glowColor sets the sky's tint and the horizon glow, your primary colour by default. Put transparency in the line colour for a fainter floor.

Q: Where is the horizon?

Half-way down at the default angle, at any size. A higher angle lays the floor flatter and puts the horizon lower; a lower one raises it.

Q: How do I change the density?

cellSize sets a cell's side at the near edge, in pixels (60 by default). The pace in pixels a second stays the same at any size; change it with speed.

An 80s perspective floor behind your content: a grid runs from the bottom edge to a glowing horizon under a softly tinted sky, and its lines roll toward you. For React with Base UI, when a retro, gaming or synthwave hero needs depth and steady motion.

An 80s perspective floor: a grid runs from the bottom edge to a glowing horizon under a softly tinted sky, and its lines roll toward you. The lines are sharpest at the near edge and melt into haze toward the horizon, where a glow in your primary colour takes over. It's one CSS 3D plane hinged on the bottom edge and a keyframe that slides its lines by exactly one cell, so the loop never jumps and nothing runs in JavaScript. The perspective is sized to the box, so the horizon sits at the same height in a card, a banner or a phone, and the floor never comes near the eye.

Use it under a retro, gaming or synthwave hero. For a flat static grid, use Grid Pattern; for the same perspective trick as a tunnel, Warp; for a 3D surface that undulates, Wave Grid; for neon pulses on a flat grid, Laser Grid.

PreviewCode

Installation

Part of Pro

Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.

Get Pro Sign in

Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Usage

import { RetroGrid } from "@/components/ui/retro-grid";

Retro Grid is a container: give it a size and put your content inside. The floor fills the lower half of the box at the default angle and the sky above the horizon stays calm, so put your headline there.

<RetroGrid className="flex min-h-[420px] flex-col items-center pt-16">
  <h1 className="text-5xl font-semibold">Back to 1985</h1>
</RetroGrid>

For a backdrop behind the whole page, leave it empty and fix it under everything else:

<RetroGrid className="fixed inset-0 -z-10" />

Demos

Neon

lineColor="#ff2fd6" and a hot glowColor on a dark section give the classic synthwave sunset, and angle={72} lays the floor flatter, with a lower horizon.

PreviewCode

Dense

cellSize={30} halves the cells and speed={2} doubles the pace, inside a card. The pace is set in pixels a second at the near edge, so smaller cells don't roll faster on their own.

PreviewCode

Accessibility

The floor is decorative: it's hidden from screen readers and never takes the pointer, and your content stays on top in normal flow. With reduced motion the floor stands still. The lines are your muted text colour at about half strength and the glow is a light tint, quiet enough that text stays readable; keep text in your foreground colour, ideally on the sky above the horizon. Nothing flashes.

FAQ

How does the 3D effect work?

One grid plane is hinged on the bottom edge and tilted back by angle (65° by default) under a perspective sized to the box, with the eye a little above the floor. The whole plane lies behind the screen, so nothing is ever magnified or clipped, and a mask fades it into haze before its lines crowd into a moiré.

How does the loop stay smooth?

The grid slides toward you by exactly one cell, then starts again from where it began, which looks the same, so there's no jump. It only moves the lines' position, which the browser animates without repainting.

Can I make it neon?

Yes: lineColor takes any CSS colour, for example #ff2fd6 on a dark section, and glowColor sets the sky's tint and the horizon glow, your primary colour by default. Put transparency in the line colour for a fainter floor.

Where is the horizon?

Half-way down at the default angle, at any size. A higher angle lays the floor flatter and puts the horizon lower; a lower one raises it.

How do I change the density?

cellSize sets a cell's side at the near edge, in pixels (60 by default). The pace in pixels a second stays the same at any size; change it with speed.