Inspiration

Hackathons are basically marathons for your chair. Somewhere between our third coffee and our fifth bug, we realized the only muscles we had used all weekend lived in our fingers. Outside the hackathon bubble, the picture looks similar, with a 2022 World Health Organization study across 197 countries finding 31 percent of adults miss the minimum activity target. We love games, so we asked ourselves a simple question: what if the controller was your own body? Flapping like a bird felt silly, joyful, and surprisingly close to a real exercise called arm pulses, and Flap or Flop was born.

What it does

Flap or Flop is a browser game where your arms become the controller. Open the site, turn on your webcam, and start flapping, and a little birdie flaps right along with you through hand-drawn worlds. Each flap mimics arm pulses, a popular arm exercise for building shoulder endurance and waving goodbye to floppy arms. Your run lasts as long as you keep flapping, so the workout only ends when your birdie finally takes a tumble. The game stays free for everyone, because we believe fun, high-quality exercise belongs to everybody.

How we built it

We built the game in Phaser, with TypeScript handling the game logic and Vite powering our dev server. For computer vision, we used MediaPipe to track body movement through the webcam, running it inside a Web Worker so the heavy lifting happens off the main thread and the game stays smooth. Every piece of art was hand-drawn and made with love by our PM, Maggie, then exported as WebP files to keep load times quick. The whole game lives on Cloudflare Workers at flap-or-flop.tech.

Challenges we ran into

Turning a wobbly human arm into a clean game input was harder than it sounds. Early versions either missed flaps or mistook a stretch, a wave, or a head scratch for a flap, so we spent hours tuning how the game recognizes a real one. Running pose detection alongside a game engine also caused stutters at first, until moving MediaPipe into a Web Worker smoothed everything out. Our biggest constraint came down to art. We committed to fully human-made assets, and with one designer, every new world took real hours, so features like daily biomes had to wait.

Accomplishments that we're proud of

We shipped a real, playable game that runs right in the browser with zero installs. Watching people try it for the first time, burst out laughing, and immediately ask for another round told us the idea works. We're also proud every single asset was drawn by hand, giving the game a warm personality you can feel in every cloud. And honestly, we're proud we got a room full of strangers to flap their arms in public.

What we learned

We learned how to wire real-time computer vision into a game loop and keep both running smoothly in a browser. We learned exercise sticks best when it feels like play, because people forget they're working out once a game grabs their attention. We also learned to scope carefully, since good ideas pile up much faster than one designer can draw them.

What's next for Flap or Flop

We have four big additions planned for the road ahead.

First up, daily biomes. Our dream from day one was a fresh flying world every single day, just like Wordle, so people come back daily excited for a new adventure.

Second, smarter form coaching with computer vision. Right now, our tracking detects every flap you make, and next we want it checking your form, making sure your arms stay long, level with your shoulders, and moving in small, controlled pulses. If your arms start drooping, your birdie gives you a gentle nudge, so every flap counts as a real arm pulse.

Third, a timed mode for people who train by the clock. Pick a goal, like three minutes or two hundred arm pulses, and the game tracks every rep until you hit it.

Fourth, a whole flock of new birds, each with its own exercise, like a penguin who dives every time you squat. Down the road, we also want to bring in bird skins and merch starring our very cute birdie, so the game can stay free for everyone.

Built With

Share this project:

Updates

Submission history