Knowledge brain
Any graph drawn as a 3D brain: nodes cluster by group inside a cloud of dots, outer nodes sit on a shell around it, and signals run along the links. Drag to turn it, hover a dot or a group to light up what it touches, and click a dot to fly to it and open a card with what it is and what it links to. The links on the card are buttons, so you can walk the graph. Three.js loads only when it nears the screen; without WebGL it's a plain list.
Color
Drift
Signals
Dust
Install
$ npx shadcn@latest add https://savi.fyi/r/knowledge-brain.jsonUse it
import { KnowledgeBrain } from "@/components/knowledge-brain";const groups = [{ id: "plan", label: "Plan" },{ id: "build", label: "Build" },];const nodes = [{ id: "spec", group: "plan", description: "What we're making and why." },{ id: "tickets", group: "plan", description: "The spec, cut into small pieces." },{ id: "tests", group: "build", description: "Written first." },{ id: "code", group: "build", description: "Makes the tests pass." },{ id: "Ousterhout", outer: true, description: "Deep modules." },];const links: [string, string][] = [["spec", "tickets"],["tickets", "tests"],["tests", "code"],["Ousterhout", "code"],];export function Map() {return (<KnowledgeBrainnodes={nodes}links={links}groups={groups}/>);}
Props
- nodes
- { id, label?, group?, description?, meta?, outer?, words? }[]
- The dots. Outer ones sit on a shell around the brain, for sources, people or models.
- links
- [from, to][]
- Who links to whom, by id. Signals run from → to.
- groups
- { id, label, at? }[]
- Clusters, each with a label you can hover. Pin one somewhere with at: [x, y, z].
- words
- { out, in }
- The card's headings for a node's links. Defaults to Links to / Linked from.
- colors
- { accent, foreground, muted, background }
- Any CSS colors. Defaults come from the text and background around it.
- spin
- number
- How fast it drifts when left alone. 0 holds it still.
- signals
- boolean
- Signals running along the links. On by default.
- dust
- number
- How many faint dots make the brain's shape. 0 for none.
- onSelect
- (id | null) => void
- Called when a dot is picked or let go.
- classNames
- { node, group, card, title, text, link, … }
- Classes for the labels and the card, to match your type.
- fallback
- ReactNode
- Shown without WebGL. Defaults to a list of every node.
On this site