Site 212 · Wave 11 — Memory · How it was made

A fabric that remembers, woven in React Three Fiber

The concept. FERRITE is a magnetic-core memory plane from the mid-1950s, presented as the museum object it deserves to be: 512 ferrite rings on woven copper in a cold machine-hall, holding the word HOLD as magnetisation states. The page has one job — to make you feel the strangest fact about core memory: reading a bit destroys it, so the machine spends its life quietly rewriting everything it has just remembered. The honest failure ships alongside: a disturb-stress switch that creeps an unselected bit off its hysteresis loop, exactly the way real planes lost bits.

Palette — argued from the artefact

#131820machine-hall slate — the unlit room around the frame

#C4763Acopper — LINE/MARK only: drive wires, rules, eyebrows (5.4:1)

#4C3A2Eferrite umber — the ceramic itself; core tones derive from it

#E7E2D4sense-pulse ivory — headings and the sense flash (13.8:1)

#C6C1B2body ink, derived from the ivory — 9.9:1 on slate, never copper

Per the collection's ink/line rule, the copper accent draws wires and rules but never sets body copy; the reading ink is a step down from the ivory so headings still outrank text.

Type

IBM Plex Sans for everything spoken — the typeface of the company whose machines carried core memory for two decades; its 600 weight, letterspaced and uppercased, is the wordmark and the h1. IBM Plex Mono for everything measured: the cycle log, the B–H axis labels, the HUD readouts, eyebrows. The pairing keeps the whole page in one lineage — machine voice and machine hand.

Techniques

R3F, no build step. The allowlisted esm.sh importmap (react 18.3.1 + jsx-runtime/jsx-dev-runtime subpaths, fiber 8.17.10 and drei 9.114.3 with ?external= singleton params, three 0.160.0 from jsdelivr), with htm tagged templates bound to React.createElement and explicit React.Fragment throughout — never the <> shorthand, which crashes R3F's reconciler.
The plane. One InstancedMesh of 512 tori (32 × 16, torus 0.335/0.125, 10 × 24 segments — a single draw call), each tilted ±45° in checkerboard so both drive wires clear the aperture, as in period planes. Bit state lives in per-instance colour; a flip runs a 0.4 s scale-bump with a copper flash, so the word stays readable as a dot pattern from distance. All 48 drive wires are a second InstancedMesh of cylinders; the sense wire is one CatmullRom serpentine threaded through all 512 cores, extruded as a 1400-segment tube whose emissive intensity is the sense pulse.
The signature — destructive read, quiet restore. A state machine steps the seven word-rows core by core: half-select currents light the X and Y wire of the addressed core (additive highlight cylinders), and at asin(1/1.4)/π ≈ 0.25 of the read phase — the moment the summed field crosses the coercive knee — the bit is destroyed, the sense wire flashes, and the rewrite phase drives it back. The probe records destroyed/restored per cycle so QA asserts the destruction, not just the animation.
The live B–H loop. An SVG panel whose outline and working point come from the same model: a scaled tanh pair, B = (|m|/tanh(A·Hc)) · tanh(A·(H ± Hc)) with A = 3.4, Hc = 1. A half-select drives H to 0.7·Hc (a visible nudge that comes home); coincident currents drive 1.4·Hc (a branch switch). The dot genuinely rides the drawn loop because both are the same function.
The honest failure. Disturb stress hammers one row with same-polarity half-selects, each shaving ε = 0.045 of remanence off the unselected victim — a deterministic flip on the 23rd pulse (1 − 22·0.045 = 0.010 > 0; the 23rd lands at −0.035). The page's copy says "about two dozen" and declares the compression: real cores were specified to survive vastly more, and normal read/rewrite polarities largely cancel — which is why period disturb testing used deliberately one-sided worst-case patterns, the same pattern this switch drives.
Honesty rails. Cycle time is hedged to the era ("a few microseconds, by the mid-fifties" — Whirlwind-class planes). The read-zero blip is 7% of a read-one pulse in this model. A window.__ferrite probe exposes cycle index, bits, disturb creep and the last sense pulse; headless QA gates on that state — including a framebuffer sample proving a lit core renders brighter than an unlit one — never on wall-clock time.
Quality floor. DPR capped at 2, camera refit on resize, frameloop set to never while the tab is hidden, reduced motion switches to demand-frame rendering with instant (synchronous) cycles, WebGL context loss swaps in a CSS/SVG poster guarded by [hidden]{display:none !important}, and QA asserts the poster is invisible while the scene runs.

Iteration log

Pass 1 · Craft

Removed a dead first draft of the SVG loop-path builder that wrote the path twice. Caught the internal phase name REST0 leaking into the HUD readout and mapped it to REST. The first rendered frame left the leftmost letter of the word grazing-dark under the raking key light — rebalanced in two steps (key from (−18,11,15) to (−9,10,20), ambient 0.42→0.52) and warmed the lit-core tone one step (#9A7250→#A67C55) until all four letters read at thumbnail distance. Re-derived every text tone against slate and panel grounds: ivory 13.8:1, body ink 9.9:1, dim labels 5.2:1; copper stays on lines, marks and the ½/full ticks only. Gave the cycle log a fixed minimum height so the panel stops breathing as entries arrive.

Pass 2 · Depth

Made the restore legible, not just true: flips now bump scale 1→1.5→1 over 0.4 s through a copper flash before settling into the new bit tone, so the destroy-then-restore double-blink reads at a glance. Drove the two-bit story as a QA assert while tuning: a read of (04,04) must report destroyed:true, restored:true with the bit intact after. Second-read detail: the auto-cycle patrols only the seven rows that carry the word, so the log's coordinates quietly trace the letters; and the disturbed core dies with a half-height sense blip — the plane telling on itself. Added the one micro-interaction the scene needed: cores answer hover with a pointer cursor, and the QA harness gained an honest framebuffer assert — the projected footprint of a lit core must sample brighter than an unlit one (99.9 vs 6.3 peak luminance in the shipped check), which caught the sampler aiming at the tilted ring's aperture instead of its tube.

Pass 3 · Hardening

375 px: hero becomes a column (62svh stage, copy, then HUD), the wordmark sub-label and one nav item drop, and the stat row wraps 2×2 — verified by bounding-box, not scrollWidth alone. Reduced motion: demand-frame loop, no auto-cycle or camera sway, clicks run synchronous cycles that still draw the full excursion as a static trace. Arrow keys are claimed only while the stage is in view. Chanel rule: cut a planned travelling pulse-dot on the drive wires — the wire glow already carries the timing, and the loop dot is the star. Final re-read of every number in this guide against the shipped code.

← Back to the plane · Collection index