You ask an LLM a question. A second goes by, give or take. Then it starts typing. What happened in that second?

There are a few excellent explainers out there already. Brendan Bycroft's LLM Visualization is a stunning 3D walk through the full GPT architecture, running on real weights. Georgia Tech's Transformer Explainer lets you poke at attention heads on a small model, live, in the browser. Both are more technically in depth than anything I'm doing here. If you want deep architectural reading, Tim Lee's Large Language Models, Explained With a Minimum of Math and Jargon is the clearest prose piece I know. None of them does the one thing I wanted: watch one token fall through the machine, stage by stage, at whatever speed I chose, with clear labels on which parts of the rendering are real math and which are simplified so you can see them. So I built it.

The result is the thing running above. Matrix-flavored, phosphor green, five stages on loop, speed and temperature sliders wired to the real math. Type your own prompt, tune the knobs, or scroll down for the text walkthrough.

This article is the text version. I walk through the five stages, call out where the Matrix metaphor holds up, and end on the one concept that most LLM explainers skip: the residual stream. Each stage also carries a short product-consequence note, because the whole point of an AI PM having this mental model is to make better product decisions with it.

§ 00The Matrix had a point

When The Matrix came out in 1999, the green rain of falling digits was a shorthand for "reality is computation." The implication was that if you could read the code, you could read the world. For several years this has been treated as science fiction.

Then LLMs arrived and the metaphor turned out to be partially correct. Transformers don't produce readable code; their internals are weights, not text. But the high-level picture, numbers flowing through a network and transforming stage by stage until a word comes out, is close to right.

So this article keeps the aesthetic and tries to separate what the metaphor actually gets right from the parts that are just visual liberty. At every stage I tag two things:

Real
The math, the shapes, the mechanism, what an actual modern transformer is doing. The parts that would still be true if you plugged this visualizer into GPT-5's real weights.
Simplified
The visual liberties. The timings I spread out so you can see them. The tiny slices of real tensors. The candidate pools small enough to fit on screen. Pretty, pedagogical, not strictly accurate.

My argument, as a PM: most AI product teams ship demos that blur capability and theater. The reverse posture is the correct one. Honest labeling of what the model actually does, versus what the interface is staging, is the cheapest user-trust investment in AI product work, and the one most teams never make.

Here are the five stages, in the order they run. The rest of this article walks through each one.

Five stages arrayed left to right, connected by phosphor arrows. Stage 01 Tokenize shows the input prompt "The machine dreams in" split into token chips. Stage 02 Embed shows a vocab lattice with one highlighted row. Stage 03 Attend shows a small causal-mask triangle. Stage 04 MLP shows an expand-contract shape. Stage 05 Sample shows a single magenta glyph representing the chosen next token. Five stages, one token The ·mach ·ine ·dream s ·in 01 TOKENIZE text → ids → 02 EMBED id → vector 03 ATTEND look backward W↑ W↓ 04 MLP expand · project ✱ 05 SAMPLE one word falls out then the whole pipeline runs again, with the new token appended
Fig. 5 the map. five stages, under a second per token, looped once per word. everything else in this article is commentary on this picture.
Stage 01

Tokenize · text becomes integers

The first thing the model does with your prompt is chop it into tokens, sub-word pieces, each assigned an integer id. The word "dreams" might be one token. The word "dreaming" might be two: dream + ing. A leading space is part of the token (" the" and "the" are different ids, because the first follows another word and the second starts a sentence).

The model only ever sees the integer ids. Your text, to a transformer, is a list of numbers between zero and roughly fifty thousand.

Real
Sub-word tokenization is exactly how it works. The leading-space distinction is exactly how it works. Vocabularies are in the 30,000–150,000 range.
Simplified
The splitter in the visualizer is a toy, it cuts on spaces and punctuation. A real Byte-Pair Encoder would merge token + ization. The token ids are hashes of the text, not GPT-2 ids.
Stage 02

Embed · each integer becomes a vector

Now the model takes each token id and uses it to look up a row from a giant matrix: typically 50,000 rows (one per token in the vocabulary) by 4,096 columns (the "model dimension"). Two hundred million numbers, trained into the weights. The row for " in" is a 4,096-dimensional vector that encodes everything the model has learned about that token, its meaning, its typical company, its grammatical role.

People call this the embedding. Mechanically, it's a learned fingerprint: a long list of numbers that encodes what the model has learned about this specific token across its entire training run.

