Inside
the ring.
A thin solid ring, glowing out in long bands and in with short ones, so the centre stays dark enough to read. Sparks fall from the ring toward the copy and die before they arrive.
Overview
A WebGL2 dither field driven by dither.js. The stencil is a signed distance to a circle: outside the ring the engine's crescent falloff runs at full length, inside it runs at 30% length and reduced odds, which keeps the disc dark for the headline. The particles are the crescent's own, born on the ring and falling inward, through the shared fallFromRing helper.
When to use
Centred heroes with a short headline, a product name, a manifesto line. The ring frames the copy the way a spotlight would, without a gradient anywhere.
Spec
- Palette
- rim #f3dca0 · mid #c9a24b · far #3a2d10 · spark #fff7e0 on #050505
- Ring
- radius 34% of the short side, 3px solid, 3 glimmer waves around
- Motion
- cells re-roll every 90f, glimmer orbits in ~16s, sparks fall through half the radius
- A11y
- aria-hidden canvas, pointer-events none, reduced-motion = one still frame
- Perf
- WebGL2, 2.2 MP pixel budget, pauses offscreen
Anti-patterns
Do not let the copy cross the ring; cap its width at 58vmin. Do not raise the inner odds, the centre is dark on purpose. One ring per page.