Loading…
An interactive skewed grid background: cells light up in a palette color under the pointer and fade back over seconds, leaving a trail of light, with a radial mask blending the grid into your hero. Self-contained, framer-motion.
No reviews yet — be the first to review this product.
Background Boxes puts a living, perspective-skewed grid behind your hero content. As the pointer moves, each cell it passes snaps to a color from the palette and then fades back over a couple of seconds, leaving a trail of light. A radial mask fades the grid into the background at the edges so your text stays readable. Ships two pieces: Boxes (the raw grid, memoized so parent re-renders never reshuffle the random cell colors) and BackgroundBoxes (a ready hero with the mask and a content slot). Self-contained CSS injected once (no Tailwind required); className merging via clsx + tailwind-merge. React 19 + TypeScript, prefers-reduced-motion aware. Original work for Assetzaar.
Requirements
So it renders exactly like the preview.
1. Install dependencies
npm install framer-motionUpdated Jun 30, 2026