Experiment 01 · Starter

Mouse Parallax — depth from a single cursor.

A layered composition — background, shapes and typography — each plane drifting at its own speed. Subtle 3D built from nothing but cursor position.

Technique · Mousemove + parallax layers Hint · Move your cursor Level · 01 / 10
Demo 01 · Mouse Parallax
Technique

Layers moving at different speeds = depth

Each of the seven layers normalises the pointer to −1…1, scales it by its own depth factor (0.05 to 0.38) and smooths its motion with frame-rate independent damping.

▤

Depth factors

Background drifts least (f = 0.05), the accent chip most (f = 0.38). The wider the spread, the stronger the illusion of space.

◎

Damped smoothing

Every layer eases toward its target with damp(), so motion feels weighty. Foreground layers trail slightly more for a parallax lag.

All values write straight to transform — no layout reads per frame.

Keep exploring

More motion experiments