Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProTrue when the person asked their system for less motion, updating live, and assuming reduced motion on the server so no animation flashes.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it in JavaScript-driven animation (canvas, requestAnimationFrame, motion libraries, auto-playing carousels and videos) to skip or simplify movement.
Do not use it for CSS transitions; use the motion-reduce: variant or an @media (prefers-reduced-motion) rule there.
import { usePrefersReducedMotion } from "@/hooks/use-prefers-reduced-motion"const reduceMotion = usePrefersReducedMotion()
useAnimationFrame(step, { paused: reduceMotion })usePrefersReducedMotion(options?): boolean
| Option | Type | Default | Description |
|---|---|---|---|
defaultValue | boolean | true | Value on the server, during hydration and where matchMedia is missing. |
The default is true on purpose: people who need less motion never see a flash of animation before the real value is read. Other people get the animation right after hydration.
Honour the setting everywhere: replace movement with fades or instant changes, stop auto-playing loops, and keep any information the animation carried available in another form.
The hook ships with renderHook tests (use-prefers-reduced-motion.test.ts) covering its behaviour, cleanup on unmount and server-safe defaults. It is safe to render on the server.