Real Hand Tracking Balloon Shooter
A browser-based arcade game controlled by hand gestures. You can play it two ways: use your actual hand in front of the camera for the full hand-tracking experience, or just use your mouse if you'd rather skip the camera. Try to play with hand tracking mode. It is just a lot more fun.
How to Play
Point your index finger at the screen to move the targeting reticle.
Or with mouse, you can double-click to shoot the balloon.
When you're locked onto a balloon, pinch your thumb and index finger together to shoot it.
Miss too many or hit a bomb balloon, and you lose a life.
You've got 60 seconds and make every shot count.
Game Rules
Normal balloons give you +10 points. Golden ones give +50. Clock balloons add 5 seconds to the timer.
Bomb balloons take away 20 points and cost you a life.
Balloons get faster and spawn quicker as your score climbs.
Chain hits build a combo multiplier up to 5x.
Notes
The very first few seconds after you hit play, the hand tracking model is still loading and warming up. Give it a moment and once it locks onto your hand, the reticle snaps into place and stays smooth from there.
How I Built It
The whole thing is built in React, a single self-contained component using hooks to manage the game loop, camera stream, and all the real-time state.
Camera input runs through MediaPipe Hands which detects your hand landmarks in real time.
I take the index fingertip coordinate, mirror it, smooth it with exponential filtering to kill the jitter, and map it onto the game canvas as the reticle.
All the sounds: pops, explosions, combos, the background music are synthesised live with the Web Audio API. No audio files, no external assets.
Finally, generate it as a code component and drops straight into the portfolio.
Say hello!
I love discussing product ideas from different perspectives.