abouchedidxcode/open-source-hands
GamesBuild browser hand-tracking games with MediaPipe gestures, a starter three.js game, and a coding-agent playbook.
Overview
open-source-hands packages the hand-tracking technology behind several browser games into something you can reuse. It builds on Google's MediaPipe Hand Landmarker, which detects 21 points per hand from a webcam, and turns those points into stable game input: 20 held poses, 16 single-hand motions, 5 two-hand gestures, plus continuous values like pinch strength, palm position and velocity. The kit uses One Euro smoothing and hysteresis so gestures do not flicker.
The repository does not stop at the input layer. It includes a complete three.js starter game, a playbook based on building 17 hand games, and agent-facing documentation. The demo, Gesture Lab and a small example game can be tried in the browser; video processing stays on the device.
Quick start
To create a game from the template:
npx degit abouchedidxcode/open-source-hands/templates/game my-game
cd my-game
npm install
npm run dev # the camera needs https or localhost
Then read the starter game's README and the game-making playbook. To use an existing project, copy src/kit into it as a hand-gesture-kit folder, install @mediapipe/tasks-vision@1.1.0, and place the hand_landmarker.task model and Wasm files under public/. A browser button click is needed before the camera can start: hands.startCamera() is called in a click handler in the example.
To run the kit, demo and lab, use npm install, npm run dev, then npm test; the README also documents a headless end-to-end run with synthetic hands and a real-MediaPipe check against .y4m clips.
Usage constraints
The camera requires HTTPS or localhost, and the browser asks for permission before capture. The kit ships as source to copy, not as a package; adding it to an existing project means manually installing the MediaPipe dependency and copying the model and Wasm directories. The default camera is the front camera at 1280×720, with GPU detection and CPU fallback. Gesture thresholds can be tuned in Gesture Lab and exported as JSON into createHands({ config }). Experimental poses such as back, chop, two and spock are off by default.
The project is MIT-licensed; hand tracking is Google's MediaPipe, Apache-2.0, and the model file under public/models is described as Google's unmodified official release.
HotRepo's take
This repository appeared on the TypeScript new-project list on 2026-11-04, gaining 3 stars in the recorded hour-long window, reaching 108 stars and 17 forks. There is no GitHub daily rank recorded for it. The part that stands out is the combination of a reusable gesture engine, a network-free starting template and Gesture Lab for tuning without guesswork, which gives a developer something to run and modify immediately rather than a video-only demo.
Written by AI from the project's README, updated . The project's own docs are the source of truth.