DucksFly webcam duck racer

DucksFly is a multiplayer browser game where you fly a duck through a course of rings by flapping your arms like wings in front of a webcam, banking and diving with your body, and quacking by opening your mouth. it runs entirely in the browser at ducksfly.com, with no install.

i built it with a four-person team over about 24 hours at QuackHacks 2026 (University of Oregon). my part was the computer-vision motion-control system: everything between the webcam and the duck. tran3066/DucksFly

Flying a duck with your body

the browser opens the webcam and runs MediaPipe (Google's in-browser machine-learning library) on each frame to track the player's face and upper-body pose, without sending any video off the device. i wired the raw landmarks into flight controls: raising and dropping the arms drives flap-to-fly and lift, leaning the torso banks left and right, and tucking down makes the duck dive. a separate face-mesh signal watches the mouth, so opening it fires a quack with an on-screen pop and a sound.

raw landmarks are noisy, and every webcam and every body is different, so the first thing the player sees is a calibration screen. it reads the player's neutral pose live, prompts a quick T-pose, and holds the duck steady until the readings settle. the calibration makes the controls behave the same on different laptops and bodies.

Keeping it playable

i kept the control layer separate from the renderer so the game stays responsive. the duck and the 3D course render with React Three Fiber (a React wrapper over Three.js). the motion layer publishes a small set of intents (flap, lean, dive, quack) that the duck reads, which keeps the tracking math out of the render loop. a keyboard mode feeds the same intents, so the game works without a camera and is much easier to test.

the race itself runs on an authoritative room server that tracks each player's progress through the rings and scores the run, and the whole thing is deployed on Fly.io behind ducksfly.com.

Reading list