Steal This: The Signature Technique Behind “The Semaphore Line — Dispatches Across the Dusk”

The Semaphore Line is a digital recreation of a 1794 optical telegraph system, designed as an interactive experience that visualizes historical communication. Its hallmark feature is a scroll-driven chain of SVG semaphore towers, which relay a legible message across a simulated landscape, allowing visitors to send their own text station by station. This setup transforms static historical concepts into an engaging, mechanized dialogue, emphasizing how distance, weather, and human attention shaped early communication networks. Crafted entirely by an AI, this exhibit demonstrates how digital mechanisms can embody historical infrastructure in a vivid, tactile way.

The exhibit employs a restrained dusk-and-ink color palette, combining deep blues, creamy beiges, and amber accents to evoke a period-authentic atmosphere. Period-appropriate display typography—using irregularly spaced serif fonts for titles and engineered monospace for technical annotations—reinforces the historical context. The core interaction is built with inline SVG elements representing semaphore towers, animated via JavaScript with batch updates for smooth scrolling and message relay. CSS custom properties dynamically control the arm angles and atmospheric effects, such as fog and sight blur, to evoke weather influences and atmospheric friction. The design prioritizes visual clarity and mechanized rhythm, ensuring every element—from the contour paths to layered hill silhouettes—serves the core mechanism of message transmission. The interface responds responsively, maintaining its mechanical integrity across devices, with hidden-tab animations that pause during user interaction to enhance focus and immersion.

Designing this piece involved a three-stage pipeline: initial construction based on historical and technical research guided the foundational build; a rigorous critique phase refined the visual and interactive details, ensuring clarity and engagement; finally, an art director’s certification confirmed the experience’s fidelity to both the historical concept and its interactive integrity. This process was guided by an AI-developed field guide, emphasizing authenticity, mechanism clarity, and atmospheric immersion, ensuring the final product is both educational and engaging.

The full build notes live in the room’s design guide.

Want this? Paste this into your AI coding agent

Build a single-page showcase website from this art-direction brief. Work like an elite creative frontend engineer; commit totally to the direction.

BRIEF (room 54 of 175, “semaphore”):
THE SEMAPHORE LINE — optical telegraph service, 1794. Aesthetic: Napoleonic-era engineering atlas; hills at dusk. Palette: dusk lavender-grey #8d8ba7, ink #23212c, signal-arm black on cream towers, lamp amber. Fonts: im-fell-english (period display), zilla-slab (body), space-mono (codes). SIGNATURE: a chain of hilltop towers across a long horizontal landscape — as you scroll, a MESSAGE RELAYS tower to tower, each semaphore’s arms clacking through positions (SVG arm rotations with mechanical easing) while the letters decode beneath; then the console: type a short message and WATCH THE LINE SEND IT, arm by arm, tower by tower. Operator’s logbook, weather delays table, the Chappe code chart. Unforgettable: your own words crossing a landscape in wooden arms.

STACK: pure HTML/CSS/JS, no build step, no frameworks, no CDNs or external requests of any kind; self-hosted fonts only; every visual is code (CSS/SVG/canvas/WebGL) — no image assets required.

QUALITY BAR: flawless at 390px, 834px and 1440px with zero horizontal overflow; tap targets >= 44px; semantic landmarks, focus-visible styles, body-text contrast >= 4.5:1; prefers-reduced-motion pauses or simplifies heavy animation; rAF loops pause when the tab is hidden; hold 60fps (cap particle counts, avoid layout thrash); rich invented content everywhere — real-sounding names, numbers and program notes, never lorem ipsum; orchestrate one beautiful staggered load moment plus scroll and hover surprises. FORBIDDEN: Inter/Roboto/Arial/system-ui, purple-gradient-on-white, and cookie-cutter hero+cards+footer layouts.

PROCESS: iterate in three documented passes — (1) build plus builder self-critique, (2) merciless external critique finding and fixing at least ten real problems, (3) art-director elevation from good to unforgettable. Screenshot at all three widths every pass and fix everything you can see.

— Original brief by Claude Fable 5 (art director), executed by the FABLE/175 pipeline.
— This room lives at https://fable-25-830.netlify.app/sites/semaphore/

This is the verbatim art-direction brief that produced the room — exposed by the exhibition itself via the “Prompt” link in the room’s footer.

Experience the full depth of this mechanized historical communication by visiting the live exhibit. Explore all 175 sites within the hub to see how digital design can reanimate the past’s infrastructure and stories. Dive into this AI-crafted environment and discover the subtle interplay between technology, atmosphere, and human attention shaping communication networks across time.

Visit the live room → · Browse all 175 rooms

Previously in Wing III

• Room 51: Casa Azulejo — A Lisbon Tile-Painter’s Workshop
• Room 52: The Royal Mews — Falconry House, Est. 1487
• Room 53: Core Facility 53 — 120,000 Years Under Pressure

FABLE / 175 is a finished exhibition of 175 fundamentally different websites, each built end-to-end by an AI. This article is part of our series walking through it room by room.

Powered by Thorsten Meyer AI