react-cube3d

react-cube3d

Simple 3D Cube inspired by Stripe.

Installation

npm install --save react-cube3d

Usage

import Cube, { Palette }  from "react-cube3d";

const size = 35;

function getRandomFloat(min, max) {
  return Math.random() * (max - min) + min;
}

<Cube
  /size of the cube
  size={size}
  //	rotation speed
  speed={{
    x: getRandomFloat(-0.55555555555, 0.55555555555),
    y: getRandomFloat(-0.55555555555, 0.55555555555)
  }}
  //	initial angles
  //	those values support tweezing so you can change them whenever you want
  x={30}
  y={40}
  // Palette
  palette={Palette.orange}
/>

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 (
			<Cube
				// noShadow
				shadow={{
					x: "35%",
					y: "70%"
				}}
				onMouseOver={() => {
					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}
			/>
		)
	}
}