Background Boxes
An isometric grid whose cells light up in brand tints under the pointer.
- 1.2 KB gzipped
- Zero dependencies
- Reduced-motion safe
- Base UI & Radix compatible
Hover the grid
Installation
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/background-boxes.jsonAdds components/velora/background-boxes.tsx.
Examples
Spotlight headline
A headline section where a radial mask fades the grid out towards the edges.
Build on a grid that responds
Every cell you pass lights up in your brand colours, then quietly fades back into place.
Explore the libraryProps
| Prop | Type | Default |
|---|---|---|
rowsNumber of rows (capped at 40) | number | 32 |
colsNumber of columns (capped at 40) | number | 32 |
cellSizeCell edge length in px, before the isometric tilt | number | 48 |
fadeHow long a lit cell takes to fade back, in ms | number | 1400 |
Also accepts every <div> attribute, forwarded to the root element.
Accessibility
- Reduced motion
- The grid never moves. Cells still tint on hover and fade back through a colour transition, which involves no movement, so it is kept under reduced motion.
- Keyboard
- Decorative — nothing to operate.
- Screen readers
- Decorative; the grid is aria-hidden and has no focusable cells, so only the content above it is announced.