The Alembic Five

Five ways home.

Five complete candidate homepages for Alembic, each committing fully to one idea, all built from the same cleared copy and the same brand. The Observatory won and now serves as the homepage; the previous homepage is preserved as designs/previous-home/. Each candidate went through three logged iteration passes; the logs are below.

Best compared on the phone you are holding. Every candidate is self-contained, under its weight budget, and respects reduced motion.

Candidate I

The Alembic

The name taken literally: a working still spans the whole page. The charge boils in the hero, vapour rises, condensation beads down a full-document condenser, and the distillate collects in a receiving flask at the close.

Techniques
Raw canvas 2D still, no libraries: boiling charge, curl advected vapour, condensation that grows, pins, coalesces and runs, height field pools, glass baked from offset polylines.
Pass 1
Phone nav became a real aria disclosure panel, no clipped labels; reveals cut 800ms to 340ms; receiver right aligned so the bend threads the gutter.
Pass 2
Menu panel made an opaque surface; press on the flask stirs the charge; flask and receiver retimed onto local scroll curves; focus rings fixed on gold.
Pass 3
Balanced heading wraps killed three orphan words; nav disclosure raised to 960 after finding the same truncation at tablet width; tighter section rhythm.
Weight
631 KB loaded transfer, screenshots included
Open The Alembic

Candidate II

The Study

The homepage as the first pages of a beautifully set clinical text on warm cream: drop caps, marginalia, real footnotes carrying the stats, plates for the screenshots, a gilt ribbon that follows your reading. The one light-first candidate, with almost no interface chrome.

Techniques
Fraunces set as a book face at a 62ch measure: drop caps, running heads, margin notes, real footnotes, dot leaders, catchwords, gilt ribbon bookmark, plates, fleurons, laid paper, prints as a book
Pass 1
Ribbon rebuilt as woven silk with dark selvedges and a deeper tail, every scroll fade-in deleted so chapters arrive as set type, plates given tipped-in leaves with printed rules and Oxford-rule captions
Pass 2
Catchwords carried to six chapter feet beside centred folios, a full print stylesheet added with static running heads from data-runhead, and the frontispiece cut to one 440ms arrival
Pass 3
Leaders re-anchored right so they align down the page, footnote marks kerned tight and bound against wrapping alone, and seven letter-spacing optical margins balanced
Weight
545 KB loaded transfer, screenshots included
Open The Study

Candidate III

The Filing Room

"Everything is a file" made physical: a room of warm paper records under one light. Folders that truly open, index tabs that stagger like real dividers, stats on brass label plates, the founder on a typed record card with a paper-clipped photograph.

Techniques
Procedural SVG grain, stacked leaf-edge shadows under one top-left light, CSS filing drawer as nav, details folder, ARIA tablist with no-JS fallback, IO reveals, no canvas.
Pass 1
Skirting board and floor closed the void above the footer, typed catalogue marks and lit tabs on the six product cards, reveals cut from 720ms to 280ms.
Pass 2
Drawer folds became real links to per-card ids with focus rings and 47px hit areas, deeper paper under foolscap and record card, stamp rotated on phone.
Pass 3
Fixed two heading orphans, the one shadow casting against the light, a doubled section gap, a label with two destinations, and a focus ring clip.
Weight
556 KB loaded transfer, screenshots included
Open The Filing Room

Candidate IV

The Observatory

The dark-glass direction made vast and cinematic: a live shader sky of slow volumetric light behind the whole page, typography floating at different depths, glass panes catching the light. Quiet, deep, almost no colour but the gold and the greens.

Techniques
Raw WebGL fbm shader sky, half-res upscaled, 30fps cap, DPR capped at 2, pixel budget plus adaptive downscale, CPU weather vec4, three-tier scroll depth on the translate property, painted fallback.
Pass 1
Fixed 75px phone overflow from the 140 percent stratum glow and the hero scrim bleed, added overflow-x clip, cut reveal timing to about 400ms.
Pass 2
Added four-period weather drift with a random per-load phase, graded three depth tiers, retired the scroll cue on first scroll, fixed fallback sky brightness.
Pass 3
Collapsed the 861 to 900px chrome seam, gave the skip link a dark focus ring after it measured 1.00 to 1, normalised uppercase tracking, added text-wrap pretty.
Weight
568 KB loaded transfer, screenshots included
Open The Observatory

Candidate V

The Instrument

Swiss-technical precision: an exposed grid, figures and sheet numbers like an instrument manual, and at the centre a living diagram of the architecture claim, with client data flowing only inside the machine boundary and a hard zero at the line nothing crosses.

Techniques
Exposed hairline grid, crop marks, pathLength 100 self drawing SVG on IntersectionObserver, marching ants inside a hard boundary, blocked packet, instrument readouts, print stylesheet.
Pass 1
Killed the phone Fig. 0 void by cropping 104 dead viewBox units, sped the draw to 1.3s, cut reveals to 400ms, added six drawn parts-list glyphs.
Pass 2
Added a print stylesheet, stable fig-0 to fig-7 ids with permalinks and next sheet links, an INDEX list of figures, and a one shot packet killed at the boundary.
Pass 3
Fixed an uppercased contact address, an orphaned heading word (balance plus nbsp), the dead row at each section foot, and declared color-scheme light.
Weight
552 KB loaded transfer, screenshots included
Open The Instrument