useReducedMotionConfig | Svelte Motion

FIG-001/ HOOK

resolve reduced motion.

useReducedMotionConfig() returns a { current, subscribe } object resolving the active policy: a nearest <MotionConfig reducedMotion="..."> ancestor wins, falling back to the OS-level prefers-reduced-motion setting when the policy is "user".

Three policies on <MotionConfig reducedMotion>: 'never' never reduces, 'always' always reduces, 'user' mirrors the OS preference. The default with no ancestor is 'never'.
The resolved .current updates reactively when either the policy reassigns or the OS preference flips. Templates that read .current in $derived / $effect re-run automatically.
Useful for kiosk / preview / embed scenarios where the app needs to override the OS setting in either direction. Pair with filterReducedMotionKeyframes if you're hand-rolling animation paths.

↩ all examples

pattern · config + a11y resolution mode · live running source

Resolved policy: no-preference

Set <MotionConfig reducedMotion="..."> never user always

Tip: Chrome DevTools → Rendering → emulate prefers-reduced-motion: reduce to verify the 'user' path honors the OS setting.

category · hook

sheet · sheet 01 / 01

⟳ to re-run