Isometric Voxel Grid
Reactive terrain grid with 3D elevation on hover.
Main Features of Isometric Voxel Grid
How to Use Isometric Voxel Grid in Next.js
Installation Guide for Isometric Voxel Grid
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 |
Related Components
When to Use
This customizable UI component is excellent for data visualization tools and modern web applications that want to visualize density or terrain. Use this React component when building interactive maps or background patterns that respond to the user's cursor.
Best Practices
Optimize for performance in large-scale applications by keeping the `gridCols` and `gridRows` at a combined total under 50. Follow React best practices by ensuring high contrast between the `defaultColor` and `hoverColor`. Maintain scalable component architecture by using responsive `blockSize` classes.
Why This Component Matters in Modern UI Development
Voxel-based design patterns are becoming increasingly popular in tech-heavy modern frontend development. This animated UI component allows you to build a reactive 3D terrain grid that adds semantic authority and depth to your real-world application architecture.
Frequently Asked Questions
QDoes it support custom height mapping?
The current version uses mouse proximity for elevation, but it can be easily extended to use a data-driven height map.
QCan I use a gradient for the blocks?
Yes, you can use the `sideHoverColor` and `sideHoverColor2` props to create a beautiful vertical gradient effect on hover.
QIs the elevation spring-animated?
Yes, it uses Framer Motion's spring physics to ensure the rise and fall of each block feels natural and weighted.