Real
Row-lookup from a vocab × d_model matrix is exactly the operation. 50,000 × 4,096 is a plausible modern size. Real LLMs do add a position signal, though most modern ones (Llama, Claude) use RoPE inside attention rather than adding to the embedding.
Simplified
The visualizer shows a 14 × 32 slice. The actual matrix is ~200 million numbers. The cells stream in one by one; in reality it's an instantaneous memory gather.
Stage 03

Attention · asking every past token for context

Attention is the step most people have seen diagrammed without coming away with a working intuition for it. Here is what it actually does.

The mechanism is: every token carries three role-projections of itself. A query (what it's looking for), a key (what it advertises), and a value (what it actually contributes). When a token needs context, it sends its query out, compares it against every earlier token's key, and pulls back a weighted blend of those tokens' values.

There's one constraint: causality. At position i, a token can only attend to positions 0 through i. Not forward. That's the triangular shape in the "causal mask" you see in the visualizer. It stops the model from cheating by reading tokens from the future it hasn't generated yet.

Attention also runs in parallel, many times at once. Modern transformers have eight or sixteen "attention heads" per layer. Each head learns to specialize: one ends up tracking recency, another focuses on the first token, another picks up mid-range references. Interpretability researchers have spent the last few years cataloging these specializations, and the roles really do come apart cleanly when you look.

Real
Eight heads running in parallel, the causal mask, the Q/K/V split, softmax(QKT/√d) · V, head specialization. All of that is as it works in production.
Simplified
The attention patterns are cleaned up for readability. Real heads are messier. The three phases (build Q/K/V → softmax → weighted sum) happen in microseconds on a GPU; the visualizer spreads them over ~2 seconds so you can see them.
Left side: a 5 by 5 grid showing the causal attention mask. Each row represents a token position; cells below or on the diagonal are filled phosphor, meaning the token can attend to that past position. Cells above the diagonal are empty and dashed, because that future is not visible to the current position. Right side: a row of four small attention-head heatmaps, each showing a different specialization: recent (focus on the immediate past), uniform (even weight on all past tokens), first (anchor on the first token), and mid (focus midway back). A caption reads "+ 4 more heads, same token" indicating this is half of a typical 8-head layer. Causal mask, and how heads specialize CAUSAL MASK · 5 × 5 T0 T1 T2 T3 T4 T0 T1 T2 T3 T4 each position can only look backward × per head 8 HEADS · DIFFERENT ROLES HEAD 0 recent HEAD 1 uniform HEAD 2 first-token HEAD 3 mid-range + 4 more heads, same token, different specializations
Fig. 3 attention. left, the causal mask; right, four of eight heads, each with a different bias.
Interlude

The thing no one draws: the residual stream

Most public LLM explainers I have seen skip or gloss this part, and it is the single concept that made the rest of the architecture click for me.

Every token carries one vector, roughly 4,096 numbers, through the entire model. That vector is the residual stream. Attention reads it, writes an update, and adds it back. The feed-forward network reads it, writes another update, and adds that back too. The vector isn't replaced at each layer. It accumulates.

This repeats thirty-two times, once per transformer block. Layer 15 can write something to the stream that layer 27 will read and build on. That is how a single forward pass ends up doing multi-step reasoning: intermediate results get written into the same vector across depth, so later layers can condition on what earlier layers figured out.

When Anthropic's interpretability team talks about "activation steering," "features," or "linear probes," they're talking about directions inside this stream. The architecture is static, the weights are learned, but the residual stream is the live signal: what the model has actually figured out about this token, at this point in the forward pass, updated layer by layer.

Is the residual stream the same as latent space? Not exactly. Latent space (covered in the companion piece) is the general idea: any high-dimensional, learned, internal representation inside a neural network. The residual stream is the transformer-specific version of that idea, in motion. Pause the model at layer 17, look at one token's stream value, and you have a single point in the latent space of that layer. The stream is the trace of points you'd get if you paused at every layer in order.

In the visualizer, the rain corner stands in for the residual stream. Every stage you see is reading from it and writing back to it, even though the 2D panels show each stage in isolation for legibility. If you look back at Fig. 1, the rain is the one thing that keeps running while the pipeline pauses between stages.

A single vertical arrow labelled "residual stream" runs through 32 stacked layers of a transformer. At each layer, two side-branches fork off: the attention block reads the stream and adds an update back; the feed-forward block does the same. Layers 1, 2, and 32 are drawn, with "× 28 more identical layers" in between. At the bottom, the final token's stream value is projected to the vocabulary and sampled into the next word. The residual stream one vector per token, updated by each layer INIT · EMBED + POSITION LAYER 01 residual stream read ATTENTION writes + adds back + read FEED-FORWARD writes + adds back + LAYER 02 ATTN + FFN + ADD + ... × 28 more identical layers, each writing to the same stream LAYER 32 ATTN + FFN + ADD + FINAL LINEAR · SOFTMAX (only the last token's stream is projected to vocabulary) NEXT TOKEN
Fig. 2 the residual stream. thirty-two layers, one accumulating vector per token. the part of an LLM most product people never learn about, and the part where the "knowledge" your feature depends on actually lives.

