A year of study needed more than an archive. It needed a way to reveal how the ideas grew together.
Idea Grove turns a living collection of responsible-AI notes into a connected reading system. I designed the information model, product behavior, visual system, live Notion path, archival fallback, and implementation around one idea: knowledge grows through relationships, not only through time.
- My contribution
- Information model, interaction design, visual system, engineering, and deployment
- Collaboration
- The research owner supplied the source material, meaning, and visual direction
- Live collection
- 153 Notion seeds, verified 28 July 2026
- Stack
- Next.js 16, D3-force, Canvas, Three.js, and Motion
A digital garden where maturity and connection are part of the content.
The source collection contains reflections, quotations, links, and images from a year of study. A post feed would preserve order, but it would hide the relationships between ideas and flatten every note into the same level of certainty.
The product question was not “How should these notes look?” It was “What must remain true when the same notes are reorganized five different ways?”
The content owner tended the thinking. I built the system that made it explorable.
The case is about the product idea and the system behind it. The split below keeps the authorship clear.
Content and meaning
Reflections, quotations, links, images, relationships, growth stages, and the visual direction for the garden.
Model and machinery
Seed schema, navigation model, graph behavior, five layouts, reading panel, Notion integration, fallback path, accessibility behavior, build, and deployment.
The garden has one entry and four working areas.
The hierarchy separates orientation, discovery, reading, and continuity. The map below shows every primary surface before the task flow narrows the experience to one reading loop.
Entry
- Welcome
- Skip to grove
Explore
- Garden canvas
- Web
- Radial
- Time
- Type
- Stage
Find
- Search
- Type filter
- Growth-stage filter
- Reset zero results
Read
- Seed detail
- Tending log
- Related seeds
- Backlinks
Continuity
- Notion source
- 60-second cache
- Local archive
- Offline fallback
The seed is the stable unit.
Every layout reads the same schema. The interface can change the arrangement without changing what an idea means.
One piece of thought
- Type
- Reflection · Quote · Link · Image
- Stage
- Seedling · Sprout · Bloom
- Time
- Planted · Last tended
- Relation
- Direct seed IDs · Inline mentions · Shared tags
- History
- Tending log
One seed in context
The Canvas keeps the spatial context. A separate DOM panel holds the complete text, metadata, change history, related seeds, and backlinks.
One reading loop, with several ways in.
The primary route is short. Search, filters, and layouts change how a seed is found, but every route resolves into the same reading panel.
- 01
Enter
Read the garden premise, then enter or skip the introduction.
- 02
Orient
See the complete garden in the Web layout with layout and filter controls nearby.
Branch: If the live source fails, load the same garden from the local archive. - 03
Find
Search text, filter a type or stage, or change the spatial question.
- 04
Focus
Select one seed and quiet unrelated nodes without losing the larger map.
- 05
Read
Open the full note, stage, dates, tending history, relations, and backlinks.
- 06
Continue
Open a related seed or backlink while the current garden context remains visible.
Recovery: if the Notion source is unavailable, the same flow opens from the bundled 152-seed archive. The failure path preserves the garden instead of presenting an empty state.
Four change-points define the experience.
These frames show the structure before atmosphere, graph styling, or motion. Each one names its purpose, primary action, and required states so the screen can be reviewed as behavior rather than decoration.
/- Purpose
- Explain the garden metaphor before revealing a dense graph.
- Primary action
- Enter the grove
- States
- Default, reduced motion, skip
/?layout=web- Purpose
- Show the whole collection and keep spatial controls close to the graph.
- Primary action
- Select a seed
- States
- Live, loading, archived, offline
/?q=trust&type=reflection- Purpose
- Reduce the field by text, type, or growth stage without creating a second results page.
- Primary action
- Open a matching seed
- States
- Query, filtered, zero results, cleared
/?seed=<id>- Purpose
- Keep long-form reading in the DOM while preserving the graph as orientation.
- Primary action
- Follow a related seed
- States
- Selected, long note, no relations, backlinks
Five layouts ask five questions of the same collection.
The modes are not visual presets. Each one turns a different field in the seed model into spatial structure.
What is connected?
Direct links pull related seeds together.
What sits near a center?
Connection density determines distance.
How did it grow?
Planted date becomes the horizontal position.
What form does it take?
Reflections, quotations, links, and images cluster.
What is still forming?
Seedling, sprout, and bloom become visible groups.
The graph stays visual. Reading stays conventional.
The shipped screens show the actual product states. The entry teaches the metaphor, the graph exposes the collection, and the controls reorganize the same seeds without changing the reading model.
Four interface layers, one data contract.
The architecture keeps high-frequency Canvas work away from long-form reading and keeps the live service from becoming a single point of failure.
WelcomeOverlayExplains the metaphor before exposing the controls.
GardenShaderRuns the nonessential WebGL field behind the interface.
GardenGraphOwns D3 forces, Canvas rendering, search, filters, pan, and zoom.
SeedPanelKeeps long-form text, metadata, relations, and backlinks in the DOM.
Notion API + local archiveUses a 60-second cache, then falls back to the 152-seed bundle.
The collection can stay live without becoming dependent on the live service.
The active Notion source can keep changing while the repository preserves a complete local garden. Five graph modes, search, type filters, seed detail, tending history, direct relations, and backlinks all read from the same schema.
Evidence boundary: the repository and live product establish the system and its current contents. They do not establish which layout improves recall or comprehension. No external usability or retained-use claim is made.