| name | reduce-motion |
| description | Add prefers-reduced-motion support. Wraps existing animations in a media query and provides static fallbacks. |
| user-invokable | true |
/reduce-motion — Reduced Motion Support
For every animation and transition in the code:
- Wrap in @media (prefers-reduced-motion: no-preference) { }
- Add @media (prefers-reduced-motion: reduce) with:
- animation-duration: 0.01ms
- transition-duration: 0.01ms
- Preserve final states (don't hide content that animates in)
- Test that the page is fully usable without any motion