Concept
Golden hour as an instrument
Still House 86 is an imagined botanical gin distillery where the visitor does not merely read tasting language; they physically author it. The visual premise is the still room at 17:42, when low sun turns working copper into a gradient of umber, orange and pale gold. Label cream provides breathing room, while botanical green and juniper blue-black hold the atmosphere in shadow. The page alternates between darkness, polished copper and paper-toned specimen fields, mimicking a walk from the still floor to the keeper’s ledger and herbarium cabinet.
Visual and interactive techniques
The mechanics behind the taste
The signature wheel is generated in main.js from a ten-object botanicals array. polar() converts each fixed spoke angle and live value into SVG coordinates. Pointer movement is projected onto the selected spoke in setFromPointer(), so dragging sideways cannot accidentally rotate a flavor. Every node is also an ARIA slider: arrow keys adjust its value for an equivalent keyboard experience.
updateBlend() ranks the botanicals after every movement, selects compatible opening, middle and finish phrases, and assembles them with family-aware grammar. The same ranking updates the style, ideal proof, bottle formulation and illuminated root branch. This shared state is why the story feels coherent rather than like several disconnected widgets.
The still is layered SVG. A gradient-polished copper stroke forms the pot, swan neck and condenser. Nine vapor beads follow #vapor-path using getPointAtLength() inside animateVapor(). The loop caps updates, pauses when the document is hidden, and is disabled by reduced-motion preferences. CSS supplies the etched grain, bottle glass and load reveal. updateSunRoom() turns a second range into a moving window beam, changing copper warmth and revealing Mara Vale’s ledger note at 17:42. updateCut() moves between heads, hearts and tails with live proof and spirit-safe status. The label maker carries the top-three blend, title and wax into a code-drawn keepsake.
Palette and type tokens
A restrained house vocabulary
Marcellus carries labels, large titles and quotable prose at a single classical weight. Manrope handles navigation, data, instructions and body copy from 400 to 700. Tight display line-height and restrained negative tracking make the headlines feel engraved; wide uppercase tracking turns utility text into bottle-room notation.
Reproduce this
Prompt for behavior, not decoration
Ask an AI agent to build a self-contained distillery experience in semantic HTML, CSS and JavaScript. Specify a draggable ten-axis radar whose data must drive grammatical tasting notes and a second visual system, not simply change numbers. Request all imagery as inline SVG or CSS, a code-built copper still with path-following vapor, a responsive cut-point explainer and a personalized bottle label. Lock a copper, botanical green, juniper ink and cream palette; pair Marcellus with Manrope; require keyboard parity, reduced-motion behavior, hidden-tab animation pausing, clean audits at 390, 834 and 1440 pixels, and a screenshot-led revision pass. The decisive phrase is: “The tasting notes must obey the visitor’s hand.”