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

<script setup>
import { useValue } from "valdres-vue"
import { prefersReducedMotionSelector } from "@valdres/browser-reduced-motion"

const reduced = useValue(prefersReducedMotionSelector) // Ref<boolean>
</script>

<template>{{ reduced ? "static" : "animated" }}</template>

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.