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.

Core Principles

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.

Space UI & Motion

Space UI is built on top of Motion. This means all Space 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, Space UI components will automatically respect user preferences without extra configuration.

Conclusion

Accessible animations help ensure your UI is usable for everyone. By combining Space 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.