# browser-reduced-motion

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

## Install

```bash
bun add @valdres/browser-reduced-motion
```

## Live example

▶ Live example: [https://valdres.dev/solid/plugins/browser-reduced-motion](https://valdres.dev/solid/plugins/browser-reduced-motion)

## Usage

```tsx
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

| 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.