Problem
The landing page and playground use several CSS animations (hero floating effects, GlowingEffect, pulse keyframes in app/globals.css) that play regardless of the user's prefers-reduced-motion OS setting. This can cause severe discomfort or trigger vestibular disorders in affected users.
This violates WCAG 2.1 Success Criterion 2.3.3 and is considered best practice at all accessibility levels.
Affected Areas
app/globals.css - @keyframes float, @keyframes pulse, glow animations-
-
-
- Framer Motion animations across landing page sections
-
-
-
- Hero section particle/three.js animations
Proposed Fix
Add to app/globals.css:
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}For Framer Motion components, use the useReducedMotion() hook to conditionally disable animations.
Problem
The landing page and playground use several CSS animations (hero floating effects, GlowingEffect, pulse keyframes in
app/globals.css) that play regardless of the user'sprefers-reduced-motionOS setting. This can cause severe discomfort or trigger vestibular disorders in affected users.This violates WCAG 2.1 Success Criterion 2.3.3 and is considered best practice at all accessibility levels.
Affected Areas
app/globals.css-@keyframes float,@keyframes pulse, glow animationsGlowingEffectcomponentProposed Fix
Add to
app/globals.css:For Framer Motion components, use the
useReducedMotion()hook to conditionally disable animations.