What it makes
Every idea gets a figure you can move.
A page has an abstract, numbered sections, and about 25 figures woven into the prose. These are the kinds of figures it draws them from. Every picture here is a real figure: captured from an explainer, or running live.
01
2D figures you move
Cross-sections, mechanisms, and step-throughs on a canvas, with instrument-like controls beneath: sliders with marks, knobs, steppers, XY pads, switches, and presets. Readers drag the parts themselves, and numbers in the prose drag too.
- Grab handles, hover readouts, keyboard control
- Callouts that keep clear of each other
- Magnifier insets, dials, measurement lines, hatching
Seen in How a pendulum keeps time and How a pin tumbler lock knows your key.
A pendulum's beat, from the pendulum explainer.
02
Graphs and the science kit
Function plots with areas, tangents, vector fields, and contours; measured data with bands and error bars; and numerics underneath, so every number on screen comes from a model.
- Plots in data coordinates with labeled axes
- ODE steps, roots, statistics, small linear algebra
- TeX in the prose as MathML, colored to match the figures
Seen in What a derivative measures and How spinning circles draw anything.
The slope function of a curve, from the derivative explainer.
03
Simulations
Particle and rigid-body physics, waves and diffusion on grids, N-body gravity, random processes, classic ODE systems, and small neural networks trained live in the page.
Seen in How a neuron fires and How a neural network learns.
A neuron's spike, simulated from its ion currents.
04
3D with real materials
A WebGL engine built for explainers: physically based metals, glass that refracts, soft shadows, section cuts with hatched faces, see-through parts, and ink outlines. Readers turn every model, and zoom with a pinch or Ctrl and the wheel.
- Steel, aluminum, titanium, Inconel, glass, rubber, and temper colors on hot metal
- Studio, night, outdoor, and diagram lighting
- Picking and labels that follow the model
Seen in How a turbofan moves air and The jaw joint.
A turbofan cut away, from the turbofan explainer.
05
Machines from real parts
A parts library that builds hardware to real proportions: nozzles, pumps, pipes with true bends, flanges with bolt circles, bearings, blades, gears. Whole assemblies come with named moving parts, explode offsets, and labels.
- Rocket engine, turbofan, turbopump, piston engine
- Gearbox, electric motor, centrifugal pump, bicycle drivetrain, steam turbine
- Pose them from one kinematic state; take them apart with one slider
Seen in How a rocket engine makes thrust.
The rocket engine exploded, from the rocket engine explainer.
06
Smoke, flame, and air
GPU particles with real forces, a ray-marched rocket plume with shock diamonds that respond to throttle and expansion, and air tracers that follow the potential flow past a wing.
Seen in How a rocket engine makes thrust and How a turbofan moves air.
A bell nozzle firing; the plume changes with fuel, throttle, and exit pressure.
07
Molecules and the body
Ball-and-stick and space-filling molecules with real bond lengths and angles, crystals, and anatomy modeled from measured dimensions: bones, discs, muscles.
Seen in Why ice floats, How a cell builds a protein and The jaw joint.
A water molecule, from the ice explainer.
08
Isometric drawings
Machines and devices drawn from many small solid parts with four-tone shading and ink outlines, crisp at any zoom, turnable, cut away, see-through, and exportable as a standalone SVG. Drag the carriage, turn the view, or download the drawing:
A live figure from the skill's references.
09
Maps and globes
Five projections, 177 countries, cities, great-circle routes, and distances, for anything located on Earth.
Seen in How a CDN makes a faraway site fast and How DNS turns a name into an address.
Round trips from London, from the CDN explainer.
10
Optics
Rays through mirrors, lenses, prisms, raindrops, and the eye, with reflection, refraction, total internal reflection, Fresnel losses, and dispersion. Drag the light or tilt it:
A live figure from the skill's references.
11
Sound and images
Tones, harmonics, and plucked strings the reader hears, with waveforms and spectra; pixels, filters, sampling and aliasing, dithering, and the DCT.
Seen in How spinning circles draw anything.
A spectrum, from the Fourier explainer.
12
Effects
Fire and exhaust, smoke and steam, airflow streaks, water ripples and caustics, glow, sparks, and electric arcs, drawn with WebGL inside a 2D figure, only where they show something physical. Open the air hole:
A live figure from the skill's references.
13
AI and data
Heatmaps for attention and confusion matrices, networks, tokens, ranked probabilities, and loss surfaces a model descends while you watch.
Seen in How attention works, How a language model picks the next word and How a neural network learns.
An attention matrix, from the attention explainer.
14
Diagrams and code
Sequence, flow, state, class, and entity diagrams drawn in the page's own colors, highlighted code, and diffs, all rendered ahead of time so the page still makes no requests.
Seen in How DNS turns a name into an address and How a hash table finds things.
A diagram from the DNS explainer.
15
Research furniture
Everything a serious article needs: an abstract, numbered sections and contents, sidenotes, numbered citations with previews, defined terms, callouts, predictions before surprising figures, collapsible derivations, tables, and light and dark modes.
Seen in How a pin tumbler lock knows your key and How a pendulum keeps time.
The opening of the lock explainer.