The punch I noticed first wasn’t in the waveform. It was in the background. When the kick transient hits, a circular window opens in the spring panorama and you see winter through it: snow on the rooftops, icicles on the eaves, kids with snowballs somewhere in the frame. The window holds for a beat, then shrinks as the energy decays. When the kick is gone, so is winter.
That’s the temporal portal. Here’s how it got there.
What this is
The captain-random visualiser is a canvas-based music visualiser. Two panoramas at 3904×1088: a spring city scene in front, a winter version behind it. public/bg-winter.jpg is 3.4 MB. Same location, same angle, different season. Particle effects, a neon bloom that pulses with the low end, a waveform display, a now-playing card.
The track is Tasogare, my own production, 3:16, 48kHz 24-bit stereo. Tasogare is the Japanese word for dusk: the ambiguous hour between day and night.
The build ran across two days. The design handover came from Claude’s Design tool (the DesignSync MCP connector, live in-session), which specified particles, a beat flash, the waveform, the now-playing card, and RGB-split. I ingested the spec and implemented against the real composition.
The temporal portal wasn’t in the handover. It came from a thesis I was testing: what if bass energy didn’t animate a layer, but revealed one that was hidden?
The portal mechanism
The spring layer carries a radial alpha mask. The mask radius is a direct function of bass energy.
At rest, the radius is zero. The spring layer is opaque across the full frame; winter is invisible. When the kick hits, the bass envelope spikes, the radius opens, and winter becomes visible through a circle in the composition. The window holds as long as the energy holds, then closes as it decays.
This is structurally different from most beat-reactive effects. The standard pattern is audio energy driving a visual property: size, opacity, speed. Here the energy drives a relationship between layers. The kick isn’t changing how the spring scene looks; it’s changing how much of it you see. Winter doesn’t animate. It’s passive. The mask is where all the motion is.
That distinction matters practically. Both panoramas can be completely static images and the effect still reads as motion. The movement is in the mask, not the content. Any pair of images that share geometry (same scene, different season, different time of day, different weather) is a candidate for this treatment. The audio signal is the switch, and the switch can be mapped to any frequency band or envelope.
The neon bloom
The background neon bloom was already bass-reactive before the portal landed. Its opacity is min(1, 0.14 + kickEnv*0.7 + bass*0.22): a base visibility of 0.14, boosted sharply by the kick envelope weighted at 0.7, lifted further by sustained bass at 0.22. The gradient runs pink to gold to transparent.
On the kick, the bloom flares in the midground while the portal opens in the background. Same signal source, different mechanisms: opacity modulation for the bloom, alpha masking for the portal. The bloom is soft and diffuse. The portal has a hard edge.
The bloom formula already prioritises kick transients over sustained bass (0.7 vs 0.22). The portal mask currently doesn’t. It tracks bass energy broadly, so low-end-heavy bars without a sharp kick still open the window slightly. That’s the main thing I’d adjust in a follow-up: weight the kick envelope more aggressively in the portal calculation, so the window opens clean on the hit and closes clean on the decay, rather than staying half-ajar through a sustained low bar. One parameter change. Not in scope for this build.
Particles
The onset particles were reworked the same day the portal landed. Previous behaviour: launch and travel. New behaviour: launch at maximum energy, bleed it off as they age.
The decay is energy = 0.9^age. That value scales a perpendicular wobble, sin(age · freq + phase) · amp · energy, so particles wiggle wide and fast at launch and narrow as they slow. Lifespan doubled from the previous value. Grow-over-life was added on the same pass: particles start small and expand as they travel.
The life-arc gives each particle a readable trajectory. Wide wobble at onset, tightening wobble as it ages, expanding footprint across the journey. The particle and the portal share the same underlying shape: maximum energy at launch, decaying toward rest. One visible in wobble amplitude, the other in mask radius.
The inversion in grow-over-life is worth naming. You’d expect a particle losing energy to shrink. Visually it’s more legible the other way: the particle is carrying energy outward, its footprint grows as it spreads. The energy and the size are doing different jobs.
The track
public/tasogare.wav replaced the placeholder. 3:16, 196 seconds, 48kHz 24-bit stereo. The display card reads TASOGARE / CAPTAIN RANDOM.
The previous placeholder had been carrying invented metadata: an alternate title, a subtitle, neither real. Swapped for the actual values at the same time the portal landed.
Tasogare describes a threshold: two states in transition. The portal does the same thing spatially. Spring and winter visible at once in the same frame, on the same beat. That resonance wasn’t planned. The track name was fixed before the portal concept existed. I’m noting it because it’s there, not because I designed for it.
What the portal is actually doing
Most visualisers are one-scene systems. Energy maps to properties within that scene. The kick makes something bigger, or brighter, or faster.
The portal adds a second scene. The kick is the mechanism that makes both simultaneously visible. For one beat, the composition holds two states at once. Spring and winter, in the same frame, the boundary between them defined by the mask radius.
The geometry matters more than it might appear. A radial mask from a fixed centre reads as a window: a circular aperture looking through one season into another. A rectangular mask reads as a wipe. A radial mask from a moving centre reads as something chasing the frame. The fixed circle is what makes “portal” the right word rather than “reveal” or “wipe”.
The practical generality: because both panoramas can be static, and because the mechanism is just a radius and a centre driven by a signal, the same approach works for any layered pair with shared geometry. Different cities, different lighting conditions, different eras of the same street. The bass signal is the switch; the content is interchangeable.
Scope
What’s in: single radial mask, bass-driven radius, fixed centre, two static panoramas.
Out of scope: per-frequency mapping (different bands opening different quadrants of the mask), multiple portals accumulating per hit, animated content in the winter layer, a moving centre that tracks a particle. All are composable variations on the same mechanism. None were needed for this track.
