cor·tex

Extracted, not rewritten. The scene began as the Cortex page in the fleet's dashboard, where it first drew a real personal memory graph of about 600 nodes (the library's README tells the story). Extraction meant cutting every tie to that world: data now arrives as three plain props (nodes, edges, clusters), live effects go through a small handle (flash, ignite, focus), the Tailwind classes became one self-contained stylesheet, and a seeded fictional studio replaced the real brain. Testing the extracted code also turned up a real bug, which went back into the dashboard the next day: waking the sleeping render loop could re-enter itself through the camera controls and overflow the stack on the first click after a pause.

The layout is fixed, not simulated. It is built on 3d-force-graph, but the forces are switched off. Each cluster gets an angle on the disc; the core sits at the centre, hubs at their sector's heart, children in rings around their parent, and anything without a parent on a golden-angle spiral. Every node is pinned there, so the same data always draws the same map and the map becomes a place you learn.

It sleeps. Nothing moves between interactions, so the heavy render loop pauses when idle and wakes on the pointer, the camera or a flash. A separate throttled loop at about 25 frames a second keeps only the sea rolling. Every decorative object (the sea alone is a 32,000-triangle plane) is taken out of the raycaster, which is what removed a drop from about 150 to 20 frames a second whenever the mouse moved.

Everything is drawn in code. The ground grid, glows, labels, starfield and nebula are canvases and small shaders made at runtime. No images, fonts or models are downloaded, which is why it passes this site's content-security policy.

Here, it is vendored. src/cortex/lib/ is the library's source at commit 68db7b1 with four documented changes: two handle methods so the page can steer the camera, class names on the three HUD panels so a phone can rearrange them, a screen-size check that answers before the first render so a phone never downloads the 3D renderer it is about to swap out, and a named list of the three.js classes it uses in place of import("three"), so the three.js chunk this page shares with entry 001 stays tree-shaken. Two unused dependencies are aliased to stubs in the build: three's WebGPU renderer, which would have added its whole WebGPU build, and ngraph's layout engine, which generates code with new Function and would break under a policy without unsafe-eval.

cortex-map is not on npm. It is a public repository, MIT licensed, so for now you take it from GitHub.

1. Run the demo. git clone https://github.com/StovBuilds/cortex-map, then npm install and npm run dev; it serves this same studio brain on localhost. The demo reads the library's source directly, so edits reload as you save.
2. Bring it into your app. Either copy packages/cortex-map/src/ (seven files) into your project and install react-force-graph-3d, react-force-graph-2d and three, which is what this site does; or build it with npm run build -w cortex-map and depend on the folder, npm install ../cortex-map/packages/cortex-map. Both were checked on 29 September 2026 with React 18 and Vite 5.
3. Shape your data. Nodes need an id, a label and a cluster. Add role and parentId for structure, weight for importance and lastSeenAt for the age gradient. Edges take a strength from 0 to 1, and origin: "semantic" for links a machine inferred. The full contract is in docs/data-format.md.
4. Give it a height. The map fills its parent, so the parent needs a real one.
5. Make it live. Keep a ref and call flash(id) when a memory arrives, ignite([ids]) when a recall touches several, focus(id) to fly there. Sustained activity in one cluster builds a storm in its sector on its own.
6. Tune the look in the demo, then paste it. The theming panel's "Copy theme" hands back only the props you changed. docs/theming.md lists every knob.
7. If your site sends a strict CSP, alias ngraph.forcelayout and three/webgpu to stubs as this site's vite.config.ts does. Neither is used, and the first would otherwise need unsafe-eval.

The smallest working map:

import { CortexMap } from "./cortex-map";   // the copied src/ folder

const clusters = [
  { name: "Ideas",    color: "#ffcf7a", angleDeg: 30 },
  { name: "Projects", color: "#4d8bf0", angleDeg: 150 },
];
const nodes = [
  { id: "core", label: "My brain", cluster: "Projects", role: "core", weight: 1 },
  { id: "i1", label: "Underwater metroidvania", cluster: "Ideas", role: "hub", parentId: "core" },
  { id: "n1", label: "grappling hook physics", cluster: "Ideas", parentId: "i1", lastSeenAt: Date.now() },
];
const edges = [
  { source: "core", target: "i1", strength: 0.95 },
  { source: "i1", target: "n1", strength: 0.8 },
];

export function Brain() {
  return <div style={{ height: "100vh" }}><CortexMap nodes={nodes} edges={edges} clusters={clusters} /></div>;
}

Publishing the package to npm, and the hosted brain backend the library's README asks about, are Jack's decisions and not made yet. Until then, the repository is the release.

• cortex-map (MIT), and its own demo
• Jarvis architecture notes, the public source for the fleet's memory and its numbers
• 3d-force-graph and react-force-graph by Vasco Asturiano (MIT); three.js (MIT); React (MIT)