A 3D holographic spinning cube component for React
npm install react-holographic-cubeA high-performance, cyberpunk-styled 3D spinning cube for React. Features physics-based friction, holographic visuals, and a floating drift animation when idle.
Now supports dynamic colors per item, custom physics, full style overrides, and configurable environments!
- šØ Dynamic Item Colors: Assign specific neon colors to individual items (e.g., Red for Fire, Blue for Water).
- š¹ļø Physics Control: Adjust friction and initialSpeed to control how long the spin lasts.
- šļø Configurable Environment: Toggle the light pillar, change its size/color, or remove it entirely.
- š¼ļø Transparent Background: The component is now transparent by default, allowing you to place it over any background image.
- šØ Anti-Stutter: Uses a "treadmill" logic to spin infinitely without visual glitches.
- š± Responsive: Scales nicely within its container.
``bash`
npm install react-holographic-cube
ā ļø Important: You must import the CSS file for the 3D styles to work!
`javascript
import React from "react";
import InfiniteCube from "react-holographic-cube";
import "react-holographic-cube/dist/index.css";
export default function App() {
return (
Props
| Prop | Type | Default | Description |
| -------------- | ---------- | -------------------------------------- | ----------------------------------------------------------------------------------- |
|
items | Array | Demo Array | Array of strings OR objects: { content: string, color: string }. |
| onWinner | Function | null | Callback function triggered when spin finishes. Returns the winning item content. |
| initialSpeed | Number | 30 | The starting rotation speed. Higher = faster. |
| friction | Number | 0.98 | Deceleration rate (0.0 - 0.99). Higher numbers mean the cube spins longer. |
| perspective | String | "1000px" | CSS perspective. Higher = flatter look, Lower = more 3D distortion. |
| showPillar | Boolean | true | Whether to show the background light beam. |
| pillarColor | String | "rgba(0, 247, 255, 0.1)" | The color of the light beam. Supports any CSS color string. |
| pillarSize | Object | { width: "120px", height: "2000px" } | Dimensions of the light beam. |
| showResult | Boolean | true | Whether to show the result text below the cube. |
| resultStyle | Object | {} | Custom CSS styles for the result text container. |
| cubeStyle | Object | {} | Custom CSS styles applied directly to the cube faces (e.g., override border width). |
| rootStyle | Object | {}` | Custom CSS styles applied to the root wrapper of the component. |MIT
Marcos Pimienta