Bayer Horizon

Written for the variant you picked above: Lilac dusk

Render a horizon in exactly three colours with ordered dithering, in raw WebGL (one full-screen triangle). Quantise gl_FragCoord to a cell grid of `pixel` CSS pixels (×DPR) and evaluate a continuous brightness field at each cell centre: - Sky above a ridge line (horizon at 34% height plus two octaves of 1-D value noise): 0.72·e^(−3.2·up) + 0.1, plus a sun halo 0.55·e^(−7r) + 0.35·e^(−2.6r) and a crisp disc at r < 0.05 (aspect-corrected), all dimmed as the sun drops. - Ground below: a faint haze 0.22·e^(−4·down) and the sun's reflection as a narrow vertical streak with fine horizontal ripples (sin(y·240)); the ridge edge is held dark. Map brightness to three tones with an 8×8 Bayer threshold built from the recursive bayer2 trick (fract(x/2 + y²·0.75)), q = floor(v·2 + threshold), and pick ground / mid / light. The canvas uses image-rendering: pixelated. It's static by default: render once, and again on resize. Optionally the sun sets and rises on a 3-minute cosine, redrawing only when it has moved enough to change pixels. Pause offscreen; reduced motion keeps it still. Selected variant — Lilac dusk: Three tones [#0b080d ground, #3a2748 mid, #e6d6f2 light] — a violet dusk; static (setting off). Type ink #f3ecf7, muted #b9a9c7.

Notes

Interaction

None — it's a quiet backdrop for type. The 'setting' variant moves imperceptibly over minutes.

Motion

Static by default. With setting=true the sun follows a 180s cosine and only re-renders when it moves by a dither step.

Accessibility

Decorative canvas (aria-hidden). No flashing; the optional motion is far below perceptible speed and is disabled under reduced motion.

Responsive

Re-renders at the new size on resize; the dither cell stays a fixed CSS size so the texture never blurs.

On touch

Nothing to do on touch — it renders identically.