Browse components
Cubes
A field of 3D cubes that tilt toward the cursor and flip in a glowing ripple when clicked.
Installation
npx shadcn@latest add @glint-ui/cubesFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/cubes.json
Usage
import { Cubes } from "@/components/ui/cubes";
<Cubes grid={8} className="w-96" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| grid | number | 8 | Cubes per row and column. |
| maxAngle | number | 45 | Max tilt in degrees. |
| radius | number | 3 | Radius of the cursor's influence, in cells. |
| gap | number | 8 | Gap between cubes in px. |
| rippleColor | string | "#c6ff3d" | Color the cubes flash as a ripple passes. |
| rippleSpeed | number | 1 | Ripple travel speed multiplier. |
| autoAnimate | boolean | true | Wander and ripple on their own while the pointer is away. |
| className | string | — | Extra classes for the root element. |