A garden grows sideways, not forward.

The brief

The ELISAVA Master in Design for Responsible AI asked every student to build a digital garden: a personal, public knowledge space to grow through the program. The only requirement was a public URL.

A Notion database would have worked. A blog would have worked. Neither of them would have matched the program's central argument — that ideas cross-pollinate sideways, not forward in time — or the program's own argument about AI temporality and knowledge as a living system. The site had to embody the argument, not just store notes about it.

Seeds, not posts

The data model starts from one question: what is the unit of knowledge in a garden? Not the article. Not the update. The seed.

A seed has a type — reflection, quote, link, or image — and a growth stage: seedling, sprout, or bloom. It has a planted date, a last-tended date, and an optional tending log that surfaces how the idea changed over time. Every seed links to related seeds by ID, not by tag or category.

Growth stage is not decoration. It is epistemic signal. A seedling is a first thought, captured before it is understood. A sprout has been returned to and expanded. A bloom has been cross-pollinated, reworked, and is holding its own. Node size in the graph comes directly from stage — a bloom is visually heavier than a seedling. The topology of the garden tells you something true about the state of the thinking.

Five ways to read the same garden

The graph runs five layout modes on HTML5 Canvas. Web is the default: a D3 force simulation where links pull related seeds together and repulsion separates unrelated ones. The result is a topology of the ideas, not a filing system.

Radial centers everything from one point. Time arranges seeds by planted date along the X-axis, so you can see how the garden grew across the program. Type clusters by seed type. Stage clusters by growth stage, which tends to reveal unfinished threads.

Each mode asks a different question of the same data. What is connected to what? What grew from what? What is still early? All five run on Canvas with a RAF-loop force simulation, smooth pan-zoom via a view ref, and 60fps rendering that never touches the DOM between frames.

Atmosphere

A static graph of ideas is a diagram. A garden needs to feel alive.

Three.js and React Three Fiber run a WebGL shader underneath the graph: a slow-moving depth field, no interaction, just presence — the feeling that something is growing in the background. Above the graph, a Canvas layer seeds pollen motes that drift upward and fade. Small bug animations cross the scene at irregular intervals.

The WelcomeOverlay rotates quotes from the program at 4.2-second intervals, fading between them via AnimatePresence so the transition never cuts. A skip-to-grove link is the first focusable element on every load for keyboard and screen reader users.

What shipped

A live digital garden for the IRIS cohort at ELISAVA. Next.js 16, React 19, TypeScript strict, Tailwind v4. D3-force for the graph simulation, Three.js via React Three Fiber for the ambient WebGL layer, Motion for transitions.

The finished garden holds 152 seeds across twelve weeks of the MDRAI program: AI temporality, sociotechnical systems, decision intelligence, critical AI studies, ethics frameworks, human rights, digital rights, and ethical principles. Ideas from week two connect to week eleven. Quotes connect to reflections. A tending log on each seed surfaces how the thinking changed.

Built and shipped solo. Data lives in a static seeds.ts module — an intentional choice, so the garden runs without any backend and can be archived as a self-contained artifact when the program ends.