Accessibility

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

Primitives like text-reveal-block and 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 timeline and transitions cleanly to the accessible static state.

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

const prefersReducedMotion = usePrefersReducedMotion();

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

[!NOTE] Catalog Showcases: Ready-to-use layout showcases in /catalog (such as cursor-trail-reveal, scroll-chapters, scroll-gallery, sticky-scroll-cards, and text-reveal-box) are full-screen creative design showcases intended for high-impact editorial and portfolio experiences. They do not require reduced-motion branches, preserving their intended artistic animations while keeping showcase code clean and reducing review complexity. Semantic, screen-reader-accessible content in the DOM is preserved.

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 and our Performance & Bundle Size guide.