/// hooks

useReducedMotion

Returns true when the user has asked their system to reduce motion. Use it to honour that preference in JS-driven animation — following the brand rule that reduced motion renders the final frame, never removes content.

Signature

useReducedMotion

function useReducedMotion(): boolean;

Returns

Field	Type	Description
`(return)`	`boolean`	True when prefers-reduced-motion is `reduce`; false otherwise (and on the server).

When to use

Gate JS-orchestrated animation — a counter that ticks up, an autoplaying carousel, a parallax effect — and jump straight to the end state when reduced.
Pair with CSS: let @media (prefers-reduced-motion) handle transitions, and use this hook only where the motion lives in JavaScript.
Never use it to hide information — the reduced path must show the same final content, just without the movement.

Example

skip an animated count-up

import { useReducedMotion } from "@protocore/pds";

function AnimatedTotal({ value }: { value: number }) {
  const reduced = useReducedMotion();
  const display = useCountUp(value, { enabled: !reduced });

  // reduced-motion users see the final number immediately
  return <span>{reduced ? value : display}</span>;
}

Note

Implemented on top of useMediaQuery, so it is SSR-safe and returns false until after hydration — render the animated branch only once the real preference is known.