| Component name | reduced_motion |
|---|---|
| In the visitorId | yes |
| structuredId group | prefs (display and accessibility preferences) |
| 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 |
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, so a result where only that part moved usually means a display or accessibility setting changed, not a different device. See 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, Chrome Android, Edge, Firefox, Safari, iOS browsers and 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.
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.