Interactive experience - 2026
A neon wireframe room you steer without touching anything: moving your head turns the scene, pinching two fingers grows or shrinks the element at its centre. Face and hand tracking run on the webcam feed, inside the browser, and a sound generated in code answers every gesture.
Runs entirely in the browser: no frame ever leaves your machine.
Two tracking models share one webcam feed and one frame budget: the face drives the view, the hands drive the sphere, and neither can stall a scene that is already rendering every frame. The harder half is honesty. Tracking fails constantly - bad light, a face out of frame, hands resting below the desk - and an interface that simply freezes when it loses you is indistinguishable from one that has crashed.
Nothing starts on its own: an entry screen explains the two gestures - head to explore, pinch to shape - and lets the visitor enter with the camera or with mouse and touch. The webcam is asked for only after that choice. A boot loader follows the real initialisation, calibration included, then the sphere charges up and bursts in a shockwave, in sync with a power-up sound. From there, the head turns the room and the gap between thumb and index grows or shrinks the sphere. Badges report what the tracker actually sees - face, hands, or neither - and an overlay draws the hand it found, so a gesture that fails can be understood instead of retried blindly. Without a usable webcam, the same controls move to pointer and touch: the input changes, the screen never goes blank.
React mounts the interface, Three.js owns the canvas and the render loop. The sphere is a wireframe drawn in a GLSL shader from barycentric coordinates, so every edge keeps the same weight on a curved surface; an Unreal Bloom pass gives the neon its glow. The sound is procedural, built with the Web Audio API with nothing to download: the power-up, an energy tone that follows the sphere, short cues when a hand is found or lost. The 3D engine ships in its own chunk, so a change to the interaction does not make the browser download Three.js again. And the video stays on the machine: MediaPipe runs in the browser through WebAssembly, and no frame is ever uploaded.
Also inThe Art of Speedcubing
