Mycelium. Design guide · Site 16 of 25
How this site was made

A page you
can inoculate.

MYCELIUM is a fictional institute studying the mycorrhizal web. The background is not a texture — it is a living simulation of hyphal growth that forages, branches, finds buried nutrients, and sends signals home. Clicking the soil starts a new colony under your cursor.

Concept

Fungal networks are the internet metaphor nature built first, so the page treats the organism as infrastructure: a HUD counts hyphal tips and network length like uptime, nutrient discoveries read as "9 nodes online," and the research content floats above the substrate on translucent humus panels.

Palette

Substrate#151009
Hypha#E6DDC8
Spore ochre#CFA14C
Signal violet#9D86E0

Soil colors with two exceptions: ochre for food, violet for messages — the two things the network actually cares about.

Typography

The forest has an underground.

Gloock — display. A high-contrast serif with mushroom-cap curves; bookish the way mycology monographs are.

PLOT-07 · HYPHAL TIPS 214 · 3.8 M

Sometype Mono — field-instrument voice. Albert Sans carries the prose.

Techniques

ElementHow it works
Hyphal agentsUp to 260 tip agents random-walk with per-step angular noise, thinning stroke width as they age, branching with 1.2% probability per step. Segments accumulate on an un-cleared canvas — growth is history.
ChemotropismEach tip steers gently toward the nearest undiscovered nutrient (stronger inside 180px) — the network visibly forages rather than wanders.
Discovery eventsTouching a nutrient marks it found, flares its glow, sprouts four new tips from the food source, and fires violet signal pulses that travel backwards along recently grown segments.
InoculationPointer-down anywhere seeds six tips under the cursor. The HUD (tips / nutrients / network metres) reads from the same state.
The ghost fadeA 0.6%-alpha substrate wash per frame lets old growth fade to archaeology while new growth stays bright.
AccessibilityReduced motion grows the entire network synchronously in one frame — a finished specimen instead of an animation. All statistics and research content are real text.

Interaction map

You doThe page does
WaitThe colony forages toward buried ochre nutrients, branching as it goes
Click the soilA new colony sprouts under your finger
Watch a discoveryThe node flares, and violet signals run home along the threads
← Back to the soil