react-holographic-cube 1.0.0 â 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +75 -0
- package/package.json +3 -3
package/README.md
ADDED
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
# React Holographic Cube đ˛
|
|
2
|
+
|
|
3
|
+
A high-performance, cyberpunk-styled 3D spinning cube for React. Features physics-based friction, holographic visuals, and a floating drift animation when idle.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
_(Note: You can replace this link with a screenshot of your actual cube later)_
|
|
7
|
+
|
|
8
|
+
## Features
|
|
9
|
+
|
|
10
|
+
- **đšī¸ Physics-Based:** Real momentum and friction (no pre-baked animations).
|
|
11
|
+
- **đŽ Holographic Styling:** Glassy textures, neon borders, and "light pillar" effects.
|
|
12
|
+
- **đ¨ Anti-Stutter:** Uses a "treadmill" logic to spin infinitely without visual glitches.
|
|
13
|
+
- **đ§ Closed Geometry:** Fully 3D closed cube (including side caps).
|
|
14
|
+
- **đą Responsive:** Scales nicely within its container.
|
|
15
|
+
|
|
16
|
+
## Installation
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install react-holographic-cube
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Usage
|
|
23
|
+
|
|
24
|
+
â ī¸ Important: You must import the CSS file for the 3D styles to work!
|
|
25
|
+
|
|
26
|
+
```javascript
|
|
27
|
+
import React from "react";
|
|
28
|
+
import InfiniteCube from "react-holographic-cube";
|
|
29
|
+
|
|
30
|
+
// 1. IMPORT THE CSS
|
|
31
|
+
import "react-holographic-cube/dist/index.css";
|
|
32
|
+
|
|
33
|
+
const App = () => {
|
|
34
|
+
// Define the items to show on the faces
|
|
35
|
+
const items = ["đĨ", "đ§", "đŋ", "âĄ", "đŽ", "đ"];
|
|
36
|
+
|
|
37
|
+
const handleWin = (result) => {
|
|
38
|
+
console.log("The cube stopped on:", result);
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
return (
|
|
42
|
+
<div
|
|
43
|
+
style={{
|
|
44
|
+
background: "#050510",
|
|
45
|
+
height: "100vh",
|
|
46
|
+
display: "flex",
|
|
47
|
+
justifyContent: "center",
|
|
48
|
+
alignItems: "center",
|
|
49
|
+
flexDirection: "column",
|
|
50
|
+
}}
|
|
51
|
+
>
|
|
52
|
+
{/* 2. RENDER THE COMPONENT */}
|
|
53
|
+
<InfiniteCube items={items} onWinner={handleWin} perspective="1000px" />
|
|
54
|
+
</div>
|
|
55
|
+
);
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
export default App;
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## Props
|
|
62
|
+
|
|
63
|
+
| Prop | Type | Default | Description |
|
|
64
|
+
| ------------- | --------------- | ------------- | ----------------------------------------------------------------------------- |
|
|
65
|
+
| `items` | `Array<string>` | `['1'...'6']` | An array of strings or emojis to display on the cube faces. |
|
|
66
|
+
| `onWinner` | `Function` | `null` | Callback function triggered when the spin finishes. Returns the winning item. |
|
|
67
|
+
| `perspective` | `String` | `"1000px"` | CSS perspective value. Higher = flatter look, Lower = more 3D distortion. |
|
|
68
|
+
|
|
69
|
+
## License
|
|
70
|
+
|
|
71
|
+
MIT
|
|
72
|
+
|
|
73
|
+
## Author
|
|
74
|
+
|
|
75
|
+
Marcos Pimienta
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-holographic-cube",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "A 3D holographic spinning cube component for React",
|
|
5
5
|
"source": "src/index.js",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.module.js",
|
|
8
|
-
"style": "dist/
|
|
8
|
+
"style": "dist/index.css",
|
|
9
9
|
"scripts": {
|
|
10
10
|
"build": "microbundle",
|
|
11
11
|
"watch": "microbundle watch"
|
|
@@ -17,4 +17,4 @@
|
|
|
17
17
|
"files": [
|
|
18
18
|
"dist"
|
|
19
19
|
]
|
|
20
|
-
}
|
|
20
|
+
}
|