usePrefersReducedMotion

Whether the reader asked to reduce motion.

HooksA11y@gaudi/design-system/hooks/a11y/use-prefers-reduced-motionView in Storybook Source

True when the operating system reduce-motion setting is on, updated live. Built on useMediaQuery.

Usage

import { usePrefersReducedMotion } from '@gaudi/design-system/hooks';
const reduced = usePrefersReducedMotion();
window.scrollTo({ top: 0, behavior: reduced ? 'auto' : 'smooth' });

Examples

Read the preference

Storybook

Turn autoplay off

Storybook

API

1 option

1 return value

Accessibility

When set, skip autoplay, parallax, typing effects and smooth scrolling, or replace them with an instant change. global.css already shortens CSS transitions; use this hook for motion driven from JavaScript.

Notes

REDUCED_MOTION_QUERY is exported for CSS-in-JS or imperative checks.

useMediaQueryTrack a CSS media query, SSR-safe.useArrowKeyNavArrow-key navigation with a roving tabindex for toolbars, lists and grids.useFocusTrapKeep Tab focus inside a custom overlay and restore it on close.useLiveAnnouncerPolite or assertive screen reader announcements for changes away from focus.