Hand Tracking Synthesizer
Choose a chord. Shape the energy. Record the moment. One or two hands provide simple musical cues while the browser builds harmony and rhythm.
No music training, download or dedicated hardware. Use MediaPipe hand tracking, or play without a camera by mouse, touch or keyboard. Web Audio generates the full synth mix.
How it works
This hand tracking synthesizer uses MediaPipe to read up to two hands inside your browser. No-camera mode accepts mouse, touch and keyboard control without loading the hand model. You choose a chord and energy level; Web Audio supplies voice-leading, bass and rhythm.
It is designed so a first-time player can make a coherent musical moment without learning an instrument or installing an app.
With Camera, hold one to five fingers briefly until the chord locks. Without Camera, move across five lanes, drag on touch or press 1–5. The fixed functions are 1 = I, 2 = vi, 3 = IV, 4 = V and 5 = ii. In C Major, those chords are C, Am, F, G and Dm.
In One hand mode, move the same palm through the upper Full, middle Normal or lower Quiet band. In Two hands mode, the hand that begins screen-left chooses the chord and the hand that begins screen-right controls energy. Role colors stay attached if the hands cross. Make either active hand into a fist to mute. Without Camera, move vertically or use the arrow keys for energy and Space to mute.
The live status distinguishes searching for a hand, holding a gesture until it locks, fist mute, a missing chord hand, tracking loss, locked sound and reduced performance.
Read the complete Camera and No-camera guide for calibration, finger chords, two-hand roles and local recording.
What stays private
Camera frames and raw hand landmarks for up to two hands are analyzed only in this browser session to map gestures to sound; they are not uploaded, logged or sent to analytics. If you explicitly choose Record, the browser composes a temporary local video with the camera or music visualizer, controls, brand and synth audio. The preview stays in this tab until you explicitly choose Share or Download. Discarding it or ending the session releases the local clip, camera and audio resources. MediaPipe may send Google non-input performance and utilization metrics. Vercel may process standard request metadata such as an IP address and browser user agent to deliver this page; camera frames, audio and hand landmarks are never included.
Optional Vercel Web Analytics, Google Analytics and Microsoft Clarity are not loaded by the application before you allow analytics. If allowed, they receive only fixed page identity and coarse product steps. Camera, audio, recording Blobs, Canvas images, landmarks, gesture paths, chord sequences, filenames and identity fields are excluded. The complete performance area is masked from Clarity. You can decline without changing the instrument and reopen Privacy settings later.
Browser support
Camera mode works best in current Chrome or Edge on HTTPS and needs camera permission, WebAssembly and Web Audio. No-camera mode needs only Web Audio. Local recording appears when canvas capture, MediaRecorder, audio capture and a supported format are available; mobile uses a dedicated 9:16 layout and Download remains available when system file sharing is not.
Use even, front-facing light and keep your active hand or hands fully visible. Dim light, motion blur or leaving the frame can interrupt tracking. On slower devices, Gesture Synth reduces its tracking rate and shows a performance notice.
If tracking is lost, open one hand and return it to the frame. If camera permission, model loading or audio startup fails, follow the on-screen message and choose Try again. Re-enable blocked camera access from the address bar first.
See the camera, sound, recording and privacy FAQ for exact recovery paths and verified device limits.