Boxes Background for React

An isometric grid of boxes behind your content. Each box the pointer crosses lights up in a pastel colour and fades out over two seconds, so a quick swipe paints a trail across the page, and at rest the grid shows thin lines and small plus marks. The grid is one tilted SVG pattern and the trail reuses 48 boxes, so it stays light at any size, and nothing runs while the pointer rests.

Use it on a portfolio, a creative studio's page or anywhere people should want to play with the background. For the flat version in one colour, use Interactive Grid Pattern; for the same trail on a honeycomb, Hexagon. For a grid in perspective that scrolls toward a horizon, use Retro Grid; for a still grid, Grid Pattern. Cells that blink on their own are Flickering Grid, and zig-zag paper folds under a slow light are Origami.

Installation

Usage

import { Boxes } from "@/components/ui/boxes";

Boxes is a container: give it a size and put your content inside. The grid sits behind the content, and the pointer lights boxes under the content too.

<Boxes className="flex min-h-[420px] items-center justify-center">
  <h1 className="text-5xl font-semibold">Paint the page as you go</h1>
</Boxes>

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

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

Demos

Theme colors

colors sets the colours lit boxes take, any CSS colours. Here your theme's five chart colours, var(--chart-1) to var(--chart-5), so the trail follows your brand.

Duration

duration={1000} makes a quick one-second trail and cellSize={48} smaller boxes, in a card-sized box faded toward its bottom edge with fade="bottom". fade also takes top, none, and radial, the default, which fades the grid toward every edge.

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 box is 90% opaque in light mode and 60% in dark, so dark text stays readable on the soft pastels and light text keeps at least 3:1 on the dark ones. Nothing loops. Each lit box rises over at least 100 ms instead of flashing on, and only where the pointer goes. With reduced motion the trail is off and the grid stays still. On touch screens a tap lights the box under the finger, and scrolling lights nothing.

FAQ

API Reference