# 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](/garden/build-time-content-compiler) 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](/garden/this-digital-garden) experiment.