How does a car work?
Burn a drop of petrol, push a piston, twist a crankshaft, and the road pushes you forward. Take a car apart in 3D, fire a four-cylinder engine in slow motion, and see what torque and horsepower really mean.
▶ Play with it · Read the 60-second explainer · Watch the 40-second video
- Fuel in, motion out. A petrol car burns fuel inside its engine. The hot gas pushes pistons, the pistons turn a crankshaft, and the spin travels through the gearbox, driveshaft and differential to the wheels. The tyres push back on the road, and the road pushes the car forward.
- Suck, squeeze, bang, blow. Each cylinder repeats four strokes over two turns of the crank: it draws in air and a mist of petrol, squeezes it about ten times, fires it with a spark, and pushes the burnt gas out. Four cylinders firing 1-3-4-2 give the crank a push every half turn.
- Torque twists, power is twist times speed. Torque is twisting force: force times lever arm, in newton metres. Power is torque times rotation speed: kW = N·m × rpm ÷ 9,549, and one horsepower is 745.7 W. Past the torque peak, rpm rises faster than torque falls, so peak power comes at higher rpm.
- Gears trade speed for twist. An engine only works between about 800 and 6,500 rpm, so gears map that band to different road speeds. First gear multiplies torque about 15 times with the final drive; fifth lets the engine loaf at motorway speed. The differential lets the outer wheel turn faster in a corner.
- Drag decides top speed and fuel use. The tyres' push fights rolling resistance, hills and air drag, which grows with speed squared. Spare force accelerates the car (F = ma). At top speed all the power goes into drag, and the power needed grows with speed cubed, which is why motorway driving burns so much fuel.
- Electric: full torque, one gear. An electric car stores energy in a battery, and an inverter feeds a motor that gives full torque from standstill and spins to about 16,000 rpm, so one gear is enough. It turns about 85 to 90% of its energy into motion, against about a quarter for petrol, and its motor recharges the battery when braking.
| Term | Meaning |
|---|---|
| Four-stroke cycle | Intake, compression, power and exhaust: the four piston strokes, over two crank turns, that make each bang in a petrol engine. |
| Compression ratio | How much the mixture is squeezed before it burns: the cylinder's largest volume divided by its smallest, about 10 to 1 in a petrol engine. |
| Torque | Twisting force: force times the length of the lever arm, measured in newton metres (N·m) or pound-feet (lb·ft). |
| Horsepower | A unit of power equal to 745.7 watts. For an engine, power is torque times rotation speed. |
| Gear ratio | Teeth on the driven gear divided by teeth on the driving gear: how many turns in for one turn out, and how much the torque is multiplied. |
| Differential | A set of gears that splits the drive between two wheels and lets them turn at different speeds in a corner. |
| Aerodynamic drag | The push back from the air, ½ × air density × drag coefficient × frontal area × speed². It grows four times when speed doubles. |
| Regenerative braking | Slowing an electric car by using its motor as a generator, putting energy back into the battery instead of wasting it as heat. |
250 years from a smoky steam wagon in Paris to the electric cars that now make up one in four new cars sold.
- 1770 · A steam wagon for cannons (Nicolas-Joseph Cugnot, Paris, France)
- 1876 · Suck, squeeze, bang, blow (Nicolaus Otto, Cologne, Germany)
- 1886 · The car gets a birth certificate (Karl Benz, Mannheim, Germany)
- 1888 · The first long car journey (Bertha Benz, Mannheim to Pforzheim, Germany)
- 1899 · The first car past 100 km/h was electric (Camille Jenatzy, Achères, near Paris, France)
- 1908 · The Model T (Henry Ford and Ford Motor Company, Detroit, Michigan, USA)
- 1913 · The moving assembly line (Ford Motor Company, Highland Park, Michigan, USA)
- 1959 · The three-point seat belt, given away (Nils Bohlin and Volvo, Gothenburg, Sweden)
The full story, with 29 moments, charts, people and 51 sources: glassbox.how/e/carclear/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 |
|---|---|
carclear.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/carclear”. - 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/car.js |
CarClear's shared physics and parts: engine kinematics, valve timing and torque curve, gearbox and road-load models, the electric drive, and the 3D car, wheels, gears and charts |
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) |