Head-Tracked 3D Parallax Viewer — Webcam Head Tracking

Live Demos — click to launch

🦾

3D Object Viewer

Camera orbits around a fixed 3D object as your head moves. Left/right to see sides, up/down for top/bottom. Lean closer to zoom in. Loads an SO-101 robot arm by default — drop in any GLB or STL file.

Orbit cameraProximity zoomGLB + STL loaderSO-101 robot arm

Launch Demo

🏛️

Room Viewer

Full 3D room parallax. 6 procedural room presets, 9 real-world HDRI environments, 20 scene models. Motion presets for desktop and projector.

Room parallaxHDRI lightingMotion presets

Launch Demo

🛍️

Floating Product Cards

CSS 3D cards at different depth layers. Near cards shift most, far barely move. No WebGL — pure CSS, embeddable in any product page.

CSS 3D onlyNo WebGLEmbeddable

Launch Demo

🌀

Portal Room

A glowing circular portal into a Three.js corridor. Head controls viewing angle through the portal — floating shapes, pillars, coloured lights beyond.

Portal effectCSS clip maskThree.js

Launch Demo

🏗️

Staircase Depth

Stone staircase descending into a glowing corridor. Head movement changes viewing angle across the full 3D scene. Drag the sensitivity dial to adjust.

Three.js sceneDepth lightingSensitivity dial

Launch Demo

👁️

Gaze Laser System

Face orientation drives eye lasers into a 3D cube — a hands-free selection cursor. Dual-signal gaze fusion: cheek depth + nose offset for accuracy.

Gaze trackingSelection systemHands-free

Launch Demo

How It Works

📷

MediaPipe FaceMesh

478 facial landmarks at 25–30fps entirely in-browser via WebAssembly. No server. No data leaves your device.

🧮

Spherical Orbit

Head X/Y mapped to yaw/pitch. Camera position from spherical coordinates, always looking at object centre. Object stays fixed.

🔍

Proximity Zoom

Inter-ocular distance as depth proxy. Leaning in narrows FOV — mirrors physically inspecting something up close.