Reaching for React Three Fiber for a knowledge graph
This one is a seed, and I want to be straight about that: the 3D graph does not exist yet. This note is me reasoning out loud about how I'd like to build it, not a description of something you can go and use.
The idea
Every note already knows what it links to and what links back to it. That's the connection index the A content compiler that runs at build time produces. That data is, structurally, a graph. So the appeal is to render it as a graph you can actually move through: notes as nodes, links as edges, coloured by lens, floating in space you can orbit around.
Why R3F, tentatively
I'm leaning towards React Three Fiber with a force simulation for layout, for a few reasons I still need to test in practice:
- It keeps the scene declarative and in React, alongside the rest of the app.
- A force layout of a couple of hundred nodes is cheap to run on the client, so I don't need to precompute positions at build time yet.
- Seeding the simulation deterministically from slug hashes should make the layout stable between visits, which matters if the graph is meant to feel like a place rather than a fresh shuffle each time.
The honest caveats
A 3D scene can't be the only way to reach a note. Whatever I build has to lazy-load so the three.js code never weighs down the rest of the site, and it has to fall back to something flat and static for reduced-motion, for phones, and for anyone without WebGL. The graph should be an invitation on top of an already-complete reading experience, not a gate in front of it.
So: filed as a seed. When there's something real to click, this note will grow, and it'll almost certainly pick up a curated update explaining what I got wrong in the plan above. For now it's a direction, and part of the wider This garden, and how it’s built experiment.