13 / hand_debug

// render

Glow 18
Joint Size 7
Opacity 85

// background

Scanlines 30

// tracking

Smooth 5
SEARCHING…
🤲

Hand Puppet Demo

Raise both hands to puppet a silhouette character. Strings connect your fingertips to the marionette — drop your hands to watch it ragdoll.

13 LIVE

Hand Puppet Demo

Raise both hands in front of your webcam. Ten strings — one per fingertip — connect to a backlit silhouette marionette. Thumb and pinky control the shoulders and head, index fingers drive the wrists, middle fingers pull the knees, ring fingers hold the ankles.

Drop your hands and the puppet ragdolls under Verlet physics with stick constraints. When hands are tracked a walk cycle blends in automatically. The underlying WebGL2 skeleton glow and hex-grid background are still rendering beneath the puppet layer.

MediaPipe Hands Verlet Physics WebGL2 Ragdoll Canvas 2D Real-time

// controls

H Toggle UI visibility
F Toggle fullscreen
Glow Bone glow softness — higher = wider spread
Joint Size Radius of landmark indicators
Opacity Overall skeleton opacity
Scanlines Background scanline intensity
Smooth Landmark lerp — lower = snappier puppet
CAM Toggle live webcam overlay visibility