Is your feature request related to a problem? Please describe.
Currently, CommitPulse SVG badges contain a radar scan animation (rotating line + glow effect) that plays unconditionally in every user's browser. Users who have enabled "Reduce Motion" in their OS settings (macOS → Accessibility, Windows → Ease of Access, Android/iOS → Accessibility) still see the full animation. This is frustrating for users with vestibular disorders, motion sensitivity, or epilepsy — and it violates WCAG 2.1 Guideline 2.3 (Seizures and Physical Reactions).
Describe the solution you'd like
Add a @media (prefers-reduced-motion: reduce) CSS block inside the generated SVG's <style> tag in lib/svg/generator.ts. This will automatically disable all animations for users who have reduced motion enabled at the OS level, while keeping animations intact for everyone else.
@media (prefers-reduced-motion: reduce) {
.radar-scan,
.scan-line,
.glow-pulse {
animation: none !important;
transition: none !important;
}
}Files to modify:
lib/svg/generator.ts — inject the media query into the SVG style blocktests/ — add a snapshot/unit test asserting the media query exists in SVG output
Describe alternatives you've considered
An alternative would be to add a URL parameter like ?animation=false that lets users manually disable animations. However, this places the burden on the user to know about the parameter and add it manually. The prefers-reduced-motion approach is automatic, standard, and requires zero effort from the user — making it the better accessibility solution.
Is your feature request related to a problem? Please describe.
Currently, CommitPulse SVG badges contain a radar scan animation (rotating line + glow effect) that plays unconditionally in every user's browser. Users who have enabled "Reduce Motion" in their OS settings (macOS → Accessibility, Windows → Ease of Access, Android/iOS → Accessibility) still see the full animation. This is frustrating for users with vestibular disorders, motion sensitivity, or epilepsy — and it violates WCAG 2.1 Guideline 2.3 (Seizures and Physical Reactions).
Describe the solution you'd like
Add a
@media (prefers-reduced-motion: reduce)CSS block inside the generated SVG's<style>tag inlib/svg/generator.ts. This will automatically disable all animations for users who have reduced motion enabled at the OS level, while keeping animations intact for everyone else.Files to modify:
lib/svg/generator.ts— inject the media query into the SVG style blocktests/— add a snapshot/unit test asserting the media query exists in SVG outputDescribe alternatives you've considered
An alternative would be to add a URL parameter like
?animation=falsethat lets users manually disable animations. However, this places the burden on the user to know about the parameter and add it manually. Theprefers-reduced-motionapproach is automatic, standard, and requires zero effort from the user — making it the better accessibility solution.