UI Foundation
Motion
Duration, easing, micro-interactions, animation playground, system feedback и reduced-motion policy.
Motion tokens
Фиксированная шкала времени
Компоненты не придумывают случайную длительность. Чем крупнее и дальше перемещение, тем больше duration; press всегда быстрее entrance.
Easing
Движение имеет характер, а не случайную кривую
Entrance мягко замедляется; exit быстрее освобождает интерфейс; spring допускается только для небольших акцентных объектов.
cubic-bezier(.2,0,0,1)cubic-bezier(.2,.8,.2,1)cubic-bezier(.16,1,.3,1)cubic-bezier(.7,0,.84,0)Animation playground
Entrance и feedback можно повторить вручную
Примеры не запускаются бесконечно. Review оценивает амплитуду, duration и характер каждого перехода.
Fade up
Scale
✓
Micro-interactions
Hover и focus остаются короткими
Интерактивные элементы реагируют, но не меняют сетку и не требуют движения для понимания состояния.
LiftCard hover
ScaleIcon / compact control
FadeSecondary emphasis
SlideDirectional action
System animations
Loading, skeleton и progress имеют отдельные роли
Бесконечная animation разрешена только когда система действительно ожидает завершения операции.
Loading
Skeleton
Progress
68% · движение подтверждает активный процесс.
Motion budget
Амплитуда ограничена ролью компонента
Большая длительность не делает интерфейс премиальным. Премиальность создаётся точностью, ритмом и отсутствием нервного движения.
| Сценарий | Duration | Distance / scale | Правило |
|---|---|---|---|
| Button press | 90–140ms | 1–2px | Тактильный feedback без layout shift |
| Hover / focus | 140–220ms | 0–4px | Не скрывает focus ring |
| Accordion / dropdown | 220–300ms | По контенту | ARIA state меняется синхронно |
| Modal / drawer | 300–420ms | 16–32px | Focus trap и возврат focus обязательны |
| Hero entrance | 420–620ms | 12–28px | Optional enhancement, один раз |
Reduced motion
Движение — progressive enhancement
Ни один маршрут, CTA или системное сообщение не зависит от animation.
System preference
При prefers-reduced-motion: reduce transitions и keyframes сводятся к практически мгновенному состоянию. Информация и feedback остаются доступны.
Manual review toggle
Кнопка Motion: on/off в header позволяет проверить pack без движения независимо от системной настройки.