Inspiration
The arcade game Dance Dance Revolution. We grew up playing DDR at arcades and pizza places, but the magic of that experience has always been locked behind expensive arcade machines or bulky dance pads. We wanted to recreate that same nostalgic full-body rhythm game feeling without any of the hardware investment or bulky equipment.
What it does
Hack Hack Revolution is a browser-based DDR-style rhythm game that uses your device's camera to track your feet and body in real time. Before playing, the game walks you through a short tutorial. You pick a song and play a full rhythm game using your whole body, scored and timed just like the classic arcade experience.
How we built it
We built the game using React and TypeScript with Vite as our build tool. Pose detection and foot tracking runs on MediaPipe, which gives us real-time body landmark data directly in the browser. We built a custom gesture engine on top of MediaPipe that handles calibration, step detection, and directional matching. Player scores and leaderboards are stored and synced using Supabase. The entire thing runs client-side in the browser with no native app required.
Challenges we ran into
The hardest part of the project was making foot tracking feel accurate and responsive enough to actually be fun. Raw MediaPipe landmark data is noisy, and translating body movement into reliable directional inputs turned out to be a much deeper problem than we expected. Forward and backward steps were especially difficult because a front-facing camera cannot see depth well, so we had to rethink our detection approach entirely and build a calibration system that learns each player's unique movement signature rather than relying on fixed thresholds. Merge conflicts from parallel development during the hackathon were also a challenge we had to work through quickly.
Accomplishments that we're proud of
We are proud that the game actually works and feels fun to play. Getting real-time full-body input working reliably in a browser in a single weekend is something we did not take for granted. It was extremely difficult to work through the challenged of depth detection. However after lots and lots of trial and error we are proud to have a controller system that works and feels smooth.
What we learned
Our team was of variable experience levels so we all got to learn new things at different levels. Some of us learned how to work with a team using git, and others learned computer vision input. Overall the entire process was a great learning experience that we will take with us even if we don't win any prizes.
What's next for Hack Hack Revolution
We want to expand the song library, add multiplayer so two people can play side by side using the same camera, and continue refining the foot tracking to support more complex step patterns.
Built With
- claude
- mediapipe
- react
- supabase
- typescript
- vite
Log in or sign up for Devpost to join the conversation.