React 3D Cube Transition Component 💻📱

A easy to use React component to create a Fullpage 3-Dimensional rotating cube website.

Features

• ✅ Highly customisable through React props
• ✅ GPU accelerated animations
• ✅ Zero dependencies
• ✅ Examples included
• 🔨 Lazy-loading cube sides (WIP)
• 🔨 Animation events Callbacks (WIP)

Install

npm install --save react-3d-cube-transition

or

yarn add react-3d-cube-transition

Usage

import React, { Component } from 'react'

import CubeTransition from 'react-3d-cube-transition'
import 'react-3d-cube-transition/dist/index.css'

class Example extends Component {
  render() {
    return <CubeTransition 
              topPage= { <FirstPage/> }
              rightPage={ <SecondPage/> }
              contentElevation={ 15 }
            />
  }
}

Checkout working example - Standalone Example folder

Live Demo: Demo

Demo

Main Props

| Attributes | Type | Default | Description | | :------------------------ | :--------: | :-------------------: | :-------------------------------------------------------------------------------------------------------------------- | | className | string | null | Add a className to the component container | | face | string | front | Sets the current cube side. Possible values: front, top, left, right, top, bottom | | contentElevation | number | 0 | Set the elevation of content for each side with respect to its background | | animationDuration | number | 1000 | Animation Duration in ms (Note: Actual duration of the animation would be animationDuration*1.5 ms ) | | frontPage | node | null | Renders content on the front side of the cube | | backPage | node | null | Renders content on the back side of the cube | | leftPage | node | null | Renders content on the left side of the cube | | rightPage | node | null | Renders content on the right side of the cube | | topPage | node | null | Renders content on the top side of the cube | | bottomPage | node | null | Renders content on the bottom side of the cube | | frontCSS | object | {background: #000;} | Additional styles to be applied to the front side of the cube | | backCSS | object | {background: #000;} | Additional styles to be applied to the back side of the cube | | leftCSS | object | {background: #000;} | Additional styles to be applied to the left side of the cube | | rightCSS | object | {background: #000;} | Additional styles to be applied to the right side of the cube | | topCSS | object | {background: #000;} | Additional styles to be applied to the top side of the cube | | bottomCSS | object | {background: #000;} | Additional styles to be applied to the bottom side of the cube |

Author

Akshay Naik

• Checkout my Full-Stack Web and Machine Learning Developer Website
• Other open source projects @ Project Lab

License

MIT © akshay9