SteevePommier
Theme
Menu background
Background pattern
Reveal
Reveal size 10
Density 50
Colour
Menu position
Analytics

Hand tracking v0 — Move

Neon balls idle in a walled arena until a webcam hand, redrawn as a fat hue-cycling ribbon, wades in and shoves them aside by pure collision.

2dtypographyinteractivehand-capturemediapipeiridescent

A crowd of glowing, concentric-ringed balls drifts inside an invisible walled arena. When a hand shows up on the webcam it is redrawn as a fat, hue-cycling ribbon that wades through the crowd, and the balls skid off it with momentum, each leaving a short fading trail.

MediaPipe hand landmarks are read off the camera in a worker, and every frame the tracked points are rebuilt as static circular bodies in a Matter.js world — the drawn hand and the physical obstacle are the same points. Balls and ribbon are painted with the same layered neon strokes into buffers that fade a little each frame, which is where the trails come from. This first version applies no forces at all: contact does everything.