bachi.dev
Hand Gesture Control

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.

Auto-starts with cameraVideo never leaves your deviceNo cookies · no tracking

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.