Lantern

Overview

Lantern starts from one idea taken completely literally: a lighting designer decides what the audience can see, so the site is lit rather than decorated. Four registered (@property-typed) custom properties — key, wash, haze, tint — hold the live lighting state, and because they’re registered rather than plain custom properties, the browser can genuinely interpolate them instead of jump-cutting between values; scrolling runs a literal lighting cue stack, and every other rule on the page reads from that same source, so changing one cue changes the whole page together. The hero renders volumetric light beams in haze off the main thread, and a desk scene mixes six lanterns additively in linear light — the way light actually combines, not the way a naive alpha blend fakes it. Colour is authored in OKLCH throughout, for the simple reason that a dimmer is fundamentally a lightness axis, and OKLCH is the one colour space where dimming a light reads as a straight, perceptually even move. Layout itself is built as a cue sheet aligned on CSS subgrid rather than a conventional page skeleton.