Определяем, предпочитает ли пользователь уменьшенную анимацию!

Современные ОС позволяют пользователю снизить количество анимаций. Браузер транслирует это предпочтение через media query prefers-reduced-motion, и интерфейс может адаптироваться автоматически.

Проверяем текущее состояние:
const motionMQ = window.matchMedia(
"(prefers-reduced-motion: reduce)"
);

const isReducedMotion = motionMQ.matches;

matches читается синхронно и отражает текущее системное состояние на момент инициализации скрипта.
Реагируем на изменение настройки в системе:
motionMQ.addEventListener("change", ({ matches }) => {
document.documentElement.dataset.motion =
matches ? "reduced" : "full";
});

Событие change срабатывает при изменении системной настройки, без polling и лишней логики.

Применяем режим при загрузке приложения:
document.documentElement.dataset.motion =
isReducedMotion ? "reduced" : "full";

Это позволяет синхронизировать состояние интерфейса с системными настройками пользователя.

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

Code Ready | #практика