Background Boxes — React Component

Animated isometric grid background with hover color effects and cross markers. Fully configurable skew, scale, box dimensions, and colors.

Background Effectshovergridhoverbackgroundisometricanimatedinteractive

Background Boxes

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 columns in the grid layout.

cols

Number of rows in each column.

boxWidth

Width of each box in px.

boxHeight

Height of each box in px.

borderColor

Border color for each box.

borderWidth

Border width in px.

showCrosses

Show SVG cross markers at even row/column intersections.

crossColor

Color of the cross markers.

Generated JSX

Copy this into your page.

<BackgroundBoxes
  rows={150}
  cols={100}
  boxWidth={64}
  boxHeight={32}
  borderColor="#374151"
  borderWidth={1}
  showCrosses={true}
  crossColor="#374151"
/>

Animation effects

hover

Copy-paste ready

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

Full-page demo

About Background Boxes

Background Boxes renders a grid of individually colored squares that pulse and shift hue on hover. Each box transitions through color values independently, creating a retro-digital grid aesthetic popular with developer tools and AI products. The hover interaction ripples color changes outward from the cursor. Works as a hero background or section fill with content layered above at a higher z-index.

Common use cases

Developer tool hero backgrounds
AI and tech product landing pages
Retro-digital aesthetic section fills
Interactive promotional backgrounds

Installation