NurOSNupek

Движение

Длительности и кривые переходов Nupek, поведение при prefers-reduced-motion.

Движение в Nupek подтверждает состояние - наведение, фокус, открытие панели - и не привлекает к себе внимание само по себе.

Длительность и кривая

ТокенЗначениеПрименение
--motion-duration-fast120msНаведение, изменение цвета границы
--motion-duration-base200msРаскрытие панели, смена темы
--motion-easingeaseЕдинственная кривая во всей системе

Все переходы укладываются в диапазон 120-200ms и используют кривую ease. В системе нет пружинных анимаций и овершутов: элемент останавливается там, где должен, без отскока.

transition: background-color var(--motion-duration-fast) var(--motion-easing);

Уважение к prefers-reduced-motion

Когда пользователь включает «уменьшить движение» на уровне операционной системы, все переходы и анимации на сайте становятся мгновенными. Это применяется глобально, на уровне базовых стилей, а не выборочно к отдельным компонентам:

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

Компоненты не добавляют собственных анимаций сверх переходов состояния - раскрытие мобильного меню и переключение темы используют ту же шкалу длительности, что и наведение на кнопку.