browser-reduced-motion

Reactive (prefers-reduced-motion: reduce) as a global atom plus a boolean selector.

Install

bun add @valdres/browser-reduced-motion

Live example

Usage

import { createValue } from "valdres-solid"
import { prefersReducedMotionSelector } from "@valdres/browser-reduced-motion"

function Banner() {
    const reduced = createValue(prefersReducedMotionSelector) // () => boolean
    return <div class={reduced() ? "static" : "animated"} />
}

Exports

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.