Riff / Built on the open web / Behaviour

prefers-reduced-transparency

Removes the translucent wash and the bloom when the system asks.

Now Playing on a phone: the cover, the title and artist, a seek bar, and the play controls — The warm wash across the top of the screen, the layer that disappears under reduced transparency.

How Riff uses it

On a phone the top of Now Playing carries a translucent wash of the filament's colour that brightens with the music. Under reduced transparency that wash is removed, and the wire and its white heart lose their blurred bloom, leaving a solid line.

Why

The wash and the bloom are the player's only translucent layers over content, and they change opacity every frame.

Where

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

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

plugins/riff/assets/riff.css, line 480
```
.riff-np-glow {
```

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

Reference: prefers-reduced-transparency on MDN.