Skip to content

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

@magic-peach

Description

@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

Metadata

Metadata

Assignees

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions