React Interactive Cube3D

A modern, interactive 3D cube component for React with support for video, image, and HTML content.

Features

• 🎥 Support for video, image, and HTML content on each face
• 🎮 Interactive controls (drag, inertia)
• 🔄 Auto-rotation with customizable speed
• ✨ Interactive effects with customizable colors
• 📱 Responsive design
• 🎨 Customizable styling
• 🚀 Optimized performance

Installation

npm install react-interactive-cube3d
# or
yarn add react-interactive-cube3d

Usage

import { Cube3D } from 'react-interactive-cube3d';
import 'react-interactive-cube3d/dist/cube3d.css';

function App() {
  const faces = {
    front: {
      type: 'video',
      src: 'path/to/video.mp4'
    },
    back: {
      type: 'image',
      src: 'path/to/image.jpg'
    },
    right: {
      type: 'html',
      html: '<div>Custom HTML</div>'
    },
    // ... other faces
  };

  return (
    <Cube3D
      size={300}
      autoRotate={true}
      rotationSpeed={0.5}
      interactive={true}
      interactiveEffects={true}
      faces={faces}
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | number | 300 | Size of the cube in pixels | | responsive | boolean | false | Enable responsive sizing | | minSize | number | 150 | Minimum size when responsive | | maxSize | number | 600 | Maximum size when responsive | | autoRotate | boolean | false | Enable auto-rotation | | rotationSpeed | number | 0.5 | Speed of auto-rotation | | interactive | boolean | true | Enable drag controls | | interactiveEffects | boolean | false | Enable hover/click effects | | effectColors | object | {...} | Custom colors for effects | | faces | object | {...} | Content for each face | | className | string | '' | Additional CSS class | | style | object | {} | Additional inline styles |

Face Content Types

Each face can have one of these content types:

// Video
{
  type: 'video',
  src: 'path/to/video.mp4'
}

// Image
{
  type: 'image',
  src: 'path/to/image.jpg'
}

// HTML
{
  type: 'html',
  html: '<div>Custom HTML</div>'
}

// Empty
{
  type: 'empty'
}

Effect Colors

Customize the colors for interactive effects:

const effectColors = {
  front: '#00ffff',  // Cyan
  back: '#ff00ff',   // Magenta
  right: '#ffff00',  // Yellow
  left: '#ff8800',   // Orange
  top: '#88ff00',    // Lime
  bottom: '#ff0088'  // Pink
};

License

MIT