Developers

requestAnimationFrame

Advances the filament's heat with the music every frame.

Now Playing on a phone: the cover, the title and artist, a seek bar, and the play controls
The filament under the seek line brightens with the music.

How Riff uses it

While music plays, one frame loop reads the analyser and advances the filament's heat model with the frame timestamp, writing the heat once a frame; the stylesheet turns it into opacity only. Opening Now Playing also waits one frame before adding its class, so the slide-up transition actually runs.

Why

The light has to follow the music as it happens; the seek line itself moves by Web Animations instead.

Where

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

Specification: HTML Standard. Reference: requestAnimationFrame on MDN.