Handwave
Handwave is a standalone browser instrument for controlling a vocoder with hand gestures, designed to be usable without music-production expertise.
Handwave: a browser vocoder controlled by hand tracking, with presets and live performance controls.
Problem
Gesture-controlled vocoder demos are compelling but often depend on specialist tools, DAWs, or unclear setup. The goal was to make a local, private, beginner-friendly instrument that works from the browser first.
Architecture
Vite + React frontend with pure domain modules for hand math, calibration, smoothing, pitch snapping, and presets. MediaPipe handles hand tracking, Web Audio AudioWorklet runs the vocoder DSP, and optional Web MIDI sends CC values to external tools.
Key Product Flows
- Demo mode produces synthetic hand values and tone so the instrument is usable before permissions.
- Simple Performance Mode exposes presets and plain-language controls for voice clarity, brightness, smoothness, and note snap.
- Calibration wizard captures primary hand, pinch range, and comfortable reach.
- Advanced panel keeps MIDI CC mapping available without crowding the main performance view.
Reliability & Quality
- Vitest coverage for pitch snapping, presets, calibration, performance conditioning, storage, MIDI, camera, and audio helpers.
- Playwright e2e coverage for boot, audio start, persistence, camera fallback, calibration, mobile overflow, and quick-start rendering.
- Production smoke check against Vercel verified heading, preset state, no horizontal overflow, and no console errors.
Live at handwave.vercel.app as a static Vite deployment on Vercel.