All work

// open source

NeuroAtlas

Explore the brain in 3D from lobes to ion channels, and see what goes wrong in disease.

Stack
Next.js · React Three Fiber · three.js · Zustand · shadcn
Scope
5 scales · 70+ structures · 15 disorders
Status
Live on Vercel

In plain words

A 3D map of the human brain you explore in your browser, from whole lobes down to single nerve cells, and see how diseases like Alzheimer's or stroke change it.

Think
Textbooks teach the brain one level at a time, but a disease hits every level at once.
Design
One continuous zoom across five levels, with a disease switch that shows its effect wherever you are.
Build
A brain shape generated in code, a working nerve-signal model, and one shared state keeping five 3D scenes in sync.
// 00 — The full story, for engineers

§ 01

The problem

Neuroscience is taught one scale at a time: a lobe diagram in one chapter, a synapse cartoon in the next, an action-potential graph somewhere else. Disease cuts across all of them at once, and that connection is exactly what static figures cannot show.

NeuroAtlas puts every scale into one navigable 3D space, from the whole brain down to tissue, neurons, synapses, and the ion channels in a single membrane, and lets you watch a disorder land on each of them.

§ 02

The decisions that mattered

  • One typed data model for every scale. Structures, neurotransmitters and disorders live in plain TypeScript data, and each disorder declares its effects per scale (atrophy, demyelination, tangles, BBB leak, reactive astrocytes), so a new disease is data, not new scene code.
  • A procedural cortex. The brain surface is generated with noise, and every vertex is assigned to a lobe and functional area (Broca, Wernicke, motor, visual cortex) using the central and Sylvian fissures as boundaries. No multi-megabyte mesh to download, and every region is clickable.
  • A real action-potential model, not a looping animation. Membrane voltage is computed over time with separate modes for normal firing, persistent sodium current, and pump failure, and the channels on screen follow the same curve.
  • Zustand as the single source of state, so the sidebar, info panel, search (⌘K) and five WebGL scenes stay in sync without prop drilling.
  • Mobile and SEO treated as product features: a mobile guide, per-scale metadata, and generated Open Graph images.

§ 03

What it shows

Complex, data-heavy 3D UI, done with production discipline: a typed domain model, scene code that stays dumb, and state that stays in one place. The same skills that go into building an AI product's interface.

Want this kind of thinking on your product?

Book a 20-min call