Cut from light.
The headline is not text. It is the dark left behind by the field: the glyphs are rasterised to a distance texture and the dither glows out from their edges.
Overview
A WebGL2 dither field driven by dither.js. On every resize the stencil draws the headline onto a half-resolution 2D canvas, runs a two-pass chamfer distance transform both ways, and hands the engine a signed distance texture. The field is then the crescent falloff measured from the glyph edges, with the glyph interiors left black, so the letters are carved out of light. Sparks are seeded across the text box and only those born on an edge are drawn, rising and fading.
When to use
Heroes where the name is the whole message: two short lines, heavy weight. Keep the DOM headline in place for screen readers and search; the field is decoration over it, not a replacement.
Spec
- Palette
- rim #a7f3cf · mid #6ece9d · far #10402b · spark #f0fdf6 on #050505
- Text
- Space Grotesk 700, widest line at 74% width, 0.95 line height, 3px solid edge
- Texture
- R8 signed distance at half resolution, 3-4 chamfer, ±128 px range
- A11y
- real h1 kept for AT, aria-hidden canvas, reduced-motion = one still frame
- Perf
- distance transform ~10 ms per resize, then WebGL2 at the 2.2 MP budget
Anti-patterns
Do not run more than two lines or a light weight, thin strokes fill with glow and vanish. Do not put body copy inside the text box. Change the words in the data-lines attribute, nowhere else.