{"id":28762209,"url":"https://github.com/saganaki22/hand-dance","last_synced_at":"2026-04-30T03:39:53.627Z","repository":{"id":297512300,"uuid":"997034349","full_name":"Saganaki22/Hand-dance","owner":"Saganaki22","description":"An interactive psychedelic art generator using real-time hand tracking to create mesmerizing visual effects and particle animations.","archived":false,"fork":false,"pushed_at":"2025-06-05T22:13:02.000Z","size":348,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-17T08:07:28.391Z","etag":null,"topics":["camera","computer-vision","hand-tracking","html5","interactive-art","javascript","mediapipe","mobile-friendly","particle-effects","psychedelic","real-time","responsive","webgl"],"latest_commit_sha":null,"homepage":"https://drbaph.is-a.dev/Hand-dance/","language":"HTML","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Saganaki22.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-05T21:07:36.000Z","updated_at":"2025-06-07T22:27:34.000Z","dependencies_parsed_at":"2025-06-05T22:28:02.647Z","dependency_job_id":"b4513fb4-1b50-4a87-9ebe-6561b6cdfcdc","html_url":"https://github.com/Saganaki22/Hand-dance","commit_stats":null,"previous_names":["saganaki22/hand-dance"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Saganaki22/Hand-dance","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Saganaki22%2FHand-dance","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Saganaki22%2FHand-dance/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Saganaki22%2FHand-dance/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Saganaki22%2FHand-dance/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Saganaki22","download_url":"https://codeload.github.com/Saganaki22/Hand-dance/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Saganaki22%2FHand-dance/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260318706,"owners_count":22991120,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["camera","computer-vision","hand-tracking","html5","interactive-art","javascript","mediapipe","mobile-friendly","particle-effects","psychedelic","real-time","responsive","webgl"],"created_at":"2025-06-17T08:07:28.245Z","updated_at":"2026-04-30T03:39:53.573Z","avatar_url":"https://github.com/Saganaki22.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\n\u003cdiv align=\"center\"\u003e\n\n# Hand Dance\n  \n  \u003cimg src=\"https://img.shields.io/badge/HTML5-E34F26?style=for-the-badge\u0026logo=html5\u0026logoColor=white\" alt=\"HTML5\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/JavaScript-ES6+-F7DF1E?style=for-the-badge\u0026logo=javascript\u0026logoColor=black\" alt=\"JavaScript\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/CSS3-1572B6?style=for-the-badge\u0026logo=css3\u0026logoColor=white\" alt=\"CSS3\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/MediaPipe-0F9D58?style=for-the-badge\u0026logo=google\u0026logoColor=white\" alt=\"MediaPipe\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Canvas%20API-Native-orange?style=for-the-badge\" alt=\"Canvas API\" /\u003e\n  \u003cimg src=\"https://img.shields.io/badge/WebRTC-333333?style=for-the-badge\u0026logo=webrtc\u0026logoColor=white\" alt=\"WebRTC\" /\u003e\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[**🚀 Live Demo**](https://drbaph.is-a.dev/Hand-dance/)\n\n\u003c/div\u003e\n\n---\n\u003cdiv align=\"center\"\u003e\n\n![ezgif-1a56941cb20ced](https://github.com/user-attachments/assets/83008552-1a01-403d-b335-3091049e63e0)\n\n\u003c/div\u003e\n\n---\n\n## ✨ Features\n\nHand Dance is an interactive psychedelic art generator that transforms hand movements into mesmerizing visual effects using real-time computer vision. Simply show your hands to the camera and watch as your fingertips create stunning particle animations.\n\n### Visual Effects\n- **Kaleidoscope** - 4-way symmetrical patterns that mirror your movements\n- **Spiral Galaxy** - Swirling cosmic patterns following your hands\n- **Fireworks** - Explosive bursts emanating from fingertips\n- **Liquid Flow** - Fluid, flowing particles with physics simulation\n- **Mandala** - 8-way sacred geometry patterns\n- **Aurora** - Northern lights effect with ethereal trails\n- **Plasma Storm** - Electric energy fields and lightning effects\n- **Water Waves** - Ripple waves expanding from fingertips\n\n### Interactive Controls\n- **Opacity Control** - Adjust transparency of effects and camera overlay\n- **Rotation Speed** - Control particle rotation and swirl intensity\n- **Animation Speed** - Modify particle movement velocity\n- **Particle Density** - Adjust the number of particles generated\n- **Camera Toggle** - Show/hide camera feed behind effects\n- **Landmarks Toggle** - Display hand tracking points for debugging\n- **Fullscreen Mode** - Immersive full-screen experience\n- **FPS Monitor** - Real-time performance indicator\n\n### Technical Features\n- Real-time hand tracking using MediaPipe\n- Supports up to 2 hands simultaneously\n- Mobile-responsive design with touch controls\n- Optimized performance for smooth 60fps rendering\n- Advanced particle systems with physics simulation\n- Multiple blend modes for different visual effects\n- Adaptive quality based on device capabilities\n\n## 🚀 Getting Started\n\n### Prerequisites\n- Modern web browser with camera support\n- Camera permissions enabled\n- Stable internet connection (for MediaPipe CDN)\n\n### Installation\n\n1. **Download or Clone**\n   ```bash\n   git clone https://github.com/yourusername/hand-dance.git\n   cd hand-dance\n   ```\n\n2. **Serve the Files**\n   \n   Since the app uses MediaPipe from CDN, you can simply open `index.html` in your browser, or serve it using any web server:\n   \n   ```bash\n   # Using Python\n   python -m http.server 8000\n   \n   # Using Node.js\n   npx serve .\n   \n   # Using PHP\n   php -S localhost:8000\n   ```\n\n3. **Open in Browser**\n   Navigate to `http://localhost:8000` and allow camera permissions when prompted.\n\n## 🎮 Usage\n\n1. **Camera Setup** - Allow camera access when prompted\n2. **Hand Position** - Hold your hands in front of the camera\n3. **Effect Selection** - Use the dropdown menu to choose different visual effects\n4. **Customize** - Adjust sliders for opacity, rotation, speed, and particle density\n5. **Controls** - Toggle camera visibility, landmarks, and fullscreen mode\n6. **Mobile** - Works on mobile devices with touch controls\n\n### Tips for Best Results\n- Ensure good lighting for optimal hand detection\n- Keep hands within the camera frame\n- Try different effects with various hand movements\n- Adjust particle density based on your device performance\n- Use fullscreen mode for immersive experience\n\n## 🛠️ Technical Details\n\n### Dependencies\n- **MediaPipe Hands** - Google's hand tracking solution\n- **HTML5 Canvas** - For rendering particles and effects\n- **WebRTC** - Camera access and video streaming\n\n### Browser Compatibility\n- Chrome 88+ (Recommended)\n- Firefox 85+\n- Safari 14+\n- Edge 88+\n- Mobile browsers with camera support\n\n### Performance Optimization\n- Adaptive particle limits based on device type\n- Efficient particle culling and lifecycle management\n- Frame rate monitoring and adjustment\n- Mobile-specific optimizations\n\n### Architecture\n- **MediaPipe Integration** - Hand landmark detection\n- **Particle System** - Custom physics engine for effects\n- **Effect Engine** - Modular system for different visual modes\n- **Responsive UI** - Touch-friendly controls and mobile optimization\n\n## 📱 Mobile Support\n\nHand Dance is fully optimized for mobile devices with:\n- Touch-friendly interface\n- Responsive layout adaptation\n- Performance optimization for mobile GPUs\n- Gesture-based controls\n- Portrait and landscape support\n\n## 🎨 Effect Details\n\nEach effect uses different particle behaviors and rendering techniques:\n\n- **Symmetrical Effects** (Kaleidoscope, Mandala) use mathematical transformations\n- **Physics-Based Effects** (Flow, Waves) simulate real-world physics\n- **Explosive Effects** (Fireworks, Plasma) use radial particle emission\n- **Organic Effects** (Aurora, Spiral) use smooth, flowing animations\n\n## 🔧 Customization\n\nThe application supports extensive customization through:\n- Real-time parameter adjustment\n- Effect switching without restart\n- Camera overlay control\n- Performance monitoring\n- Debug visualization\n\n## 📊 Performance\n\nOptimized for smooth performance across devices:\n- **Desktop**: 60fps at 1080p with high particle density\n- **Mobile**: 30-60fps with adaptive quality\n- **Low-end devices**: Automatic quality reduction for stable performance\n\n---\n\n![og-img](https://github.com/user-attachments/assets/6562ba54-5a1e-4128-97be-a763fd208bda)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaganaki22%2Fhand-dance","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsaganaki22%2Fhand-dance","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsaganaki22%2Fhand-dance/lists"}