Background Boxes
Grid of hoverable colored boxes that light up on mouse interaction.
Preview
Background Boxes
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Interactive section backgrounds on the IO platform pages.
Why this component matters
Earn every pixel. Each box responds to the user, creating a sense of life without gratuitous animation.
Usage guidance
Works best on dark backgrounds with a grid of 10x10 or more. Use IO purple tones for the box colors. Place sparse, centered text over it.
Installation
bash
npx shadcn@latest add @aceternity/background-boxesUsage
example.tsxtsx
import { BackgroundBoxes } from "@/components/ui/background-boxes";
export default function Example() {
return (
<BackgroundBoxes>
{/* Your content here */}
</BackgroundBoxes>
);
}Source
background-boxes.tsx
components/ui/background-boxes.tsx