Reduced Motion Provider

Force-disable animations for any subtree.

ReducedMotionProvider opts a subtree out of animation. Components already honor the OS prefers-reduced-motion setting on their own — this provider is the explicit, global override (for a user preference toggle, demos, or tests).

import { ReducedMotionProvider } from '@appica/ui-react/providers/reduced-motion-provider'

Usage

<ReducedMotionProvider disableAnimations>
  <App />
</ReducedMotionProvider>

When disableAnimations is set, the provider writes a data-disable-animations attribute to <html>. That's deliberate: it has to reach Base UI's portaled popups, which render under document.body and so escape the React subtree.

Two channels

The provider drives motion through two coordinated channels:

CSS — the data-disable-animations attribute on <html> triggers the motion-reduce variant page-wide (popups included). This is what stops component transitions. See Animation.
JavaScript — useReducedMotion, scoped to this provider's React subtree, returns true so your own animation code can branch.

Props

Prop	Type	Default	Description
`disableAnimations`	`boolean`	`false`	Force-disable animations regardless of the OS preference
`children`	`ReactNode`	—	The subtree to opt out of animation

Leaving disableAnimations off doesn't re-enable motion for users who request reduced motion at the OS level — that preference is always respected. The provider can only make things more still, never less.

Getting Started

For AI Agents

Guides

Utilities

Reduced Motion Provider

Usage

Two channels

Props