react
Featured
react
React is a JavaScript library for building user interfaces with declarative, component-based, and cross-platform design.
AI repository intelligence
FR-AI / ANALYSISWhy it is worth attention
It combines real-time hand tracking with a classic puzzle mechanic in a single web app, using MediaPipe and vanilla JS, with a unique film-strip output feature.
Who it is for
- Developers exploring gesture-based web interfaces
- Puzzle game enthusiasts seeking novel interaction
- Creative coders interested in MediaPipe and webcam projects
- Users looking for a fun, hands-free photo manipulation tool
Use cases
- Interactive art installations with gesture controls
- Educational demo for hand tracking and computer vision
- Social or party game that uses webcam for interaction
- Prototype for gesture-based photo editing and collage
Strengths
- Uses MediaPipe HandLandmarker for accurate hand tracking
- Vanilla JS with no framework—lightweight and easy to run locally
- Novel interaction flow (frame, capture, solve, save) with clear visual feedback
- Film strip gallery that allows up to 3 captures and PNG download
Considerations
- Requires WebGL and webcam—only works in Chrome or Edge
- Only supports a fixed 3×3 puzzle size
- Limited to 3 captures per film strip before needing reset
README quick start
Frame Puzzle
A hand-gesture-controlled puzzle game using your webcam and MediaPipe.
Frame a scene with both hands (pinch), solve the 3×3 puzzle by dragging pieces with pinch gestures, then fist to save. Captures build up in a film strip gallery! download the strip when it's full.
How it works
- Frame — Pinch with both hands to define a capture area. Hold for 3 seconds.
- Capture — A photobooth-style snapshot (B&W, high contrast, film grain) is taken.
- Solve — The image is shuffled into 9 tiles. Pinch a tile and drag it to its correct position.
- Save — Make a fist to save the completed puzzle. The tiles shatter and the result lands in the film strip.
- Strip — Up to 3 captures per strip. Download the full strip as PNG or reset.
Run locally
npx serve .
Open the URL shown in your terminal. Chrome or Edge recommended (requires WebGL for MediaPipe).
Tech
- MediaPipe HandLandmarker — hand tracking
- Vanilla JS (ES modules) — no framework
- CSS custom properties — theming
made by talha
Related repositories
Similar projects matched by category, topics, and programming language.
tandpfun
Featured
wardrobe
A GPT‑image powered app that extracts individual garment cutouts from photos, organizes them into a digital wardrobe, and generates modeled outfit previews.
mshumer
Featured
Claude-of-Duty
A browser-based first-person shooter built entirely with procedural generation and orchestrated AI agents, featuring 55k lines of Three.js/WebGL2 code and no art assets.