Blur glow
A crisp rounded word in a soft gradient-mapped glow on light paper, dissolving into the next word and colour.
The word hello in deep indigo, crisp, inside a soft glow that runs from violet through magenta to gold on pale paper.npx skills add https://design.how/vault/blur-glowInstalls the template, the brief and a check script as one skill.
What it is
One rounded word, crisp, sitting inside a soft halo of colour on light paper. The halo runs from the palette's dark core through two bright bands to the paper colour, so a coloured band hugs the letters and fades out; the letters themselves are tinted the palette's ink, not black. The word holds, then dissolves letter by letter, left to right, into the next of three words, and the colour world changes with it through six palettes. The first word rests a little longer than the others so the loop does not tick like a metronome.
The glow is a real bloom, not a stack of blurred copies. The word mask is blurred with a separable 9-tap gaussian down a chain of four framebuffers at a half, a quarter, an eighth and a sixteenth of the canvas, which gives a huge halo with no banding. The blur gets stronger toward the ends of the word, a depth-of-field that keeps the middle sharp. The composite sums the levels with falling weights, maps that luminance through the five-stop ramp, nudges the coarser levels along one direction so the light reads as cast from the upper left, lays the crisp word on top and adds a soft-light film grain.
The dissolve staggers on purpose: the incoming halo arrives before its letters (an exponent of 0.78 on the eased morph) and the outgoing glow lingers after its body (1.3), with the outgoing clock running 0.22 ahead, so mid-transition there is a moment of almost pure glow. The pointer displaces where the crisp mask and the first blur level are sampled, a swirling bulge stretched along its direction of travel and dragged by its velocity, small enough that it never bands the blur.
How it works
- Rasterise each word once into a mask texture in the rounded face; keep two masks so the outgoing and incoming words can blend.
- Blur the mask down a four-level chain of framebuffers with a separable 9-tap gaussian, stronger toward the ends of the word.
- Composite in one pass: sum the levels with falling weights, offset the coarser ones along a cast direction, gradient-map through five stops, lay the crisp word in the palette ink, and soft-light a film grain.
- Cross-dissolve with per-letter stagger, the halo leading and the body lagging by exponents on one eased clock, and lerp the palette uniforms alongside.
- Warp the sampling of the crisp mask and the finest level around the pointer, stretched along its motion and dragged by its velocity.
- Cap the pixel ratio at 1.5, stop the loop on webglcontextlost, and on destroy free the framebuffers, programs, buffer and textures and lose the context.
- Under reduced motion, draw one frame of the first word, with no fade-in.
What you can change
WORDS(["hello", "pookie", "monkey"]): The words the card dissolves between.PALETTES(Ultraviolet, Molten, Bubblegum, Electric, Jade, Sunburst): The colour worlds: five ramp stops from core to paper, plus ink and paper.HOLD_MS, HOLD_SCALE(700, [1.45, 0.9, 1.0]): How long each word holds, and a per-word multiplier so the cycle breathes.MORPH_SEC(0.8): Length of the cross-dissolve.LETTER_SPREAD(0.45): How much of the dissolve separates the first letter from the last.GRAIN(0.4): Film-grain strength.WARP_AMP, WARP_RADIUS(0.013, 0.2): How far and how wide the pointer pushes the letters.