whatisgithub

What is frame-puzzle?

thetalhachy/frame-puzzle — explained in plain English

Analysis updated 2026-05-18

42JavaScriptAudience · vibe coder

In one sentence

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.

Mindmap

mindmap
  root((frame-puzzle))
    What it does
      Gesture controlled game
      Webcam snapshot puzzle
      Film strip gallery
    Tech stack
      JavaScript
      MediaPipe
      CSS
    Use cases
      Hands free gaming
      Photobooth snapshots
      Downloadable strips
    Audience
      Vibe coders
      Hobby game makers
      Webcam tinkerers

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Play a hands free puzzle game using webcam gesture controls.

USE CASE 2

Take a photobooth style snapshot and turn it into a solvable tile puzzle.

USE CASE 3

Collect finished puzzles into a downloadable film strip image.

USE CASE 4

Study a simple example of MediaPipe hand tracking in a vanilla JavaScript project.

What is it built with?

JavaScriptMediaPipeCSS

How does it compare?

thetalhachy/frame-puzzlekris77z/web-experience-clonerupvoteclub/upvote-club-mcp-core
Stars424242
LanguageJavaScriptJavaScriptJavaScript
Setup difficultymoderatemoderate
Complexity3/53/5
Audiencevibe coderdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

So what is it?

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.

Copy-paste prompts

Prompt 1
Explain how the pinch and fist gestures control the game in frame-puzzle.
Prompt 2
Show me how MediaPipe HandLandmarker is used to detect hand positions in this project.
Prompt 3
Help me run frame-puzzle locally and troubleshoot WebGL browser support.
Prompt 4
How would I add more tiles or a bigger grid to the puzzle in this codebase?

Frequently asked questions

What is frame-puzzle?

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.

What language is frame-puzzle written in?

Mainly JavaScript. The stack also includes JavaScript, MediaPipe, CSS.

Who is frame-puzzle for?

Mainly vibe coder.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.