UI Foundation
Motion
Duration, easing, calibrated Phase 1 interaction candidates, review-only entrance 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 можно повторить вручную
Это изолированные entrance/feedback specimens для оценки характера easing. Они не являются hover-токенами компонентов и не должны переноситься в Phase 1 как значения по умолчанию.
i
Review-only playground: полные переходы состояния могут начинаться с opacity 0 или большего расстояния. Нормативные hover/focus значения находятся ниже, в блоке Phase 1 interaction candidates.
Fade up
Scale
✓
Phase 1 interaction candidates
Hover и focus используют откалиброванную амплитуду
Это видимые кандидатные значения для Phase 1, а не усиленная демонстрация. Они не меняют layout, не скрывают focus ring и остаются в пределах motion budget.
LiftCard hover / focustranslateY −4px · 220ms · candidate
ScaleIcon / compact controlscale 1.04 · 220ms · candidate
FadeSecondary emphasisopacity 0.82 · 220ms · candidate
SlideDirectional actiontranslateX 6px · 220ms · candidate
Resolved clarification: v0.2.1 показывала усиленные review amplitudes (−10px / 1.12 / 0.36 / 28px) в блоке, который можно было принять за production defaults. v0.2.2 использует откалиброванные candidate values. Реальный button hover по-прежнему составляет −2px; card hover — до −4px.
Interaction states
Hover, focus, press, disabled, success и loading
Фактические состояния компонентов показаны отдельно от entrance playground. Button hover использует −2px; card hover — до −4px; focus остаётся видимым независимо от transform.
Небольшой 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 / opacity | Правило |
|---|---|---|---|
| Button press | 90–140ms | 1–2px / scale 0.99 | Тактильный feedback без layout shift |
| Hover / focus | 140–220ms | lift 0–4px; scale 1.00–1.06; slide 0–8px; opacity ≥ 0.80 | Не скрывает focus ring и не выглядит disabled |
| Accordion / dropdown | 220–300ms | По контенту | ARIA state меняется синхронно |
| Modal / drawer | 300–420ms | 16–32px | Focus trap и возврат focus обязательны |
| Hero entrance | 420–620ms | 12–28px; opacity 0→1 допустима только для entrance | Optional enhancement, один раз |
Review resolution
Замечание классифицировано как clarification, а не новый визуальный цикл
Фактические component states уже соответствовали сдержанному budget, но подписи v0.2.1 недостаточно явно отделяли усиленный specimen от production candidate. Патч исправляет и формулировку, и публичную амплитуду примеров.
Actual states
Buttons −2px; cards до −4px; icon shift 3–6px; gallery scale 1.025.
Visible candidates
Lift −4px; scale 1.04; fade 0.82; slide 6px.
Live verification
Короткая проверка остальных optional animations перед операционной фиксацией baseline.
Reduced motion
Движение — progressive enhancement
Ни один маршрут, CTA или системное сообщение не зависит от animation.
System preference
При prefers-reduced-motion: reduce transitions и keyframes сводятся к практически мгновенному состоянию. Информация и feedback остаются доступны.
Manual review toggle
Кнопка Motion: on/off в header позволяет проверить pack без движения независимо от системной настройки.