react
精选
react
React is a JavaScript library for building user interfaces with declarative, component-based, and cross-platform design.
AI 仓库情报摘要
FR-AI / ANALYSIS为什么值得关注
它将实时手部追踪与经典拼图机制融合在一个网页应用中，依靠MediaPipe和原生JavaScript实现，并配有独特的胶片条输出功能。
适合谁使用
- 探索手势交互的Web开发者
- 寻求新颖互动方式的拼图爱好者
- 对MediaPipe和摄像头项目感兴趣的创意编程者
- 想要趣味性免触控照片编辑的用户
典型使用场景
- 具有手势控制的互动艺术装置
- 用于手部追踪与计算机视觉的教学演示
- 利用摄像头互动的社交或派对游戏
- 基于手势的照片编辑与拼贴原型
项目优势
- 借助MediaPipe HandLandmarker实现精确的手部追踪
- 使用原生JavaScript，无框架依赖，轻量且易于本地运行
- 新颖的交互流程（框选、拍摄、解谜、保存），视觉反馈清晰
- 最多容纳3张照片的胶片条画廊，支持PNG下载
使用前须知
- 需要WebGL和摄像头支持，仅能在Chrome或Edge浏览器中运行
- 只支持固定的3×3拼图尺寸
- 每张胶片条最多3次拍摄，重置前无法继续添加
README 快速开始
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
相关仓库与替代方案
根据分类、Topic 和编程语言匹配的相似项目。
tandpfun
精选
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
精选
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.