Designing
the wait.

Cool mountain, warm room

First Flush is built around one contrast: the cool, nearly weightless air of a high-altitude garden and the dense warmth of a copper tasting room. The opening image establishes distance, weather, and scale. The visitor then descends into the dark green steeping laboratory, where waiting becomes visible as the liquor deepens.

The page behaves like a journey down the estate. Botanical precision follows sensory theatre; the process rail converts a day of craft into a measured sequence; the elevation profile returns the story to geography. Cormorant gives the estate an old, cultivated voice, while Jost keeps labels and instruments exact.

Techniques in the cup

The live infusion

In main.js, each flush owns a four-stop RGB palette, ideal temperature, sweetness point, extraction exponent, and five note stages. colorAt() curves the interpolation so the glass changes quickly at first and then settles. curvePoint() and renderCurve() draw the same state as a live laboratory graph. render() updates liquor, clock, temperature, brightness, body, bitterness, leaves, and the curve marker from one shared time value. The range control and play button manipulate that state directly. setLightTable() opens a daylight aperture whose glow and chromatic read share the live palette.

Leaves, steam, and glass

makeLeaves() creates thirteen lightweight CSS leaf shapes. The single tick() loop moves them with translated and rotated transforms, pauses while the document is hidden, and caps frame deltas. manageMist() also pauses the hero film when hidden or reduced motion is requested. Steam uses three SVG paths; the glass combines clipped borders, a colored liquid plane, meniscus, glint, saucer, and radial light. The kettle is code-drawn SVG, not an image.

Estate drawing system

The “two leaves and a bud” plate is hand-drawn SVG with semantic title and description. Its veins, labels, and plucking mark reuse the terracotta annotation color. The elevation profile uses an SVG gradient and diagonal hatch with named gardens and elevations. observeSections() gives these drawings one restrained scroll entrance. A fixed grain layer and contour lines bind photographic and coded surfaces without external dependencies.

From still to weather

The estate establishing shot began as a still generated with GPT Image 2 through Higgsfield. It was animated into a five-second drifting-mist loop with Kling 3.0, again through Higgsfield, then stored locally as hills.jpg and mist.mp4. The picture supplies composition and detail; the film supplies only weather. CSS scrims, color grading, contours, and grain fuse the pair with the typography. Every other visual—the kettle, glass, steam, leaves, botanical plate, curve, and elevation profile—remains code-generated SVG, CSS, or DOM.

Palette & type

The dominant field is tea green moving toward mist, sharpened by terracotta and amber. Copper appears only where warmth, extraction, or human handling enters the story.

Reproduce this

Ask an AI agent for a story-led, responsive editorial site where one physical process becomes the primary interaction. Specify a dominant natural color field, one warm material accent, self-hosted display and body fonts, and at least two bespoke SVG diagrams. Require the interactive state to drive every related visual at once, and ask for reduced-motion, visibility pausing, semantic labels, and screenshot review at phone, tablet, and desktop widths.