useReducedMotion | Svelte Motion

FIG-001/ HOOK

respect reduced motion.

useReducedMotion() returns a reactive store backed by the (prefers-reduced-motion: reduce) media query. Gate any non-essential animation — and add an in-page override so users can opt in/out independently.

The hook subscribes to the media query and updates the store live — flip the OS setting and your animations respond without a reload. Critical for users with vestibular disorders.
In Chrome DevTools, open Rendering and emulate prefers-reduced-motion: reduce to verify the disabled path. Same pattern works in Firefox / Safari accessibility panels.
The toggle ORs an in-page preference against the OS setting. Effective rule of thumb: never disable an animation the user explicitly enabled, even if the OS says reduce.

↩ all examples

pattern · a11y media query mode · live running source

OS preference: no-preference

Force reduced motion (in-page override)

Tip: Chrome DevTools → Rendering → emulate prefers-reduced-motion: reduce to test the OS path.

category · hook

sheet · sheet 01 / 01

⟳ to re-run