| 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
