@property

Registers the filament's heat as a real number, so every layer's opacity can be worked out from it.

A post with its tracks listed, and the player bar along the bottom of the screen — The filament along the bar's seek line, whose brightness follows the music.

How Riff uses it

The script writes one number, --riff-heat, onto the seek lines and the Now Playing glow every frame. Every opacity in the filament is a calc() off that one number, and each layer keeps one fixed colour, so the GPU composites the light without painting anything again. Registering it as a <number> with an initial value of 0 makes it a typed value the calc()s can multiply.

Why

A registered property given a bad value falls back to 0, so the light goes dark. An unregistered one would invalidate every calc() built on it, and each layer would show at full opacity.

Without it

Unregistered, a bad value would invalidate every opacity worked out from the heat, and the light would show at full strength.

Where

plugins/riff/assets/riff.css, line 614
```
@property --riff-heat {
```

plugins/riff/assets/player/filament.js, line 166

const heated = $$( '.riff-line, .riff-np-glow' ).map( ( node ) => ( {

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

Specification: CSS Properties and Values API Level 1. Reference: @property on MDN.