One shaft
of light.
A cone from the top-left corner, edged in solid cells, filled with dense dither that thins along its length. Dust drifts down the shaft at three speeds and fades where the beam does.
Overview
A WebGL2 dither field driven by dither.js. The stencil projects each cell into the beam's frame, distance along the axis and signed distance to the cone edge, then applies the crescent falloff on both sides of the edge: tight outside, long inside with a floor of far-tint dust so the shaft reads as filled. Everything is multiplied by an exponential along the axis so the beam dies before the bottom edge.
When to use
Heroes with the copy on the right. The beam owns the left two thirds diagonally and leaves the right side black for a long headline.
Spec
- Palette
- rim #ffffff · mid #a3a3a3 · far #2a2a2a · spark #ffffff on #050505
- Cone
- apex (6% w, −30% h) → (62% w, 105% h), 14px at the apex, half-angle 6.3°
- Motion
- cells re-roll every 90f, glimmer runs down the beam, dust 0.25–0.75 px/f
- 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 widen the half-angle past 0.15, the shaft turns into a wash. Do not tint the rim; a white beam is the point. Keep the headline clear of the exit at bottom-centre.