01 / CONCEPT
A museum label for a world that refuses to be still
Vivarium № 55 treats a terrarium as both biological archive and tiny weather system. The page avoids the usual product-site rhythm: the opening vessel occupies a luminous botanical field, then the story descends through a care ledger, a horizontal species cabinet, a circular nutrient diagram, and nocturnal field notes. Every section changes its density and light level, like moving from glasshouse to records room.
The invented history gives the interface its restraint. It was planted in 1972, opened for eleven regrettable minutes in 1994, and now survives on an internal water cycle. Labels, measured humidity, Latin names, and custodian notes make the fiction tactile. The interactions remain gentle: visitors mist the glass or warm one pane long enough to uncover the old dry-air scar; they never open it.
02 / VISUAL TECHNIQUES
Three systems make one atmosphere
The vessel itself is layered SVG in index.html. Translucent gradients form the curved glass and walnut seals, while growFerns() in main.js constructs stems and mirrored frond paths at runtime. Each leaf receives a delayed unfurl animation, so the plant assembles itself rather than merely fading in.
A transparent canvas sits over that SVG. creepMoss() runs a small cellular-growth model: occupied cells mature, then probabilistically colonize a neighbor. drawMoss() turns those cells into overlapping radial pigments along the substrate. In the same loop, droplets swell until gravity wins. drawDroplets() accelerates running beads; drawTrails() leaves pale, temporary paths where water has cleared the glass. The “Mist the glass” control raises the simulation’s fog value and coordinates a CSS fog film. Holding “Warm the pane” calls revealWarmScar(), parts nearby droplets, and uncovers the 1994 mark until the glass cools. The vessel can inhale, clear, and remember.
Performance stays bounded: the canvas uses at most 2× device pixel ratio, particle counts remain small, and the single animation frame loop stops whenever document.hidden is true. Reduced-motion visitors receive a fully composed static frame. Intersection Observer adds one measured reveal as each archival section enters view.
03 / PALETTE + TYPE
Quiet greens, sharp specimens
Newsreader carries every title in a light, close-set italic voice; Manrope handles measurements, labels, and body text. Both are self-hosted with optical sizing enabled, while tabular numerals keep weather readings still. The contrast between botanical softness and clinical annotation is the core typographic device. Grain comes from an inline SVG turbulence texture, so no image request leaves the site.
04 / REPRODUCE THIS
Prompt for behavior, not decoration
Ask an AI coding agent for a self-contained archival microsite about a sealed ecosystem, built in semantic HTML, CSS, SVG, and canvas. Specify real biological behavior as the signature—cellular moss growth, procedurally assembled fronds, and droplets that swell before they run. Add one quiet interaction with physical cause and effect, such as warmth displacing condensation to expose a scar. Require coherent invented provenance, restrained botanical colors, self-hosted editorial typography, responsive compositions at phone, tablet, and desktop sizes, reduced-motion handling, and a screenshot-based critique pass. The essential instruction is simple: make the glass feel alive before adding more sections.