Flame Launcher

Browser-only gesture-positioned flame effect built with Next.js, TypeScript, MediaPipe Tasks Vision, and Canvas 2D.

Run

npm install
npm run dev

Open http://localhost:3000, click 启用摄像头, then allow camera access.

Interaction

• Flame is enabled by default after opening the camera.
• Use the main switch to enable or disable all flame effects.
• When enabled, choose one effect: 普通, 火球, or 环绕.
• Open palm shows the selected palm effect.
• One extended finger always shows fingertip flame.
• Fist, pinch, idle, or no hand means no flame.

Recognition

• Hand landmarks: @mediapipe/tasks-vision JavaScript package, running fully in the browser.
• Gesture labels: rule-based TypeScript logic in lib/gestureRecognition.ts.
• Camera frames stay local and are not uploaded.

Check

npm run lint
npm run build