useReducedMotion

function useReducedMotion(): boolean

Description

Returns true when the user has asked the operating system to minimise motion. Exported from @usemotif/headless.

• Web — tracks the (prefers-reduced-motion: reduce) media query and updates live when the OS setting changes.
• Native — reads AccessibilityInfo.isReduceMotionEnabled() and subscribes to reduceMotionChanged.

The first render always returns false — the live value is read in an effect — so server and client markup agree and hydration stays stable.

How motif uses it

Animated headless components consume the hook so motion-sensitive users do not get full enter/exit animations. The exit transition behind Dialog (and Drawer) skips its exit phase and unmounts synchronously; the native Toast skips its fade-in.

When to reach for it

Reach for it when you supply your own animation CSS or drive a native animation by hand, and want to gate that motion on the same signal motif's own components use.

Example

import { useReducedMotion } from '@usemotif/headless';
import { Box } from 'usemotif';
 
function Banner({ children }: { children: React.ReactNode }) {
const reduced = useReducedMotion();
return (
  <Box
    enterStyle={reduced ? undefined : { opacity: 0, transform: 'translateY(-8px)' }}
    transition={reduced ? undefined : { duration: '$durations.2' }}
  >
    {children}
  </Box>
);
}

Related

• Animation patterns — motion props and the reduced-motion policy.
• Headless components — the behaviour components that consume this hook.