Reactive Cube Grid React component
An isometric field of cubes that rises under the pointer like a pin-art toy: cubes spring up, overshoot and settle, glow in an accent colour as they climb, and a click sends a ring-shaped wave rolling out across the grid.
About the Reactive Cube Grid component
Reactive Cube Grid fills an area with an isometric field of cubes, like a pin-art toy seen from above. Cubes under the pointer spring up, overshoot a little and settle, turning from the base colour to an accent as they rise.
A click sends a ring of raised cubes rolling outward across the grid. With no pointer around, a soft hotspot wanders across the field so it never sits still.
When to use it
Use it for developer tools, infrastructure and data products, Web3 and gaming sites, or any hero that wants a structured, techy texture with some play in it.
Put text on a panel or along an edge; the grid is busy all the way across.
Installation
Add the Reactive Cube Grid component to your project with the shadcn CLI. It lands in components/reactive-cube-grid.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/reactive-cube-gridOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<ReactiveCubeGrid /> accepts 7 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| size Width of one cube's top face, in px. | number | 48 |
| lift How high cubes rise under the pointer, in px. | number | 64 |
| radius How far the pointer's pull reaches, in cubes. | number | 2.6 |
| color Colour of cubes at rest. | string | "#23252d" |
| accent Colour cubes turn as they rise. | string | "#7c6cff" |
| background | string | "#0d0e12" |
| idle Let a soft hotspot wander across the grid while no pointer is over it. | boolean | true |
- size
Width of one cube's top face, in px.
numberDefault: 48 - lift
How high cubes rise under the pointer, in px.
numberDefault: 64 - radius
How far the pointer's pull reaches, in cubes.
numberDefault: 2.6 - color
Colour of cubes at rest.
stringDefault: "#23252d" - accent
Colour cubes turn as they rise.
stringDefault: "#7c6cff" - backgroundstringDefault: "#0d0e12"
- idle
Let a soft hotspot wander across the grid while no pointer is over it.
booleanDefault: true
npm dependencies
Installed for you by the shadcn CLI.
Reactive Cube Grid FAQ
- Is it 3D?
- It's drawn in isometric projection on a 2D canvas: each cube is three shaded polygons drawn back to front. That keeps it light and makes it look the same in every browser.
- Can I change the look?
- color is the cube colour at rest, accent the colour they turn as they rise and background the colour behind. size sets the width of each cube, lift how high they rise and radius how many cubes around the pointer are pulled up.
- How heavy is it?
- Only the cubes that can appear on screen are kept, and the animation stops when the grid scrolls out of view or the tab is hidden. Larger size values mean fewer cubes.
- What about phones and reduced motion?
- A finger raises the cubes under it and a tap sends a wave. With reduced motion turned on the cubes snap to their heights without springing and clicks don't send waves.
