Skip to main content

Feature: Reduced Motion Support

Purpose​

  • Feature name: Reduced motion support
  • Why this feature exists: Respect user accessibility preferences and reduce motion for sensitive users.

Scope​

In scope​

  • reduced-motion media query handling
  • disabling non-essential transitions and animations

Out of scope​

  • animation definitions (covered in navigation and UX polish)
  • theme toggle behavior

Prereqs / Inputs​

  • browser support for prefers-reduced-motion

Procedure / Content​

Feature summary​

  • Feature name: Reduced motion support
  • Feature group: Theming and accessibility
  • Technical summary: Uses CSS and JS checks to reduce or disable animations when users prefer reduced motion.
  • Low-tech summary: The site reduces animations when the user requests it.

Feature in action​

  • Where to see it working: Any route with animations, such as / or /projects.

Confirmation Process​

Manual​

  • Steps: Enable reduced motion in OS settings and reload the page.
  • What to look for: Animations are minimized or disabled.
  • Artifacts or reports to inspect: None.

Tests​

Potential behavior if broken or misconfigured​

  • Animations still play for reduced-motion users.
  • Transitions do not disable in CSS.

Long-term maintenance notes​

  • Re-test reduced-motion behavior after animation changes.

Dependencies, libraries, tools​

  • Tailwind CSS
  • React

Source code references (GitHub URLs)​

ADRs​

Runbooks​

  • None.

Additional internal references​

Validation / Expected outcomes​

  • Motion is reduced when users opt in to reduced motion.

Failure modes / Troubleshooting​

  • Motion still plays: verify media query and JS checks.

References​

  • None.