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.

Simulate “Reduce motion”

Mirrors the OS setting a real user with a vestibular disorder would turn on. (This page also honours your real setting.)

Before as the AI shipped it — no guard

▶ motion on⚠ still animating — ignores the setting

Nimbus

Start free trial

ACMEGLOBEXINITECHHOOLISTARKACMEGLOBEXINITECHHOOLISTARK

↓

After checker’s fixes applied — guarded

▶ motion on✓ calm — respects the setting

Nimbus

Start free trial

ACMEGLOBEXINITECHHOOLISTARKACMEGLOBEXINITECHHOOLISTARK

↓

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.)