Guide · How it was made

Growing a computer on a web page.

Concept

HYPHAE is a fictional Perth startup that grows mycelial networks as computers. The audience is technical founders and researchers who would fund or join something this strange. The page has one job: make the visitor believe the network is alive — so the background is the product. A generative mycelium grows across the page in real time, and every "live" metric on the site is read from that simulation, not faked.

Palette

#0D0F0C
Substrate. Dark loam, slightly green-shifted — never pure black.

#E8E4D8
Pale mycelium. Body ink and thick hyphae share one colour.

#B7F2C4
Spore glow. Growing tips, live numbers, primary action.

#9D7BFF
Signal violet. Reserved for data-in-motion: traces, dates, focus.

The trick is that ink and organism are the same colour: fine hyphal tips lerp from pale #E8E4D8 toward spore-glow green as they thin, so the type reads as the thickest, oldest growth on the page.

Type

Sora — The computer that grows.

Display & body · geometric but soft-cornered, like something cultured rather than machined

JetBrains Mono — 21,384 spores/s · T+00:04:12

Data voice · every number, date, eyebrow and readout. Tabular numerals keep live metrics from jittering

The typographic bravery moment is the hero wordmark: HYPHAE at up to 11.5rem, each letter clip-revealed on its own delay with a vertical gradient that dips into spore green at the baseline — the letterforms appear to be colonised from below.

Techniques

Signature — the branching-growth engine (canvas 2D, no libraries). The mycelium is a population of random walkers with momentum: each carries a heading, an angular velocity that is jittered and damped every frame (so paths meander rather than shiver), and a thickness that decays by 0.4% per step. Each walker buds with probability proportional to its thickness, spawning a child at 55–72% of its width — so growth is dense near sources and filigree at the edges, like the real organism. About one bud in eighteen becomes a violet signal trace. Trails accumulate on a persistent canvas; glowing tips are sprite-stamped radial gradients on a second canvas cleared each frame. Old growth dims via a periodic destination-out fade that deliberately never reaches zero, leaving a faint ghost web.

Growth reacts to reading. An IntersectionObserver fires once per section: as each one enters the viewport, walkers burst inward from both screen edges at the section's height — the network visibly grows into what you are about to read. The trail canvas is scrolled at 0.35× page speed using a self drawImage in copy mode, so the web feels rooted in the content rather than painted on glass.

Honest telemetry. Active tips = the walker array's length. Throughput chases 9000 + tips × 61. Colonisation is derived from total segments drawn. The stats section says so in plain text — the fiction is grown, not faked.

Performance. Walker population is capped (240 desktop / 130 under 768px), off-screen walkers are culled with a 60px margin, devicePixelRatio is capped at 2, the rAF loop pauses on document.hidden, and resize reseeds cleanly. With prefers-reduced-motion, the engine runs ~700 steps synchronously and paints a single still lattice: same organism, fully grown, no animation.

Iteration log

PASS 1Craft

Watching the live metrics exposed a tuning bug: colonisation was linear in segments drawn and hit its 96.4% cap in under a minute. Rebuilt it on √segments — fast early spread, then an asymptotic crawl, which is how colonisation actually behaves.
The hero lede sat directly on busy growth. Added soft radial scrims behind the hero and each section's heading zone — tuned to read as a thinning of the web, not a box — so body copy holds ≥4.5:1 contrast at all times.
Added scroll-margin-top so anchored sections land clear of the fixed nav instead of underneath it.
Copy read: cut filler from the hero lede, ended each architecture card on a concrete image ("memory you can dry, post, and rehydrate").

PASS 2Depth

Added a live throughput sparkline to the telemetry grid — 48-sample history of the real spores/s figure, green trace, violet head — so the "honest telemetry" claim has a moving proof.
Made the page clickable: any open ground can be manually inoculated, bursting seven walkers and floating a numbered inoculation NNN note at the cursor; the count feeds the metrics grid.
Hovering the HYPHAE wordmark sends a spore burst out of the baseline (2.5s cooldown so it stays a discovery, not a strobe).
Second-read payoff: ~5.5% of buds become violet signal traces, and the stats copy quietly tells you what they are; hyphal tips breathe on a slow sine pulse.

PASS 3Hardening

375px check: wordmark clamps to 4.2rem, facts collapse 4→2→1 columns, metrics 4→2→1, hero readouts stack with hairlines, nav collapses to brand + Index, notes stack their date column.
Touch devices: the nutrient-attraction point now releases on pointerup/pointercancel, so tips stop chasing a stale finger position after a tap.
Reduced motion: the rAF loop never starts — a fully-grown static lattice is painted instead; letter/reveal animation is disabled in CSS and gated in JS; pointer and click effects are off; the sparkline draws once and freezes. DPR capped at 2, loop cancelled on visibilitychange, walkers culled 60px off-screen. Budding now stops 24 walkers below the hard cap, so section-entry bursts always have headroom even when the colony is saturated — and a no-JS/no-IntersectionObserver path keeps all content visible.
Chanel rule: cards were doing two things on hover — lifting and underlining. Cut the lift, kept the growing gradient underline. One gesture, better told.