Concept
The brief called for a forest-floor collective mapping fungal internet, so the site rejects a clean laboratory surface. The dominant field is humus black-brown, the typography is literary and field-worn, and every section treats exchange as a bargain: carbon credit, mineral debt, alarm traffic, and nurse-log escrow. The hero is not a preface. It places the research claim beside the living map, so the first viewport already behaves like an instrument making decisions.
Visual Techniques
The signature canvas lives in main.js. initPhysarum() creates a scaled pheromone field and binds pointer, keyboard, node, and seed-control inputs. spawnAgents() distributes thousands of mobile agents near six research nodes. seedBaseTrails() lays faint braided lanes first, then stepSimulation() lets each body smell forward, left, and right for pheromone plus nutrient strength. It turns toward the richest lane, moves, deposits trail, and fades the old field. diffuseTrails() merges deposits into veins instead of dotted noise. depositNutrient() adds temporary food blobs, creates the amber ping, updates the pulse counter, reveals the .spore-lens inspection reticle, and redraws immediately so the network visibly reprices itself. queueOpeningReroute() supplies the staged load moment; setVisibilityPaused() stops the requestAnimationFrame loop when the tab is hidden, and reduced-motion users receive a settled still network with click-triggered recalculation.
The exchange diagram is inline SVG in index.html. CSS classes such as .flow-carbon, .flow-water, .flow-phos, and .flow-alarm animate dashed Bezier paths between a coded tree and fungal body. animateExchangeDiagram() swaps drought, mast-year, and fire-scar values. The rest of the atmosphere comes from styles.css: fixed SVG grain, radial glow fields, amber survey sweeps, custom selection and scrollbars, staggered .reveal timing, reliability meters, instrument panels, and the guide hero specimen above.
Palette and Type
Newsreader carries titles, large readouts, Latin species, and the italic display voice. Epilogue carries navigation, buttons, ledgers, and field-note metadata. The scale lets the hero title feel overgrown while dense panels stay compact, uppercase, and scannable.
Reproduce This
Prompt an AI agent: Build a self-contained static site for a bioluminescent forest research collective. Use self-hosted Newsreader and Epilogue, a dark humus field with teal, amber, and moss accents, and no external assets. Make the first viewport a live Physarum canvas where thousands of agents sense, deposit, diffuse, and reroute when visitors add nutrients; add an inspection reticle that follows scent input. Add inline SVG nutrient-transfer paths between tree and fungus, invented field notes, a Latin species ledger with reliability meters, reduced-motion and hidden-tab handling, responsive screenshots at phone/tablet/desktop, and a 400-700 word guide naming the exact files and functions.