Skip to content

[Frontend] Respect prefers-reduced-motion and add a sound and animation mute setting #21

Description

@grantfox-oss

Telegram (ask questions / claim the issue here first): https://t.me/+DOylgFv1jyJlNzM0

Why this matters

The gamification (kingdom) area uses animations and src/app/utils/soundManager.ts plays sounds. There is no respect for the prefers-reduced-motion system setting and no user control to mute sound or reduce motion. This is an accessibility and comfort gap for a feature that is otherwise delightful.

Acceptance criteria

  • Honor prefers-reduced-motion to disable or tone down non-essential animation
  • Add a settings toggle for sound and one for reduced motion, persisted via the store
  • soundManager respects the mute setting and never autoplays loudly on load
  • Confirm the gamification views remain usable with motion and sound off

Files to touch

  • src/app/utils/soundManager.ts
  • src/app/components/gamification/
  • src/app/[locale]/kingdom/page.tsx
  • src/app/[locale]/settings/page.tsx
  • src/app/stores/useUIStore.ts

Out of scope

  • New gamification mechanics

Metadata

Metadata

Assignees

Labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions