React Background Boxes

Isometric grid that lights up like a retro arcade floor. Build interactive React backgrounds with 15,000 hoverable cells, TypeScript support, and buttery-smooth 60fps performance for Next.js applications with shadcn/ui.

Framer Motion

Trying to implement interactive grids?

Join our Discord community for help from other developers.

Remember those light-up dance floors from the 80s? This React component brings that energy to your web app. 15,000 interactive cells arranged in an isometric grid, each one lighting up with vibrant colors on hover. No lag, no jank, just pure retro-futuristic vibes.

Interactive isometric grid

Watch cells illuminate as you glide across the grid:

Loading component...

'use client';import React from "react";import { motion } from "framer-motion";import { cn } from "@/lib/utils";export interface BoxesProps {  className?: string;}export const Boxes = ({ className, ...rest }: BoxesProps) => {  const rows = new Array(150).fill(1);  const cols = new Array(100).fill(1);    // Using direct color values instead of CSS variables  const colors = [    "rgb(125 211 252)", // sky-300    "rgb(249 168 212)", // pink-300    "rgb(134 239 172)", // green-300    "rgb(253 224 71)",  // yellow-300    "rgb(252 165 165)", // red-300    "rgb(216 180 254)", // purple-300    "rgb(147 197 253)", // blue-300    "rgb(165 180 252)", // indigo-300    "rgb(196 181 253)", // violet-300  ];  const getRandomColor = () => {    return colors[Math.floor(Math.random() * colors.length)];  };  return (    <div      style={{        transform: `translate(-40%,-60%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0)`,      }}      className={cn(        "absolute left-1/4 p-4 -top-1/4 flex -translate-x-1/2 -translate-y-1/2 w-full h-full z-0",        className      )}      {...rest}    >      {rows.map((_, i) => (        <motion.div          key={`row` + i}          className="w-16 h-8 border-l border-slate-700 relative"        >          {cols.map((_, j) => (            <motion.div              whileHover={{                backgroundColor: getRandomColor(),                transition: { duration: 0 },              }}              animate={{                transition: { duration: 2 },              }}              key={`col` + j}              className="w-16 h-8 border-r border-t border-slate-700 relative"            >              {j % 2 === 0 && i % 2 === 0 ? (                <svg                  xmlns="http://www.w3.org/2000/svg"                  fill="none"                  viewBox="0 0 24 24"                  strokeWidth="1.5"                  stroke="currentColor"                  className="absolute h-6 w-10 -top-[14px] -left-[22px] text-slate-700 stroke-[1px] pointer-events-none"                >                  <path                    strokeLinecap="round"                    strokeLinejoin="round"                    d="M12 6v12m6-6H6"                  />                </svg>              ) : null}            </motion.div>          ))}        </motion.div>      ))}    </div>  );};

Built for React applications with TypeScript and Next.js. The 3D perspective uses CSS transforms (skewX, skewY, and scale), while Framer Motion handles the color transitions at 60fps. Each cell picks random colors from a curated palette, creating an endless light show.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/background-boxes.json

npx shadcn@latest add https://www.shadcn.io/registry/background-boxes.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/background-boxes.json

bunx shadcn@latest add https://www.shadcn.io/registry/background-boxes.json

Usage

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

export default function Hero() {
  return (
    <div className="relative h-screen">
      <Boxes className="absolute inset-0" />
      <div className="relative z-20">
        <h1>Your content here</h1>
      </div>
    </div>
  );
}

Why most grid backgrounds look flat

Most developers slap a CSS grid on the page and call it a day. No depth, no interaction, no personality. Some try to add hover effects but end up with laggy performance when dealing with thousands of elements.

This React component creates a true isometric view using transform math: skewX(-48deg), skewY(14deg), and scale(0.675). The result? A grid that looks three-dimensional without any 3D libraries. Framer Motion handles the hover states with zero-duration transitions, so even with 15,000 cells, you get instant feedback.

Features

15,000 interactive cells in a 150×100 grid
Isometric 3D perspective using pure CSS transforms
Nine-color palette with random selection on hover
60fps performance via Framer Motion optimizations
Plus icon markers on grid intersections for structure
TypeScript support with complete type definitions
Zero JavaScript overhead for hover detection
shadcn/ui compatible with Tailwind CSS integration

API Reference

Boxes

Container component that renders the isometric grid.

Prop	Type	Default	Description
`className`	`string`	-	Additional Tailwind CSS classes

Common gotchas

Performance with other animations: 15,000 cells is a lot. If you have other heavy animations on the page, consider reducing the grid size or disabling on lower-end devices.

Z-index battles: Your content needs relative z-20 or higher. The grid cells use z-10, and the mask uses z-40.

Mobile interaction: Touch devices don't have hover. The effect still works with touch-and-drag, but it's not as smooth as mouse hover.

Color accessibility: The random colors might create contrast issues with certain content. Test with your specific use case.

Container height: The component needs explicit height. Use h-screen or set a specific height value.

Explore other animated background components for React applications:

Interactive isometric grid

Installation

Usage

Why most grid backgrounds look flat

Features

API Reference

Boxes

Common gotchas

You might also like

Interactive Grid Pattern

Grid Pattern

Flickering Grid

Squares Background

Hexagon Background

Dots Pattern

Questions developers actually ask

On this page

React Background Boxes