Mirror Therapy Without the Mirror Box: Treating Phantom Limbs in a Browser Tab

Source: Dev.to

A 1990s Nobel-adjacent therapy, a webcam, and 21 hand keypoints — recreating the mirror-box illusion for phantom limb pain, no hardware required. In the 1990s, neuroscientist V.S. Ramachandran discovered something remarkable: amputees suffering phantom limb pain often felt relief just by seeing their missing limb move again. His apparatus was almost comically simple — a box with a mirror. Put your intact hand in, look at its reflection where the missing hand would be, and move. The brain, watching the “missing” hand obey commands again, often dials the pain down. The limitation was never the science. It was the box: a physical apparatus, used in clinics, hard to scale, impossible to measure. A webcam plus real-time hand tracking can produce the same illusion with better properties: webcam frame → hand landmark model (21 keypoints, on-device) → reflect: phantom[i] = { x: 1 − x, y, z } → render real hand (solid) + phantom twin (ghost) on canvas

The reflection is one line of math. Everything around it is what makes the illusion land: const phantom = real.map(p => ({ x: 1 - p.x, y: p.y, z: p.z }));

The visual treatment matters more than I expected. The phantom hand is rendered as a ghostly cyan skeleton with a translucent palm fill, a “breathing” glow that pulses on a ~3 second cycle, and a fading afterimage trail of its last few frames — it reads as present but ethereal, which is exactly the perceptual story mirror therapy needs to tell. A dashed mirror plane down the center of the frame makes the reflection relationship legible at a glance. Tracking: MediaPipe HandLandmarker (Google’s pretrained model — credit where due), running via WebAssembly with GPU delegate. ~30 FPS on a laptop. Privacy by architecture: every frame is processed on-device. For a medical-adjacent application, “video never leaves your browser” isn’t a feature, it’s a requirement. Lazy loading: the model only downloads when the user clicks “Start the Mirror” — visitors who don’t engage pay zero bandwidth. Lifecycle hygiene: camera tracks stopped and the model closed on unmount; nothing leaks. Because software adds what glass can’t: guided exercise sequences, session tracking, range-of-motion measurement over time (the keypoints are already numbers), and remote delivery to patients who will never visit a clinic with a mirror box. The browser preview demonstrates the core interaction; a WebXR version with a fully rendered 3D limb is the natural next step. Try it (camera optional, on-device only): rs-03.github.io/portfolio-website/demos Source: github.com/rs-03/portfolio-website A demonstration of the interaction concept — not a medical device, not medical advice.