Model Mechanics
A field guide to working with LLMs: four animated explainers covering the transformer, reasoning effort, orchestration, and agent loops.
[visit]
Canvas 2DSVGVanilla JSStatic Site
Overview
Model Mechanics is a field guide to working with large language models, written for readers without an architecture background while keeping enough math that technical readers still get a full picture. Each article is one self-contained HTML file whose interactive figures sit directly below the prose they illustrate.
The Articles
- Inside an LLM: Corpus to Next Token: eight interactive Canvas scenes follow text through tokenization, embeddings, attention, pre-training, and one-token decoding, ending in a scrubbable replay of the full training-and-inference lifecycle
- Reasoning Effort: what the effort knob turns, why its returns flatten, and how to pick a level, with an interactive quality-versus-budget curve
- Orchestration and Subagents: context isolation as the reason to delegate, with fan-out, pipeline, and verification patterns animated as a worker graph and a context ledger
- Loops and Skills: the while-loop that turns a text predictor into a worker, and procedure packaged as files an agent loads on demand
Technical Details
- Stack: pure static HTML, one self-contained file per article with inline CSS and JS, no build step
- Figures: a dependency-free Canvas 2D engine with high-DPI 3D projection powers the flagship; the satellites animate SVG and DOM
- Design: an academic layout system with a 720px reading column, numbered figures on flat dark panels, and light and dark themes
- Accuracy: color carries one meaning across every figure (blue for data, coral for learning, gold for output), and each scene labels what is illustrative versus exact
- Deployment: Vercel, auto-deploying from GitHub pushes