A hand-gesture controlled photobooth puzzle game that runs entirely in your browser. No installation, no backend, no frameworks. Just your hands and a webcam.
You use your index fingers to frame the photo, pinch to capture, then solve a 3×3 puzzle with your fingers. When you complete it, it shatters into a polaroid that gets saved to your strip. Built with zero dependencies — just vanilla JavaScript and browser APIs.
The puzzles are black and white while you solve them, then reveal as full colour when saved. Camera flash included. Each photo gets a polaroid border with the date and number stamped on it.
Takes about 2 minutes. You need VS Code and Chrome — that's it.
Open your terminal and run these two commands:
Open the puzzlecam folder in VS Code. Then install the Live Server extension — search for it in Extensions (the squares icon on the left sidebar).
Look at the bottom right corner of VS Code. Click Go Live. Your browser will open automatically.
Chrome will ask for camera permission. Click Allow. The hand tracking model (~10MB) downloads on first load — needs internet once. After that it works offline.
No mouse, no keyboard. Your hands do everything.
| Gesture | What it does |
|---|---|
| Raise both hands | Camera starts tracking — the space between your index fingertips becomes the photo frame |
| Pinch both hands together | Locks the frame and starts the 3 second countdown |
| One hand pinch over a piece | Picks up and drags that puzzle piece |
| Release the pinch near correct spot | Piece snaps into place automatically |
| Closed fist (hold) | Saves the completed puzzle / resets the board |
Puzzles are black and white while solving. Make a fist and they save as full colour photos.
White screen flash at the moment of capture. Feels like a real photobooth.
Each photo gets a white polaroid border with the date and number stamped at the bottom.
Countdown beeps, piece snap click, shatter burst, and a completion chime. All generated in code — no audio files.
Every solve is recorded automatically. Download it as a WebM video from the sidebar.
Complete 3 puzzles and a full photo strip pops up inside the game. Download as PNG.
Subtle dark edges on every photo for that classic photobooth look.
No React, no npm, no build step. Pure JavaScript, HTML, and CSS. Runs in one browser tab.
I would genuinely love to see your photobooth strip. Tag @aiwithunnati on Instagram — have fun with it!
The full source code is on GitHub. Free to use, modify, and share. MIT licence.