Reduced motion, made visible.
Same page, twice. The checker flagged 10 issues on the left — animation with no prefers-reduced-motion guard. Flip the switch to simulate a visitor who asked their device for less motion, and watch what changes.
Before as the AI shipped it — no guard
▶ motion on⚠ still animating — ignores the setting
Nimbus
Start free trialAfter checker’s fixes applied — guarded
▶ motion on✓ calm — respects the setting
Nimbus
Start free trial
What you’re seeing. With reduce-motion on, the Before pane keeps spinning, pulsing and scrolling — it never asked. The After pane goes still, because each animation is wrapped in @media (prefers-reduced-motion: reduce), exactly the fix the checker prints for every finding.
The free checker detects the gap and hands you the fix. going further the MotionSpec engine emits motion that’s reduced-motion-safe by construction — so the “before” never ships. (A static CSS scan, not a full accessibility audit.)