ECSoC_2026: Respect reduced motion preference across animated UI

[Babin123456]

Problem

CyberShield uses animated loader, spinner, progress, and transition effects without fully honoring reduced motion preferences.

Current Behavior

A minimal reduced-motion rule exists, but repeated animations can still be uncomfortable for motion-sensitive users.

Why This Improvement Is Needed

Users who enable reduced motion at the OS/browser level expect interfaces to minimize nonessential motion.

Proposed Solution

Expand the prefers-reduced-motion: reduce media query to stop repeated animations, disable smooth scrolling, and reduce transition duration globally.

Expected Outcome

The default UI remains animated, while reduced-motion users receive a calmer experience.

Additional Notes

This is a CSS-only accessibility improvement.

[Dhruvi2006-source]

Hi @Mrinalray , I would like to work on this issue.

I reviewed the reduced-motion accessibility problem and would be happy to take ownership of it.

My implementation plan is to:

• Audit the existing CSS for loaders, spinners, progress indicators, transitions, and smooth scrolling.
• Expand the existing @media (prefers-reduced-motion: reduce) rules to cover the animated UI consistently.
• Disable or significantly reduce repeated and non-essential animations for users who prefer reduced motion.
• Override smooth scrolling with scroll-behavior: auto.
• Reduce transition and animation durations where appropriate while keeping the default animated experience unchanged for users without the preference.
• Keep the implementation CSS-only as proposed and follow the existing project structure and styling conventions.

I will also verify that the default UI animations continue to work normally and that the reduced-motion behavior provides a calmer experience without affecting the functionality or layout of the application.

I would be happy to take ownership of this issue and submit a focused PR targeting ECSoC_2026.

[Atharv094]

Hi maintainers! I'd love to work on this. I can update the CSS using prefers-reduced-motion: reduce to pause loaders, spinners, smooth scrolling, and cut transition durations. Please assign this issue to me!

Also, is this issue under the ECSoC program? If so, could you please add the "EcSoc26" label?