HomeAboutProjectsRadarSkillsAchievementsContact
๐ŸŒ™
All projects

SELECTED WORK / CASE STUDY

CREATIVE TOOLS / HUMAN INTERFACES

Handwave.

A browser instrument, played by hand.

Handwave is a standalone browser instrument for controlling a vocoder with hand gestures, designed to be usable without music-production expertise.

Play HandwaveView sourceExplore how it works โ†“
  • 0 installs

  • runs on your webcam

HANDWAVE / PRODUCT VIEW

Handwave browser vocoder performance console
Handwave: a browser vocoder controlled by hand tracking, with presets and live performance controls.

01 / THE BUILD

The starting point

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.

02 / THE BUILD

The experience

  1. 01

    Demo mode produces synthetic hand values and tone so the instrument is usable before permissions.

  2. 02

    Simple Performance Mode exposes presets and plain-language controls for voice clarity, brightness, smoothness, and note snap.

  3. 03

    Calibration wizard captures primary hand, pinch range, and comfortable reach.

  4. 04

    Advanced panel keeps MIDI CC mapping available without crowding the main performance view.

03 / THE BUILD

Under the hood

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.

INTERACTIVE / SYSTEM WALKTHROUGH

From a gesture to a sound.

Follow the signal through Handwave. Select a step to see what happens and inspect its source.

Microphone โ†’ Audio engine is a separate sound input.

STEP 1 / 5

Camera

The performance starts with a front-facing camera stream. Video frames supply movement; the camera adapter does not request audio.

IN
Your hand in the camera view
OUT
A video stream for the tracker

Camera access starts only when the player requests it. A denied request returns a readable error.

src/adapters/camera.ts โ†—

Optional branch: MIDI

The control state can also produce rate-limited MIDI CC messages for a selected external output. This branch sends control values, not audio. It needs explicit MIDI access.

Inspect MIDI adapter โ†—

Source reviewed ยท 47c98d8 ยท September 27, 2026

Play the instrument

BUILT WITH

  • React

  • Vite

  • TypeScript

  • MediaPipe

  • Web Audio

  • AudioWorklet

  • Web MIDI

  • Vitest

  • Playwright

  • Vercel

04 / THE BUILD

Making it dependable

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.

PROJECT STATUS

Live at handwave.vercel.app as a static Vite deployment on Vercel.

KEEP EXPLORING

Explore all projects
StockBot