Skip to main content

Glossary · accessibility

prefers-reduced-motion

A CSS media query that detects when the user has requested reduced motion in their OS accessibility settings.

`@media (prefers-reduced-motion: reduce)` lets a designer disable or simplify animations for users with vestibular disorders or motion sensitivity. Every catalogued site in AI2 Design honors this query in its `accessibilityRules`. The convention is to wrap Framer Motion `useReducedMotion()` around every animation primitive — when true, animations collapse to opacity-only or disable entirely.

External reference

MDN — prefers-reduced-motion

Catalogued examples

2 catalogued sites demonstrate prefers-reduced-motion in production.

All glossary terms

AI2 Design counts anonymous traffic always — no cookies, no identifiers, no fingerprinting. For optional session insights (PostHog, EU region) — page funnel, performance — turn on opt-in analytics below. Cookie policy.