Animations can greatly enhance user experience, but they can also create accessibility issues if not handled with care. Some users are sensitive to motion and may experience discomfort, dizziness, or difficulty focusing when faced with strong visual effects.

To address this, operating systems and browsers expose a setting called Reduced Motion (prefers-reduced-motion). When enabled, it communicates that the user prefers simpler or fewer animations.

As developers, it’s our responsibility to make sure our components adapt to this preference.

Prefers Reduced Motion

prefers-reduced-motion is a CSS media query and system-level setting. If a user has enabled it, it usually means:

• Avoiding large-scale movement (scale, translate, rotate).
• Preferring subtle effects such as opacity fades.
• Disabling parallax or auto-scrolling animations.
• Turning off looping or auto-playing background motion.

The goal isn't to remove animation entirely, but to make it comfortable and safe.

Sora UI & Motion

Sora UI is built on top of Motion. This means all Sora UI components can leverage Motion’s accessibility features.

The recommended way to support Reduced Motion is to wrap your app with MotionConfig:

import { MotionConfig } from 'motion/react';

export function App({ children }: { children: React.ReactNode }) {
  return <MotionConfig reducedMotion="user">{children}</MotionConfig>;
}

With reducedMotion="user", Motion will automatically:

• Disable transform and layout animations if the user has Reduced Motion enabled.
• Keep helpful transitions like opacity or background-color.

As a result, Sora UI components will automatically respect user preferences without extra configuration.

Sora UI & GSAP

A few primitives (scroll-gallery, sticky-scroll-cards, text-reveal-block, text-reveal-box, magnetic-cards) are driven by GSAP instead of Motion — MotionConfig has no effect on them, since GSAP has no equivalent built-in setting.

These primitives install @soralabs/hooks-use-prefers-reduced-motion as a registry dependency (pulled in automatically by the CLI) and use it internally to track the OS Reduced Motion setting live. When enabled, each primitive skips its own scroll-driven timeline and jumps straight to the fully revealed state instead — no configuration needed on your end.

import { usePrefersReducedMotion } from "@/hooks/use-prefers-reduced-motion";

const prefersReducedMotion = usePrefersReducedMotion();

You can reuse this hook directly if you're building your own GSAP-driven effects and want the same behavior.

cursor-trail-reveal also installs @soralabs/hooks-use-prefers-reduced-motion directly, even though it isn't GSAP-based (it's a vanilla DOM/CSS effect) — when reduced motion is on, the trail simply never starts.

Conclusion

Accessible animations help ensure your UI is usable for everyone. By combining Sora UI with Motion’s MotionConfig, you can provide a smooth, animated experience while adapting gracefully to prefers-reduced-motion.

We recommend adding MotionConfig reducedMotion="user" at the root of your app.

For more details, see the Motion documentation.