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 остаются короткими
Интерактивные элементы реагируют, но не меняют сетку и не требуют движения для понимания состояния. Карточки доступны с клавиатуры: наведите курсор или установите focus.
LiftCard hovertranslateY −10px · 220ms
ScaleIcon / compact controlscale 1.12 · 220ms
FadeSecondary emphasisopacity 0.36 · 220ms
SlideDirectional actiontranslateX 28px · 300ms
Interaction states
Hover, focus, press, disabled, success и loading
Состояния показаны отдельно, чтобы review не зависел от случайной последовательности действий и не путал feedback с декоративной анимацией.
Небольшой lift и elevation без layout shift.
Контрастный ring не заменяется hover-эффектом.
Короткая тактильная реакция на pointer/touch.
Состояние читается без motion и сохраняет подпись.
Feedback меняет семантический цвет и текст без изменения ширины.
Кнопка блокирует повторную отправку и показывает progress.
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 без движения независимо от системной настройки.