Animations & Motion
Interactive Cube
Full 3D cube with mouse-controlled rotation and floating core.
3dtransformcubeinteractiverotate
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | bg-zinc-950 | Background color of the component |
perspective | string | perspective-[800px] | CSS perspective value for 3D effect |
cubeSize | string | w-48 h-48 | Size of the cube |
rotateXRange | [number, number] | [30, -30] | Range of X-axis rotation in degrees |
rotateYRange | [number, number] | [-30, 30] | Range of Y-axis rotation in degrees |
springStiffness | number | 150 | Spring animation stiffness |
springDamping | number | 20 | Spring animation damping |
coreSize | string | w-24 h-24 | Size of the floating core |
coreRotationDuration | number | 10 | Core rotation duration in seconds |
className | string | Additional CSS classes |