useReducedMotion

useReducedMotion returns true when animations should be skipped. Use it in JavaScript-driven animation (e.g. with Motion) — for CSS, the motion-safe/motion-reduce variants handle this automatically (see Animation).

import { useReducedMotion } from '@appica/ui-react/hooks/use-reduced-motion'

Usage

'use client'

import { useReducedMotion } from '@appica/ui-react/hooks/use-reduced-motion'

function Reveal({ children }: { children: React.ReactNode }) {
  const reduced = useReducedMotion()
  return <div style={{ transition: reduced ? 'none' : 'opacity 300ms ease' }}>{children}</div>
}

Return value

Returns a boolean — true when motion should be reduced. It's true if either:

• the OS exposes prefers-reduced-motion: reduce, or
• a ReducedMotionProvider ancestor set disableAnimations.