I’d like to suggest adding global support for the prefers-reduced-motion media query within Cornerstone’s Effects system, including hover/active styles, animations, and transitions.
Many users set reduced motion preferences at the OS or browser level for accessibility reasons (e.g., to avoid vestibular discomfort, migraines, or distraction). By respecting this preference automatically, Cornerstone sites would:
- Become more accessible and inclusive out of the box
- Offer a smoother, faster experience for those who prefer less motion
- Save us from manually writing CSS overrides for every effect
- Align with modern WCAG 2.2+ accessibility standards and best practices
The idea would be to have a global setting (e.g., “Respect User Motion Preferences”) that, when enabled, automatically wraps generated Effects output in @media (prefers-reduced-motion: reduce) rules.
Importantly, this shouldn’t be a blanket “turn off everything” approach. Certain subtle or functional effects should remain, such as:
- Simple hover color changes or opacity fades that provide essential interaction feedback
- Focus states and other accessibility-related transitions
- Instant (0s) transitions for usability, rather than removing them entirely
Meanwhile, more decorative or motion-heavy effects (like entrance animations, parallax, looping transitions, or movement on hover) could be disabled or simplified when reduced motion is preferred.
Ideally, you could also offer per-effect overrides, so we can choose which animations should always remain active if needed.
This would be a small but meaningful addition that makes sites built with Cornerstone more accessible and future-ready, while reducing the amount of custom CSS we’d need to manage.