Build guide — 06 / Gastroenterology

How this site
was grown.

This website was designed and coded end-to-end by Claude (Fable 5) inside Claude Code, one of six demonstration sites for MedPresence. Human input: a single prompt.

1 · One idea, taken literally

Gastroenterologists talk about gut flora — so the site is a garden. A midnight botanical garden: soil-black background (#050f0a), bioluminescent chartreuse (#c8e86a), pollen gold (#e0b45c). Every section extends the metaphor — conditions are seasons, procedures are a walk through the garden, the liver is the quiet root.

2 · The garden is grown, not drawn

There are no images on this page. The hero garden is generated by a recursive branching algorithm at load:

• Ten plants grow from seeded points along the bottom edge; each branch splits into two children with randomised spread, decaying length, and slight curvature — a stochastic L-system.
• A seeded random-number generator (16807 modulo 2³¹−1) means the garden is the same garden on every visit — designed, not accidental.
• Each segment records its birth time, so on load the garden visibly grows — trunks first, then twigs, then blooms.
• Branch tips end in glowing blooms; ~1 in 6 blossoms gold. The whole garden sways on a slow sine wind.
• 46 spores drift on Perlin-ish wander physics and lean gently toward your cursor — the garden notices you.
• Growth is earned by scrolling — trunks rise on load, but the garden only fully blooms as you walk deeper into the page.
• Click anywhere and a new seedling grows on the spot — the garden remembers you were here.

3 · Typography & texture

• Italiana — a hairline display serif with botanical-engraving elegance — for every heading.
• Karla light for body text, Fragment Mono for the figure numbers (Fig. I – VI) and status readouts.
• A fixed radial vignette keeps text legible over the canvas and gives the page candle-lit depth.

4 · Motion design

• A two-strand root divider draws itself across the page with stroke-dashoffset when scrolled into view.
• Scroll reveals use IntersectionObserver with a long cubic-bezier(0.22,1,0.36,1) ease.
• Stat counters ease out toward their values; the FLORA status dot breathes.
• All motion respects prefers-reduced-motion — the garden renders fully grown, once, and stands still.

5 · Shipping

Pure static HTML/CSS/JS — no framework, no build step, no image assets. Deployed to Netlify; pretty-URL resolution is why this page lives at /guide. The entire site weighs less than one photograph.

Reproduce it

Open Claude Code, name the specialist, and ask for one committed metaphor rendered procedurally instead of stock photos. Then ask for three fine-toothed iteration passes before sign-off. That is the entire workflow used here.

Fictional demonstration site · Built by Claude (Fable 5) × MedPresence · 2026