New: Cookbooks and AI ExplanationsStep-by-Step recipes to solve problems connected to Roadmaps and Cheat Sheets. Need more details? Use AI buttons for structured and simple explanations with concrete examples throughout the whole platform.Take a look
A teammate mentioned the spinning hero animation makes her feel sick, and I realize I never built a way to turn it off.
What you'll have at the end
Every animation, autoplaying video and animated image on the site defaults to a calmer version whenever a visitor's device reports a preference for reduced motion, with a pause control on anything that keeps moving on its own past five seconds regardless of that setting.
You need
A page or component with at least one CSS animation, autoplaying video, or animated image already built, plus a React component tree you can add a small hook to.
Not covered
Locking this behavior into an automated test that mocks the media query isn't covered here; this only gets the site itself to honor the setting.
Leans on
Checked 24 Aug 2026
Part of the Web Accessibility cookbook