Interactive Box Grid

A full-bleed box grid background that highlights cell by cell on hover, leaving a fading afterglow behind the cursor.

A full-bleed box grid that lights up cell by cell as the cursor passes over it, with a fading afterglow trail drawn on canvas. Drop foreground content on top to use it as a hero or section backdrop.

Loading preview…

npx shadcn@latest add https://webberui.com/r/interactive-box-grid.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Cell edge lengthcellSize

Afterglow fallofffade

0.92

Gridline colorlineColor

<InteractiveBoxGrid />

Installation

npx shadcn@latest add https://webberui.com/r/interactive-box-grid.json

Or, once registries are configured in components.json, install it as @webberui/interactive-box-grid.

Usage

import { InteractiveBoxGrid } from "@/components/ui/interactive-box-grid";

<InteractiveBoxGrid className="h-[340px] w-full rounded-xl">
  <div className="flex h-full items-center justify-center">
    <h2 className="text-3xl font-bold">Hover me</h2>
  </div>
</InteractiveBoxGrid>

Foreground content is layered above the grid as children; the container needs an explicit height of its own (such as h-[340px]), and viewport height units should be avoided.

Props

Prop	Type	Default	Description
`cellSize`	`number`	`48`	Edge length of each cell (px), which determines the grid density
`colors`	`string[]`	Cyan / indigo / purple / emerald / amber	Pool of highlight colors; one is picked each time a cell lights up
`lineColor`	`string`	`undefined`	Grid line color; follows the theme when unspecified
`fade`	`number`	`0.92`	Per-frame decay factor for the afterglow (`0`~`1` — higher lingers longer)
`children`	`ReactNode`	`undefined`	Foreground content layered above the grid
`className`	`string`	`undefined`	Forwarded to the outer container

Accessibility

When the user has "reduce motion" enabled at the system level, only static grid lines are rendered — neither the animation nor the interaction starts
The canvas is marked aria-hidden and is pointer-events-none, so it does not interfere with interaction in the foreground content
Highlighting is triggered by mouse hover only (pointerType of mouse); touch devices have no effect