How this site was made

i. Concept & art direction

The Verdant Society is a conservatory of rare and endangered plants, so the site behaves like the thing it sells: a living collection. There are no photographs anywhere — every specimen is a botanical line drawing built in SVG, presented on herbarium sheets with typewritten collection data, the way a real herbarium mounts its plants. The one bold move is that the drawings are alive: stems draw themselves in, leaves unfurl as you scroll, and the hero orchid breathes.

ii. Palette & type

Foliage greens do the talking; orchid magenta is rationed strictly — it appears only where something blooms: flowers, conservation status, and the act of adopting.

• #F4F8EE glasshouse white
• #FCFDF8 herbarium sheet
• #1C3A28 deep fern ink
• #2F5A3B illustration stroke
• #A9C43C chartreuse
• #A8347F orchid magenta

iii. The signature: plants that grow

Each plate is generated by a small Python script that composes stems, leaf blades and petals from Bézier curves — six species, about four hundred hand-parameterised paths. Three tricks make them grow:

1 · pathLength="1" makes stroke drawing trivial

Normalising every path’s length to 1 means one dash rule animates all of them — no JavaScript measuring, no getTotalLength().

<path pathLength="1" d="M 180 442 C 171 380 …"/>

.specimen path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.specimen.grow path {
  animation: draw .8s cubic-bezier(.55,.05,.35,1) var(--d) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

2 · Leaves unfurl from their attachment point

The generator knows where each leaf meets the stem, so it writes that point into the group’s transform-origin (in viewBox units) plus a stagger delay. Scale + rotate with an overshooting ease reads as organic growth.

<g class="unfurl"
   style="transform-origin:88px 300px; --d:.5s; --r:12deg">…</g>

.js .specimen .unfurl { opacity:0; transform:scale(.18) rotate(var(--r)); }
.specimen.grow .unfurl {
  animation: unfurl 1.15s cubic-bezier(.3,1.35,.45,1) var(--d) forwards;
}

3 · One observer, one class

An IntersectionObserver adds .grow when a plate is 35% visible, then forgets it. The hero grows on load and afterwards breathes on an 8.5-second loop. Under prefers-reduced-motion, every plate simply arrives fully drawn — the page reads like a printed flora.

new IntersectionObserver(entries => entries.forEach(e => {
  if (e.isIntersecting) { e.target.classList.add("grow"); io.unobserve(e.target); }
}), { threshold: .35 });

iv. Three passes over the bench

1. Pass 1 — correctness. Redrew the orchid pouch and camellia petal rings from the first screenshots, fixed hero column balance at 1440px, tightened the herbarium label rhythm, and stopped the mounting tape from overflowing the sheets on mobile.
2. Pass 2 — elevate. Gave every species its own growth choreography (stems first, leaves bottom-to-top, bloom last), added the fill-tint that blushes into petals after they draw, the hover sway on the sheets, and the day-seeded glasshouse conditions strip.
3. Pass 3 — taste. Chanel rule: removed a fallback timer that quietly pre-drew plates off-screen — now every plate draws in front of you, never behind your back. Taught the hero orchid to lean a degree or two toward the pointer, like a plant to the light. Rebalanced mobile plate sizes and verified reduced-motion serves fully-drawn plates with zero animation.

v. Do this yourself

A recipe for a site of this kind, with Claude at the bench beside you:

1. Pick a subject with a real visual tradition — herbaria, star charts, watch drawings — and steal its conventions, not its clichés. Ours: plate numbers, accession labels, mounting tape.
2. Write the copy first. Real species, real dates, real stakes. Design follows facts.
3. Ration your accent colour by rule, not by taste. Here magenta may only appear where something blooms.
4. Ask Claude to write a small generator script for your illustrations instead of drawing freehand — parameterised Béziers stay consistent across a whole collection and can be tuned in numbers.
5. Normalise every path with pathLength="1" so one CSS rule animates the lot.
6. Encode each leaf’s attachment point as its transform-origin and stagger delays along the plant — growth order is what sells the illusion.
7. Screenshot, critique, repeat — three passes minimum. Read your own page like a stranger.
8. Decide what reduced-motion users get on purpose. A fully-drawn botanical plate is a feature, not a fallback.