← Vespiary·Build notes

How Vespiary was made

A paper-wasp nest whose hexagonal comb is not drawn but grown — a real stigmergy simulation tessellating outward inside CSS-3D paper shells you can turn. Here is the reasoning behind the palette, the type, and the build.

The concept

A building with no architect.

VESPIARY is a fictional field-observatory for paper wasps. Its single job is to make one idea felt in the body: that a perfectly ordered structure can emerge from thousands of tiny, local decisions with no plan and no planner. The comb you watch above is a genuine stigmergy simulation — each hexagon is added where the existing walls invite it most strongly — wrapped in a swirled paper envelope you can orbit in 3D. The audience is anyone who likes to see order arrive on its own.

Palette

Colour scraped from a fence.

The nest is literally the weathered timber it was chewed from, so the palette is all pulp and shadow — no colour the wasp couldn't make. The one bright note, wasp gold, is reserved for lines and the freshest working edge, never for small body text.

#B9AE9C
Pulp grey — dried comb & body copy accents
#8A6A4A
Band umber — the swirled envelope strips
#E0A83C
Wasp gold — marks, rims, the wet edge only
#2A241C
Shadow — the interior between the layers
#EDE4D2
Paper ink — body text token, ≥7:1 on shadow

Contrast note: the concept's gold is a marks colour. Body and secondary text run on the dedicated ink tokens (#EDE4D2 / #C4B6A0), both clearing 4.5:1 on the dark ground — the recurring gold-on-texture failure from earlier waves is designed out.

Typography

Fraunces & Karla.

Vespiary
Fraunces — display

A soft, slightly wonky old-style serif. Its SOFT and WONK axes give the big italics a hand-chewed, organic wobble that suits paper made by mouth. Optical size is pushed to 144 on headlines so the ball terminals read at scale.

Field notes
120° always
Karla — text & labels

A grotesque with a tall x-height and even colour. It holds the eyebrows, controls, and readouts at small sizes with wide tracking, letting the serif carry all the personality.

The typographic bravery is the centre pull-quote — a 16-character-wide slab of Fraunces italic at its softest, wonkiest setting, so the sentence itself looks pulped.

Technique

CSS-3D shells around a living canvas.

No WebGL and no 3D library — the nest is pure CSS 3D. Two nested paper shells are each a barrel of ~22 flat facets, placed with rotateY(i·16.4°) translateZ(R), plus a tilted crown ring and a petiole stalk. Per-facet brightness() is computed from each facet's angle to the camera, so the paper self-shades into a rounded form as one rotateX/rotateY on the parent turntable orbits the whole assembly. The front facets are omitted to tear open an aperture onto the comb, and facets are revealed back-to-front as the colony grows, so new bands of pulp visibly wrap the nest.

The signature element — comb by stigmergy

Inside the shells sits a 2D canvas running the real simulation. The comb is an axial hex grid. A frontier of empty cells adjacent to built ones is scored by (built-neighbour count)^2.2 · e^(−0.16·ring) — a genuine stigmergic rule: a pocket already bounded by three walls is a far louder building cue than one bounded by one, and the mild radial term keeps the growth round. Each tick picks a frontier cell by weighted-random draw and lays pulp; the cell animates in from a wet gold to dried grey over ~1.1s while five wasp builders track to the freshest edge. Nothing is scripted or looped — reseed and it tessellates a different, valid comb every time.

Iteration log

Three passes.

Pass 1 — Craft

Rhythm, contrast, copy

  • Set a deliberate type scale and pushed Fraunces opsz to 144 on the hero so terminals resolve; headlines were reading flat at the default optical size.
  • Reserved gold strictly for marks and rims; moved all body and secondary copy onto the #EDE4D2 / #C4B6A0 ink tokens after checking contrast against the textured ground (the earlier-wave gold-on-texture trap).
  • Rewrote filler into specific field-note copy — pulp from fences, a comb a season, 120° never 137.5° — and tuned facet gradients so the paper banding reads without a raster texture.
Pass 2 — Depth

Enrich the signature, add a second read

  • Added the five wasp builders that track to the freshest cells, and the wet-gold→dry-grey cell ageing — turning a static fill into a living working edge.
  • Second-read detail: because gold only marks the newest ring, a returning viewer notices the whole comb is grey and only the growth front glows.
  • Synced shell-facet reveal to cell count so paper bands wrap back-to-front as the colony expands; added the idle 3D oscillation and drag inertia with an ease-out feel.
Pass 3 — Hardening

375px, reduced-motion, performance

  • Verified the layout at 375 / 768 / 1440: hero collapses to one column, nest scale clamps to the panel width, nav wordmark and items stay inside the viewport box (not just scrollWidth).
  • Reduced-motion path builds the full comb instantly, hides the drag hint, and never spins — a settled frame, never blank.
  • DPR capped at 2 with resize re-rasterising the canvas; rAF pauses on tab-hide with a clamped resume delta; removed a redundant vignette layer (the Chanel rule) so the scene reads cleaner.