How Shannon was made
A biased coin, its live bit-stream, and the entropy that measures it. This page documents the concept, the palette, the type, the signature surprise-colouring, and the three iteration passes.
The concept
Shannon is a single fictional instrument for a real idea: that uncertainty can be counted in bits. Weight a coin with the slider and its verdicts pour out as a field of ones and zeros; the page computes the Shannon entropy H(p) live and plots the curve that peaks at exactly one bit when the coin is fair and collapses to zero as the outcome becomes a foregone conclusion. Its audience is anyone who has heard "entropy" and never seen it move. The page's single job: make information feel physical — surprise you can count, and a stream that compresses only as far as its entropy allows.
Palette
The ground is warm printer's paper, not screen-black — because a bit-stream is a printed thing, a ledger of flips. Ink is near-black for full contrast; a single vermilion carries all the meaning of surprise. Following the collection's ink/line rule, the bright vermilion is reserved for marks and fills; body copy uses a darker derived ink so every line clears 4.5:1 on paper.
Type
Space Grotesk sets the display and interface — a grotesque with just enough character to feel engineered, not corporate. IBM Plex Mono does the real work: it is the bit-field itself, and every number, readout and axis label. A monospace is the honest face for information — each glyph the same width, each flip the same weight of paper. The type is deliberately large in the entropy readout so the peak value, 1.000, reads as a headline in its own right.
Techniques
- Canvas 2D bit-field — a scrolling ledger of monospace ones and zeros. Each row is sampled live from the current bias; rows drift downward on an accumulator so old bias literally scrolls into history.
- SVG entropy curve —
H(p)sampled at 160 points into a single path, with a filled area, a peak guide at one bit, and a marker dot with a dropline that rides to the current bias. - Live maths —
H, per-outcome surprise−log₂P, and the compression floorN·Hrecomputed on every slider event. - Discipline — DPR capped at 2, canvas sized to its container with a debounced resize rebuild, the rAF loop paused on
document.hidden, and a settled static frame underprefers-reduced-motion.
The signature — surprise, coloured
The one thing to describe to a friend: the rarer symbol is drawn in red. A mark's colour is decided at draw time from the live bias — whichever outcome is currently less than even-odds is the surprising one, and it flares vermilion while the expected symbol fades toward the paper. So a fair coin's field is half-red and charged; tip the coin and the red thins to a scatter as its entropy drains away. The amount of red is the uncertainty. Because colour is computed per-frame, dragging the slider re-tints the entire field in place — including old rows that were sampled under a different bias.
Iteration log
Drove the slider end to end and read the rendered result. Two real defects surfaced. First, the surprise-colouring keyed on prob < 0.5, which left the fair field with zero red at all — the exact opposite of the legend's promise that certainty starves the surprises. Re-keyed it to the expected-symbol rule, so red density now peaks at p = ½ and drains as the coin tips. Second, the "live bit-stream" tag and legend sat bare over the churning digits, garbled and well under 4.5:1 — added a translucent paper scrim behind both.
Also tuned the expected-symbol alpha so it genuinely fades as it grows likelier (the paper's calm at high certainty), made the legend digits track which symbol is currently expected versus surprising, and kept the vermilion split into a marks tone and a darker accent-ink so no red text drops under 4.5:1 on paper.
The signature earned a second-read detail almost for free: because each row keeps the bias it was born under while colour is recomputed live, dragging the slider scrolls a visible gradient of the coin's history away beneath the new bias — you only clock it on the second visit.
Added the headline micro-interaction: the entropy curve is now grabbable. Press and drag anywhere on it and the marker dot tracks under your pointer, scrubbing the bias — a second, tactile way to drive the same value the slider controls, with the dot swelling while held. Kept the "maximal" pill that lights only above 0.995, the halo behind the dot, and the soft 120ms squeeze on the compression bar.
Checked 375px: the stage collapses to one column, the field switches to a 16/11 landscape box with a 13px cell so the bits stay legible, and the header wordmark plus nav sit within the viewport (clean scrollWidth, no offenders). Confirmed the prefers-reduced-motion path renders a settled static field and recolours on input without ever starting the rAF loop, verified :focus-visible rings on the slider, curve and links, and confirmed the DPR-cap-2 / debounced-resize / visibility-pause handling.
Chanel rule: removed the "mix in field" readout — a 50 / 50 that merely restated the bias already shown three ways — leaving a clean three-fact row (bias, and the surprise of each outcome). Final copy read-through top to bottom.