# reduced_motion

> Whether the user asked the system to reduce animation, from the prefers-reduced-motion media query: reduce or none.

Source: https://whiskerjs.com/signals/reduced-motion/ (last updated 2026-10-26)

**reduced_motion at a glance (from the library code, signalsVersion 9)**

| Field | Value |
| --- | --- |
| Component name | `reduced_motion` |
| In the visitorId | yes |
| structuredId group | [prefs (display and accessibility preferences)](https://whiskerjs.com/docs/identifiers/#structuredid) |
| Hashing | plain value; a digest only when longer than 128 characters or not printable ASCII |
| Excluded under | no browser class |
| Inner timeout | 1000 ms |
| Added in | [signalsVersion 1](https://whiskerjs.com/whats-new/) |

> **In plain words:**
>
> Phones and computers have a setting to reduce animations, used by people who find motion uncomfortable or distracting. Browsers tell web pages about it so they can calm their animations down. WhiskerJS records `reduce` when the setting is on and `none` when it is not.

## What it reads

The CSS `prefers-reduced-motion` media feature through `window.matchMedia()`.

## How the technique works

| Order | Query | Value reported |
| --- | --- | --- |
| 1 | `(prefers-reduced-motion: reduce)` | `reduce` |
| 2 | `(prefers-reduced-motion: no-preference)` | `none` |

The first match is reported; neither matching gives `unavailable` with `no_match`.

## Why it helps

It splits users into two groups along a long-lived setting. Most report `none`; those who report `reduce` usually keep it, so the value is stable for them.

On your server, read it together with the other four preference components. They share the `prefs` part of the [structuredId](https://whiskerjs.com/glossary/#structured-id), so a result where only that part moved usually means a display or accessibility setting changed, not a different device. See [Comparing two results](https://whiskerjs.com/docs/identifiers/#comparing-two-results).

## Stability

Stable. It changes only when the user toggles the system setting.

Because it is a system setting, every browser on the same device normally reports the same value, so it does not help tell two browsers on one device apart.

## Browser support and what blocks it

Supported by all current major browsers: [Chrome](https://whiskerjs.com/browsers/chrome-desktop/), [Chrome Android](https://whiskerjs.com/browsers/chrome-android/), [Edge](https://whiskerjs.com/browsers/edge/), [Firefox](https://whiskerjs.com/browsers/firefox/), [Safari](https://whiskerjs.com/browsers/safari-macos/), [iOS browsers](https://whiskerjs.com/browsers/safari-ios/) and [Samsung Internet](https://whiskerjs.com/browsers/samsung-internet/). No browser class excludes it.

## Privacy

An accessibility preference that can hint at a user’s needs. WhiskerJS only reads it as one device characteristic. Exclude it with `collect({ exclude: ['reduced_motion'] })` if you do not need it (ids change). See [Privacy](https://whiskerjs.com/docs/privacy/#data-minimisation).

## How WhiskerJS handles noise and failures

| Status | ruleId | When |
| --- | --- | --- |
| `ok` |   | `reduce` or `none` |
| `unavailable` | `no_api` | no `matchMedia` |
| `unavailable` | `no_match` | neither query matched |
| `blocked` | `threw`, `security_error` | `matchMedia` throws |
| `excluded` | `caller_excluded` | you excluded it |
| `timed_out` | `timeout`, `aborted` | budget or abort |

## Example value

All three headless test browsers in the container reported `none`.

## Questions and answers

### Who turns on reduced motion?

People who find animation distracting or uncomfortable, for example because of motion sensitivity, and people who simply prefer a calmer interface.

### Does WhiskerJS change animations on my page?

No. It only reads the media query. What your page does with the preference is up to your own CSS and code.

## Related pages

- [prefers_contrast](https://whiskerjs.com/signals/prefers-contrast/): The contrast preference.
- [forced_colors](https://whiskerjs.com/signals/forced-colors/): Forced colour modes.
- [color_gamut](https://whiskerjs.com/signals/color-gamut/): A display property in the same group.