Background Boxes

Interactive full-width box grid background with cursor-follow highlight, optional glow, and smooth ripple transitions.

Background Effectshoverlayoutgridhoverbackgroundherointeractive

Background Boxes

Tailwind is Awesome

Hover only reacts on the grid area, not on text.

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

rows

Number of grid rows.

columns

Fixed number of columns. If omitted, columns adapt to container width.

boxSize

Target box size used for responsive column calculation.

boxClassName

Class names applied to each grid cell.

gridClassName

Class names applied to the grid layer (useful for perspective transforms).

highlightColor

Background color used for hovered/nearby highlight boxes.

defaultColor

Default cell background color when inactive.

borderColor

Border color for each box.

Generated JSX

Copy this into your page.

<BackgroundBoxes
  rows={10}
  columns={0}
  boxSize={44}
  boxClassName=""
  gridClassName=""
  highlightColor="#22d3ee"
  defaultColor="transparent"
  borderColor="hsl(var(--border) / 0.45)"
/>

Animation effects

hoverlayout

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

Full-page demo

Installation