01
EXPERIMENT · EASING-OBSERVATORY
Easing Observatory
Compare three nonlinear easing curves on one track, adjust duration, and replay the movement.
- Status
- Live
- Recorded
Static preview · easing-curve-track
Easing Observatory
The interactive controls are loading.StartFinish
This experiment records three motion rhythms used across the site. One point travels along a fixed track so the start, acceleration, braking, and arrival can be compared directly.
When reduced motion is enabled, the point moves directly to the destination while curve and duration controls remain available.
Curve parameters＋
Site components read these values from the same design tokens.
--ease-cinematic: cubic-bezier(.22,.72,.18,1);
--ease-spring: cubic-bezier(.16,1.18,.24,1);
--ease-snappy: cubic-bezier(.2,.82,.22,1);