useReducedMotion API

Respect or override the user's prefers-reduced-motion setting, with a reactive flag and a body data attribute for CSS-only consumers.

Explore these related pages for additional context and usage patterns.

Page	Category
useReducedMotion	Plugins
useMediaQuery	System
useTheme	Plugins
Accessibility	Features

Functions

createReducedMotion

(options?: ReducedMotionOptions) => ReducedMotionContext

Creates a standalone reduced-motion context.

createReducedMotionContext

<_E>(_options?: ReducedMotionPluginOptions | undefined) => ContextTrinity<_E>

createReducedMotionPlugin

(_options?: ReducedMotionPluginOptions | undefined) => Plugin

useReducedMotion

<_E>(namespace?: string) => _E

Options

mode

ReducedMotionMode | undefined

Initial mode. - 'system' (default) — follow prefers-reduced-motion - 'always' — always reduce, overrides OS setting - 'never' — never reduce, overrides OS setting

adapter

ReducedMotionAdapter | undefined

Adapter for framework-specific side-effects. Defaults to V0ReducedMotionAdapter.

Properties

selectedMode

Readonly<ShallowRef<ReducedMotionMode>>

The active mode. 'system' defers to the OS media query. Change it with select.

isReduced

Readonly<Ref<boolean, boolean>>

true when motion should be minimized, considering the active selectedMode.

Methods

select

(mode: ReducedMotionMode) => void

Set the active mode.

dispose

() => void

Stop the OS media-query subscription. Affects every consumer of this context; isReduced keeps honoring explicit always/never modes but stops tracking the OS in system mode.