This is exemplar #3 in our cinematic showcase series — and a deliberate departure from the first two. No dark canvas, no WebGL shader, no particle morph. Instead: a naturalist's field journal on ivory paper, whose every amphibian is drawn in code.
The inspiration, and what we borrowed
The direction is harvested from MYCELIUM in Nick Saraev's fable-25 portfolio — "a field guide whose fungi are drawn in code." We reimagined it as an amphibian field journal whose frogs are drawn in code. From its build notes we took five techniques and made them ours:
Hand-inked SVG specimens. MYCELIUM wobbled each outline by hand. We reach the same look with one shared SVG feDisplacementMap "roughen" filter (fractal-noise displacement, scale ≈ 3.2) applied to anatomically-composed shapes — so every edge wobbles like ink, uniformly and cheaply, and the specimens stay easy to author and correct.
The living wetland network. MYCELIUM grew a recursive mycelial web on scroll. Ours is a recursive root-and-water network: a bold trunk, then 1–3 thinner children per segment, curved by a perpendicular control-point offset (bend ≈ ±0.32·length), width tapering by generation, drawn one segment at a time as you scroll. The advancing frontier carries a single orange mote.
Sine-breathing blobs. Eight points on a circle on independent sine offsets, the path rebuilt each frame through the midpoints — the "lily pads" in the field-note section.
Spore-print math → egg-clutch divider. A gaussian-falloff dot field (dense core, sparse edges, vertically flattened) is the section divider between the plates and the wetland.
Everything procedural. SVG + canvas only. No photographs, no generated images, no external assets beyond two Google fonts.
Design decisions
Motion is the exception
MYCELIUM's core lesson: typography and whitespace carry the voice; motion is rationed. So this page has exactly one living set-piece (the wetland). No custom cursor, no marquee, no shader — a deliberate contrast with exemplars #1 and #2. Everything is visible without JavaScript; the scripts only add entrance fades and the one growing network.
Palette & type
Ivory field-journal paper with deep forest-green ink and a multiply-blended grain so the ground never reads flat white. Brand green #72af43 is the living/brand green; orange #f5821f is reserved for every link and highlight (org mandate) — deliberately kept out of the specimen fills. Type is Spectral (a literary serif with botanical character) for display and body, with Karla for labels and figure numbers — a pairing chosen to stay distinct from the Cinematic Starter's Fraunces/Newsreader sample.
Accessibility & performance
One <h1>, semantic sections with aria-labels, decorative canvases and SVGs marked aria-hidden / given role="img" + labels, a skip link, and orange :focus-visible outlines. Body text is 20–26px throughout (nothing below 20px). Canvas loops pause off-screen (IntersectionObserver) and on document.hidden; DPR is capped at 2. Under prefers-reduced-motion the network renders its completed state, the pads freeze, the progress bar hides, and all copy is immediately visible. Verified at 60fps through a scripted full-page scroll, zero console errors, no horizontal overflow, desktop + mobile.
The reusable frog-SVG library
Each specimen is also saved as a standalone, self-contained .svg in /stf-field-guide/art/ (the roughen filter is embedded in every file, so they render anywhere). These seed the curated frog-SVG library: tree-frog, toad, tadpole, spotted-salamander, egg-clutch, and a top-down frog-topdown.
⚑ Kerry — please review every species caption below
You are the herpetologist (PhD); I am not. I wrote these captions from broadly-established amphibian facts only — no invented statistics, no IUCN percentages, nothing uncertain. Even so, please read each one and correct anything imprecise on the live page. Each caption is reproduced verbatim below. The organizational facts (world's leading org; Save The Frogs Day, April 28; grants since 2009) are the proven copy from the Technology page.
Every factual caption, verbatim for review
Plate I — Tree frog"Tree frogs bear expanded adhesive discs on each toe, letting them cling to wet leaves and smooth stems. Their large forward eyes give the broad, watchful face of a night hunter."
Plate II — True toad"A toad's dry, warty skin and the paired parotoid glands behind its eyes secrete compounds that deter predators. Built for land, it walks more than it leaps."
Plate III — Tadpole"The larval tadpole is fully aquatic — breathing through gills and grazing algae with a rasping mouth. Its finned tail drives it long before any leg appears."
Plate IV — Spotted salamander"Salamanders are the tailed amphibians, secretive and slow. Many can regrow a lost limb or tail — a feat of regeneration that has long fascinated biologists."
Plate V — Egg clutch"Most frogs lay jelly-coated eggs in still water. The clear capsule swells to protect the dark embryo inside — the first chapter of the life cycle overleaf."
Field note (intro)"Amphibians are the planet's great survivors and its most delicate barometers — breathing partly through their skin, they read the health of a wetland the way a thermometer reads a fever."
Anatomy — 1 Eye"Set high on the head, giving a frog a wide field of view above the waterline while it hides below."
Anatomy — 2 Dorsolateral ridge"The raised glandular fold running down each side of the back — a field mark that separates look-alike species."
Anatomy — 3 Nostril"Paired openings at the snout; frogs draw air by pumping the floor of the mouth."
Anatomy — 4 Tympanum"The external eardrum, a bare disc just behind the eye. Its size often reveals whether a frog is male or female."
Anatomy — 5 Webbed hind foot"Skin stretched between the long toes turns each back leg into a paddle for swimming."
Anatomy — 6 Skin"Amphibians breathe partly through their skin — which is exactly why pollution in the water reaches them first."
Life cycle — Egg"A dark embryo develops inside a clear, swelling capsule of jelly."
Life cycle — Tadpole"A gilled, aquatic larva with a finned tail and no legs at all."
Life cycle — Froglet"Hind legs sprout, front legs follow, and the tail is slowly absorbed."
Life cycle — Adult frog"Lungs, long jumping legs, and a life lived between water and land."
Two small copy calls for you
Plate captions use family-level names (Hylidae / Bufonidae / Caudata) rather than naming a single species, to stay broadly true. If you'd rather feature specific species you love (e.g. one tied to STF history), tell me and I'll redraw/relabel.
CTAs point to savethefrogs.com (primary) and savethefrogs.com/save-the-frogs-day/. Confirm those targets, or point me at better ones.