Two small browser tools that turn a webcam into a gesture controller. Hand tracking runs entirely on your machine with MediaPipe: no video is uploaded, and nothing is stored.
Both tools share one design language, a warm instrument shell with a viewfinder that locks onto your gesture, so they read as a set.
Two-hand pinch to zoom. Raise both hands, pinch each one (thumb to index), and the distance between the two pinch points sets the zoom. A dead zone, smoothing, and a few frames of tracking coast keep it from jittering.
signal-lens/ · React + Vite · details
Orbit a 3D scene by snapping. Hold a firm snap and move it like a mouse drag to swing the camera around a machined plate. A fast flick throws the view farther; a second snap registers as a click.
orbit-snap/ · React + Vite + React Three Fiber · details
You need Node 18 or newer and a webcam. The camera API only works in a secure context, which localhost already counts as.
npm install
npm run dev:signal-lens # http://127.0.0.1:5173
npm run dev:orbit-snap # http://127.0.0.1:5174Open the printed URL and allow camera access when the browser asks.
Each tool runs the MediaPipe Hand Landmarker over the webcam, frame by frame, to find 21 points per hand. The gesture logic (pinch classification, two-hand span, snap recognition, camera orbit) is plain TypeScript in each tool's src/lib, covered by unit tests. The tracking model and its WebAssembly runtime are checked into public/, so once installed the tools load and run with no network.
The video stream is read on the page and never leaves it.
camera-tools/
├── signal-lens/ # two-hand pinch zoom
├── orbit-snap/ # snap-controlled orbit
└── package.json # npm workspace and shared scripts
npm run test:signal-lens npm run build:signal-lens
npm run test:orbit-snap npm run build:orbit-snapTests run the gesture math with Vitest. build type-checks with tsc, then bundles with Vite.
MIT.