Feature Summary
Implement media queries respecting prefers-reduced-motion to disable or scale down intensive animations and transitions for users with motion sensitivities.
Description
GlassyUI-Components features beautiful, fluid transitions and parallax glassmorphism effects (e.g., hover scaling, modal slides, and active hover animations). However, these animations can cause disorientation, nausea, or dizziness for users with vestibular system disorders or motion sensitivities.
Operating systems allow users to opt-out of animations by turning on a "Reduce Motion" setting. Currently, GlassyUI-Components does not check or respect this setting, which makes the library less accessible and risks violating standard web accessibility guidelines (such as WCAG 2.1 Success Criterion 2.3.3).
Proposed Solution
Add a CSS/SCSS media query block to reset or simplify transitions and animations across all components when the user requests reduced motion:
scss
@media (prefers-reduced-motion: reduce) {
- {
animation-delay: -1ms !important;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
background-attachment: initial !important;
scroll-behavior: auto !important;
transition-duration: 0s !important;
transition-delay: 0s !important;
}
}
Alternatively, targeting individual interactive components (like GlassyModal, GlassyButton, or progress bar animations) to replace sliding/scaling transitions with instantaneous visibility or subtle opacity fades:
scss
/* Target component classes */
@media (prefers-reduced-motion: reduce) {
.glassy-modal-content {
transform: none !important;
transition: opacity 0.1s ease-in-out !important;
}
.glassy-button {
transform: none !important;
}
}
Alternatives Considered
Opt-in JS Prop (e.g., disableAnimations): Adding a manual React prop like is less effective because it relies on the developer manually reading the media query in JavaScript and passing it down, rather than resolving it natively and automatically via CSS.
Screenshots/Logs
No response
Additional Information
Feature Summary
Implement media queries respecting prefers-reduced-motion to disable or scale down intensive animations and transitions for users with motion sensitivities.
Description
GlassyUI-Components features beautiful, fluid transitions and parallax glassmorphism effects (e.g., hover scaling, modal slides, and active hover animations). However, these animations can cause disorientation, nausea, or dizziness for users with vestibular system disorders or motion sensitivities.
Operating systems allow users to opt-out of animations by turning on a "Reduce Motion" setting. Currently, GlassyUI-Components does not check or respect this setting, which makes the library less accessible and risks violating standard web accessibility guidelines (such as WCAG 2.1 Success Criterion 2.3.3).
Proposed Solution
Add a CSS/SCSS media query block to reset or simplify transitions and animations across all components when the user requests reduced motion:
scss
@media (prefers-reduced-motion: reduce) {
animation-delay: -1ms !important;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
background-attachment: initial !important;
scroll-behavior: auto !important;
transition-duration: 0s !important;
transition-delay: 0s !important;
}
}
Alternatively, targeting individual interactive components (like GlassyModal, GlassyButton, or progress bar animations) to replace sliding/scaling transitions with instantaneous visibility or subtle opacity fades:
scss
/* Target component classes */
@media (prefers-reduced-motion: reduce) {
.glassy-modal-content {
transform: none !important;
transition: opacity 0.1s ease-in-out !important;
}
.glassy-button {
transform: none !important;
}
}
Alternatives Considered
Opt-in JS Prop (e.g., disableAnimations): Adding a manual React prop like is less effective because it relies on the developer manually reading the media query in JavaScript and passing it down, rather than resolving it natively and automatically via CSS.
Screenshots/Logs
No response
Additional Information