HandVision Pro is a premium, real-time computer vision application that leverages MediaPipe and JavaScript to provide advanced hand tracking, finger counting, and a futuristic Air Canvas experience.
- Dual-Mode System: Switch between high-accuracy hand tracking and a creative Air Canvas environment.
- Advanced Finger Counting: Recognize up to 10 fingers across both hands with precise Left/Right hand differentiation.
- Air Canvas (Neon Writing): Write and draw in the air using your index finger. Features a glowing neon ink effect with adjustable brush sizes.
- Gesture-Based Controls:
- Pen Down: Lift your index finger only to start drawing.
- Quick Clear: Show all 5 fingers to automatically wipe the canvas clean.
- Mirror Mode Correction: Synchronized visual feedback that feels like looking into a mirror.
- Privacy First: All processing happens locally in your browser. No video data is ever sent to a server.
- Premium UI: Modern dark-mode interface with glassmorphism effects and responsive design.
- Core: HTML5, CSS3, JavaScript (Vanilla)
- AI Engine: MediaPipe Hands
- Icons: Lucide Icons
- Fonts: Outfit (Google Fonts)
- Clone the repository:
git clone https://github.com/YOUR_USERNAME/HandVision-Pro.git
- Open the project:
Simply open
index.htmlin any modern web browser (Chrome or Edge recommended). - Grant Permission: Allow camera access when prompted to begin the experience.
- Click START TRACKING.
- Place your hands in the camera view.
- The system will detect your hand type (Left/Right) and count the number of fingers extended.
- Click AIR CANVAS.
- To Draw: Extend only your Index Finger.
- To Stop Drawing: Close your hand or tuck your index finger.
- To Clear Canvas: Show your Full Palm (5 fingers) for a half-second to reset the screen.
- Use the sidebar to change brush colors and thickness.
Created with ❤️ by Ritik Ranjan.
This project is licensed under the MIT License - see the LICENSE file for details.