Mosswell

Site 08 of fifteen · A design guide

The Making
of Mosswell

A two-hundred-year-old apothecary that never existed, built in a few hours by a machine that doesn’t sleep. This page explains the concept, the typography, the morphing lens, and every prompt that made every image — the full recipe, entered into the ledger.

01 · Concept

A naturalist’s desk, under glass

The brief: a 200-year-old botanical apothecary, redrawn. The register to hit was warm and tactile, never twee — a working desk, not a gift shop. Everything on the page behaves like paper: plates drift at three depths like pressed leaves under glass, specimen labels sit at hand-placed 1–2° tilts, the correspondence section is an actual letter with a wax seal poured from the same blob engine as the hero lens.

The voice is period with a wink — botanically accurate uses for meadowsweet, mugwort, elderflower and yarrow, written the way an 1824 ledger-keeper would write them if he knew he was being read in 2026 (“the chemists borrowed from our meadows and called it progress”).

Four rules were set before the first line of CSS:

  1. Nothing perfectly round, nothing perfectly straight — every shape is drawn through hand-tuned points, every label tilted.
  2. One image style only: copper etching + watercolour tint on cream, enforced with a reference-image chain.
  3. Cream is a material, not a background — paper texture, foxing, grain at 4.5% multiply.
  4. The lens is the protagonist. Every other motion stays quiet so the breathing is visible.

02 · Specimen

Palette & type

Fraunces · opsz 144 · SOFT 78 · WONK 1 — display

Queen of the Meadow

Fraunces italic · opsz 144 · SOFT 100 — the apothecary’s hand

Filipendula ulmaria

Fraunces · opsz 32 · SOFT 44 · WONK 0 — dossier entries

Honeyed, almond-sweet · gathered high summer

Cabinet Grotesk 400–800 — the modern clerk

Tinctures, bitters & botanical preparations, bottled without hurry. ENTERED IN THE LEDGER SINCE 1824.

Why Fraunces: its SOFT axis rounds the terminals like letterpress ink-spread, and WONK 1 swaps in deliberately crooked alternates — a typeface with the same philosophy as the blob engine. Nothing perfectly straight. On top of the axes, the hero headline is split into letters and each letter is dealt a deterministic ±1.1° rotation and ±0.035em baseline shift — hand-set type from a worn case of sorts.

03 · The signature

A lens that breathes

Try it — the same engine that runs the Garden Index, pointed at the same plates.

The lens is one SVG <clipPath> whose d is rewritten every frame. No morph plugin, no flubber: every silhouette is the same 12 anchor points in polar form — a radius multiplier and an angular offset per point — so morphing between any two shapes is plain numeric interpolation of two arrays. A closed Catmull-Rom pass turns the points into cubic Béziers, which stay smooth at every in-between state:

// blob.js — the whole trick
// 12 radii + 12 angle offsets per shape.
// Same N ⇒ free morphing:
for (let i = 0; i < N; i++) {
  r[i] = from.r[i] + (to.r[i] - from.r[i]) * ease(t)
  d[i] = from.d[i] + (to.d[i] - from.d[i]) * ease(t)
}
// breathing: golden-angle phases,
// so it never pulses like a balloon
rad *= 1 + 0.024 * Math.sin(t * w + i * 2.39996)
// Catmull-Rom → Bézier: smooth in-betweens
c1 = p1 + (p2 - p0) / 6
c2 = p2 - (p3 - p1) / 6

Breathing is layered on top of the interpolated base each frame — per-point sine offsets with golden-angle phases and varied speeds — so the lens is never still and never uniform. In the Garden Index a ScrollTrigger per tincture calls morphTo() while the plates crossfade inside the clip; the silhouettes themselves are hand-tuned to the plant (a plume for meadowsweet, a cut leaf flung to the upper right for mugwort, a flat-topped umbel for elder, a lean feather for yarrow).

04 · Pipeline

One antique series, six generations

Every image is Higgsfield nano_banana_pro at 2K, 12 credits total. The first plate set the style; every later job passed that plate back as a reference image, which is why four separate generations read as one bound folio.

Everything else on the site — the lens, wordmark, wax seal, step markers, seasonal wheel, sprigs, favicon — is code-drawn SVG from the blob engine and a few hand-written paths. Fonts are self-hosted: Fraunces variable (opsz, wght, SOFT, WONK) and Cabinet Grotesk 400–800.

05 · Diary

Three passes with a fine-toothed comb

  1. Pass 1 — structure

    Verified both routes at 375/768/1440: all sections, fonts, and plate order correct — then the report flagged horizontal overflow everywhere. Three real bugs: the rotated hero sprigs’ transform bounding boxes count as scrollable overflow (fixed with overflow: clip on the hero); the guide’s mobile grid used 1fr, whose minmax(auto,1fr) min-content blew the lens-demo column out to 577px (fixed with minmax(0,1fr)); and CSS scroll-behavior: smooth was animating the QA harness’s programmatic scrolls, so every capture was taken mid-flight, 173px from the top, with the header “missing.” Also rebalanced page heights and separated the two-line mobile nav from the hero eyebrow.

  2. Pass 2 — craft

    Proved the two paths nobody screenshots: with prefers-reduced-motion every reveal is visible, the lens holds still, and plates swap instantly so the copy always matches the specimen; the live demo above was click-tested headlessly (morph fires, crossfade lands, button state follows). Swapped the process step-markers off the mugwort silhouette — its flung tip read like a speech bubble at 64px — tightened the process section’s entry spacing, and reflowed this page’s code excerpt so nothing clips. Zero console errors on either route.

  3. Pass 3 — the hostile critic

    Went looking for the dead spots. The postmark was an empty circle — it now carries the actual posting date, set the day you read it, because the letter says “this present day” and the site should keep its word. The hero glass now tilts a degree or two toward a fine pointer, like a loupe nudged on a desk. The footer gained the wax-seal colophon (“Mosswell · MDCCCXXIV — MMXXVI”). Final re-verify: clean report, both routes, three widths, reduced-motion included.