Folium Curator’s note — how this was grown

Curator’s note · for builders

How the herbarium grows

a living plate made from grammar, ink, and one seed number —

The concept

FOLIUM is a fictional 19th-century botanical archive that stopped preserving dead plants and began preserving their rules. A fresh 32-bit session seed is chosen on load; from that one number, main.js derives every specimen, accession code, Latin binomial, ledger row, and marginal note. Reloading does not shuffle static illustrations. It resows the archive, so each visit becomes a private accession day.

Visual technique

The signature plants are stochastic L-systems drawn as inline SVG. mulberry32(seed) supplies deterministic randomness, hashSeed() creates per-bed descendants, and expand() rewrites an axiom through weighted rules from the GENOTYPES table. interpret() acts as the turtle: F advances, +/− turns, [ ] branches, L places a leaf, and H produces a seed head. It also records distance from the root collar; buildPlant().animate() uses that distance as a growth clock, drawing stems with strokeDashoffset and unfurling leaves with a springy Web Animations API scale. No animation loop is needed.

The herbarium staging lives in styles.css: data-URI SVG feTurbulence gives the cream paper its tooth, layered radial-gradients create foxing, skewed .tape strips mount each sheet, and a stamped SVG textPath circles every accession. buildAnatomy() reads real coordinates from the generated plant, then draws dashed leader lines to root collar, internode, node, lamina, and inflorescence labels. initSporeTrail() and emitSpore() add the final living-paper behavior: pointer or keyboard focus drops tiny leaf motes and L-system marks that lift away with CSS-only transforms. The diagram is not manually placed; it remeasures itself whenever the plate regrows.

Palette & type

  • aged cream #f6f0df
  • botanical green #4a5d3a
  • deep green #2e3d26
  • ochre #c8912f
  • faded ink #3b3630

Newsreader carries the italic display voice; EB Garamond sets archival body copy and small caps; Caveat becomes crayon, label hand, and curator marginalia. Every font is self-hosted from /assets/fonts/.

Reproduce this

Prompt an AI agent: “Build a pure HTML/CSS/JS living archive. Use a seeded PRNG, weighted L-system expansion, and a turtle interpreter that emits SVG stems, leaves, roots, and seed heads while recording distance from the root. Animate by distance with Web Animations API stroke drawing and leaf unfurling. Define several genotypes as data. Style the page as mounted herbarium sheets with paper grain, foxing, tape, handwritten labels, self-annotating anatomy, seeded fictional collection records, and focus-safe paper motes. Regenerate from one visit seed so no two openings match.”