The Toy Box

Forty interactive pieces, out of their boxes

The series has six hundred-some visualizations. These are forty favorites, pulled out of their posts so you can just play. Every one of them was built to make a single intuition stick — press play, drag things, click around. The link on each card goes to the post where it earns its keep.

Foundations

The math and the hardware everything else stands on.

01

Play with a matrix

from 1.1

Click a preset or edit the numbers directly. The columns of the matrix are exactly where the basis vectors land.

02

Matmul, one cell at a time

from 1.1

Each output cell is one dot product: a row of A against a column of B. Watch the sweep, then you'll see it forever.

03

Three optimizers race down a valley

from 1.6

Same start, same bowl. SGD zig-zags off the steep walls, momentum glides, Adam adapts per-parameter and wins.

04

The temperature dial

from 1.3

Drag T. Low temperature collapses the distribution onto the winner; high flattens it toward uniform. The ranking never changes.

05

The bits inside a float

from 1.7

Type a number. Then try 65504, 65505, and 100000, and watch fp16 fall off a cliff while bfloat16 shrugs.

Language before transformers

What prediction looked like before attention, and why it worked.

06

Shannon's guessing game

from 1.8

Watch the entropy of English collapse as context accumulates. This 1951 game is the entire premise of language modeling.

07

king − man + woman

from 2.3

Click an analogy and watch the arithmetic. The offsets are parallel because training made the geometry mean something.

08

One LSTM timestep

from 2.6

Step through the gates. Watch one slot get erased by the forget gate and immediately rewritten by the input gate.

Tokens

How raw bytes become the units a model actually thinks in.

09

What is a character, anyway

from 3.1

One family emoji: 1 grapheme, 7 code points, 25 bytes. Click through the examples and watch the three layers come apart.

10

Watch a vocabulary grow

from 3.2

BPE merges the most frequent pair, over and over. Common words crystallize into single tokens; rare ones stay in pieces.

11

Encoding is a replay

from 3.2

A word the tokenizer never saw still splits cleanly, because encoding replays the merge list in training order.

12

The optimal split

from 3.3

Viterbi considers every way to cut the word and keeps the best total. Greedy matching can't back out; this can.

Inside the transformer

The machine itself, one block at a time.

13

A whole attention head

from 4.1

Four tokens, five steps. Click a token and trace its query through the scores, the softmax, and the weighted sum.

14

The triangle

from 4.3

Toggle bidirectional against causal. Each token sees one more position than the last, and the upper triangle is exactly zero.

15

Position as rotation

from 4.4

Three dimension pairs, three speeds. The fast pairs encode fine position, the slow pairs encode coarse. That's RoPE.

16

The FFN is a key-value memory

from 4.5

Click a neuron: its row of W₁ is a pattern to match, its column of W₂ is what gets written to the stream when it fires.

17

Suppress the Paris neuron

from 4.5

Turn specific neurons off and watch the model lose confidence in the correct answer. Facts live in surprisingly few places.

18

Tokens choose their experts

from 4.9

Most experts stay dark for any given token. That sparsity is the whole economy of mixture-of-experts.

Inference, one token at a time

What actually happens when a model generates.

19

One new token, one new row

from 5.3

Hit next-token. The attention matrix grows by exactly one row, and everything above it is already cached.

20

Watch the cache grow

from 5.4

Toggle MHA, GQA, and MQA, and 7B against 70B. The KV cache is the scarce resource; head-sharing is why it fits.

21

The sampling pipeline

from 5.5

Temperature, top-k, top-p, and min-p on live bars. Set a combination, then hit Sample and draw a token.

22

Draft, then verify

from 5.6

A small model guesses five tokens; the big one checks them all in a single pass. Identical output, far fewer passes.

23

JSON by construction

from 5.9

The grammar masks illegal tokens before sampling, so the model literally cannot emit invalid JSON. Step through it.

Serving systems

The engineering that turns a model into a service.

24

No idle slots

from 5.7

Static batching piles up gray idle cells as short requests finish. Continuous batching refills every slot immediately.

25

Virtual memory for the KV cache

from 6.3

Three requests scattered through a shared block pool, each holding a tiny block table. This is PagedAttention.

26

Copy a page, not the cache

from 6.3

Two requests share a system prompt until one writes. Only the written block gets cloned; everything else stays shared.

27

Attention without the N×N matrix

from 6.2

Tiles stream through SRAM. The full score matrix is mathematically defined but never exists as bytes anywhere.

28

Will it fit?

from 6.4

Pick a model, a precision, some GPUs. Whatever's left after the weights is your KV budget, and the KV budget is your concurrency.

29

The knee

from 6.7

Drag batch size. Throughput saturates while latency keeps climbing — everything right of the knee is user experience thrown away.

Training & post-training

How the weights get made, and made agreeable.

30

Only the green tokens learn

from 7.3

The forward pass covers the whole sequence, but loss only fires on the assistant's tokens. That mask flips a completer into an assistant.

31

The trust region

from 7.4

Trace PPO's clipped objective. Once the policy moves too far, the gradient just goes flat — that plateau is why training doesn't explode.

32

Expert collapse

from 4.9

With no balancing pressure, tiny initial advantages compound until two experts do all the work and six do nothing.

Retrieval & context

Getting the right information in front of the model.

33

One question, eight stages

from 9.6

A real query stepped through parse, chunk, embed, retrieve, rerank, assemble, generate, cite — with the payload at every boundary.

34

Embed the answer, not the question

from 9.6

The hallucinated answer lands nearer the real passage than the query does. Then it gets thrown away. That's HyDE.

35

The living summary

from 9.9

Old turns compact into a running digest while the last few stay verbatim. The model's view stays small as the conversation grows.

Agents & protocols

The loop, and the standards forming around it.

36

The loop is the agent

from 10.3

Generate, parse, execute, resume. The transcript on the right is the only memory the model has between turns.

37

Three calls, one wait

from 10.3

Sequential tool calls stack three round-trips. Parallel calls fan out and come back together — same tokens, less wall-clock.

38

N×M becomes N+M

from 10.5

Add hosts and tools one at a time. Bespoke integrations grow like area; protocol adapters grow like perimeter.

39

The whole protocol in eight steps

from 10.5

initialize, tools/list, tools/call. Everything is plain JSON-RPC; the transport just carries the envelopes.

40

PKCE in one picture

from 10.6

Commit to a hash before anyone sees the auth code; reveal the secret at token time. A stolen code is worthless on its own.

Every toy here does its real work inside a post, surrounded by the argument it belongs to. If one of them made something click, the series index and the map will take you the rest of the way.