Background boxes is the interactive hero backdrop where a large skewed grid of cells lights up in random colors as your cursor sweeps across it, leaving a brief trail of color that fades away — a playful, living surface behind your headline. This snippet builds it with plain HTML, CSS, and a compact vanilla JavaScript handler that stays fast even with hundreds of cells.

Generating the grid

The grid is created in JavaScript: a loop appends COLS × ROWS (here 24 × 16 = 384) plain <div> cells into a CSS grid whose column and row tracks are set to a fixed pixel size. Each cell has only a faint right and bottom border, so together they form a clean graph-paper lattice. Building the cells in code rather than hand-writing 384 divs keeps the markup tiny and the dimensions trivially adjustable through three constants.

The signature skew

What turns a plain grid into the recognizable "boxes" look is the container transform: skewX(-48deg) scale(1.6). The skew shears the whole lattice into a dynamic parallelogram angle, and the scale-up ensures the skewed grid still covers the full hero with no empty corners. This single transform on the container is what gives the backdrop its distinctive diagonal energy.

Lighting cells with event delegation

Rather than attaching a listener to every one of the hundreds of cells, the snippet uses event delegation: two listeners on the grid container catch pointerover and pointerout events as they bubble up, and a class check confirms the target is a cell. On pointerover the cell's background-color is set to a random color from the palette; on pointerout it's cleared. Delegation means the cost stays constant no matter how large the grid grows — adding more cells doesn't add more listeners.

The fading color trail

Each cell has a transition on background-color, so when the color is cleared the cell fades back to transparent instead of snapping. The clear is also delayed by 400ms with a setTimeout, so a quick cursor pass leaves a short-lived trail of lit cells rather than only ever showing the single cell directly under the pointer. The combination of the delay and the transition is what creates the comet-tail effect.

The vignette and content layering

A radial .bb-fade layer darkens the grid toward the edges so the lit cells appear to emerge from darkness and the hard grid boundary is hidden. The content sits above at a higher z-index and is set pointer-events: none (except the button) so moving the cursor over the headline still passes through to light the grid underneath — the text never blocks the interaction.

Customizing it

Change COLS, ROWS, and SIZE to resize the lattice, edit the skew angle for a different slant, swap the COLORS palette, or tune the 400ms clear delay to lengthen or shorten the trail. Adjust the vignette stops to focus more or less tightly. Pair it with a text generate headline or a shimmer button for a vivid interactive hero.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You don't have to work out the delegation and timing tricks here by inspection alone. Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to explain exactly why the pointerover and pointerout listeners sit on the grid container instead of on each of the 384 cells, and how the classList check filters bubbled events down to real cells. The same assistant can help you optimize it — asking whether building the lattice with a single reusable pool of cell colors avoids repeated string lookups, or whether a CSS-only hover selector could replace the JS entirely for browsers that support it. It's also useful for extending the effect: ask it to make the lit color follow the cursor's velocity, ripple outward to neighboring cells instead of a single flash, or drive the grid from real-time data so cells light up on actual events. Treat the code less like a finished artifact and more like a starting point for a conversation.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text

Build an interactive "background boxes" hero backdrop in plain HTML, CSS, and JavaScript using event delegation — no per-cell event listeners, no libraries.

Requirements:
- Generate a large grid of plain div cells in JavaScript from three constants (columns, rows, and cell size in pixels), appending them into a CSS grid container whose gridTemplateColumns and gridTemplateRows are set from those constants.
- Apply a single transform on the grid container combining skewX and scale so the lattice reads as a slanted parallelogram that still fully covers its wrapping section with no visible gaps at the corners.
- Attach exactly one pointerover and one pointerout listener to the grid container itself (not to individual cells), and inside each handler check that the event target carries the cell class before acting, so the listener count never grows even if the grid has thousands of cells.
- On pointerover, set the hovered cell's background-color to a random color chosen from a fixed palette array.
- On pointerout, do not clear the color immediately — delay clearing it by a few hundred milliseconds with setTimeout, and give the cell's background-color a CSS transition, so a fast cursor pass leaves a brief fading trail of lit cells rather than an instant single-cell highlight.
- Layer a radial-gradient vignette above the grid that fades to the page background color at the edges, and place any headline content above that with pointer-events: none (except for any real buttons), so hovering the text still lights the grid underneath.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Step by step

How to Use

1
Paste HTML, CSS, and JSA skewed grid hero renders behind a centered headline.
2
Sweep your cursorCells light up in random colors under the pointer.
3
Move quicklyA short trail of lit cells fades out behind you.
4
Hover the headlineThe grid still lights up through the text.
5
Resize the latticeChange COLS, ROWS, and SIZE constants.
6
Recolor and re-skewEdit the palette and the skew angle.

Real-world uses

Common Use Cases

Interactive heroes

Backdrop for a text generate headline.

Dev-tool landing pages

Pair with an animated grid background elsewhere.

Playful 404 pages

Liven up an empty state screen.

Event microsites

Add a shimmer button over the grid.

Portfolio intros

A dynamic alternative to a minimal hero.

Delegation demos

A reference for delegated grid interactions.

Got questions?

Frequently Asked Questions

Through event delegation. Instead of a listener on every cell, two listeners on the grid container catch pointerover and pointerout as they bubble, and a class check confirms the target is a cell. The cost stays constant regardless of grid size, so adding more cells never adds more listeners.

Each cell has a CSS transition on background-color, and the color is cleared on pointerout after a 400ms setTimeout. The delay keeps recently-hovered cells lit briefly while you move on, and the transition fades them out smoothly, producing a short comet-tail trail rather than only the single cell under the pointer.

The container has transform: skewX(-48deg) scale(1.6). The skew shears the lattice into a dynamic diagonal parallelogram — the recognizable boxes look — and the scale ensures the skewed grid still covers the whole hero with no empty corners. It's a single transform on the container.

The content layer is set to pointer-events: none (except the button), so pointer events pass through the text to the grid beneath. That means moving the cursor over the headline still triggers the cells underneath, and the text never blocks the interaction.

Render the cells from an array sized by your constants, and attach delegated pointerover/pointerout handlers on the grid container (or use the framework's event binding with a target check). Set the cell color via inline style or a brief state map, clearing it on a timeout. The skew and vignette are pure CSS. In Tailwind, build the grid with grid utilities and apply the skew with an arbitrary transform value.

Loading…