11
1 min read
Motion
Everything is 0.3s ease. The drawer, the tooltip, the page transition. Nothing is wrong enough to notice. Nothing is intentional either.
Tokenize duration and easing first. Then compose presets. fast, base, emphasized. You reach for a preset, never a raw transition.
Same three moves on both sides. Everything is 0.3s ease on the left. Named presets on the right — drawer, tooltip, button.
drawer
tooltip
button
drawer0.3s ease
tooltip0.3s ease
button0.3s ease
drawer
tooltip
button
drawermotion.fast
tooltipmotion.base
buttonmotion.emphasized
If the user asked for reduced motion, the duration is zero. That is part of the system, not a later patch.
:root {
--motion-duration-fast: 120ms;
--motion-duration-base: 180ms;
--motion-duration-emphasized: 280ms;
--motion-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
--motion-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
:root {
--motion-duration-fast: 0ms;
--motion-duration-base: 0ms;
--motion-duration-emphasized: 0ms;
}
}:root {
--motion-duration-fast: 120ms;
--motion-duration-base: 180ms;
--motion-duration-emphasized: 280ms;
--motion-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
--motion-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
:root {
--motion-duration-fast: 0ms;
--motion-duration-base: 0ms;
--motion-duration-emphasized: 0ms;
}
}