Head Tracking Demo Browser

How the Head-Tracked Parallax works

Head tracking demo browser: what to know first

A flat screen normally shows the same picture no matter where you sit. Head-tracked parallax breaks that rule: the picture is redrawn for the position of your head, so the screen behaves like a window into a space behind the glass. In 2007 Johnny Lee demonstrated the idea with a Wii remote clipped to a pair of glasses, and the video became one of the most watched technology demos of its year. This page does the same thing with nothing but a webcam and a face-tracking model running in your browser.

Why head-tracked parallax looks 3D

When you move your head, nearby objects slide across your view faster than distant ones. That is motion parallax, and it is one of the strongest depth cues the brain has. Stereo vision, the difference between your two eyes, fades as a depth cue beyond a few metres because the eyes are only about 6.3 cm apart; motion parallax keeps working at any distance as long as you move. It is how a one-eyed person judges depth, and how a pigeon does it by bobbing its head.

The page fakes it with four layers of discs. Each layer is shifted opposite to your head movement by an amount proportional to how near it is meant to be: the nearest layer moves the most, the farthest barely at all. Because the shift follows your own motion, your brain reads the layers as sitting at different depths, even though every disc is flat and exactly the same distance from your eyes.

Where the technique is used

• Head-coupled displays. Some glasses-free 3D monitors and experimental laptop screens track the viewer's eyes and redraw the image for that viewpoint, the same principle with a stereo image added.
• Phone wallpapers. The "perspective zoom" parallax on phone home screens uses the gyroscope rather than a camera, but moves layers the same way.
• Simulators and games. Flight and racing simmers use infrared head trackers so that turning the head slightly turns the view in the cockpit.
• Virtual production. Film studios display backgrounds on LED walls that are redrawn from the camera's position, so the set shifts in correct perspective as the camera moves.
• Web design. Scroll-driven parallax on websites uses the same layered shift, driven by the scroll position instead of your head.

How to read the result

The only readout is Head, your position in the camera frame, as a percentage across and down from the centre. Zero across and zero down means you are centred; +50 % across means you are halfway from the centre to the edge of the frame. It shows Not in view when the tracker loses your face, which usually means poor light, turning too far or leaving the frame. The green square on the camera preview marks the point being tracked: the midpoint between the outer corners of your eyes.

The layers follow that point with some smoothing, so tracking jitter does not make the scene tremble. The cost is that a sudden move settles over a few frames rather than snapping into place.

Getting the best illusion

• Sit back. Around arm's length or a little more works best. Too close and small movements take you out of the frame; too far and your head moves only a small fraction of it.
• Adjust strength to distance. The strength slider scales the whole effect from 10 to 100. The further you sit, the smaller your movement looks to the camera, so raise it. If the near layer swings wildly, lower it.
• Close one eye. Your two eyes still tell your brain the screen is flat. With one closed, only motion parallax is left, and the depth becomes much more convincing.
• Move slowly and sideways. Slow side-to-side and up-and-down movements give the cleanest effect. Nodding and turning your head rotate the face rather than move it.
• Light your face from the front. Tracking is most stable with even light on your face and no bright window behind you.
• Hide the preview. Untick Show camera preview once tracking is steady; the thumbnail in the corner is a reminder that the screen is flat.

Mirror and why direction matters

The Mirror toggle is on by default, so moving your head left reveals more of the right side of the scene, exactly as looking through a window would. Untick it and the coupling flips: the scene moves the wrong way, and the illusion collapses immediately. It is a quick demonstration that the depth comes from your brain predicting how the world should move, not from the picture itself.

Limits

The effect works for one viewer. Anyone looking over your shoulder sees a scene sliding for no reason, which is the main reason head-coupled perspective never became a standard display feature. The page tracks only left-right and up-down; a full head-coupled display also tracks distance so the view widens as you lean in, but a webcam estimate of distance from face size is noisy enough to make the scene visibly breathe.

The face model runs in WebAssembly in the page and is downloaded once, then cached. The camera stream is never uploaded. The only data the page uses is a pair of head coordinates, replaced every frame. Snap saves the current frame as an image. For more face-tracking effects, try the face mesh filter.

Related tools