browser-reduced-motion
Reactive (prefers-reduced-motion: reduce) as a global atom plus a boolean selector.
Install
bun add @valdres/browser-reduced-motionLive example
Loading demo…
Usage
<script>
import { watch } from "valdres-svelte"
import { prefersReducedMotionSelector } from "@valdres/browser-reduced-motion"
const reduced = watch(prefersReducedMotionSelector)
</script>
{reduced.value ? "static" : "animated"}Exports
| Export | Kind | Type |
|---|---|---|
reducedMotionAtom | atom (read-only) | ReducedMotion ("no-preference" | "reduce") |
prefersReducedMotionSelector | selector | boolean |
ReducedMotion | type | "no-preference" | "reduce" |
Cross-framework
The atom is global: read it with each adapter's primitive (useValue, createValue, injectValue, watch) or store.get / store.sub in plain JS. The media-query subscription starts on the first subscriber and stops when the last one leaves.