detect prefers-reduced-motion · side-channel demo · runs locally
current value
prefers-reduced-motion
no-preference
no-preference: false
live animation demo
the box below animates. if your system has “reduce motion” enabled, the animation is suppressed. this is applied via CSS @media (prefers-reduced-motion: reduce).
bouncing
side-channel explanation
any website can read this preference silently using one line of JavaScript:
window.matchMedia("(prefers-reduced-motion: reduce)").matchesno permission is required. combined with other signals (color scheme, contrast, timezone, fonts), it contributes to a browser fingerprint. it can also reveal accessibility needs or medical conditions.
browsers expose this because the intent is to let developers respect the preference — but it is readable without user interaction.
privacy note
this preference is readable by any website without permission or user gesture. to test: change your OS accessibility / motion settings while this page is open.
status
>ready