Signal Book

The Browser as Cable Room

The Atlantic Cable Company combines 1860s engineering paper with a modern network operations console. Warm gutta-percha cream carries the human history; deep chart blue holds the ocean and live instruments. Copper describes the physical cable. Signal red appears only where electricity, danger, or a route demands attention.

The narrative is arranged as a pressure descent: impossible distance, embodied crossing, catastrophic over-voltage, physical anatomy, then today’s fibre seabed. Each section answers the question raised by the one before it, so facts accumulate as a journey rather than a stack of cards.

One Progress Value, Every Instrument

The signature scene is the tall .crossing section in index.html. Its sticky child stays in the viewport while measureCrossing() in main.js converts the remaining scroll runway into a zero-to-one value. updateSignal() samples the real SVG cable with getPointAtLength(); the pulse therefore descends the continental shelf, crosses the abyssal plain, climbs the Mid-Atlantic Ridge, and reaches Ireland on the drawn geometry.

That same value energizes #cableTraversed, activates five repeaters, advances the progress rail, and slices the visitor’s keyed message into #tape-output. toMorse() makes the impulse strip from the received characters. A quiet live region announces only geographic milestones, not every changing number.

Paper, Copper & Pressure

Every major visual is code. SVG contour paths and grid patterns make bathymetric charts; layered radial gradients create the sense of light being extinguished with depth. The ruled cream sections cross two one-pixel gradients to imitate engineering stock. The Whitehouse panel uses an SVG gauge and CSS induction coil, while the 1866 specimen is a vector cutaway whose buttons set data-active-layer and aria-pressed.

The failure chapter is also a test bench. Holding #coil-trigger runs chargeCoil(); setCoilLevel() moves the needle from 12 to 2,000 volts and reveals three coded punctures in the gutta-percha sample. Pointer and keyboard release call stopCoil(). Reduced motion makes the result immediate, and visibility changes cancel the animation frame.

Motion remains semantic: route dashes transmit, repeaters ping, insulation fails, and sections enter with a single eased lift. The reduced-motion query collapses the long crossing and freezes the signal mid-ocean. Scroll updates are batched through one animation frame and stop while the document is hidden.

Palette & Type Tokens

Six Caps gives mastheads and numerals their compressed Victorian authority. Spectral handles editorial prose and italic drama. IBM Plex Mono labels coordinates, circuits, readouts, and telegrams. All 3 families are self-hosted; numerical instruments use tabular lining figures.