Paint with hands — a real-time generative art experience
Visitors allow their camera and raise their hands in front of the screen. Each hand turns into a brush of light: the palm and all five fingertips spawn soft, colorful blooms that fade from a warm golden core into pink, violet, and deep blue against black. Moving your hands leaves flowing, liquid-like trails, and pinching your thumb and index finger together triggers a burst of light. You can clear the canvas at any time or export your creation as a PNG.
Under the hood, the project uses MediaPipe Hands (loaded from a CDN) to track up to two hands and twenty-one points per hand. Everything is drawn on a double HTML5 canvas — a persistent paint layer plus a subtle noise overlay — with position smoothing, a 22-frame trail history, and an offscreen blur pass to give the motion that fluid, watery feel. A lean animation loop and a capped pixel ratio keep it running smoothly.
The whole thing was designed and iterated inside Framer with an AI agent: shaping the creative direction (concept, color palette, branding), building the interactive code component around MediaPipe, tuning the look over many passes (blur, fade, trails, pinch effects), and finally cleaning up the interface and default settings.
Paint with hands — a real-time generative art experience
Visitors allow their camera and raise their hands in front of the screen. Each hand turns into a brush of light: the palm and all five fingertips spawn soft, colorful blooms that fade from a warm golden core into pink, violet, and deep blue against black. Moving your hands leaves flowing, liquid-like trails, and pinching your thumb and index finger together triggers a burst of light. You can clear the canvas at any time or export your creation as a PNG.
Under the hood, the project uses MediaPipe Hands (loaded from a CDN) to track up to two hands and twenty-one points per hand. Everything is drawn on a double HTML5 canvas — a persistent paint layer plus a subtle noise overlay — with position smoothing, a 22-frame trail history, and an offscreen blur pass to give the motion that fluid, watery feel. A lean animation loop and a capped pixel ratio keep it running smoothly.
The whole thing was designed and iterated inside Framer with an AI agent: shaping the creative direction (concept, color palette, branding), building the interactive code component around MediaPipe, tuning the look over many passes (blur, fade, trails, pinch effects), and finally cleaning up the interface and default settings.