Design guide / station manual extract

Station Manual for a Working Beam

PHAROS treats a lighthouse as public infrastructure with a private soul: half official maritime signboard, half keeper's notebook. The site opens inside the weather, not in front of a hero image. The visitor meets a real service record first: light list number, watch telemetry, fog signal, forecast shorthand, and the active characteristic that the tower is obeying. The romance is deliberately accountable; every atmospheric line has an operational job.

Fixed coded scene Canvas fog, no images Live light rhythm Stamped lens order

Visual techniques

The signature beam lives in styles.css. .beam-sweep layers a radial lamp bloom with a rotating conic-gradient, while .range-rings and .bearing-scale add coded Fresnel geometry around the lamp point. main.js keeps that point honest with getLampPoint(), then updates --lamp-x, --lamp-y, --beam-angle, --beam-prism, and --beam-lens in animate(). The result is not a static glow; it is a moving optical instrument.

The fog is also code. setupFogCanvas() creates a low-resolution canvas, and drawFog() fills it with layered value noise from fbm() and valueNoise(). Beam angle and lamp position tint the mist as it drifts through the cone. The editor changes the state read by computeLightPower(), and renderRhythm() writes the cadence into the main stave and hero pulse tape. updateCardIllumination() compares each card center to the sweep and writes --beam-hit, --beam-wash, and --beam-shift, so panels brighten as the lantern crosses them. The pass-three interaction adds .order-strip, .order-flare, updateOrderTape(), and strikeOrder(): every changed characteristic stamps a lens order and throws one brief flare from the tower. Motion pauses when document.hidden is true; reduced-motion users get a static beam and simplified weather.

Palette and type

The dominant field is slate #1d232b falling into night #081018 and near-black #03070b. Fog uses #d9dee2, #aab4b9, and blue-grey alpha layers; the beam is warm white #ffe9b8. Hull red accents #b83a32 and #74252a are reserved for service stripes, warning edges, and official marks, so they cut through the grey instead of becoming decoration. Type pairs self-hosted Archivo for signage, nav plates, labels, and heavy headings with self-hosted Zilla Slab for log prose. Letter spacing stays at zero; hierarchy comes from weight, case, line-height, plate edges, and field position.

Reproduce this

Prompt an AI agent to build a no-external-asset static site for a fictional coastal lighthouse service. Require a fixed full-screen coded scene, an inline SVG tower, a JavaScript-driven conic-gradient beam, procedural canvas fog, content cards that react to the beam angle, and a tactile order tape that stamps each signal change. Ask for a light-characteristic editor that composes real patterns such as Fl(3) W 15s, Oc(2) R 12s, Iso WR 8s, and quick flash rhythms, with the lighthouse obeying the chosen pattern live. Specify self-hosted Archivo and Zilla Slab, the slate/fog/warm-white/hull-red palette, official maritime copy, mobile checks at 390/834/1440, reduced-motion behavior, no external requests, and screenshot-led critique before delivery.