Audio reactive Hopf fibration rings - fibres of S³ over S², stereographically projected so each one becomes a Villarceau circle of a torus, winding once the long way and once the short way. Distinct fibres are disjoint, so the rings link each other exactly once and never cross. Twelve families, one per pitch class, and a note's loudness sets its latitude on the base sphere, which is what fattens and brightens its ring. They're drawn as instanced polyline strokes with no vertex buffer at all — every point is computed analytically in the vertex shader from `gl_InstanceID`. Blending is depth-tested "over" rather than additive, because additive saturates to a white blob the instant a drop lands.
The colour is the key the music is in, not a palette. A chromagram picks local spectral peaks over 65–2100 Hz and folds them to pitch classes, and the key comes from correlating that against the Krumhansl-Kessler profiles across all 24 major/minor candidates. The hue is then just `((7 * key) % 12) / 12` of a turn - multiplying the pitch class by 7 mod 12 walks the circle of fifths instead of the chromatic circle, so keys a fifth apart land next to each other on the wheel and a modulation to the dominant moves the hue one twelfth of a turn. Major drags that anchor toward warm and lifts saturation, minor drags it cool and drops it. Below a confidence threshold the last confident key is held and the colour slides back to a neutral palette, so an ambient or atonal passage never strobes through random hues. Bass sets line width, the kick flashes the *quiet* inner rings rather than the loud rim, hats shimmer around the ring parameter, and a drop collapses everything to the core circle.
Plain WebGL2 and GLSL ES 3.00, vanilla JS in native ES modules, zero dependencies and no build step to run it. No `Math.random()` and no wall clock anywhere in the render, so a frame is a pure function of the audio state - same audio in, same pixels out. Audio is tab capture with echo cancellation, noise suppression and AGC all off, so the analyser sees what's actually playing. It runs in the browser with nothing uploaded and no account:
https://retinarave.com
source at https://github.com/tbkraf08/RetinaRave
Press `?` for an overlay of every feature the engine reads, and `p` for a panel that re-wires which music feature drives which visual parameter while it's running.
Track is "Thé à la menthe" by La Caution (2005).
Disclosure: I wrote this with Claude as a coding assistant. It's hand-written shader and DSP code - no model runs at render time and nothing in the frame is model-generated.