PS
Gesture
✍️Gesture · Drawing

Paint into the air with your finger.

Camera on, index finger up — a neon-red laser line follows your fingertip with a fine spray of sparks along the stroke. Pinch grabs existing drawings and moves them. Open palm erases.

MediaPipe Hands · Canvas 2D · webcam permission required

01

Allow the camera.

This page runs entirely in your browser. The webcam is processed locally by MediaPipe — no frame ever leaves your device. Landscape mode is recommended on mobile.

02

What happens here.

Three gestures trigger three modes. The skeleton layer renders the 21 detected hand landmarks in cyan so you see what the model sees.

MediaPipe sees 21 points.

From each webcam frame the model extracts 21 landmarks per hand — wrist, thumb, four fingers with four joints each. From those points, poses can be inferred with a few vector tests.

Three poses, three tools.

Index finger only → brush. Thumb and index pinched together → drag. All fingers open → eraser. Transitions are deliberately hard so nothing is accidentally erased.

Where the data goes.

Nowhere. The pipeline runs on-device in your browser, the canvas is local-only. Close the tab and it's gone — no cloud, no tracking.

What could come next.

Multiple hands at once, gesture-based colour pick, depth via Z-coord, PNG export. This page is a sandbox — extensions land in follow-up subpages.