✋ Hand Tracking + Skeleton Visualization
           ↓
    🎨 20,000+ Interactive Particles
           ↓
    💥 Gesture-Controlled Effects
           ↓
    🌈 Beautiful Morphing Shapes

🌸 Flower    ❤️ Heart     ⭐ Star      ∞ Infinity
🦋 Butterfly 🌀 Spiral    👑 Crown     💎 Diamond
🧬 DNA       🌌 Galaxy    🌊 Wave      🔮 Sphere
📦 Cube      ⭕ Rings

• Particle Size - Adjust particle dimensions
• Animation Speed - Control morphing velocity
• Trail Effect - Configure particle trails
• Boom Power - Set explosion intensity
• Hand Smoothness - Fine-tune tracking sensitivity
• Auto Rotate - Toggle automatic rotation
• Rainbow Mode - Enable color cycling
• Show Skeleton - Toggle hand skeleton display

// Peace Sign (BOOM) Detection
✌️ = Index UP + Middle UP + Ring DOWN + Pinky DOWN

// Three Fingers (360°) Detection  
🤟 = Index UP + Middle UP + Ring UP + Pinky DOWN

// Fist Detection
✊ = All fingers curled (hand scale < 0.3)

Simply open index.html in any modern browser!

# Clone the repository
git clone https://github.com/SudhirDevOps1/particle-morph-pro.git

# Navigate to directory
cd particle-morph-pro

# Open in browser
open index.html
# or
start index.html  # Windows

# Using Python
python -m http.server 8000

# Using Node.js
npx serve .

# Using PHP
php -S localhost:8000

Then open http://localhost:8000 in your browser.

1. Allow Camera Access - Grant permission when prompted
2. Position Your Hand - Hold hand 1-2 feet from camera
3. Watch the Skeleton - Colored lines appear on your fingers
4. Try Gestures - Use peace sign, three fingers, fist, etc.
5. Explore Shapes - Click shape buttons at bottom
6. Customize - Use settings panel on left side

┌─────────────────────────┐
│ ⚙️ Controls             │
├─────────────────────────┤
│ Particle Size    [====] │
│ Animation Speed  [====] │
│ Trail Effect     [====] │
│ Boom Power       [====] │
│ Hand Smoothness  [====] │
├─────────────────────────┤
│ Auto Rotate      [ON ]  │
│ Rainbow Mode     [OFF]  │
│ Show Skeleton    [ON ]  │
├─────────────────────────┤
│ [💥 BOOM!]              │
│ [🔄 360° Rotate]        │
│ [🎲 Random Shape]       │
│ [↩️ Reset Default]      │
└─────────────────────────┘

Technology	Purpose
	3D Rendering & Particles
	Hand Tracking AI
	Styling
	Core Logic
	Icons

particle-morph-pro/
│
├── 📄 index.html          # Main application file
├── 📄 README.md           # Documentation (this file)
├── 📄 LICENSE             # MIT License
│
└── 📁 assets/             # (Optional) Additional assets
    ├── 📁 screenshots/
    └── 📁 demos/

1. Close other tabs - Free up GPU memory
2. Good lighting - Helps hand detection accuracy
3. Plain background - Improves tracking stability
4. Keep hand in frame - Maintain consistent tracking
5. Modern GPU - Better particle performance

Contributions are welcome! Here's how you can help:

# Fork the repository
# Create your feature branch
git checkout -b feature/AmazingFeature

# Commit your changes
git commit -m 'Add some AmazingFeature'

# Push to the branch
git push origin feature/AmazingFeature

# Open a Pull Request

• Add more particle shapes
• Implement two-hand tracking
• Add audio reactivity
• Create preset themes
• Add particle physics modes

MIT License

Copyright (c) 2024 Sudhir

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software...

• Three.js - Amazing 3D library
• MediaPipe - Powerful ML solutions
• TailwindCSS - Utility-first CSS
• Lucide Icons - Beautiful icons