Background Cubes Grid
A grid of 3D cubes that ripples under the cursor. Use the flat isometric field or a tilted perspective grid with glowing crests.
Page your team on Discord, Telegram, WhatsApp, Google Chat, Mattermost and any webhook at once.
Relay is incident alerting for small engineering teams. Route alerts by severity, run on-call rotations, and keep one clean thread per incident.
Free for up to 5 seats · No credit card required
Installation
Run the following command
npx shadcn@latest add @aceternity/background-cubes-gridExamples
Isometric
Page your team on Discord, Telegram, WhatsApp, Google Chat, Mattermost and any webhook at once.
Relay is incident alerting for small engineering teams. Route alerts by severity, run on-call rotations, and keep one clean thread per incident.
Free for up to 5 seats · No credit card required
Perspective
Page your team on Discord, Telegram, WhatsApp, Google Chat, Mattermost and any webhook at once.
Relay is incident alerting for small engineering teams. Route alerts by severity, run on-call rotations, and keep one clean thread per incident.
Free for up to 5 seats · No credit card required
Props
The background fills its nearest positioned parent (absolute inset-0). Put it inside a relative container and place your content above it. It listens to the pointer on the window, so content on top does not block the ripples.
Shared
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "isometric" | "perspective" | "isometric" | Picks the flat isometric field or the tilted 3D grid. |
className | string | - | Extra classes for the outer container. |
amplitude | number | Per variant | Wave height, in tiles. |
glow | number | Per variant | Strength of the light on the wave crests. 0 turns it off. |
idleRipples | boolean | true | Drops random ripples when the pointer stops. |
Isometric
| Prop | Type | Default | Description |
|---|---|---|---|
cellSize | number | 150 | On-screen width of one tile, in pixels. |
gap | number | 0.025 | Seam between cubes, as a fraction of a tile. |
topColor | string | "#fafaf9" | Top face color. |
leftColor | string | "#e7e5e4" | Left side face color. |
rightColor | string | "#d6d3d1" | Right side face color. |
amplitude | number | 0.7 | Wave height, in tiles. |
speed | number | 7 | Wave speed, in tiles per second. |
damping | number | 0.08 | Wave energy kept per second (0 to 1). Lower settles faster. |
idleDelay | number | 1.5 | Seconds the grid stays flat before random ripples start. |
glowColor | string | "#a8a29e" | Color of the light that follows the ripple. |
glow | number | 0.5 | Glow strength. |
Perspective
| Prop | Type | Default | Description |
|---|---|---|---|
gridSize | number | 44 | Number of cubes per side. |
gap | number | 0.08 | Space between cubes, in world units. |
baseColor | string | "#2a2a30" | Cube color at rest. |
waveColor | string | "#ff6a2b" | Color of the wave crests. |
backgroundColor | string | "#0b0b0d" | Scene background and fog color. |
amplitude | number | 0.5 | Wave height. |
glow | number | 0.9 | Amount of light the crests emit. |
tilt | number | 0.7 | Camera tilt from top-down, in radians. |
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
200+ templates and blocks combined
Ready to copy paste component blocks, save days of development time
