Easings
An easing curve is a decision about where the eye is during the movement. Ease-in delays the exact moment a person is watching for.
Interactive transitions use `cubic-bezier(0.2, 0, 0, 1)`. Deliberate entrances use a strong ease-out, `cubic-bezier(0.23, 1, 0.32, 1)`. On-screen movement between two places uses a strong ease-in-out. The collection's reflow and flight share one curve, `cubic-bezier(0.3, 0, 0.1, 1)`, which leaves promptly and spends its time arriving. Bounce is always zero; overshoot is a personality this work does not have.
- Entering or exiting: ease-out; moving on screen: ease-in-out; hover and colour: ease
- Never ease-in on a UI element
- Springs: duration 0.3, bounce 0
Durations: 100–160ms for press feedback, 125–200 for tooltips, 150–250 for dropdowns, 200–500 for modals and drawers. UI stays under 300ms unless it is a spatial move that keeps orientation, where 500–800ms and interruptible is right.