Chromatic glow

One short, heavy word sits in the middle of a deep coloured wall and glows. The light is not one colour. Its halo is three copies, a warm one, a cool one and a fringe, pulled a few pixels apart so the edges read as a soft rainbow, and the split wanders on its own path so the colours slide around the letters without the word moving. The card walks six sound-effect words, each with its own colour world, two of them light walls where the word is pressed in dark and the glow becomes a coloured shadow.

The glow is real bloom, built cheaply. The word is drawn once as a white mask, then blurred into four framebuffers at half, a quarter, an eighth and a sixteenth of the canvas, each with a separable 9-tap gaussian. Small buffers make a wide halo for almost nothing. The composite samples the summed levels three times at offset positions, tints each copy and tone-maps the sum with 1 minus exp(-x), so the glow can never clip to flat white. The tight levels carry most of the weight, so the light hugs the letters.

On top of the base split, five taps across the spectrum along the split direction, pushed further toward the edges of the card, add a refined rainbow rim. A faint fbm mottle and sheen make the wall a lit surface instead of flat colour, with grain over everything. Between words the split spreads wide and the core melts, so the old word blooms into haze, swaps under it, and the new word condenses back out in about half a second.

The pointer does not drag the word. It opens a soft pool of extra bloom and spectrum about a third of the card wide, with a small ripple in the sampled position, so the light lifts where the pointer is and settles back when it leaves.

• Rasterise the word in white on a transparent 2D canvas at most 1400 pixels wide, sized to 42% of the height and shrunk to fit 78% of the width.
• Build a four-level downsample chain at 1/2, 1/4, 1/8 and 1/16 of the canvas, each level blurring the one before with a separable 9-tap gaussian.
• In the composite, sum the levels with weights 0.85, 0.55, 0.22 and 0.10, sample that sum at +split, -split and a rotated offset, tint the three copies warm, cool and fringe, and tone-map with 1 - exp(-x).
• Drive the split from a smooth wander of layered sines, never from the pointer; the pointer only adds a local pool of bloom and spectrum.
• Swap words by easing a disperse value up over 0.24s, changing the word and palette at the peak, and easing it down over 0.32s.
• Stop the loop on webglcontextlost, and on destroy delete the programs, the buffer, the mask and every bloom framebuffer and texture, then lose the context.
• Under reduced motion, draw the first word in its colour world once.

• HERO_CYCLE (boom, poof, zap, pow, yeet, oof): The words the card walks and the colour world each one gets.
• CHROMA_PRESETS (six colour worlds): Warm, cool and fringe tints, wall colour, split, bloom, core, grain, spectral amount and light or dark wall.
• split (9 px at 620 tall): How far apart the warm and cool copies sit.
• bloom (1.62): The glow gain into the tone map.
• spectral (0.6): How much true rainbow rides over the three-colour split.