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 { Component } from "@angular/core"
import { injectValue } from "valdres-angular"
import { prefersReducedMotionSelector } from "@valdres/browser-reduced-motion"

@Component({
    selector: "motion-banner",
    template: `<div [class]="reduced.value() ? 'static' : 'animated'"></div>`,
})
export class MotionBanner {
    reduced = injectValue(prefersReducedMotionSelector) // ValueState<boolean>
}

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.