One Motion

Interactive 3D Particle System Controlled by Your Hands

"Touch the digital void."

One Motion isn't just a visualizer; it's a bridge between the physical and digital worlds.
Powered by MediaPipe and Three.js, it transforms your hand movements into fluid, glowing particle physics in real-time.

---

🌟 Vision

One Motion's mission is to:

• Democratize interactive webGL — high-performance graphics accessible in the browser
• Push the limits of browser-based AI — real-time computer vision without plugins
• Create digital art — that responds to human touch

---

✨ Features

• Real-Time Hand Tracking — 21-point hand skeleton detection via MediaPipe
• 10,000+ Particles — High-performance instanced mesh rendering
• Gesture Recognition — Detects fingers (1-5) to trigger shape morphing
• Physics Engine — Custom velocity, damping, and return-force physics
• "The Blast" — Open your hand to trigger a massive radial particle explosion

---

🎨 "Deep Space" Aesthetic

• Infinite Black Void
  A pure black background (#000000) creates infinite depth.

• Diamond Core Particles
  Custom glow textures create a "starfield" effect.

• Glassmorphism UI
  Clean, frosted white controls that float above the scene.

• Smooth Morphing
  Elegant interpolation between shapes (Sphere, Heart, Numbers).

---

🤖 Hand Gestures

• 1 Finger: Forms the number 1
• 2 Fingers: Morphs into a sharp 2
• 3 Fingers: Forms a complex 3 (Deep Indent Algorithm)
• 4 Fingers: Manifests the number 4
• 5 Fingers (Open Hand): NUCLEAR BLAST (Explosion Physics)
• Fist: Returns to the selected Base Shape

---

📁 Project Structure

One-Motion/
├── src/
│   ├── main.js               # Particle system, Animation Loop, Event Listeners
│   ├── particles.js          # Physics Engine, Shape Generation, Attribute Management
│   ├── handTracker.js        # MediaPipe Configuration, Gesture Logic
│   └── scene.js              # Three.js Boilerplate (Camera, Renderer, Fog)
├── public/
│   └── hands/                # MediaPipe TFLite Models & Wasm Binaries
├── index.html                # HTML Entry Point & UI Structure
├── style.css                 # Glassmorphism UI Styles
├── package.json              # Dependencies
└── vite.config.js            # Build Configuration

---

� Quick Start

Prerequisites

• Node.js (v16+)
• Webcam (for hand tracking)

1. Clone the Repository

git clone https://github.com/zakisheriff/One-Motion.git
cd One-Motion

2. Install Dependencies

npm install

3. Run the Simulation

npm run dev

Visit http://localhost:5173 and allow camera access. 🎉

---

🔧 Tech Stack

• Three.js — The 3D Engine
• MediaPipe Hands — AI Hand Tracking
• Vite — Next Generation Frontend Tooling
• Vanilla JS — No frameworks, just raw performance

---

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request to add new shapes or physics modes.

---

📄 License

MIT License — 100% Free and Open Source

---

☕️ Support the Project

If One Motion inspired you:

• Consider buying me a coffee
• It keeps the particles glowing

---

Made by Zaki Sheriff