Generative Assets · build notes · site 49

Quintessence — the heart is a decision

A working glass still you run with a single flame. Heat the charge, read the head thermometer, and route the drops into three receivers as they come over. The essence you seal is exactly — only — what you caught. The whole page has one job: make you slow down and choose the cut.

i. Concept

Quintessence is a fictional distiller's bench — Bench No. 3, at the Old Customs House in Fremantle — that teaches the one thing a still can't tell you: when to cut. The audience is anyone who likes a machine they have to earn. It isn't a page about distilling; it is the still, simulated closely enough that impatience is punished and a steady hand is rewarded with a named, coloured, described essence.

The heads take an hour, the hearts take your whole attention, and the tails take advantage.

ii. Palette

#2A2E33 · lab slate

The bench and glassware ground. A cool, low-key grey so warm light reads as heat.

#F2A65A · flame

The only thing that moves the system. Reserved for fire and the flask running too hot.

#C08552 · copper

The condenser worm and structural marks — numerals, rules, the heat-conducting metal.

#D9B96A · distillate gold

The prize. Drops, the hearts vial, the sealed essence — the colour you are working toward.

#EAE4D8 · ink

Body text on slate at ~9:1 — warm paper-white, never clinical.

The discipline: orange is heat, gold is what you earn. Copper is the metal in between. Nothing else takes a colour, so when the head readout turns from ink to gold, the meaning — this is the heart, cut now — arrives before you finish reading it.

iii. Type

Cormorant Garamond — the voice of the bench. Big italic display for the headline and the essence name, where a distiller's romance belongs; the numerals on the roman numerals and stat values carry the same hand. It's the boldness, spent deliberately.
Jost — everything operational. Controls, readouts, guidance log, tables. A geometric grotesque at 300 weight with wide tracking on the labels keeps the instrument calm and legible while the serif does the emoting.

iv. Techniques

The signature is the simulation itself — drops you earned. A small thermodynamic model runs on the canvas at 60fps. Each charge is four compounds with real boiling points and volumes; the evaporation rate of each is a sigmoid of how far the flask temperature sits above its boiling point, so fractions come over in sequence — heads, then hearts, then tails — exactly as they do in a real run. Flask temperature integrates flame heat in against ambient loss and the latent heat the vapour carries away, which is why a boiling fraction holds the head thermometer on a plateau: the mixture spends your heat as vapour instead of temperature. The head readout tracks the boiling-point-weighted mean of whatever is currently vaporising, so it genuinely reads the composition crossing the swan neck.

Drops condense from a buffered vapour mass and are routed to whichever receiver you've selected; the essence you seal is composited from the exact molecules in the hearts vial, which yields the final colour (a weighted RGB mix), a generated tasting description, and a heart-purity score. Push too hard and two failure modes bite: past 112 °C the pot scorches and stains every later drop, and a starved flask on a tall flame can surge, spitting raw charge into your receiver. Everything is drawn by hand — canvas 2D for the glassware, flame (additive lighter petals), vapour, condenser coil and drops; SVG for the sealed flacon with a turbulence-filter haze; CSS gradients for the frame and controls. The favicon is an inline SVG drop. No photographs, no renders.

v. Iteration log

Pass 1 · Craft

Lifted the metadata grey (--faint) from #6E6B61 to #857F70 — the tiny tracked labels on the readouts, chips and tables were sitting near 2.6:1 on the panels; they now clear ~4:1 without flattening the hierarchy below the #A19C8E body copy. Removed a dead no-op that toggled a hot class on the head readout with a hard-coded false, and an abandoned railTarget variable that was assigned but never read. Re-read the copy against the banned-word list — clean — and confirmed the plateau temperatures in the prose match the simulated boiling points.

Pass 2 · Depth

Wired the head readout into the physics: when the vapour's mean boiling point sits inside the charge's heart window, the Head value turns gold and its label copper — a live, silent "cut now" that ties the numeric instrument to the guidance log. Replaced the instant vial jump with a real slide: the three receivers now glide under the drip tip on an eased follow when you change the cut, finishing the intent the old railTarget only gestured at. Added a one-shot pulse on the Seal button the moment enough hearts collect, so the payoff announces itself. The moth drawn to a tall flame stays as the second-read reward.

Pass 3 · Hardening

Headless QA at 375/768/1440: no horizontal overflow, hero and canvas visible, zero console errors; drove the model to a heart cut and sealed to confirm the essence card composes. Chanel rule: cut the flask's secondary glass highlight — one clean top-left arc reads as blown glass; two read as fussy. Verified the reduced-motion path renders a settled frame on a throttled setInterval loop (no drops, no moth, vials snap), the rAF loop suspends on document.hidden, DPR is capped at 2, and the canvas re-lays out on resize. :focus-visible rings are present on every control including the custom chips and segments.

vi. Honest notes

The thermodynamics are plausible, not rigorous — boiling points and rates are tuned for a readable ten-to-ninety-second run, not chemically exact. The heart window is generous enough that a patient first-timer will land a fair cut, which is deliberate. Worth a human eye on the canvas at the very narrow end of 375px, where the still scales to its minimum viewport width.