How does the respiratory system work?
You breathe about 20,000 times a day and never think about it. Follow one breath from your nose to a working muscle cell, and meet the brainstem autopilot that decides when you take the next one.
▶ Play with it · Read the 60-second explainer · Watch the 40-second video
- One chain, every breath. Air passes the nose, throat, voice box and windpipe, then branches about 23 times into roughly 480 million air sacs. The diaphragm and rib muscles do the pulling; the lungs themselves have no muscles.
- Breathing is Boyle's law. The diaphragm flattens and the ribs lift, so the chest gets bigger. The air in the lungs gets more room, its pressure drops about 1 cmH2O, and air flows in. A quiet breath is about 0.5 L, 12 to 16 times a minute. Your biggest breath out, the vital capacity, is about 4.6 L.
- The nose is an air conditioner. Curled turbinates warm and wet the air to nearly 37 °C and 100% humidity. Mucus traps dirt and cilia sweep it up to be swallowed. When you swallow, the epiglottis tips back and you stop breathing for about a second. Your voice is breath through vibrating vocal folds.
- Blood does the carrying. Haemoglobin fills to about 97% in the lungs and lets oxygen go in busy muscles, where heat, acid and CO2 help it along: the Bohr effect. Half-full happens near 27 mmHg. Mitochondria burn glucose with that oxygen to make ATP, and CO2 rides back mostly as bicarbonate.
- An autopilot watches CO2. The brainstem fires the diaphragm through the phrenic nerves and mostly tracks carbon dioxide, keeping it near 40 mmHg. Exercise can raise breathing from 6 to over 80 litres a minute. In Leh, at 3,500 m, each breath holds about a third less oxygen.
- When breathing goes wrong. Narrow airways are much harder to breathe through, because resistance grows with 1 over the radius to the fourth power: that is asthma and COPD. Pneumonia fills air sacs, and TB, which is curable, spreads by coughing. Dirty air and smoking harm the cilia. See a doctor for a cough that lasts more than two weeks.
| Term | Meaning |
|---|---|
| Respiratory system | The organs that move air in and out and swap oxygen for carbon dioxide: nose, throat, larynx, trachea, bronchi, lungs and the breathing muscles. |
| Diaphragm | The dome-shaped muscle under the lungs. It flattens to pull air in and is the main muscle of breathing. |
| Tidal volume | The air moved in one quiet breath, about 0.5 L for an adult. |
| Vital capacity | The most air you can breathe out after breathing in as far as you can, about 4 to 5 L. |
| Epiglottis | A leaf-shaped flap that tips over the larynx when you swallow, so food goes down the food pipe. |
| Mucociliary escalator | Sticky mucus plus beating cilia that carry trapped dirt up and out of the airways. |
| Haemoglobin | The iron-containing protein in red blood cells that carries up to four oxygen molecules. |
| Bohr effect | Heat, acid and carbon dioxide make haemoglobin release oxygen more easily, right where muscles are working. |
| Chemoreceptor | A sensor for chemicals in the blood. Breathing ones track carbon dioxide, acid and oxygen. |
Nearly 1,900 years from a squealing pig in Rome to the oxygen clip on your finger.
- 170 · A squealing pig goes quiet (Galen of Pergamon, Rome, Roman Empire)
- 1667 · Bellows keep a dog alive (Robert Hooke, Royal Society, London, England)
- 1774 · Oxygen is found (Joseph Priestley, Calne, England)
- 1783 · Breathing is a slow fire (Antoine Lavoisier, Marie-Anne Lavoisier, Pierre-Simon Laplace and Armand Séguin, Paris, France)
- 1812 · The breathing centre is in the brainstem (Julien Jean César Legallois, Paris, France)
- 1882 · The germ that causes TB (Robert Koch, Berlin, Germany)
- 1905 · Carbon dioxide sets the pace (John Scott Haldane and John Gillies Priestley, Oxford, England)
- 1928 · The iron lung (Philip Drinker and Louis Agassiz Shaw, Boston, USA)
The full story, with 30 moments, charts, people and 67 sources: glassbox.how/e/respirationclear/history. The data lives in history.json.
Made with the Glassbox studio from this box's storyboard (window.glassbox.director). Free to reuse under CC BY 4.0.
| File | What | Size |
|---|---|---|
glassbox/reel.mp4 |
Reel / Short, with captions and soundtrack | 1080×1920 |
glassbox/video.mp4 |
YouTube video, with captions and soundtrack | 1920×1080 |
glassbox/slide-1…10.jpg |
Instagram carousel | 1080×1350 |
glassbox/thumb.jpg |
YouTube thumbnail | 1280×720 |
glassbox/cover.jpg |
Share card and repo social preview | 1200×630 |
glassbox/history-reel.mp4 |
“History in 10 moments” Reel / Short | 1080×1920 |
glassbox/history-slide-*.jpg |
History carousel | 1080×1350 |
glassbox/post.json |
Post copy and schedule used by the publish kit |
This box has no accounts and no ads, and it ships its own fonts and libraries. When you run it yourself it sends nothing anywhere. On glassbox.how, the site's /bar.js also loads Glassbox's analytics: Google Analytics to count visits (it asks first in the EU, UK and Switzerland, and stays off when your browser sends Global Privacy Control or Do Not Track) and ClickTrust to detect bots.
It remembers a few things in your own browser only, and never sends them anywhere:
| Browser storage key | What it holds |
|---|---|
respirationclear.v1 |
Which chapters you have opened, your best quiz scores, and sound on or off. |
Exactly what each one sees is at glassbox.how/privacy.
- Code: MIT. Use it, change it, ship it.
- Explanations, text, images and videos (
glassbox.json,glassbox/): CC BY 4.0. Credit “Glassbox, glassbox.how/e/respirationclear”. - Third-party parts keep their own licences: three.js (MIT), Geist, Instrument Serif (SIL OFL 1.1).
- The Glassbox name and logo aren't covered by either licence. See the terms.
Found a mistake? Open an issue. Corrections happen in public.
It's plain HTML, CSS and JavaScript. No build step and no dependencies. Run locally, it contacts no other website.
python3 -m http.server 8000Three.js and the fonts ship in vendor/ and fonts/, so it also works offline.
Then open http://localhost:8000.
| File | What |
|---|---|
index.html, css/app.css |
The page and its styles |
js/app.js, js/stage.js, js/ui.js, js/kit.js |
The shared Glassbox 3D engine: chapters, 3D stage, controls, quiz, video director |
js/chapters/*.js |
One file per chapter: the 3D model, controls, text, key terms, quiz and video scenes |
js/resp.js |
RespirationClear's shared models: breathing mechanics, air warming, the breathing controller, oxygen transport and the oxygen curve (with sources), and the 3D ghost figure, head-and-neck airway, lungs, rib cage, diaphragm, brainstem and nerves |
glassbox.json |
Title, question, explainer beats, key terms, browser storage and credits shown on glassbox.how |
reel in each chapter |
The storyboard the Glassbox studio records into short videos |
glassbox/ |
The published video, slides, thumbnail and post copy |
fonts/, vendor/three/ |
Self-hosted Geist and Instrument Serif (SIL OFL 1.1) and three.js (MIT) |