Ramakm/folio-anatomy

Folio
*Explain an idea the way a museum explains a specimen.*
Three-dimensional isometric technical drawings that you can control and inspect from every angle.
Live simulations of electricity, magnetism, and energy flows.
Internal components that actually rotate, shift, and interact, not just static visuals.
The collection · Install · Commission a plate · Anatomy of a plate · Make your own
The Results[Examples]
Plate I · Attention, as an assay bench Machine learning. A sealed reservoir pours one unit of attention between eight words by softmax. Flow wheels turn in the manifold as the weights shift. Four heads, a temperature knob and a causal mask.
Plate II · The heart, as a double pump Physiology. Four piston chambers, four valves, two circuits and turning timing cams, run by a live model of the circulation. Slow it down, speed it up, or give it a narrowed or leaking valve.
Plate III · The grid, as a miniature Electricity. Falling water turns a wheel, a rotor's field sweeps the stator coils, transformers step the voltage up and down, and a town draws the power. Frequency, governor, line losses and protection are all simulated live.
Plate IV · The hash map, as a sorting office Data structures. Keys are hashed with Java's own hashCode , folded to a bin by their low bits, and filed by a carriage on a rail. Collisions are settled by chaining, linear or quadratic probing, and the table doubles past a load of 0.75.
All four plates live on one website, with a cover page written as a short illustrated essay: **ramakm.github.io/folio-anatomy/docs**. Its source is in site/ and the built site in docs/ (see VI).
Three views of every plate
Each plate has a switch in its top corner: **SVG · WebGL · 3D**, plus two ways to look closer: press any numbered pin for a zoomed view of that part with its live reading, or turn on the **Loupe** to magnify the bench under your pointer.
SVG The engraved drawing: solid parts, tones by facing, hatching that follows the shade.
WebGL Light over the drawing. Pulses run along vessels at the true flow, fluid glows with its value, and rippled light falls across the bench. A mask rendered from the drawing keeps the light off anything hidden.
3D Drag to turn the bench all the way round, and look at it from behind or from above. Every part is re-projected, re-shaded and re-ordered from the new angle. Double-click to reset.
Energy you can see Current runs along the wires at the true power, the transformer cores glow with flux, the conductors warm with their losses, and the town's windows dim when the line cannot keep up.
Parts that move The water wheel, shaft and rotor turn at the machine's real speed, the governor's balls fly out as it speeds up, and the breaker lifts when protection trips. Slow the grid down and you watch it slow.
I. The idea
Most technical diagrams are boxes and arrows. They name the parts but leave the motion to your imagination.
A Folio plate turns the idea into an instrument whose working parts carry it out, then mounts that instrument the way a museum would. You can read it as an engraving, light it with WebGL, or turn it in 3D, and its internal parts move as the model runs. Each part gets a numbered pin, a catalogue key says what each pin computes, and four wall texts walk through the math with live numbers.
In Plate I, eight glass columns stand for eight words. A sealed reservoir holds exactly one unit of fluid and shares it between the columns by softmax, so the columns always sum to one because the reservoir never holds more. The shares settle as layers in a tray, and the length of each layer is that word's attention weight.