Motion Study
A scroll-driven motion piece — pin, parallax, scrub, stagger, reveal. Every frame is bound to the scrollbar and hand-built in the browser. Keep scrolling.
Principle 01 — Depth
Motion is meaning. Speed, delay and easing tell the eye what matters — and in what order.
Pin
Hold one element fixed while the rest of the page scrolls past it — the anchor of every scroll story.
Parallax
Layers moving at different speeds fake depth. The further back, the slower it drifts.
Scrub
Bind an animation's progress directly to scroll position. You are the timeline.
Stagger
Offset sibling animations in time. The eye reads a sequence, not a flash.
Reveal
Fire once, on enter. Content arrives as it earns the viewport.
Principle 02 — Restraint
The best motion is felt, not noticed. Purpose first, spectacle second.
Ease, always
Nothing in the real world starts or stops at constant speed. Linear motion reads as robotic.
Transform & opacity
Animate the two properties the GPU loves. Everything else risks jank.
Respect the vestibular
Honor prefers-reduced-motion — this whole page falls still when asked.
60 frames
Every effect here runs on one requestAnimationFrame loop. One clock, no contention.