Still water,
lit from beneath.
A dithered sea breathes under the copy. The surface is a solid rim with a travelling glimmer; below it the field thins out through three tints, and spray lifts off the crest into the dark.
Overview
A WebGL2 dither field driven by dither.js, the engine shared by every dither hero in this library. The stencil is two GLSL functions: field returns the odds of a 2px cell lighting up in each tint given its distance below a three-sine surface, and particle places 2px sparks that rise from the surface and fade. Everything else, the 90-frame re-roll, the glimmer, the grain, the vignette, is the engine.
When to use
Landing heroes where the copy sits in the upper two thirds. The sea takes the lower 30% of the viewport and glows upward, so the headline reads against pure black and the dither frames it from below.
Spec
- Palette
- rim #a5f3fc · mid #22d3ee · far #0b3640 · spark #ecfeff on #050505
- Surface
- 70% height, three sines, 26/11/40 px amplitude
- Motion
- cells re-roll every 90f, glimmer 2.2 waves/720f, spray 0.10–0.28 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 put body copy below the surface line. Do not lift the sea above 60% height, it will fight the headline. Keep the base black; the grain and vignette assume it.