Interactive Grid Pattern Background for React

A grid of thin lines where the cell under the pointer lights up and fades out over a second, leaving a short trail as you move. Lines and cells near the pointer glow softly too, and a faint glow sits in the middle at rest. The grid is one CSS background and the trail reuses 24 cells, so a full-page grid costs the same as a small one, and nothing runs while the pointer rests.

Use it behind a hero, a dashboard or a sign-in page that should feel alive under the pointer. For the same grid without motion, use Grid Pattern; for dots with a pointer glow, Dot Pattern. The same trail on a honeycomb is Hexagon, and on a tilted grid with pastel colours, Boxes. For light racing along a grid on its own, use Laser Grid; for cells that blink on their own, Flickering Grid.

Installation

Usage

import {
  InteractiveGridPattern,
} from "@/components/ui/interactive-grid-pattern";

Interactive Grid Pattern is a container: give it a size and put your content inside. The grid sits behind the content, and the pointer lights cells under the content too.

<InteractiveGridPattern className="flex min-h-[420px] items-center justify-center">
  <h1 className="text-5xl font-semibold">Build on a steady grid</h1>
</InteractiveGridPattern>

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

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

Demos

Card

cellSize={32} makes a tighter grid in a small card, and fade="none" keeps it edge to edge. fade also takes top, bottom, and radial, the default, which fades the grid toward every edge.

Color

glowColor is the colour of lit cells and of the light around the pointer, and lineColor the lines' colour, both any CSS colour. Here shadcn.io's original cyan with duration={2000}, so cells take two seconds to fade and the trail runs longer, on a scene that stays dark in both themes.

Accessibility

The grid is decoration: it's hidden from screen readers and never takes a click, so links and buttons on top keep working. Keep text on top in your foreground colour: a lit cell under muted text lowers its contrast for a moment. Nothing loops. Each lit cell rises over at least 100 ms instead of flashing on, its brightness is capped (15% of the glow colour in light mode, 30% in dark), and it only lights where the pointer goes. With reduced motion the trail is off: the grid stays still and only the soft light follows the pointer, without gliding after it. On touch screens a tap lights the cell under the finger, and scrolling lights nothing.

FAQ

API Reference