How does a motorcycle work?
One cylinder firing 70 times a second, a foot lever that clicks a grooved drum, and a bike that turns by falling into the bend. Take an Indian commuter apart in 3D and see why a litre of petrol takes it 60 km.
▶ Play with it · Read the 60-second explainer · Watch the 40-second video
- An engine in a bicycle-shaped frame. A commuter motorcycle hangs a small single-cylinder engine in a steel cradle frame. Behind the cylinder sit a wet clutch and a five-speed gearbox, and a chain carries the drive to the back wheel. Forks and shocks soak up bumps, and a disc and a drum brake stop it.
- One cylinder, cooled by the wind. The single piston fires once every two turns of the crank: about 70 times a second at full power. There is no radiator. Fins around the cylinder give the rushing air a big hot surface, so the air carries the heat away.
- A foot lever and a grooved drum. Five pairs of gears are always in mesh. Each click of the gear lever turns a shift drum, whose grooves slide a fork and lock one gear pair to the output shaft, in the order 1-N-2-3-4-5. With the primary drive and the chain, first gear turns the engine about 28 times for each turn of the wheel.
- Turn by leaning. In a steady turn the bike leans until gravity and the tyres' sideways grip balance: tan θ = v² ÷ (g·r), about 29° at 60 km/h on a 50 m bend. To start the lean you push the handlebar on the side you want to go, briefly steering the other way.
- The front brake does most of the work. Braking throws weight onto the front tyre, so it can do 70–80% of the stopping. Grab it too hard and the wheel locks and the bike falls; ABS eases the pressure about a dozen times a second. India has required ABS above 125 cc since 2019.
- One kilowatt to keep going. A light bike at 45 km/h needs only about 1 kW to beat air drag and rolling resistance, so a 100 cc commuter goes 60–70 km on a litre. A small car burns several times more, and an electric scooter uses a quarter of the energy.
| Term | Meaning |
|---|---|
| Four-stroke | An engine cycle of intake, compression, power and exhaust, taking two turns of the crankshaft. |
| Cooling fins | Thin metal plates around an air-cooled cylinder that multiply the surface the air can take heat from. |
| Wet multi-plate clutch | A stack of friction and steel plates in the engine oil that joins or separates the engine and gearbox. |
| Shift drum | A drum with curving grooves that moves the selector forks one gear at a time. |
| Final drive | The chain and sprockets from the gearbox to the back wheel, about 2.8 : 1 on a 150 cc commuter. |
| Countersteering | Briefly steering away from a turn to make the bike lean into it. |
| Trail | How far the front tyre touches the road behind the point where the steering axis meets it. It keeps the steering steady. |
| ABS | Anti-lock braking: sensors spot a wheel about to lock and a valve eases the brake many times a second. |
| Mileage | How far a vehicle goes on one litre of fuel, in km/L. |
From a wooden 'riding car' in 1885 to 20 million bikes and scooters a year in India.
- 1885 · The Reitwagen: the first petrol motorcycle (Gottlieb Daimler and Wilhelm Maybach, Bad Cannstatt, Germany)
- 1894 · The first production motorcycle (Heinrich and Wilhelm Hildebrand, Alois Wolfmüller, Munich, Germany)
- 1942 · Motorcycles of the Second World War (Harley-Davidson, BMW, Royal Enfield and others, USA, Germany, Britain)
- 1946 · The Vespa scooter (Enrico Piaggio and Corradino D'Ascanio, Pontedera, Italy)
- 1955 · The Bullet comes to Madras (Madras Motors and Royal Enfield, Madras (now Chennai), India)
- 1958 · The Honda Super Cub (Soichiro Honda and Takeo Fujisawa, Japan)
- 1972 · Hamara Bajaj: the Chetak (Bajaj Auto, Pune, India)
- 1988 · ABS on a motorcycle (BMW, Germany)
The full story, with 29 moments, charts, people and 39 sources: glassbox.how/e/motorcycleclear/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 |
|---|---|
motorcycleclear.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/motorcycleclear”. - 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/moto.js |
The shared motorcycle: a Pulsar 150-style 3D model and rider, engine kinematics, torque curve, gear ratios, fuel, road-load, cornering and braking physics |
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) |