https://github.com/davidroman0o/react-cube3d
Simple 3D Cube inspired by Stripe
https://github.com/davidroman0o/react-cube3d
Last synced: 5 months ago
JSON representation
Simple 3D Cube inspired by Stripe
- Host: GitHub
- URL: https://github.com/davidroman0o/react-cube3d
- Owner: davidroman0O
- Created: 2018-04-24T15:24:25.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-06-01T18:45:41.000Z (over 7 years ago)
- Last Synced: 2025-06-30T07:49:05.754Z (6 months ago)
- Language: JavaScript
- Homepage:
- Size: 98.6 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-cube3d
Simple 3D Cube inspired by Stripe.
## Installation
```bash
npm install --save react-cube3d
```
## Usage
```jsx
import Cube, { Palette } from "react-cube3d";
const size = 35;
function getRandomFloat(min, max) {
return Math.random() * (max - min) + min;
}
```
## Defaults
```
noShadow: false,
shadow: {
x: 0,
y: 0
},
palette: Palette.white,
speed: { x: -0.11111, y: 0.1111 },
size: 100,
blurFactor: 0.2,
opacityFactor: 0.4,
easingDuration: 500,
easing: (t, b, c, d) => {
if ((t/=d/2) < 1) return c/2*t*t + b
return -c/2 * ((--t)*(t-2) - 1) + b
},
x: 0,
y: 0
```
## Palette
For example, this is the red palette !
```
{
color: [190, 10, 0],
shading: [200, 250, 200]
}
```
## Easing example
Angles changes when the mouse of hover the container !
```
class CubeHover extends Component {
state = {
hover: false
}
render() {
var { hover } = this.state;
return (
{
this.setState({
hover: true
});
}}
onMouseOut={() => {
this.setState({
hover: false
});
}}
size={size}
speed={{
x: 0.0,
y: 0.0
}}
x={!hover ? -35 : -50}
y={!hover ? 45 : 80}
palette={Palette.green}
/>
)
}
}
```