Fig. 2 shows the shape of the stream. The part that is harder to draw, and the part product decisions actually depend on, is what gets written into it. Here is a rough sketch for our prompt.

Three stacked bands showing how each token's residual stream value gets enriched with annotations as the vector passes through more layers of the transformer. The same four tokens ("the", "machine", "dreams", "in") appear in every band, in the same positions, but their annotations change. After embed (top band): raw tokens with no context. After layer 16 (middle): each token has acquired a basic grammatical role. After layer 31 (bottom): each token carries richer contextual meaning, including figurative interpretation and expectations about what follows. Phosphor arrows between bands indicate additive updates from attention and MLP blocks. What the stream accumulates the same prompt, at three depths, same residual vector accumulating meaning AFTER EMBED raw tokens, no context yet the [raw] machine [raw · ambiguous] dreams [raw · ambiguous] in [raw] + sixteen layers of attention + MLP writes AFTER LAYER 16 grammatical role acquired, disambiguation begun the [article] + determiner machine [noun, subject] + head of NP dreams [verb, present] + third person in [preposition] + expects object + fifteen more layers · facts, figurative sense, expectations AFTER LAYER 31 figurative sense, priors on what follows the [definite article] specific referent already scoped machine [non-human agent] computational subject of "dreams" dreams [verb, figurative] non-literal sense machine as dreamer in [prep, expects] abstract noun code · patterns · ... the annotations are interpretive · the underlying stream is just ~4,096 numbers getting updated by attention + MLP at every layer
Fig. 2b what accumulates. same prompt, three depths. each token's vector picks up grammatical role, disambiguation, and priors on what follows. real residual streams don't come with human-readable labels; interpretability research is the work of reverse-engineering them anyway.
Stage 04

MLP · expand, think, project

Right after attention, each token's vector hits a feed-forward block. It expands the 4,096-dimensional vector up to 16,384 dimensions (the canonical 4× ratio), passes it through a nonlinearity, and projects it back down to 4,096.

This is where most of the model's parameters live. Roughly two thirds of every trained LLM's weights are inside these feed-forward blocks. If attention is the routing layer that decides which past tokens matter, the MLP is the storage layer where facts, patterns, and learned associations actually sit. Interpretability researchers call individual MLP neurons "key-value" associations, and increasingly can read specific factual knowledge (capitals of countries, who played in what band) out of specific MLP rows.

The full block (attention, then MLP, then the residual-stream update) repeats thirty-two times. Each pass refines the stream a little further.

Real
The expand–nonlinearity–project shape. The 4× ratio. The 32-layer stack (typical of ~7 B-parameter models). The fact that the MLP holds about two thirds of the weights. The "facts live in MLP rows" framing is an active research direction, not a cartoon.
Simplified
The visualizer shows 24→48→24 bars. Real shape is 4,096→16,384→4,096. The "hidden layer goes amber during nonlinearity" is a visual choice; GELU is a mathematical curve, not a color change. Layers run top-to-bottom in one forward pass, not sequentially in time.
Stage 05

Logits and sample · picking one word

After thirty-two rounds of attention and MLP, the residual stream value for the rightmost token hits a final linear projection. This one isn't between 4,096-dim vectors. It goes from 4,096 dimensions out to the full vocabulary, producing fifty thousand scores, one per candidate next token. Those scores are the logits.

Before the logits become probabilities, the model divides them by temperature. Low temperature (around 0.2) sharpens the distribution so the top candidate dominates and the output feels safe. High temperature (around 1.5) flattens it so unusual candidates get a real shot and the output gets weirder. Then softmax turns the scaled scores into probabilities that sum to 1, and a random draw picks the winner. That token is the model's next word.

Then the whole pipeline runs again. Your prompt plus the new token goes back through tokenize, embed, attention, MLP, sample. Roughly 800 milliseconds per token on a fast model.

