Animations & Motion
Isometric Blocks
Isometric city blocks with 3D hover elevation effect.
3dtransformisometricblockscity
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
gridSize | number | 9 | Number of blocks in the grid (n x n) |
containerSize | string | w-[500px] h-[500px] | Size of the container |
backgroundColor | string | bg-[#0a0a0a] | Background color of the component |
rotateX | number | 60 | X-axis rotation in degrees |
rotateZ | number | -45 | Z-axis rotation in degrees |
gap | string | gap-4 | Gap between blocks |
hoverZ | number | 80 | Z-axis translation on hover |
defaultColor | string | #262626 | Default color of blocks |
hoverColor | string | #6366f1 | Color of blocks on hover |
topColor | string | #404040 | Color of the top face |
topHoverColor | string | #818cf8 | Color of the top face on hover |
sideColor | string | #171717 | Color of the side faces |
sideHoverColor | string | #4f46e5 | Color of the side faces on hover |
blockSize | string | w-32 h-32 | Size of each block |
springStiffness | number | 300 | Spring animation stiffness |
springDamping | number | 20 | Spring animation damping |
className | string | Additional CSS classes |