Commands
- Thumbs Up
- Thumbs Down
- Victory
- Swipe Palm
- Push / Pull
Live ML demo · TensorFlow.js + MediaPipe
Control this page with your hand.
Real-time hand tracking, right in your browser. The camera starts automatically (your browser asks for permission first) — thumbs up to scroll, victory to flip the theme, open palm to say hi.
Try it
Live detection
The camera docks to your screen and follows you down the page. Swipe a palm — or use the tabs, arrow keys, and buttons — to move between sections.
Keyboard: ↑↓ scroll · ←→ tabs · V theme · P pause · 1–3 tabs. Live commands follow the camera dock, bottom-right.
1. See
Your webcam feed goes through a hand model — 21 3D landmarks per hand, up to 25 times a second. The docked frame resizes as you push and pull.
2. Understand
Finger geometry (extended vs. curled, thumb position, finger spread) is classified into a gesture — all in a few milliseconds, on your device.
3. Act
The active gesture drives the page: scroll it, flip the theme, say hello, switch tabs. Nothing destructive — the camera stops only via explicit UI.
Scroll
Scrollable Content Area
TensorFlow.js
The project leverages TensorFlow.js, an open-source library for machine learning in JavaScript, to run the hand pose detection model directly in the browser.
Hand Pose Detection
Utilizes a pre-trained machine learning model (MediaPipe Hands) specialized in detecting 21 key points of a hand from a video feed in real-time.
Real-time Gesture Recognition
The application analyzes the geometry of the detected hand landmarks to recognize specific gestures like 'Thumbs Up' or 'Victory' with high accuracy.
No Destructive Gestures
Gestures scroll, flip the theme, greet, and navigate — never delete, stop, or destroy. The camera stops only via explicit UI.
Robustness
Normalized angle math plus a 5-frame majority vote: single-frame flicker never reaches an action, and resting hands fire nothing.
User Feedback
Dock zoom, theme flips, tab navigation, skeleton overlay, and the Gesture Lab show every consequence immediately.