On this page
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
control-button and switch transition reduction
deploy pipeline LED transition reduction
Out of scope
animation definitions (covered in navigation and UX polish)
theme toggle behavior
browser support for prefers-reduced-motion
Procedure / Content
Feature summary
Feature name: Reduced motion support
Feature group: Theming and accessibility
Technical summary: CSS prefers-reduced-motion handling removes non-essential transition effects (controls, switch thumb, pipeline transitions) while preserving functional state changes.
Low-tech summary: Motion-heavy polish is reduced, but controls still work and status changes remain understandable.
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: Hover/press transitions become immediate, switch movement transition is removed, and deploy pipeline state shifts without glowing transition ramps.
Artifacts or reports to inspect: None.
Tests
Animations still play for reduced-motion users.
Transitions do not disable in CSS.
Pipeline status appears to pulse or flicker instead of changing state discretely.
Long-term maintenance notes
Re-test reduced-motion behavior after animation changes.
Include reduced-motion QA whenever hero sequencing timing is updated.
Source code references (GitHub URLs)
ADRs
Runbooks
Additional internal references
External reference links
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