A cutting-edge real-time hand tracking interface with cyberpunk aesthetics, powered by Google's MediaPipe AI and modern web technologies.
Transform your webcam into a futuristic hand tracking interface straight out of sci-fi movies! This application detects your hands in real-time and visualizes them with glowing effects, particle systems, and a glassmorphism UI that screams "cyberpunk."
- 🤖 AI-Powered - Google MediaPipe for 21-point hand detection
- ⚡ Real-time - Smooth 60 FPS tracking
- 🎨 Stunning Visuals - Multi-colored skeleton with particle effects
- 📱 Responsive - Works on desktop and mobile
- 🔧 Zero Dependencies - Pure HTML5, CSS3, and JavaScript
┌─────────────────────────────────────────────────┐
│ 🎥 [Camera Feed with Hand Overlay] │
│ ✨ Glowing joints and connections │
│ 🌟 Particle effects on fingertips │
│ 📊 Real-time stats panel │
└─────────────────────────────────────────────────┘
# Clone the repository
git clone https://github.com/yourusername/modern-hand-hud.git
cd modern-hand-hud
# Start a local server (required for camera access)
python -m http.server 8080
# Open in browser
open https://localhost:8080- Download
index.htmlandstyles.css - Place in same folder
- Serve via any HTTPS server
- Open in browser and click "Enable Camera"
| Action | Description |
|---|---|
| 📷 Enable Camera | Click button to start webcam |
| ⚡ Speed Mode | 640x480, 1 hand, max performance |
| 💎 Quality Mode | 960x720, 2 hands, max accuracy |
| 👀 Track Hands | Move hands in camera view |
🔴 Thumb → #ff6b6b (Coral Red)
🔵 Index → #00d4ff (Cyan Blue)
🟢 Middle → #4ecdc4 (Mint Green)
🟡 Ring → #ffa726 (Amber)
🟣 Pinky → #ab47bc (Purple)
⚪ Palm → #ffffff (White)- ✨ Energy Particles - Floating around joints
- 🌊 Trail Effects - Following hand movements
- 💫 Ripple Waves - On fingertip interactions
- 🔄 Rotating Rings - Around key landmarks
- 📡 Scanning Lines - Across video feed
MediaPipe Hand Landmarker // AI hand detection
HTML5 Canvas // 2D graphics rendering
WebRTC getUserMedia // Camera access
CSS Backdrop Filter // Glassmorphism effects
RequestAnimationFrame // 60fps render loop- ✅ Chrome 88+ (Recommended)
- ✅ Firefox 90+
- ✅ Safari 14+
- ✅ Edge 88+
- 📱 Mobile browsers with camera support
// Speed Mode (Default)
{
resolution: "640x480",
maxHands: 1,
frameRate: 60,
gpuAcceleration: true
}
// Quality Mode
{
resolution: "960x720",
maxHands: 2,
frameRate: 60,
gpuAcceleration: true
}// Colors
const HAND_COLORS = {
thumb: "#ff6b6b",
index: "#00d4ff",
middle: "#4ecdc4",
ring: "#ffa726",
pinky: "#ab47bc"
};
// Effects
const EFFECTS_CONFIG = {
particleCount: 50,
trailLength: 25,
glowIntensity: 0.8,
animationSpeed: 1.0
};modern-hand-hud/
├── 📄 index.html # Main application
├── 🎨 styles.css # Modern styling
├── 📖 README.md # This documentation
├── 📜 LICENSE # MIT license
└── 📁 assets/
├── 📷 screenshots/ # Demo images
└── 🎬 videos/ # Demo videos
🚫 Camera not working
Problem: "Permission denied" or black screen
Solutions:
- Ensure you're using
https://orlocalhost - Check browser permissions (camera icon in address bar)
- Try different browser or incognito mode
- Restart browser completely
⚡ Poor performance/lag
Problem: Low FPS or choppy tracking
Solutions:
- Switch to "Speed Mode"
- Close other browser tabs
- Enable hardware acceleration in browser settings
- Use Chrome for best performance
🖐️ Hand not detected
Problem: No hand tracking overlay
Solutions:
- Ensure good lighting conditions
- Keep entire hand visible in frame
- Try plain/dark background
- Check if camera is working in other apps
// Initialize AI hand detector
const handLandmarker = await HandLandmarker.createFromOptions({
baseOptions: { delegate: "GPU" },
numHands: 1,
runningMode: "VIDEO"
});function loop() {
// Detect hands in current frame
const hands = handLandmarker.detectForVideo(video, timestamp);
// Draw visual effects
hands.forEach(drawHandEffects);
// Continue loop
requestAnimationFrame(loop);
}// Draw glowing skeleton
ctx.strokeStyle = fingerColor;
ctx.shadowBlur = 15;
ctx.stroke();
// Add particle effects
particles.push({
x: jointX, y: jointY,
life: 60, color: randomColor()
});We welcome contributions! Here's how:
- 🍴 Fork the repository
- 🌿 Create feature branch (
git checkout -b feature/awesome-feature) - 💫 Add your improvements
- 📝 Commit changes (
git commit -m 'Add awesome feature') - 🚀 Push to branch (
git push origin feature/awesome-feature) - 📬 Open Pull Request
# Fork and clone your fork
git clone https://github.com/YOUR-USERNAME/modern-hand-hud.git
# Create feature branch
git checkout -b feature/your-feature
# Make changes and test locally
python -m http.server 8080
# Commit and push
git add .
git commit -m "Your feature description"
git push origin feature/your-feature| Metric | Speed Mode | Quality Mode |
|---|---|---|
| Resolution | 640×480 | 960×720 |
| Max Hands | 1 | 2 |
| Target FPS | 60 | 60 |
| CPU Usage | ~15% | ~25% |
| GPU Usage | ~20% | ~35% |
| Memory | ~50MB | ~80MB |
MIT License
Copyright (c) 2024 Your Name
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.
- Google MediaPipe Team - Amazing hand tracking AI
- Web Standards - Canvas, WebRTC, and modern APIs
- Open Source Community - Inspiration and feedback
- Cyberpunk Aesthetics - Visual design inspiration
- 👌 Gesture recognition (peace, thumbs up, etc.)
- 📁 Export tracking data to JSON
- 🥽 VR/AR integration support
- 🎵 Music visualization mode
- 🌍 Multi-language interface
- 🔮 3D hand model rendering