MMX Coins 3D Gallery

A beautiful, interactive 3D photo gallery component for React applications. Built with Three.js and React Three Fiber.

Features

• 🌐 3D interactive photo gallery with sphere and grid layouts
• 🔍 AI-powered image search capabilities
• 🎮 Interactive controls (zoom, rotate, navigate)
• 📱 Responsive design
• ⚡ Smooth animations and transitions
• 🎨 Customizable appearance and behavior

Installation

npm install mmx-coins-3d-gallery

Usage

Basic Usage

import Gallery from 'mmx-coins-3d-gallery';
import 'mmx-coins-3d-gallery/dist/style.css';

function App() {
  return (
    <div>
      <Gallery />
    </div>
  );
}

Advanced Usage

import Gallery from 'mmx-coins-3d-gallery';
import 'mmx-coins-3d-gallery/dist/style.css';

function App() {
  return (
    <Gallery
      className="my-gallery"
      defaultLayout="grid"
      customSearchPresets={["nature", "technology", "art"]}
      showControls={true}
      showSidebar={true}
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | className | string | '' | Additional CSS class name | | customSearchPresets | string[] | ["winter", "mathematical concepts", "underwater animals", "circular shapes"] | Custom search presets for the gallery | | defaultLayout | 'sphere' \| 'grid' | 'sphere' | Initial layout mode | | showControls | boolean | true | Show/hide layout and x-ray controls | | showSidebar | boolean | true | Show/hide the sidebar |

Requirements

• React 18+
• A modern browser with WebGL support
• Gemini API key for image search functionality

License

Apache-2.0