Riff / Built on the open web / Behaviour

prefers-reduced-motion

Stops the equalizer, the filament and the sliding sheets when the system asks.

A post with its tracks listed, and the player bar along the bottom of the screen — The equalizer bars and the filament, both of which go still under reduced motion.

How Riff uses it

In CSS the query removes every transition on the player and stops the equalizer bars and the buffering pulse. In the script, the audio meter does not run and the filament sits at a steady glow. Now Playing closes without waiting for its transition, and the Listen app swaps views without a view transition.

Why

A music player is continuous motion by nature: bars, a glowing wire, a pulsing button and sliding sheets, which is exactly what the setting asks to stop.

Where

plugins/riff/assets/riff.css, line 1448

@media (prefers-reduced-motion: reduce) {

plugins/riff/assets/riff.js, line 67
```
const reduce = () =>
```

plugins/riff/features/listen/app.js, line 128

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

Links open the source at the commit this page was published from.

Reference: prefers-reduced-motion on MDN.