Real
Final linear head to vocab. Softmax. Temperature scaling. Random sampling. All production-accurate.
Simplified
The candidate pool is a hand-curated ~30 English-y words so the output reads like language. A real LLM ranks all 50,000 entries every step; most get near-zero probability, but they're all there. If you enable the visualizer's LIVE mode, those probabilities come from a real Claude Haiku call via a cost-capped proxy. (Even then: the Messages API doesn't expose actual logprobs, so Claude is estimating from its own training prior. Closer to ground truth than the toy, still not the ground truth itself.)
Three side-by-side probability bar charts of the same underlying logits, displayed at temperatures 0.3, 1.0, and 1.5. At low temperature the top candidate dominates (one tall magenta bar plus short phosphor bars). At temperature 1.0 the distribution is natural (decaying bar sequence). At high temperature the bars flatten toward uniform. Below all three charts: the formula softmax of logits divided by T, rendered in monospace. Temperature, visualized same logits, three temperatures, three distributions T = 0.3 safe T = 1.0 raw T = 1.5 weird softmax( logits / T )
Fig. 4 temperature. one knob; lower sharpens, higher flattens. the winner (magenta) is the same token at all three. this is the knob product teams misuse more than any other.

§ 06Why this matters at the PM level

The PM work that follows from having this mental model is specific. Five places where it shows up:

Trust

Most AI product teams ship demos that blur capability and theater. Honest labeling of real vs. staged behavior is the cheapest user-trust investment available and the one almost no team makes. The visualizer's real/simplified contract is a working example.

Cost

Two thirds of parameter mass sits in MLP blocks, most of the rest in attention and the embedding table. Where you fine-tune determines what you change: the embedding table is the cheap lever for domain vocabulary; MLP LoRAs shift factual behavior; attention rewrites alter how the model routes context. Build-vs-buy calls live here.

Latency

The 800 ms budget is 32 layers × (attention + MLP) × batch, all sequential per token. Context-window cost scales quadratically inside attention. Every latency optimization product teams argue about (KV caching, speculative decoding, prefill vs decode) lives inside this loop. Knowing where it lives is how you tell the engineer pitching a solution whether they are solving the right bottleneck.

Controllability

Temperature is the most misused knob in shipped AI product work. Teams default to 0.7 out of habit. The right default depends on whether users want consistent answers or varied ones, which is a product question, not an engineering one. Same for top-p, top-k, repetition penalties. These are all product decisions dressed up as inference config.

Evaluation

The residual stream is where product-relevant "knowledge" accumulates across layers. Feature teams that think at this level catch regressions earlier because they stop asking "is the output right" and start asking "is the model representing the input correctly by layer 15." Interpretability tools are moving this way; product roadmaps should too.

Personal coda: building this piece shifted how I talk to ML engineers. I stopped asking which block does what and started asking what signal ends up in the residual stream and who put it there. Conversations got sharper. That shift is the one specific thing I would want a PM peer to take from nine minutes of reading.

§ 07How this was built, and what I learned

What I wanted was an LLM explainer that stayed honest about what was real math and what was simplified for legibility, and that did not stop before the residual stream. That version did not exist. So I built it.

The first working version of the visualizer came out of a single Claude Design generation. The visual system, the five stages, the phosphor CRT aesthetic, all of it, in one shot. That was my "we're cooked" moment, the third this month honestly. Claude Code handled the 3D residual-stream scene and the cost-capped proxy. My personal-os setup wired them together. The whole thing came together in a few hours, or really a long sleepless night where I couldn't stop tweaking after Design handed me a working prototype.

There is an old idea that you don't really know something until you can teach it. Reading gives you recognition. Writing pushes you further. Forcing yourself to draw a concept locks it in. That was the loop for this piece: I read, talked through the architecture with Claude as I went, took notes, and those notes turned into the illustrations and the prose you're reading. Shipping the teaching version is what locked the understanding in. If you want to form real intuition about how LLMs work, try to explain one out loud.

The broader thing is about model intuition. You can't form it by reading benchmarks or watching demos. You have to give the models real work and see what comes back. Shipping this piece taught me more about what Claude can actually do than any announcement would have. Action produces information that spectating doesn't, and that gap is where I spend most of my PM time now.

§ 08Play with it

The visualizer at the top of this page is live and open source. Scroll back up, type a prompt, hit play, watch the five stages run on loop. Tune speed and temperature. Click the residual-stream corner to open it into a larger view. The tour walks you through each stage with the real / simplified tags inline.

Live demo

Open the full visualizer in a new tab →

Source

One HTML file, a small React tree, and an optional cost-capped Node proxy if you want the LIVE mode to call a real Claude model. ~3,000 lines total. github.com/sachaguyon/llm-matrix

The AI PM work of the next five years is not about getting closer to the model. It is about being honest about what the model does and building interfaces that inherit that honesty. This visualizer is one small working example. The larger pattern is the point.