[ENHANCEMENT] Implement Motion-Safe Animation Controls
Describe the current behavior
Currently, the particle animations in app/components/general/Particles.vue and other animations run continuously without respecting user preferences for reduced motion. While there is a motion-safe scroll behavior implemented in app/assets/css/main.css, this isn't consistently applied across all animations.
Describe the desired improvement
Update all animations, particularly the particles system, to respect the user's prefers-reduced-motion setting:
- Modify the particles configuration to check for motion preferences
- Add motion-safe variants for all animated components
- Implement fallback static designs for when animations are disabled
- Update the NuxtParticles component to handle motion preferences
Why is this improvement important?
This improvement is crucial for accessibility compliance and user comfort. Users with vestibular disorders or motion sensitivity need control over animation exposure. It also aligns with WCAG 2.1 guidelines for animation control (Success Criterion 2.3.3).
Alternatives Considered
- Complete removal of animations for users with reduced-motion preferences
- Simplified animations instead of completely disabling them
- User-configurable animation intensity settings
Additional context
The implementation should build upon the existing motion-safe scroll behavior in app/assets/css/main.css and integrate with the particles configuration in app/components/general/Particles.vue.