Motion
Motion explains a change. It never delays an action.
Shared tokens
Product UI finishes in under 300ms and uses one set of durations and easing curves.
Motion tokens
--duration-fast: 120ms;
--duration-normal: 180ms;
--duration-deliberate: 280ms;
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
--motion-press-scale: 0.98;Reduced motion
With prefers-reduced-motion, travel, scale and loops are removed and the complete state appears immediately. A change of preference during motion cancels it.
Marketing versus product
Showcase blocks may be more expressive. Product components stay calm: hover and press feedback, short overlay entrances, and moving selection indicators.