Gesture Clash

I wanted to build a game that didn't need a keyboard, mouse, or even a touchscreen. The idea was born from the simple frustration of trying to play a casual game while your hands are full—literally. Gesture Clash turns your webcam into the controller: you make Rock, Paper, or Scissors gestures in front of the camera, and the AI reads your hand in real-time. I leaned into a brutalist, high-contrast visual style to give it that raw arcade energy.

I learned how to integrate MediaPipe Tasks Vision for robust, on-device hand gesture recognition without ever sending video to a server, and I used Tone.js to synthesize all sound effects procedurally so no heavy audio assets were needed. The biggest challenge was a sneaky global CSS overflow: hidden buried in the base template that completely disabled scrolling, hiding the Tournament Mode button on smaller screens. Finding and removing that restriction was the "aha" moment. I also had to carefully manage Tone.js audio scheduling to prevent crashes when rapid countdown beeps overlapped.

Built With

• framer-motion
• mediapipe-tasks-vision
• medo
• react
• tailwind-css
• tone.js
• typescript
• vite
• zustand