Skip to content
Everything I built
Inside the Heart screenshot

Education

Inside the Heart

live
Try it

I wanted a heart lesson you could play with: a real heart beating in front of you that you can turn, slow down and cut open. It is built from math in your browser, with no model files to download, and it walks you through how the heart works in seven short steps.

Screenshots

  • Inside the Heart screenshot 1 of 3
  • Inside the Heart screenshot 2 of 3
  • Inside the Heart screenshot 3 of 3

What it does

  • Follow one bright drop the whole way around: into the right side, out to the lungs where it turns red, back through the left side and out the aorta. It only moves when a real beat would push it.
  • Cut the heart open to see all four chambers, the wall between them, and why the left wall is about three times thicker than the right.
  • Watch the four valves open and shut in slow motion, and hear the lub-dub they make, in time with a live ECG.
  • Push the heart rate from asleep to a sparring round and watch the ECG bunch up as blood flow climbs from 5 to about 20 liters a minute.
  • Finish with a quiz: tap the right chamber on the heart. Tap a vessel next to it and you get a hint instead of a plain wrong.

Built with

  • three.js
  • WebGL shaders
  • Web Audio API
  • Playwright

Want the how and why?

I write up builds like this one. What I did, what went wrong, and what is worth copying.

Read the writing
Everything I built