Last chapter we had a switch — but a human had to flick it. What
if a tiny bit of electricity could flick the switch all
by itself? That's a transistor.
A small water flow can twist the handle on a big valve, letting
a much bigger flow through. The little stream controls{" "}
the big one.
) : (
<>
A transistor is a switch flipped by electricity.
Take everything we just learned about switches, then automate
them: a small input current opens a big output gate. No human
required. This is the device that built the digital era.
We'll use a BJT (bipolar junction transistor) — three terminals
(base, collector, emitter). The base is the "handle"; tiny
current there controls a much larger current between collector
and emitter.
Invented at Bell Labs in 1947 by Bardeen, Brattain, and Shockley
— replacing vacuum tubes and making everything 1,000× smaller,
cheaper, and more reliable. Nobel in 1956. You're staring at a
screen right now powered by literally billions of them.
Slide the base input. Watch the gate open. Watch the big flow
grow.
A small change at the handle makes a big change in the
water coming out the other side.
) : (
<>
Drag the base voltage. The transistor stays "off" until V_base{" "}
exceeds about 0.6 V — the{" "}
turn-on voltage of the base-emitter junction. Above
that, the gate opens proportionally.
Output current = base current × β (gain). For a small
β = {beta}, every milliamp of base current pulls {beta} mA
through the collector.
Jargon check. Setting up this base voltage is called
biasing — "bias" just means which way (and how hard) you
lean on a junction. ~0.6 V of forward bias and the gate opens.
(And ~ means "roughly" — real parts vary a little.)
)}
try it · twist the handle
V_base · the handle} value={vBase} min={0} max={2} step={0.05}
unit="V" accent="current" onChange={setVBase}
hint={kids ? "Pull right to open the gate." : "Below ~0.6 V the transistor is off. Above, it conducts."} />
state
Gate is {fmt(baseFrac * 100, 0)}% open.
{!kids && <> Tiny I_base = {(iBase * 1000).toFixed(1)} mA → I_collector = {iColl.toFixed(2)} A.}
{kids && <> A tiny trickle at the handle becomes a {iColl.toFixed(2)} A gush.}
Either fully open or fully shut. Just like Chapter 5 — but no
human needed. The handle is moved by electricity.
As a louder voice
Open it part way. A small wiggle of the handle makes a BIG
wiggle in the output. Whispers become shouts. That's how
speakers and microphones work.
) : (
<>
The transistor has two operating regimes, each enormously useful:
Switching mode
Drive V_base hard or to zero. The transistor is either{" "}
saturated (fully on, low resistance) or
cut off (fully off, no current). This is the digital
regime — billions of these in your CPU, each storing a 1 or 0.
Amplifying mode
Bias V_base in the middle of its range. A small AC variation
on the input produces a much bigger swing on the output.
That's how a guitar amp, a radio, your phone's mic preamp
all work.
Same device. Two completely different jobs. Engineering is the
art of picking which mode (and which bias point) for which task.
)}
);
}
function GainBeat({ beta, setBeta, vBase = 0.9, vCC = 9, onView, kids }) {
const ref = useInViewCallback(onView);
// Mirror the scene's model so the numbers match the animation exactly:
// I_B = baseFraction × 40 mA, then I_C = β × I_B (capped by the supply).
const baseFrac = Math.max(0, Math.min(1, (vBase - 0.6) / 1.2));
const iBaseMa = Math.round(baseFrac * 40 * 10) / 10; // mA, 1 decimal
const iCrawMa = Math.round(iBaseMa * beta); // β · I_B, mA
const capMa = vCC * 1000; // supply ceiling
const iCMa = Math.min(capMa, iCrawMa);
const saturated = iCrawMa > capMa;
const Ledger = () => (
{kids ? "live · the multiply" : "live · same units, so the ×β shows"}
{kids ? "in" : "I_B"} {iBaseMa} mA×β {beta}={kids ? "out" : "I_C"} {iCMa} mA
({(iCMa / 1000).toFixed(2)} A)
{iBaseMa < 0.05
? (kids ? "The handle is shut — no trickle in, so nothing to multiply. Open it in the section above." : "I_B ≈ 0 (handle below 0.6 V) — nothing to amplify. Set the handle above.")
: saturated
? (kids ? <>That would be {iCrawMa} mA, but the supply tank can only give {iCMa} mA — so it's maxed out. : <>β·I_B = {iCrawMa} mA would exceed the supply ceiling ({iCMa} mA) — the transistor is saturated.)
: (kids ? <>That's the {iBaseMa} mA trickle, multiplied {beta}× by the valve. : <>The collector simply mirrors the base, scaled by β. Both shown in mA so the multiply is plain.)}
);
if (kids) {
return (
§ 04 · big times bigger
A whisper becomes a shout.
The magic of the transistor is the multiplier: a little wiggle of
the handle turns into a HUGE wiggle of the output.
How big is the multiplier? Try changing β (greek letter "beta") —
that's the name of the multiplier.
slide it
A typical small transistor has β around 100 — meaning {beta}
milliamps of output for every 1 milliamp of input.
);
}
return (
§ 04 · current gain
The multiplier: β.
The defining quantity of a BJT is its current gain, called
β (sometimes h_FE). It's how many times bigger the collector
current is than the base current.
IC=β·
IB
(Read it plainly: collector current = β times base current. The
subscripts only name which current — C for collector, B for base.)
Typical small-signal transistors have β between 50 and 500. β isn't a
precisely-controlled number — it varies part to part — so good designs
don't depend on its exact value. They use feedback to make
the circuit robust against β drift. (That's a chapter unto itself.)
One ceiling to know about now, because it comes up the moment you do
real math: β only rules while the transistor has headroom. The
collector current can never exceed what the supply and the{" "}
load — the thing being driven, a lamp or motor — physically
allow (I_max ≈ V_CC ÷ R_load). Drive the base past that
point and the transistor saturates: the valve is simply wide
open, and pushing the handle harder changes nothing. β stops
mattering. For switching, that's exactly where you want to be.
try it · pick a part
Note that with bigger β, smaller base currents are needed to drive
the same load. That's why high-β transistors are useful for sensing
tiny signals.
{kids
? "Three sliders, one transistor, lots of fun. Try to make the bulb as bright as possible."
: "The transistor has three operating regions — cutoff, active, saturation. Slide the handle to feel each one."}
{vBase < 0.6 ? <>The gate is SHUT — nothing flows.
: iColl > vCC * 0.9 ? <>The gate is WIDE OPEN — as much flow as the tank can give.
: <>The gate is PART-WAY open — a little handle makes a big flow.}
) : (
{vBase < 0.6 ? <>CUT-OFF — transistor is off. I_C ≈ 0.
: iColl > vCC * 0.9 ? <>SATURATED — gate fully open. Output limited by V_CC and load.
: <>ACTIVE — operating in the amplifying region. I_C = {fmt(iColl, 2)} A.}
);
}
/* ─── Worked example (adult): MOSFETs, billions of switches ────────────── */
function WorkedExampleSection({ kids }) {
if (kids) return null;
return (
§ 07 · the scale of it
The unspoken scale.
Everything we've shown is a single transistor — the kind you
can buy for $0.10 and hold in your hand. Now scale it up.
Modern chips don't use BJTs; they use MOSFETs — a
cousin that's smaller, faster, and barely uses any base
current. Worth keeping the two straight:
BJT · driven by current
The one this chapter animates: a small base current{" "}
steadily opens the gate — β times bigger at the collector.
Where you'll meet it: hobby boards driving an LED, relay, or
buzzer (the classic 2N2222), audio amplifier stages, the
Beacon's lamp driver.
MOSFET · driven by voltage
No trickle needed — just voltage presence at the gate,
like a finger resting on a touch-lamp. Almost zero control
power, so you can pack billions together. Where you'll meet
it: every chip in your phone, laptop power supplies, EV motor
controllers, LED dimmers.
Same idea in both — small signal gates big flow. You can fit a
single MOSFET in roughly 3 nm × 3 nm.
That's a few atoms wide. And there are billions on a CPU.
orders of magnitude
One discrete transistor14-bit microprocessor (1971)2,300Original Macintosh CPU (1984)68,000Pentium 4 (2000)42 MModern desktop CPU (2024)~25 BApple M3 Ultra~134 B
Every line in that table is a transistor doing one of the two
jobs you just learned — switching, or amplifying. Every photo
you take, every word your phone autocompletes, is just a{" "}
mind-boggling number of these.
);
}
/* ─── Quiz banks ──────────────────────────────────────────────────────── */
const ADULT_QUIZ = [
{
q: "A transistor is best described as…", kind: "concept",
options: ["a battery", "a switch flipped by electricity", "a kind of resistor", "a water tank"],
correct: 1,
explain: "A small input signal controls a big output current — a switch (or valve) operated electrically.",
},
{
q: "In a BJT, a small _ controls a large _.", kind: "concept",
options: ["voltage / resistance", "base current / collector current", "color / size", "heat / light"],
correct: 1,
explain: "Tiny base current gates a much larger collector current. That's the amplifying action.",
},
{
q: "With β = 100 and a base current of 1 mA, the collector current is about…", kind: "math",
options: ["1 mA", "10 mA", "100 mA", "1000 mA"],
correct: 2,
explain: "I_C = β × I_B = 100 × 1 mA = 100 mA (as long as the supply can provide it).",
},
{
q: "For a transistor used as a digital SWITCH, you want it…", kind: "concept",
options: [
"biased in the middle, always partly on",
"either fully off or fully on (saturated)",
"slightly warm",
"disconnected",
],
correct: 1,
explain: "Digital logic wants clean cutoff or saturation — sharp 0 or 1, no in-between.",
},
{
q: "Roughly how many transistors are in a modern desktop CPU?", kind: "concept",
options: ["A few thousand", "About a million", "Tens of billions", "Exactly one"],
correct: 2,
explain: "Tens of billions — each one a tiny switch or amplifier, the kind you just explored.",
},
{
q: "Below its turn-on voltage (~0.6 V at the base), a transistor is…", kind: "concept",
options: ["fully on", "off — no collector current", "on fire", "amplifying"],
correct: 1,
explain: "Below the base turn-on voltage the gate stays shut — essentially no collector current.",
},
{
q: "Used as an amplifier, the transistor is biased…", kind: "concept",
options: ["fully off", "fully saturated", "in the middle of its range", "backwards"],
correct: 2,
explain: "Amplifiers sit in the active region — a small input wiggle becomes a big output wiggle.",
},
{
q: "β varies a lot from part to part (50–500 for the same model). Good designs…",
kind: "concept",
options: [
"measure each transistor and hand-pick them",
"don't depend on β's exact value — they use feedback to stay robust",
"only work with β = 100 exactly",
"avoid transistors entirely",
],
correct: 1,
explain: "β isn't precisely controlled, so robust circuits are designed to work across the whole range — feedback makes the exact value not matter.",
},
{
q: "In saturation (valve wide open), pushing MORE base current does what?",
kind: "concept",
options: ["Doubles the output", "Nothing — the output is maxed; β stops mattering", "Reverses the flow", "Burns the base"],
correct: 1,
explain: "Once fully open, harder pushing changes nothing — the load sets the current. For switching, that's exactly where you want to be.",
},
{
q: "A MOSFET differs from a BJT in that its gate responds to…",
kind: "concept",
options: ["heat", "voltage, drawing almost no control current", "light", "sound"],
correct: 1,
explain: "A MOSFET is controlled by voltage at the gate — like a finger resting on a touch lamp. Nearly zero control power is why billions fit on one chip.",
},
{
q: "The transistor was invented in 1947 at Bell Labs, replacing…",
kind: "concept",
options: ["batteries", "vacuum tubes — making electronics ~1000× smaller and more reliable", "light bulbs", "relays only, with no size benefit"],
correct: 1,
explain: "Bardeen, Brattain & Shockley's transistor replaced hot, bulky, fragile vacuum tubes — the step that made modern computing physically possible.",
},
{
q: "Why is a HIGH-β transistor good for sensing tiny signals?",
kind: "concept",
options: ["It's physically bigger", "A smaller base current suffices to drive the same load", "It stores more charge", "It runs hotter"],
correct: 1,
explain: "Bigger multiplier means a whisper of base current is enough — ideal when the input signal is faint.",
},
];
const KIDS_QUIZ = [
{
q: "A transistor is like…", kind: "concept",
options: ["a bucket", "a magic valve that electricity opens", "a battery", "a light bulb"],
correct: 1,
explain: "A valve — but instead of your hand, a tiny bit of electricity opens it!",
},
{
q: "A tiny trickle at the handle controls…", kind: "concept",
options: ["nothing", "a much bigger flow", "the color", "the temperature only"],
correct: 1,
explain: "That's the magic: a little control trickle moves a big main flow.",
},
{
q: "If the multiplier is 100, a small input becomes…", kind: "math",
options: ["100 times bigger", "100 times smaller", "the same", "zero"],
correct: 0,
explain: "The multiplier makes the output that many times bigger — a whisper becomes a shout.",
},
{
q: "To use it as an on/off switch, you push the handle…", kind: "concept",
options: ["halfway", "all the way down OR all the way up", "only halfway up", "in circles"],
correct: 1,
explain: "Fully shut or fully open — never in-between. In-between is for making things louder, not switching.",
},
{
q: "How many of these tiny valves are inside a phone or computer chip?", kind: "concept",
options: ["about ten", "a few hundred", "billions", "just one big one"],
correct: 2,
explain: "Billions! Each one is a tiny version of the valve you just played with.",
},
{
q: "What moves the handle on this magic valve?", kind: "concept",
options: ["your hand", "a tiny bit of electricity", "water", "a magnet"],
correct: 1,
explain: "Electricity itself moves the handle — no human needed. That's the magic.",
},
{
q: "A whisper-sized input becomes a shout-sized output. That's called…", kind: "concept",
options: ["shrinking", "amplifying", "freezing", "storing"],
correct: 1,
explain: "Making a small thing big is amplifying — how speakers and mics work.",
},
{
q: "The valve is already open ALL the way. Pushing the handle even harder…",
kind: "concept",
options: ["makes even more flow", "does nothing — it's already wide open", "closes it", "makes it hotter"],
correct: 1,
explain: "Wide open is wide open! For on/off switching, that's exactly what you want.",
},
{
q: "Before this valve was invented, computers used big glass tubes that…",
kind: "concept",
options: ["worked better", "were huge, hot, and broke all the time", "were too small to see", "ran on water"],
correct: 1,
explain: "The transistor replaced them in 1947 — a thousand times smaller and way more reliable. That's why computers fit in your pocket now!",
},
];
/* ─── App ─────────────────────────────────────────────────────────────── */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"theme": "paper",
"showCircuit": true,
"audience": "adult"
}/*EDITMODE-END*/;
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
useCrossChapterPersistence(t, setTweak);
useEffect(() => { document.body.setAttribute("data-theme", t.theme); }, [t.theme]);
const kids = t.audience === "kids";
const navItems = [
{ id: "cover", label: "Cover" },
{ id: "begin", label: "The magic valve" },
{ id: "control", label: "Handle" },
{ id: "modes", label: kids ? "Two ways" : "Two modes" },
{ id: "gain", label: kids ? "Bigger" : "Gain (β)" },
{ id: "predict", label: "Predict" },
{ id: "playground", label: "Playground" },
...(kids ? [] : [{ id: "example", label: "Scale" }]),
{ id: "practice", label: "Practice" },
{ id: "quiz", label: "Quiz" },
{ id: "whats-next", label: "What's next" },
];
return (
<>
setTweak("audience", v)} />
The Transistor.}
chapterSub="Chapter 6 · A valve made of electricity"
kids={kids}
lede={kids
? <>The last chapter had a switch — but a human had to flip it. What if a tiny stream of electricity could flip the switch instead? That's the magic device that built every computer you've ever used.
: <>One device. Two regimes. Three terminals. Roughly a hundred billion of them in the laptop you're staring at. This is the punchline — and the launchpad for everything else.
} />
{
const beta = rng.pick([50, 100, 150, 200]), ib = rng.pick([0.2, 0.5, 1, 1.5]);
const ic = +(beta * ib).toFixed(1);
return {
q: { adult: `A transistor has a current gain β of ${beta}. If ${ib} mA flows into the base, what collector current can it carry? (Answer in mA.)`, kids: `The transistor multiplies the small control flow by ${beta}. The control flow is ${ib}. What's the big flow? (in mA)` },
unit: "mA", answer: ic, tol: 0.04,
hint: "I_C = β × I_B.",
solution: { adult: `I_C = β × I_B = ${beta} × ${ib} mA = ${ic} mA.`, kids: `${beta} × ${ib} = ${ic}.` } };
},
(rng) => {
const beta = rng.pick([50, 100, 200]), ic = rng.pick([100, 150, 200, 300]);
const ib = +(ic / beta).toFixed(2);
return {
q: { adult: `You need ${ic} mA of collector current from a transistor with β = ${beta}. What is the minimum base current? (Answer in mA.)`, kids: `You want a big flow of ${ic}, and the transistor multiplies by ${beta}. How much control flow do you need? (in mA)` },
unit: "mA", answer: ib, tol: 0.04,
hint: "I_B = I_C ÷ β.",
solution: { adult: `I_B = I_C ÷ β = ${ic} mA ÷ ${beta} = ${ib} mA.`, kids: `${ic} ÷ ${beta} = ${ib}.` } };
},
(rng) => {
const v = rng.int(5, 12, 1), ib = rng.pick([1, 2, 2.5, 4, 5]);
const r = Math.round((v - 0.7) / (ib / 1000));
return {
q: { adult: `Driving the base from ${v} V with a 0.7 V base-emitter drop, what resistor gives ${ib} mA of base current?`, kids: `Push is ${v}, but the transistor 'uses up' 0.7 getting in — leaving ${+(v - 0.7).toFixed(1)} for the pinch. You want a flow of ${ib} thousandths. Pinch = leftover ÷ flow.` },
unit: "Ω", answer: r, tol: 0.05,
hint: `R = (${v} − 0.7) V ÷ ${ib / 1000} A.`,
solution: { adult: `R = (${v} − 0.7) ÷ ${ib / 1000} = ${+(v - 0.7).toFixed(1)} ÷ ${ib / 1000} = ${r} Ω.`, kids: `(${v} − 0.7) ÷ ${ib / 1000} = ${+(v - 0.7).toFixed(1)} ÷ ${ib / 1000} = ${r}.` } };
},
]} />
{kids
? <>Try it: open The Sandbox and load “Transistor switch” — tap the little switch and watch a tiny base current let a big flow through to the light.
: <>See it work: in The Sandbox, the Transistor switch example shows a small base current (through RB) turning on the much larger collector→emitter current — the valve in action. Toggle the base switch and watch the LED.}
You met the valve that built the modern world! Next up: a part that only lets flow go one way — the diode.
: <>You've got the transistor — amplifier and switch in one. Next: the diode, a one-way valve for current, and the trick that turns AC into usable DC.}
prevHref="chapter5.html"
prevLabel="Chapter 5"
nextHref="chapter7.html"
nextLabel="Chapter 7 · The One-Way Valve" />
);
}
ReactDOM.createRoot(document.getElementById("root")).render();