An AI Built a Underwood Network – Living Mycelium Research Map Website — Here’s the Design Trick That Makes It Work

Step into the Forest of Data: The Living Mycelium Map

This site immerses visitors in a dark, soil-like environment where a dynamic fungal network visualizes ecological exchanges. Its standout feature is a live simulation of thousands of agents navigating, sensing, and depositing nutrients—offering a real-time window into underground communication. The hero experience combines interactive visuals with an inspection reticle that follows scent cues, giving the impression of observing a forest’s computational process as it unfolds before your eyes.

Design Workflow and Critical Review

The project was developed through a three-stage pipeline: initial construction of the simulation and visual environment, a rigorous critique phase focusing on ecological authenticity and visual clarity, followed by a certification stage by a design art director to ensure the site embodies the intended research artifact aesthetic. The process was guided by a detailed design manual, emphasizing organic textures, interactive clarity, and performance optimization, especially for reduced motion and tab-hidden states, making the site accessible across devices.

The full build notes live in the room’s design guide.

Design Elements and Technical Foundations

The palette is rooted in earthy hues—deep humus brown, glowing teal, warm amber, and moss green—creating an environment that feels organic and alive. Typography is deliberately rugged and literary, reinforcing the forest-floor theme, with text that appears field-worn and tactile. The core visual technique is a custom JavaScript canvas initialized via initPhysarum(), which generates a pheromone field that reacts to user input. Thousands of agents are spawned near research nodes using spawnAgents(), and they navigate by sensing pheromone and nutrients, depositing trails, and fading older deposits with functions like stepSimulation() and diffuseTrails(). Nutrient blobs are added to simulate resource flow, with visual feedback provided through glowing pulses and an inspection reticle that dynamically follows scent input. Inline SVG paths animate resource exchanges between nodes, using classes like .flow-carbon to animate flows, which swap states such as drought or fire scar through scripting. Styles incorporate textured grain overlays, radial glows, and animated survey sweeps, all crafted without external assets and styled in CSS to evoke a dense, living environment.

Want this? Paste this into your AI coding agent

Build a single-page showcase website from this art-direction brief. Work like an elite creative frontend engineer; commit totally to the direction.

BRIEF (room 28 of 175, “mycelium”):
UNDERWOOD NETWORK — forest-floor research collective mapping fungal internet. Aesthetic: humus dark, bioluminescent. Palette: black-brown #12100c, teal glow #57e6c4, spore amber #d9a441, moss. Fonts: newsreader (italic display), epilogue (body). SIGNATURE: a Physarum slime-mold simulation on canvas — thousands of agents deposit/sense pheromone trails, forming living veins that connect research nodes; visitors CLICK to drop nutrients and watch the network reroute itself in seconds. Sections: the living map; nutrient-exchange diagram (animated SVG between tree/fungus); field notes; species ledger with invented Latin. Unforgettable: a page that visibly solves problems while you read.

STACK: pure HTML/CSS/JS, no build step, no frameworks, no CDNs or external requests of any kind; self-hosted fonts only; every visual is code (CSS/SVG/canvas/WebGL) — no image assets required.

QUALITY BAR: flawless at 390px, 834px and 1440px with zero horizontal overflow; tap targets >= 44px; semantic landmarks, focus-visible styles, body-text contrast >= 4.5:1; prefers-reduced-motion pauses or simplifies heavy animation; rAF loops pause when the tab is hidden; hold 60fps (cap particle counts, avoid layout thrash); rich invented content everywhere — real-sounding names, numbers and program notes, never lorem ipsum; orchestrate one beautiful staggered load moment plus scroll and hover surprises. FORBIDDEN: Inter/Roboto/Arial/system-ui, purple-gradient-on-white, and cookie-cutter hero+cards+footer layouts.

PROCESS: iterate in three documented passes — (1) build plus builder self-critique, (2) merciless external critique finding and fixing at least ten real problems, (3) art-director elevation from good to unforgettable. Screenshot at all three widths every pass and fix everything you can see.

— Original brief by Claude Fable 5 (art director), executed by the FABLE/175 pipeline.
— This room lives at https://fable-25-830.netlify.app/sites/mycelium/

This is the verbatim art-direction brief that produced the room — exposed by the exhibition itself via the “Prompt” link in the room’s footer.

Explore the Forest — Dive Deeper into Mycelial Research

Visit the live simulation at this link and experience the interconnected fungal network firsthand. Browse the full collection of 175 sites in the Underwood Network hub to see how AI-crafted environments visualize complex ecological processes in stunning detail.

Visit the live room → · Browse all 175 rooms

Previously in Wing II

• Room 26: KP-9 Station — Arctic Geomagnetic Observatory
• Room 27: CALIBRE 27 — Haute Horlogerie Manufacture

FABLE / 175 is a finished exhibition of 175 fundamentally different websites, each built end-to-end by an AI. This article is part of our series walking through it room by room.

Powered by Thorsten Meyer AI

5 Pcs Tadpole Growth Cycle Realistic Detailed PVC Growth Stage Lifelike Tadpole Life Cycle Model Set for Home Office Party Decoration

• Exquisite Simulation Design: Enhances interaction and educational value
• Safe Materials: Child-friendly and health-safe for play and learning
• High-Quality Craftsmanship: Bright colors and detailed design for engaging learning

View Latest Price

As an affiliate, we earn on qualifying purchases.

As an affiliate, we earn on qualifying purchases.