[Enhancement] Add prefers-reduced-motion support for Lottie animations

[magic-peach]

Overview

Users who have enabled 'Reduce Motion' in their OS accessibility settings should not see the Lottie animations spinning or playing, as animations can cause discomfort for people with vestibular disorders.

Implementation

In src/components/LottiePlayer.tsx:

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
if (prefersReducedMotion) {
  // Show static frame instead of animation
  anim.goToAndStop(1, true)
}

Acceptance Criteria

• Animations paused when prefers-reduced-motion is enabled
• Static representation shown instead
• No flashing or movement for reduced-motion users

[YAM1234-B]

Hi @magic-peach, I would like to work on this issue as part of GSSoC'26. I understand the goal is to implement prefers-reduced-motion in the LottiePlayer.tsx component to improve accessibility. Please assign this to me!

[shubh-gitpush]

@magic-peach ,I would like to work on this as part of gssoc 2026.

[Prince2301p]

Hi,
I would like to work on resolving this issue. Please assign it to me. I’m a participant in GSSoC 2026 and would be happy to contribute.
Looking forward to collaborating with you.