The Concept
Apothecarium is a fictional Blackfriars apothecary trading since 1783. The design tries to make two lies feel true: the ink is 250 years old, and the page is being read beside a candle that should have gone out generations ago. The copy does half the haunting, so every label names a proprietor, a price, a contraindication, or a shop superstition.
Generated Folio Workflow
Pass 3 gives the shop a true key plate: /assets/gen/apothecarium/plate.jpg, made as a GPT Image 2 still through Higgsfield. The production path for these assets is still first, then a Kling 3.0 ambient loop through Higgsfield when motion is needed, stored locally with a matching poster. This page uses the still in the hero; .plate-sleeve color-grades it with sepia, umber shadows, candle scrims, and the data-loupe interaction in main.js. No remote media is requested. The remaining vessel, moth, wax, candle, and botanical marks are still code-generated SVG/CSS.
Engraving System
The signature plates live in index.html as inline SVG symbols. Their outlines are ordinary strokes, but the shadows are hatch-pattern fills from the shared <defs>: angled lines, cross-hatching, stipple dots, and dark-ink twins for parchment panels. The copper-plate wobble comes from #etch and #etch2, where feTurbulence feeds feDisplacementMap. Straight vectors therefore misbehave like hand-cut burin lines instead of crisp icons.
Candlelight & Motion
In styles.css, .candle-glow screens warm radial light over the whole room while .candle-shadow multiplies a breathing vignette and shelf-shadow. The flicker() function in main.js jitters --fl, --gx, and --gy at irregular 80-250 ms intervals; hueDrift slowly shifts temperature. The timer stops when the tab is hidden and becomes steady under prefers-reduced-motion.
Ledger & Compounding
Remedies are ledger entries, not product cards: dotted leaders, stamped numbers, old-style figures, Latin names, and tiny italic warnings. The compounding table uses real checkboxes styled as drawer pulls. Choosing three botanicals calls compose(), which combines authored fragments, calculates shillings and pence, chooses a stable tincture number, and stamps the label. updateChoiceRail() now echoes the three selected drawers so the mechanism feels visible before the prose appears.
Palette & Type
- IM Fell English carries display text, stamps, plaques, and the seal because its uneven forms already feel printed.
- EB Garamond carries prose, with old-style numerals enabled so prices sit like ledger figures.
- Texture is a tiled SVG noise data URI, mixed softly over both the room and parchment.
Reproduce This
Prompt an agent: “Build a dark-academia apothecary site with no external requests. Anchor the hero with one local generated medicinal folio, color-graded into the palette, then draw the rest of the botanical and vessel plates as inline SVG symbols with hatch-pattern fills and feTurbulence displacement. Add whole-page candlelight using CSS radial overlays driven by a JS flicker variable, with reduced-motion and hidden-tab pauses. Set remedies as ledger rows with prices, Latin names, and contraindications. Make a three-checkbox botanical composer that writes a poetic tincture label. Use self-hosted IM Fell English and EB Garamond, then write shop-specific copy until the fiction feels older than the CSS.”