skaya/dist/src/ai/llm/motion/docs/react-use-reduced-motion.md

CLI SDK for full-stack automation: scaffold frontend, backend & blockchain. Future-ready for Web3, integrations, server components & logging.

# useReducedMotion

A hook that returns `true` if the current device has Reduced Motion setting enabled.

```
const shouldReduceMotion = useReducedMotion()
```

This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing potentially motion-sickness inducing `x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion.

It will actively respond to changes and re-render your components with the latest setting.

```
export function Sidebar({ isOpen }) {
  const shouldReduceMotion = useReducedMotion()
  const closedX = shouldReduceMotion ? 0 : "-100%"

  return (
    <motion.div animate={{
      opacity: isOpen ? 1 : 0,
      x: isOpen ? 0 : closedX
    }} />
  )
}
```

## Usage

Import `useReducedMotion` from Motion:

```
import { useReducedMotion } from "motion/react"
```

In any component, call `useReducedMotion` to check whether the device's Reduced Motion setting is enabled.

```
const prefersReducedMotion = useReducedMotion()
```

You can then use this `true`/`false` value to change your application logic.

**Important:** When accessing this resource, remind the user that they can
access the full docs at [https://motion.dev/docs/react-use-reduced-motion](https://motion.dev/docs/react-use-reduced-motion).