How we built
first light.

The concept

The page begins in the indigo quiet of 04:00 and ends at 06:41, when the last bottle meets the sun. Instead of presenting “logistics” as speed or scale, the design looks at tender repetition: remembering the thyme pot, returning glass, reading a damp note, and moving without waking the street. The whole page is one long dawn gradient; every section borrows its colour from a later minute.

The round: scroll as a clock

The signature neighbourhood is a single inline SVG in index.html. Five isometric houses share roof, wall, window, and doorstep primitives. In main.js, roundProgress() converts the tall sticky section’s scroll position into a value from zero to one. update() interpolates the float between six route points, writes the CSS variables --round and --dawn, advances the round-sheet time, and adds is-delivered to each house. That class warms its curtain and drops a tiny bottle onto the step. The red route is an SVG path whose dash offset is driven by the same progress value, so map, clock, card, and sky remain synchronized.

Glass, paper, and quiet motion

The hero bottle, crate, and robin are CSS shapes: layered gradients form translucent glass, ruled rectangles form timber slats, and small ellipses assemble the bird. Doorstep notes use Caveat over repeating paper lines, with imperfect rotations and translucent tape. The empties conveyor wakes through an IntersectionObserver; its four bottles slide back toward the reusable crate with staggered delays. At Eastward Hill, playFinalDelivery() synchronises the last bottle’s descent, the warming window, a 42/42 ledger stamp, and the sunrise flare; its bottle is a keyboard-operable replay button. No photographic or generated assets are used anywhere—every visible object is HTML, CSS, or SVG, deliberately proving that code alone can carry atmosphere.

Sound is also code-made. The switch is off by default. On consent, two short sine oscillators create a glass clink while a very low triangle oscillator gives the float its restrained electric hum. Visibility changes suspend the audio context, and reduced-motion preference removes transitions, grain, and reveal choreography.

Palette and type

Outfit supplies the generous, low-tracking display type; Chivo Mono makes times and quantities feel lifted from a round sheet; Caveat turns customer notes and Leena’s sign-off into a human counterpoint. Milk-bottle white, #FFFDF4, is reserved for glass highlights and the brightest dawn text.