Keep the balloon in the air — and your spirits too!
A playful web game that combines MediaPipe hand tracking with fast-paced, nostalgic fun. Inspired by childhood games and endless arcade classics.
We wanted to create a silly, joyful game that brings back the fun of keeping a balloon in the air — but with a twist!
Our inspirations include:
- Childhood memories of keeping balloons afloat
- Endless arcade games from the 2010s (like Fruit Ninja)
- Early internet aesthetics: Windows XP, early Facebook design, and stylized animations to recapture nostalgia.
The name Keep It Up! serves as a double meaning:
- Keep the balloon in the air
- A cheerful message of encouragement (accompanied by a thumbs up!)
-
🎮 Webcam-Based Gameplay
Control the game with your hands using MediaPipe hand tracking! -
🎈 Balloon Mechanics
Tap the balloon to keep it airborne — let it fall, and it's game over. -
💣 Bombs & Hazards
Watch out for bombs that drop randomly! Touch one, and the game ends. -
🧮 Scoring System
Keep track of your taps and aim for a high score. -
🏆 Leaderboard
Save your scores and compete! View your current and previous scores from the main menu. -
🔊 Settings Menu
Adjust game volume to your liking.
- Launch the game in your browser.
- The webcam captures your hand movements.
- MediaPipe detects your hand landmarks.
- Use your hand to tap the balloon and avoid bombs.
- Once the game ends, save your score and check the leaderboard!
Frontend
- ReactJS
- MediaPipe (for hand detection)
- Custom animations drawn in Photoshop and integrated into React Components
- Game logic and rendering in JavaScript & React
Backend
- Flask (Python)
- SQLAlchemy
- Supabase (PostgreSQL hosting)
The frontend communicates with the backend to store and retrieve scores for the leaderboard.
- Jonathan Xu
- Eric Chang
- Donovan Lee
- Vanessa Li
- CSS
- Flask
- JavaScript
- MediaPipe
- Photoshop
- Python
- React
Thanks to Bitcamp 2025 for the hackathon opportunity!
