3D rotating cube cluster. Supports auto-rotation or hover interaction.
Hover the grid to tilt the cubes around the pointer, and click to send a ripple across the faces. When the pointer is idle for three seconds the grid animates by itself.
| Prop | Type | Default | Description |
|---|---|---|---|
gridSize | number | 10 | The size of the grid (number of cubes per row/column). |
cubeSize | number | undefined | Fixed size of each cube in pixels. If not provided, cubes will be responsive. |
maxAngle | number | 45 | Maximum rotation angle for the tilt effect in degrees. |
radius | number | 3 | Radius of the tilt effect (how many cubes around the cursor are affected). |
easing | string | 'power3.out' | GSAP easing function for the tilt animation. |
duration | object | { enter: 0.3, leave: 0.6 } | Animation duration for enter and leave effects. |
cellGap | number | object | undefined | Gap between cubes. Can be a number or object with row/col properties. |
borderStyle | string | '1px solid #fff' | CSS border style for cube faces. |
faceColor | string | '#120F17' | Background color for cube faces. |
shadow | boolean | string | false | Shadow effect for cubes. Can be boolean or custom CSS shadow. |
autoAnimate | boolean | true | Whether to automatically animate when user is idle. |
rippleOnClick | boolean | true | Whether to show ripple effect on click. |
rippleColor | string | '#fff' | Color of the ripple effect. |
rippleSpeed | number | 2 | Speed multiplier for the ripple animation. |
Keyboard shortcuts and ARIA behavior.