Face Parallax

Move your head to look around a layered 3D scene. Your face position drives head-coupled perspective — like looking through a window.

TRACKING
09 / face_parallax

// parallax

depth 80
smooth 8
layers 6
speed 0.30

// cube scale

x scale 1.00
y scale 1.00
z scale 1.00
09 LIVE

Face Parallax

Your webcam tracks your face position and translates it into head-coupled perspective — the screen becomes a window into a layered 3D scene. Move your head left and the scene shifts to reveal what's on the right, lean closer and layers spread apart.

Uses MediaPipe Face Detection running entirely in-browser via TensorFlow.js. Each scene is composed of procedurally generated parallax layers with different depth multipliers, creating a convincing illusion of depth without WebGL or 3D engines.

Face Detection MediaPipe Head-Coupled Perspective Parallax Layers Canvas 2D Procedural Generation

// controls

Move head Shift your head left/right/up/down to look around the scene.
depth Maximum parallax displacement in pixels. Higher = more dramatic depth effect.
smooth Smoothing factor for face tracking. Higher = less jitter, more lag.
F Toggle fullscreen mode.
H Hide / show all UI controls.