Companion folio · site 174 of 175

How the street was lit.

System plate 01Light is navigation,
memory is the wake.
09
semantic lamp buttons
28
canvas fog bodies
00
generated assets

The concept

Gaslight turns navigation into an act of care. Visitors do not browse a menu; they walk Elias Wren’s fictional Ashdown Row and leave usable light behind. Nine lamps begin dormant and answer only in route order. Every ignition opens one ledger entry, advances the pole-bearer, and extends a warm pool across the road. The last lamp changes discovery into remembrance.

The language is specific without pretending to be documentary truth. Street names, weights, ordinance clauses, shift times and working customs create a municipal microhistory. Darkness is not a threat here; it is the material a public profession gently shaped.

The Round

In index.html, .lamp-route is a real navigation landmark containing nine buttons; each aria-controls its ledger article. lightLamp() in main.js opens the matching record. updateRouteState() marks the next valid lamp, advances --route-progress, updates the live counter and changes future route semantics. refuseLamp() gives a short visual nudge if someone reaches too far east.

The street is layered CSS: clipped building roofs, receding road planes, window apertures, iron spines, glass cages and independent blue/gold wick gradients. On small screens the whole route becomes a snap-scrolling street, not a collapsed grid.

Atmosphere & flame

draw() paints 28 slow radial fog bodies onto #fogCanvas; device pixel ratio is capped at 1.5. syncFog() stops the loop when the hero leaves view or the document is hidden, and reduced-motion users receive the composed still atmosphere.

The air-collar range input writes normalized --air onto .flame-theatre. It changes mantle incandescence, oxygen particles, bloom and flame geometry while a separate cyan inner cone preserves the combustion heart. The nozzle, wire mesh, labels and test rail are all CSS. No image, video, or generated asset exists anywhere in the site.

Motion & access

The opening is one staged reveal: fog street, title, route notation, then mantle. After that, motion is earned by action—the pole-bearer advances, pools widen, oxygen rises and the memorial receives the completed street. Minnie Quill’s “Wake window seven” button fires the pea path and lights the correct pane instead of running a decorative loop. At the elegy, stageChangeover() sends cold current through eight timed nodes; they fail back to black while the ninth gas flame remains warm and untouched.

Touch targets exceed 44 pixels, keyboard focus uses the blue flame color, status changes are announced, and locked lamps retain route-state semantics. Animation is simplified under prefers-reduced-motion; every requestAnimationFrame loop also pauses while hidden.

Palette & type

IM Fell English carries titles, quotations and narrative text; its irregular antique forms keep the register human. IBM Plex Mono handles ordinance numbers, measurements and labels, giving the invented bureaucracy a precise countervoice.

Iron night
#0b1210
Fog green
#789084
Mantle gold
#e7b34d
Flame heart
#78d6e7

Iron black establishes depth; fog green carries atmosphere; ladder oak belongs only to handled tools. Gold is reserved for incandescence and consequential emphasis. Electric blue appears in tiny, high-value beats at the flame’s true heart.

Reproduce this

Prompt an AI coding agent with a setting, a profession, and one interaction that embodies the subject rather than decorating it. Require that the interaction changes both environment and readable story. Specify semantic controls, touch and keyboard parity, reduced motion, visibility-paused loops, named human records, a narrow material palette, one antique display face and one administrative mono face.

“Build a code-only historical street archive. Turn a lamplighter’s ordered route into nine interactive lamps; every ignition must unlock a named story and visibly leave warmth behind. Draw ironwork, fog, tools and a scientifically layered gas mantle in CSS/canvas. End with one permanent memorial light. No external media.”