thetalhachy/frame-puzzle — explained in plain English
Analysis updated 2026-05-18
Play a hands free puzzle game using webcam gesture controls.
Take a photobooth style snapshot and turn it into a solvable tile puzzle.
Collect finished puzzles into a downloadable film strip image.
Study a simple example of MediaPipe hand tracking in a vanilla JavaScript project.
| thetalhachy/frame-puzzle | kris77z/web-experience-cloner | upvoteclub/upvote-club-mcp-core | |
|---|---|---|---|
| Stars | 42 | 42 | 42 |
| Language | JavaScript | JavaScript | JavaScript |
| Setup difficulty | — | moderate | moderate |
| Complexity | — | 3/5 | 3/5 |
| Audience | vibe coder | developer | developer |
Figures from each repo's GitHub metadata at analysis time.
Frame Puzzle is a small browser game that you control with hand gestures instead of a mouse or keyboard, using your webcam. It runs entirely in the browser and uses a hand tracking library called MediaPipe to see your fingers and turn their movements into actions in the game. To play, you pinch with both hands to frame a scene in front of your camera, holding the pose for three seconds. The app then takes a black and white, high contrast snapshot with a film grain look, similar to an old photobooth picture. That snapshot is chopped into nine tiles and shuffled, turning it into a sliding puzzle. You solve the puzzle by pinching a tile with your fingers and dragging it to the correct spot in the grid. Once the puzzle is solved, making a fist saves it. The tiles then break apart visually and the finished picture is added to a film strip gallery on screen. Each strip can hold up to three finished puzzles. Once a strip is full, or whenever you want, you can download it as a single PNG image, or reset the strip to start collecting again. To try it on your own computer, you run a simple local server command and then open the page in a Chromium based browser such as Chrome or Edge, since the hand tracking needs WebGL support that not every browser handles the same way. Under the hood it is built with plain JavaScript using ES modules, with no framework involved, and it relies on Google's MediaPipe HandLandmarker for detecting hand positions. Visual styling is handled through CSS custom properties, which makes theming the look of the game easier to adjust. It was made by a developer going by the name talha.
A webcam based puzzle game controlled entirely by hand gestures, turning pinch and fist movements into a sliding tile puzzle with a photobooth style snapshot.
Mainly JavaScript. The stack also includes JavaScript, MediaPipe, CSS.
Mainly vibe coder.
This repo across BitVibe Labs
Verify against the repo before relying on details.