FIELD
GUIDE.

THE CONCEPT

Courier treats the browser as the scarred dispatch surface of Spoke & Signal, a fictional bike-messenger collective in East Basin. It is not a marketing page about couriers. It is the instrument they use: map, radio, paper queue, race noticeboard, equipment handbook, and collective memory. The visual spine is controlled friction. Blaze orange arrives like urgent tape, bike-lane green behaves like live signal, and cordura black absorbs everything else.

The page moves from immediate work to after-shift culture. First you choose a job. Then you read the collective’s pulse, enter the Night Orchid alleycat, study their lock taxonomy, excavate a bag, and finally overhear the radio etiquette that keeps riders found. The transitions deliberately change format: cockpit, data strip, paper ledger, technical catalog, object cutaway, then broadcast field.

THE DISPATCH BOARD

The signature interaction lives in index.html as a single inline SVG city map. Six route paths share the street grid but encode different turns and alley shortcuts. In main.js, setRoute() activates the path that matches a ticket’s data-route, measures it with getTotalLength(), and animates strokeDashoffset from the full length to zero. That makes the fastest line physically draw through the city rather than merely change color.

The courier marker is not a decorative animation. animateMarker() samples the active SVG geometry with getPointAtLength() and moves the marker along it. On desktop, pointer position takes over the path so the cursor becomes the rider. The requestAnimationFrame loop cancels when the document is hidden and disappears under reduced-motion preferences. Hover, keyboard focus, and tap all select routes. Pressing TAKE adds the tearing class, which pulls the perforated manifest from the queue before replacing it with a reversible assignment stamp.

The explicit radio switch creates a small band-passed noise buffer through the Web Audio API. radioClick() synthesizes crackle only after consent, while scheduleChatter() injects brief typographic transmissions. The bag archaeology uses real tabs with aria-selected. Pass 3 adds setBagSpill(): one control unlatches the flap, scatters 4 CSS-built objects, and exposes evidence tags that select the same tab state. Motion is removed, not meaning, when reduced motion is requested.

PALETTE & TYPE

Epilogue carries the impact voice: very heavy, tightly tracked, and cut into compressed lines. JetBrains Mono handles manifests, radio protocol, labels, measurements, and prose. Both are served from the exhibition’s own font library. The pairing separates city-scale statements from rider-scale evidence.

REPRODUCE THIS

Ask an AI agent for a complete code-only editorial site whose interface is an artifact from its fictional world. Name one primary interaction that manipulates geometry, not just opacity. Supply a strict four-color palette, two self-hosted typefaces, five or six culturally specific content chapters, and require keyboard, touch, reduced-motion, and hidden-tab behavior.