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.
- React 19
- React
- TypeScript
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.
- Background
- Grid
- Framer Motion
- Hover
- Hero