BLOOM. Design guide · Site 10 of 25
How this site was made

Plants written
as grammar.

BLOOM is a fictional night conservatory. Its rule: every plant on the page must be grown, not drawn — each one is an L-system rewritten and rendered live, so no visitor's garden matches another's.

Concept

Aristid Lindenmayer described plant growth as string rewriting in 1968; the site takes him literally. The hero plants a bed of ferns, orchids, and willows along the bottom of the viewport and grows them segment by segment. Each specimen plate prints its actual production rule — the same string the canvas obeys — like the Latin binomial on a botanical plate.

Palette

Midnight moss#0E1B13
Leaf#7FAE8B
Fern#48755A
Chimera orchid#D76FAE
Lamplight#F2EAD9

A glasshouse after closing: greens lit from below, one improbable orchid magenta reserved — like in the plants themselves — for the growing tips.

Typography

The night conservatory.

Italiana — display. Hairline romans with an engraver's flourish; conservatory signage from a century that took gardens seriously.

Orchis chimaera

Alegreya Italic — the Latin voice of the plates; Alegreya roman carries the prose, Alegreya Sans the small-cap labels. One superfamily, three registers.

Techniques

ElementHow it works
L-system engineA rewriter expands each axiom through its rules (4–5 generations), then a turtle interprets the string into segments — [ pushes state and shrinks the step, branch angles carry ±14% organic error, and the willow's rule is genuinely stochastic: each F flips a seeded coin between left- and right-handed branchings.
Growth animationSegments draw in generation order, a couple dozen per frame, with stroke width and alpha decaying by branch depth — so plants thicken at the trunk and mist out at the crown. Terminal segments get a bloom dot; the orchid's magenta only ever appears at tips.
Seeded uniquenessA Mulberry32 PRNG seeds every plant, so "replant the garden" genuinely regrows different individuals of the same species.
Lazy sowingSpecimen plates sow on IntersectionObserver and regrow on click; the hero garden replants on resize.
AccessibilityReduced motion renders each plant fully grown in one frame. Canvases carry descriptions; every rule is printed as text.

Interaction map

You doThe page does
ArriveThe garden grows up from the bottom edge, each plant at its own pace
Click “Replant the garden”New seeds, new individuals, same species
Reach a specimen plateIt sows and grows; click it to regrow another individual
← Back to the glasshouse