Laser Grid Background for React

A glowing neon grid with short beams of light racing along its rows and columns, lighting each crossing they pass, like a Tron floor seen from above. The lines, their glow, the beams and the flares are CSS gradients moved by keyframes the install adds to your stylesheet, and the beams snap to the lines in a box of any size.

Use it for gaming, AI or infrastructure heroes. For a quieter board with traces and slower signals, use Circuit; for a synthwave grid in perspective, Retro Grid; for the grid without motion, Grid Pattern.

Installation

Usage

import { LaserGrid } from "@/components/ui/laser-grid";

Laser Grid is a container: give it a size and put your content inside. The grid sits behind the content and the box clips it.

<LaserGrid className="flex min-h-[420px] items-center justify-center">
  <h1 className="text-5xl font-semibold">Every packet, at light speed</h1>
</LaserGrid>

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

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

Demos

Theme colours

By default the grid keeps its signature neon: cyan lines and beams, one beam in five magenta, in light and dark. Pass theme colours to beamColor, accentColor and lineColor to follow your theme instead.

Dense

A tighter grid in a dark card: gridSpacing={32}, count={40} beams and speed={1.5}.

Accessibility

The grid is decorative: it's hidden from screen readers and lets every click through to your content. With reduced motion the grid stops breathing and the beams stop where they are, mid-line, so the page shows a still picture of the grid. Nothing flashes: the grid breathes over more than three seconds and the flares are small moving highlights, not lights switching on and off. The lines are faint (a quarter of the beams' colour), so headline text in your foreground colour stays readable.

FAQ

API Reference