Blur reveal

Six panels take turns. Each one is a single bold background with a short lowercase line set across it in a contrasting colour, such as gold on pine green or hot pink on near black. The line never slides or types on. It condenses out of a haze, holds for 900ms, dissolves back out, and the background cross-fades over 320ms into the next panel while the next line starts to form.

The reveal is one fragment shader over the line drawn to a canvas texture. Each pixel gets a front position from a domain-warped four-octave noise field mixed 70 to 30 with its distance from a centre that wanders per panel. A pixel shows once the reveal progress passes its front position, eased over a wide band of 0.34 either side, so the edge is a soft cloud that moves through the inside of each letter, never a wipe across the line. A per-panel seed shifts the field, so no two cycles dissolve the same way.

Blur sits only at the front. A 17-tap ring blur, up to 18 texels wide, is strongest where the front is and falls to zero behind it, and the unresolved part is sampled a little larger and nudged toward the centre, so letters drift into place as they sharpen. A wide-blurred copy of the glyph alpha adds a faint halo in the panel's text colour along the front, gone by the time the line finishes.

Progress is not an eased curve. A critically damped spring pulls it toward 1 to reveal and toward 0 to leave, slightly stiffer on the way out, so the motion settles the same at any frame rate.

• Draw the line once per panel to a 2D canvas at the capped pixel ratio, sized to fit on one line at most 86% of the card's width, and upload it as a texture.
• In the fragment shader, give each pixel a front position from domain-warped fbm noise mixed with a radial distance, offset by a per-panel seed.
• Reveal each pixel with a smoothstep band around the progress, and blur it with a ring blur whose radius is largest at the front and zero behind it.
• Add a soft glow in the text colour along the front from a wide-blurred copy of the glyph alpha, fading out as the line completes.
• Drive progress with a critically damped spring toward 1, hold, then toward 0, and swap panels when the line is gone.
• Stop the loop on webglcontextlost, and on destroy delete the program, buffer and texture and lose the context.
• Under reduced motion, draw the first panel once with its line fully resolved.

• PANELS (six lines, each with bg and fg): The lines and their colour pairs, in order.
• HOLD_MS (900): How long a resolved line holds before it leaves.
• BG_MS (320): The background cross-fade between panels.
• MAX_BLUR (18): The blur radius at the front, in texels.
• K_IN, K_OUT (42, 60): Spring stiffness for the reveal and the exit. Higher is snappier.