Anima Atlas

Zoom from the whole body down to a single enzyme, and watch how biology works.

Anima Atlas is an interactive map of biology. Start at an anatomical figure of the whole body, pick a body system (skeletal, muscular, nervous, circulatory, respiratory, digestive, endocrine, immune, urinary, skin, reproductive, the senses), zoom into one of its organs, and keep going through cells and compartments to live, sourced figures of the mechanisms inside: glycolysis, the Cori cycle, the electron transport chain, dopamine signalling, a beta cell responding to GLP-1, and more. Every stop links sideways too, by the molecules it shares (follow NADH or ATP across the map) and by the principles it shows (allosteric control, recycling NAD⁺, gradients that store energy).

What you can do

• Zoom. Body → system → organ → cell → compartment → pathway → molecule. The breadcrumb, the up arrow and Esc zoom back out to the spot you came from; every stop has its own link.
• Set the Detail. One Low · Medium · High control changes every explanation and how many labels the diagrams show, so the same atlas works for a curious beginner and a medical student.
• Play with the mechanism. Each figure has switches and sliders that change the biology, a live readout driven by one small model, and hover explanations.
• Follow connections. The side panel lists what a stop contains, what it passes on to, what it makes and uses, what switches it on or off, and which principles it illustrates.
• Learn the building blocks. A Building blocks section teaches what everything else rests on: prokaryote versus eukaryote cells, the phospholipid bilayer, DNA’s nucleotides and double helix, and where a gene starts (the TATA box).
• See how it is found out. A Research section teaches lab methods by letting you run them, starting with PCR.
• Take a journey. Guided tours walk across systems one stop at a time. Follow a glucose molecule goes from lunch in the gut, through the blood, insulin and a muscle cell’s mitochondria, to the myosin heads that spend its energy. Follow a fat molecule goes from a fat cell under the skin, through the blood and β-oxidation, to the same myosin heads. Other tours follow a breath of oxygen, vitamin D from sunlight to bone, a 400 m sprint, a vaccine shot, a fat molecule, and a gene to its protein.
• Check the sources. Every number on screen is cited, every figure says what was simplified, and nothing is medical advice.

The figures

Research

Lab methods, separate from the biology but on the same map.

Building blocks

Run it

npm install
npm run dev      # http://localhost:8974
npm run check    # typecheck, graph integrity, and every figure model's self-checks
npm run build    # static site in dist/

Node.js 23.6 or later (the checks import TypeScript files directly). The site is static and needs no server or outside service: fonts are bundled, routing uses the URL hash, and the build works from any path.

How it is built

src/
  atlas/     graph of every stop and link (graph.ts), zoom routing, side panel, search, Detail setting
  hubs/      overview diagrams with zoom doors: body, each body system, brain, synapse, muscle fibre, liver cell, mitochondrion
  anatomy/   the anatomical figure: skeleton, muscles and each system's organs as SVG geometry in one 400 × 720 space
  figures/   interactive figures, the shared figure shell, and models/ (each figure's model with self-checks)
  design/    design tokens (dark and light), shared molecule colours, base styles
public/thumbs/   card thumbnails
skills/anima/    the Claude Code skill these figures grew from (see below)

• One graph. src/atlas/graph.ts holds every node with three summaries (low, medium, high), its view, and typed links (makes, uses, carries, switches on, switches off, example of). npm run check fails if a link points nowhere, a node cannot be reached from a root, or a figure has no component.
• One model per figure. Each figure’s behaviour lives in src/figures/models/ as plain TypeScript with check… functions, for example that oligomycin raises the proton gradient while cutting oxygen use, or that semaglutide differs from GLP-1 at exactly positions 8 and 34. The checks run with npm run check.
• Shared visual language. Each molecule family has one colour everywhere (glucose teal, lactate coral, ATP amber, NADH violet, oxygen sky, H⁺ red), set in src/design/tokens.css.

The skill

skills/anima/ is the Claude Code skill that drafts new figures: its instructions (SKILL.md), an isometric drawing kit, biology references, the classic standalone versions of every figure, and the browser checks. A new topic is usually drafted there with the skill, checked, then rebuilt as a figure in src/figures/ and placed on the map. See its README.

Deployment

.github/workflows/deploy.yml builds the site and publishes it to GitHub Pages on every push to main. Pages must first be enabled for the repository (Settings › Pages › Source: GitHub Actions). For a private repository this needs a paid GitHub plan, and the published site is public.

Sources and limits

These are educational figures. They are not medical advice, not a validated anatomy atlas, and not a diagnostic or prescribing tool. Drug figures explain mechanism only, with no doses, routes or advice. Biology varies between species, tissues and individuals; each figure says where its evidence comes from (for example rodent versus human) and what it leaves out.

Credits and license

MIT. Forked from Garinmckayl/anima by Natnael Getenew and Ryan, whose skill, kit and six original figures this project builds on; see LICENSE.