Mountain Of Code · Jan 5, 2026

Prefers Reduced Motion

0Sign in to vote or save

This page cannot be shown here. You can still read it on the original site — the toolbar below keeps your place in the directory.

The CSS media query prefers-reduced-motion has been around for years, it indicates to a website that the user would rather not see animations. I've never really had a real reason to put it into action, at least I thought I didn't. Turns out there are two places on this very blog where there is some kind of default motion: the background and the embedded 3D model viewer . Both of these are now…

The CSS media query prefers-reduced-motion has been around for years, it indicates to a website that the user would rather not see animations.

I've never really had a real reason to put it into action, at least I thought I didn't. Turns out there are two places on this very blog where there is some kind of default motion: the background and the embedded 3D model viewer.

Both of these are now static if requested. In both of my cases I had to use JS to detect the preference:

window.matchMedia('(prefers-reduced-motion: reduce)').matches === true

As always, there's more info on the MDN Docs

Read on /prefers-reduced-motion ↗

Comments

Nothing yet. Say the first thing.