The making of
a speaking horizon

I · Concept

History as an instrument

The Semaphore Line is an imagined 1794 engineering atlas that can be operated. Its central conceit is simple: the landscape is not scenery but communications infrastructure. Dusk lavender, cream masonry, black mechanisms, and one lamp-amber accent establish a world between technical plate and remembered evening. The page avoids a conventional museum-card layout; instead, sections behave like plates, registers, instruments, and field notes.

The story moves from wonder to mechanism to human consequence. A monumental opening explains the premise. The long relay makes the visitor feel distance. The console gives them agency. The codebook reveals the grammar, while weather records and an operator’s log restore all the friction—mist, birds, tired eyes—that the elegant machine tried to defeat.

II · Techniques

How the line moves

The signature landscape is an inline SVG inside index.html. Six .tower groups share cream masonry and black regulator geometry. In main.js, scheduleRelayUpdate() batches scroll events into one animation frame; updateScrollRelay() converts progress into a message step and offsets that step at each tower. positionFor() maps letters to paired arm angles. CSS custom properties feed those angles to the SVG, where an overshooting cubic Bézier produces the wooden clack.

The public instrument builds a second hill line in stationNames.forEach(). runTransmission() pipelines the visitor’s message across all 6 stations, moves the amber packet, prints each live character over its tower, and exposes only letters that reach Lisieux. The loop pauses while the document is hidden. With reduced motion enabled, completeTransmission() resolves the same state immediately rather than forcing animation.

The meteorological sighting glass turns weather into a control. updateVisibility() reads #visibilityRange, then sets --clarity, --fog, and --sight-blur on the coded landscape. The distant tower dissolves, the live observation copy changes, and the operator moves through clear, repeater, suspended, and line-lost protocols.

Atmosphere is code, not imagery: contour paths, layered hill silhouettes, a turbulence-grain data URI, atlas grids, sight lines, instrument shadows, and amber light. The entrance sequence traces contours before the staggered .reveal animations arrive; the codebook updates #codeDraft in place so composing never breaks reading position.

III · Palette & type

The atlas vocabulary

IM Fell English carries titles with period irregularity; Zilla Slab gives body text an engineered, readable rhythm; Space Mono labels every coordinate, time, code, and machine state. The tokens live in :root at the top of styles.css.

IV · Reproduce this

Prompt the mechanism first

Ask an AI agent for a historically grounded, code-only interactive editorial experience—not merely a themed landing page. Name one physical interaction as the centrepiece: a scroll-driven chain of SVG semaphore towers that relays a legible phrase, plus a working composer that sends the visitor’s own text station by station. Specify a restrained dusk-and-ink palette, period display type, technical mono annotations, substantial invented records, responsive breakpoints, hidden-tab animation pausing, and reduced-motion behaviour. Require screenshot review at phone, tablet, and desktop sizes. Most importantly, ask the agent to make every visual serve the mechanism: the atmosphere should explain how distance, weather, and human attention became part of the network.