Animations & Motion
Isometric Voxel Grid
Reactive terrain grid with 3D elevation on hover.
3dtransformvoxelgridterrain
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
gridCols | number | 5 | Number of columns in the grid |
gridRows | number | 5 | Number of rows in the grid |
backgroundColor | string | bg-zinc-950 | Background color of the component |
perspective | string | perspective-1000 | CSS perspective value for 3D effect |
blockSize | string | w-16 h-16 | Size of each block |
defaultColor | string | #1f2937 | Default color of blocks |
hoverColor | string | #3b82f6 | Color of blocks on hover |
hoverBorderColor | string | #60a5fa | Border color of blocks on hover |
sideColor | string | #18181b | Color of the side faces |
sideHoverColor | string | #1d4ed8 | Color of the side faces on hover |
sideHoverColor2 | string | #1e40af | Secondary color of the side faces on hover |
hoverTranslateZ | number | 40 | Z-axis translation on hover |
rotateX | number | 60 | X-axis rotation in degrees |
rotateZ | number | -45 | Z-axis rotation in degrees |
springStiffness | number | 300 | Spring animation stiffness |
springDamping | number | 20 | Spring animation damping |
className | string | Additional CSS classes |