Loom

An explorable explanation of how modern machine learning actually runs on a GPU. In the style of CNN Explainer and Transformer Explainer, Loom lets you "follow the data" through the machine, then climbs the whole stack: it starts at the metal with GPU programming fundamentals, builds up through the ML architecture concepts those primitives make possible, and ends at the state-of-the-art kernels and libraries behind today's largest models. Semantic zoom ties it together, taking you from the whole chip down to a single thread, with a companion memory pyramid that lights up as data moves so you see not just where a value lives but what it costs to reach it.

The name is the metaphor. In weaving, the warp is the set of threads held in parallel on a loom, which is exactly where CUDA borrowed the word: 32 threads running in lockstep. Tiles are the woven blocks of a matrix, and a CuTe layout (Shape ⊗ Stride) is the weaving pattern that assigns each thread its strands of data.

Start at the metal

The opening chapter teaches the GPU itself. It begins with the smallest scene that carries the most weight: one warp of 32 threads performing a coalesced global-to-shared memory load, animated, with a toggle that flips to the strided anti-pattern so the same data visibly fragments into far more memory transactions than it needs. From there it builds through bank conflicts, a tiled matrix multiply as the "follow the data" spine, software prefetching and pipelining, occupancy (how many warps actually fit), and the Hopper path where a single thread fires a TMA bulk copy while producer and consumer warps split the work. One particle is one 4-byte word throughout, so you can always count what you see.

Then the model

Once the machine makes sense, Loom turns to the models that run on it, starting from the fundamentals. It builds up the number formats a model computes in, the foundations of how a transformer is wired, and then the attention block itself: what attention actually computes, the pieces real stacks are built from (positional schemes like RoPE and the NoPE surprise), the KV cache and how it shrinks from multi-head attention down to MLA, and long-context tricks like sliding windows and DSA. From there it covers inference (what actually happens when a model generates a token) and parallelism, scaling a model across many GPUs: the five things you can split, how they compose into 3D parallelism, and the device mesh that indexes it all.

The state of the art

The payoff chapter shows the same primitives doing real work in the kernels behind current models: FlashAttention, which never stores the whole score matrix; DeepGEMM, a matmul that stays in FP8 without losing accuracy; and the grouped matmuls at the heart of mixture-of-experts. Each one is placed on the kernel-authoring ladder, from plain PyTorch up through Triton to CuTe, so you can see the tradeoff between effort and control. A glossary and a sourced reference list back the whole thing.

How it is built

The stack mirrors Transformer Explainer, the modern reference project in this genre: Svelte 5 and SvelteKit with TypeScript, prerendered static and deployed to Cloudflare. The rule of thumb is "let D3 do the math, Svelte do the DOM", so D3 provides the scales and interpolators as derived values while the Svelte template renders the SVG marks directly. Semantic zoom is driven off the zoom transform rather than plain geometric scaling, swapping in more detailed components at each threshold.

Two design commitments run through every scene. Each interactive is taught for a beginner first: keep context while zooming (the rest of the chip fades but stays present), disclose numbers on demand, and ask the reader to predict before revealing. And every scene ships a text twin, a prose description plus a data table that is at once the screen-reader fallback, the reduced-motion fallback, and the version an LLM reads. None of Loom's role models do that, which makes it a real differentiator rather than box-ticking.

Status

Live and growing. Several chapters are built out (GPU fundamentals, attention, parallelism, real kernels) alongside a glossary and references, and the work now is deepening each scene and extending toward the CuTe layout playground that nothing else has.