Mirror, Mirror,

• 

  Landing/Game Join Screen

• 

  Drawing Game

• 

  Ending Recap Screen

Inspiration

I was inspired by games that bring me and my friends closer together, like Jackbox, Skribbl.io, and Gartic Phone. Games where I collaborate with my friends always leave me feeling more connected, but I wanted to add a new twist: get everyone up off the couch and drawing in the air in front of each other, and work together to beat the AI mirror guesser.

What it does

Mirror, Mirror is a multiplayer collaborative game in which an artist draws a prompt and tries to get their friends to guess it before the AI Mirror does. Everyone joins by scanning a QR code and enters their name in order to receive prompts when they're the artist, or write in their own custom prompts. The room shouts guesses while a listener transcribes them. Every five seconds, the Mirror looks at the canvas and makes its own guess out loud on screen ("Is it… a potato?"). The first correct guess wins the round, Kingdom vs. Mirror. When the room laughs, the game saves a short clip of that moment. At the end it plays them back in a portrait gallery to be able to be downloaded and reshared. The videos are all local and never saved.

How we built it

I built this application with Vue 3 with Vite, served by a single Node.js server that runs the game and keeps everyone in sync over WebSockets. To track hand movements, I used MediaPipe Hand Landmarker, running entirely in the browser. I used Meta's Muse Spark, to be the guesser based on a cropped snapshot of the drawing. Muse Spark also does the lenient answer judging. Meta's Muse Voice Transcribe, which turns a few seconds of room audio at a time into text during guessing windows. Each line is judged like a guess. To capture laughs, MediaPipe's YAMNet audio classifier detects that the room is laughing, from sound alone. A rolling in-memory recording keeps only the moments around each laugh. As for moving the game to include your phone, a Cloudflare quick tunnel lets phones join from any network.

Challenges we ran into

Campus and guest Wi-Fi block devices from talking to each other, so phones couldn't reach the laptop at all. I added a built-in Cloudflare tunnel so phones join over the internet instead. Recording highlight clips was harder than expected. Browser video recordings can only start playing at a keyframe, so a simple rolling buffer produces clips that won't play. I recorded short self-contained segments back to back and stitch the ones around each laugh into a clip. The Mirror has to be fast to be fun. A guess every five seconds only works if the model answers quickly, so I built a latency test harness and used the lowest reasoning setting.

Accomplishments that we're proud of

I'm really proud of the project I've made by myself. I've also never worked with computer visualization, so it was a very cool experience being able to work with the camera and combine my love for art and programming at once. While facing the challenge of bridging phone and laptop together, I realized that Cloudflare had a product that worked perfectly for my challenge, and so being able to recognize the problem and integrate that was rewarding.

What we learned

On the technical side, this was my first time working with computer vision, and I learned how much can run directly in the browser: camera and microphone access, on-device hand tracking with MediaPipe, and audio classification without sending anything to a server. I also learned how video recording actually works under the hood, since clips can only start at a keyframe, which completely changed how I built the highlight reel. Getting phones to talk to my laptop taught me more about networking than I expected.

I also learned a lot about designing with AI. My first ideas used AI as a helper, but the game only became fun once the AI turned into an opponent. I learned that speed is a game design problem, too: a smart guess that arrives too late isn’t fun, so measuring latency mattered as much as the model’s accuracy.

What's next for Mirror, Mirror

I want to create a way for Mirror, Mirror to become a hybrid game where online players can play as well. Most online games don't show your face, but with the computer vision aspect, you can see the person's face you're playing with, even if they're far away. Along with that, I wanted to add different game modes and modifiers, such as random rounds where the color or brush strokes randomly change, or maybe a different body part to draw with each round such as your nose or elbow, to switch things up in the game.

Built With

• mediapipe
• muse
• vite
• vue