The winter panorama is 3.4 MB of the same scene — identical camera angle, identical aspect ratio, 3904×1088. Snow where there was grass. Icicles where there was light. Kids with snowballs where there was nothing. It sits behind the spring layer, invisible, until the bass comes in loud enough, at which point a radial gradient in the front layer dilates around the canvas centre and winter shows through.
One scalar. Two JPEGs. A radial alpha mask.
That is the mechanism behind the temporal portal in captain-random-visualiser, and it reframes the problem. Most audio visualisers route frequency data into particle spawn rates, opacity curves, scale multipliers — things that add visual elements in response to audio. The portal routes bass amplitude into layer compositing. Nothing spawns. A hidden layer becomes visible.
The conventional model
Audio reactivity in browser-based visualisers follows a legible pattern: Web Audio API → AnalyserNode → getByteFrequencyData() → some visual parameter. The visual parameter is usually something that appears: a bar, a circle, a particle, a waveform ring. The audio drives generation.
This works for frequency visualisation. It works for beat-reactive particle fields. The problem is that “beat fires particle” is additive — it adds elements to the canvas. The narrative unit is the individual particle or bar. The composition as a whole is the accumulation of those units.
When you want the audio to carry meaning at the scene level — to express a shift in emotional register, a transition, a reveal — the additive model has no vocabulary for it. You can spawn more particles. You can make them bigger. The scene itself doesn’t change.
Reframing as compositing
The temporal portal inverts the relationship. Instead of adding elements to a scene, the bass signal modifies a compositing parameter between two complete scenes.
The implementation stacks two full-canvas layers: bg-winter.jpg at the base, the spring panorama on top with a radial alpha mask. The radial mask on the spring layer has a transparent centre that expands with bass amplitude. At rest, the spring layer covers almost the entire canvas. As bass rises, the gap expands. Winter bleeds in from the centre.
The spring layer is doing two jobs simultaneously: providing the base visual context, and acting as the variable occluder for the layer beneath. The audio parameter isn’t driving appearance. It’s driving disclosure.
Why this opens narrative space
Compositing parameters carry implicit meaning that particle spawn rates don’t.
A radial mask expanding from the centre reads as a reveal — something beneath becoming visible. Applied to two seasons of the same scene, it reads as temporal shift. The audio signal becomes causally linked to that shift in the viewer’s perception. The kick doesn’t fire a particle; the kick opens a window into another time.
That’s a different category of visual statement. Particle spawning says “there is energy here.” A compositing transition says “something is changing.” The second is load-bearing for any visual narrative that needs to mirror the arc of a track rather than just its amplitude envelope.
The neon bloom as contrast
The neon bloom in the same project uses the conventional model, and it’s correct for its role. The bloom’s opacity is min(1, 0.14 + kickEnv*0.7 + bass*0.22), a gradient running pink→gold→transparent over the city skyline. It adds luminance. It pulses with the kick. Its job is to make the energy of the track felt in the frame.
That’s the right tool for that job. The bloom isn’t narrating anything; it’s amplifying presence. Both the portal and the bloom respond to bass, but they’re doing different work. The bloom makes the scene more. The portal makes the scene different.
Using the portal’s mechanism for the bloom’s job, or the bloom’s mechanism for the portal’s job, would produce the wrong result in both cases. The model you choose determines what the audio can express.
Particle life-arc as a third mode
The onset particles in the same build use a third model — neither purely additive nor compositing. They launch at max energy and bleed it off as they travel: energy = 0.9^age drives a perpendicular wobble, sin(age·freq + phase) · amp · energy, so particles wiggle wide and fast at launch and settle as they age.
This is audio reactivity encoded into lifecycle. The particle carries the energy state of its birth moment and decays naturally, so the visual artefact is a record of the beat rather than a continuous response to it. More fossil than readout.
Three mechanisms, three different things expressed:
- Bloom: current amplitude, continuously
- Portal: scene-level disclosure, amplitude-driven
- Life-arc particle: historical energy, decaying over time
Most visualiser tutorials stop at the first. The second and third only become visible once you’ve separated “what visual parameter should audio drive?” from “what does this track need to say?”
Implementation constraint
The winter panorama needed to match the spring layer exactly — same scene, same aspect, same 3904×1088 dimensions — because the radial mask reveal only reads as temporal if the underlying geography is continuous. A different scene reads as a cut, not a window. The constraint is conceptual before it’s technical: the compositing approach only works if both layers are worth compositing.
The track is Tasogare (3:16, 48kHz 24-bit stereo). All three mechanisms read from the same audio stream. The bloom reads bass continuously. The portal reads bass amplitude into the radial mask size. The particles fire on onsets. One source, three expressive modes, each calibrated for a different kind of statement.
What this suggests
Compositing-based audio reactivity is underexplored in browser visualisers partly because the mental model for most practitioners starts with particle systems and doesn’t leave them. The particle/bar/ring vocabulary is so dominant it sets the default expectation for what “audio reactive” means.
Reframing the problem — audio drives compositing, not generation — produces a different default. The question shifts from “what element should appear on this beat?” to “what should change about the scene’s structure?” That second question has richer answers: season shifts, layer reveals, spatial transitions. Any visual relationship expressible as a compositing parameter becomes a potential target for audio control.
The temporal portal is one instance. It doesn’t exhaust the space.
