hand-gesture-fire

name	hand-gesture-fire
description	Instructions and reference patterns for managing hand gesture tracking, MediaPipe vision integration, 2D/3D canvas rendering, and fire particle effects.

Hand Gesture Fire Skill

This skill provides domain knowledge and code patterns for maintaining and expanding hand gesture effects in this repository.

Key Capabilities

• Hand Gesture Tracking: Initializing @mediapipe/tasks-vision HandLandmarker on GPU.
• Particle System Maintenance: Tuning 2D HTML5 particle emitters, flame cores, upward buoyancy draft, and ember sparks in lib/particle-system.ts.
• Coordinate Mirroring: Translating 2D/3D MediaPipe normalized landmarks (x, y) to canvas coordinates, handling selfie webcam horizontal mirroring (1 - x) * width.

Code Patterns

MediaPipe Handedness Extraction

const handednessCat = results.handedness[i]?.[0];
const categoryName = handednessCat?.categoryName || handednessCat?.displayName || '';

Destination-Out Canvas Fading

ctx.save();
ctx.globalCompositeOperation = 'destination-out';
ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
ctx.restore();

LERP Landmark Smoothing

const smoothedX = currentX + (targetX - currentX) * 0.45;
const smoothedY = currentY + (targetY - currentY) * 0.45;

Performance Verification

Always verify changes with build compilation:

bun run build