Prefers Reduced Motion
Someone has the system's reduce motion setting on and my page animations still run. Should I handle it?
- Decorative gradient: shifting slowly
- Page layout: kept
- Loading status: spinning cue
These controls simulate the system preference; with it on, the background gradient and spinner stop while the loading state remains readable.
Nonessential animation can change: When the preference is on, reduce, stop, or replace nonessential motion such as large movement or parallax.
Keep the page state clear: You can stop a loading spinner and use text or progress to show that work continues; keeping the information does not require keeping the animation.
Verify with the system setting: After changing it, toggle the system setting once and check whether the page animation actually follows—that is acceptance.
You can say this to an AI Agent
Make the page respond to the system's reduced-motion preference by reducing or replacing nonessential animation. A loading spinner may stop, but keep static text or progress feedback so the waiting state is clear. Toggle the system setting to verify the page responds.
Select page elements for precise AI edits
Click a button, text, or card, note the change, then copy its exact location to AI.
Open Selector Pro website↗