UI Foundation

Motion

Минимальные transitions, feedback animations и обязательный reduced-motion режим.

Motion поддерживает иерархию и обратную связь. Он не используется как декоративная цель. Переключатель в header выключает transitions/animations для ручной проверки.

Motion tokens

Micro-interactions

Hover/focus/active остаются короткими и не вызывают смещение layout.

Lift · 220ms

Scale · 220ms

Fade · 220ms

Slide · 220ms

Async

System animations

Loading и transient feedback используют ограниченные повторения и не блокируют пользователя.

Pulse

Spinner

Shimmer

Tokens

Duration and easing

Единый набор исключает случайные transition durations.

Token	Value	Use
motion-fast	140ms	Color, border, focus.
motion-base	220ms	Button/card lift, menu state.
motion-slow	420ms	Media zoom, large panel transition.
ease-standard	cubic-bezier(.2,0,0,1)	Neutral feedback.
ease-emphasized	cubic-bezier(.2,.8,.2,1)	Spatial movement.

Accessibility

Reduced motion

Система уважает prefers-reduced-motion и имеет ручной review-toggle.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}