Prefers-reduced-motion
The system setting where users ask sites to calm the animation down, usually because motion makes them dizzy or sick.
See it
What it is
prefers-reduced-motion is a CSS media query that reports an operating system setting (Reduce Motion on macOS and iOS, 'Show animations' off on Windows and Android). Users flip it because large or unexpected movement triggers real symptoms: vertigo, nausea, and migraine for people with vestibular disorders. Nobody flips it because they dislike polish; treat it as a health setting. Honoring it is not itself a WCAG requirement: the nearest criterion, 2.3.3 Animation from Interactions, is level AAA, covers nonessential motion triggered by interaction, and never names this media query. Support it anyway. It is the cheapest way to serve the people that criterion is written about.
Write it as @media (prefers-reduced-motion: reduce) and read it in JS with window.matchMedia, which is what Framer Motion's useReducedMotion and GSAP's matchMedia() wrap. Target the motions that actually cause trouble: parallax, big translations across the viewport, scale and zoom transitions, spinning, autoplaying background video, and infinite scrolling marquees.
The mistake is nuking everything with a blanket animation: none !important rule. Stripping all motion also strips feedback, and a state change that happens instantly can be harder to follow, not easier. Swap instead: replace a slide with a short opacity fade, replace a zoom with a cross-dissolve, keep hover and focus transitions under about 150ms. Reduced, not removed.
Ask AI for it
Add prefers-reduced-motion support to this project. Under @media (prefers-reduced-motion: reduce), go effect by effect instead of applying one replacement everywhere. Remove the nonessential vestibular triggers outright: parallax, large translations across the viewport, scale and zoom transitions, spinning, and anything that moves without the user asking. Stop the continuous stuff at rest: pause autoplaying video and looping marquees rather than fading them. Keep only the essential feedback that tells someone a state changed, kept short and preferably an opacity change rather than movement. Do not use a blanket animation: none !important reset, and do not swap everything for the same fade, because an unwanted fade is still unwanted motion for some people. For JS-driven animation gate it on window.matchMedia('(prefers-reduced-motion: reduce)'). List each effect and what you did with it.