Meridian 843 Return to the mile
TECHNICAL FIELD GUIDE · ROOM 127

How the salt moves.

There are no photographs, generated assets or libraries under this hood. Every visible surface is made from browser-native code.

The concept

Bonneville treats the web page as one measured mile. The visitor never leaves the course or turns a corner. Seven full-width stations travel laterally past a fixed horizon, while the browser’s familiar vertical wheel input becomes forward motion. The design borrows the severe legibility of timing slips, the enormous type painted on a record car, and the bleaching effect of noon on salt.

The fictional Meridian M-17 program gives the instrument a human pulse. Ada Rusk’s white-glove release, Len Varo’s two-stage parachute ritual and Mireya Sol’s dawn salt reading frame speed as teamwork and patience. Even at 843 km/h, the real subject is measurement: one line, one direction, one clock.

The ribbon

In main.js, resize() measures the wide .track, calculates its maximum travel and gives .scroll-shell enough vertical height to cover it. updateTarget() converts page scroll into a zero-to-one value. The animation loop eases toward that target and writes --travel-x, allowing the GPU-friendly translate3d() in styles.css to move the entire ribbon.

The mile-marker buttons call goToStop(), which reverses the midpoint-calibration exponent before mapping a station back to vertical scroll. Arrow and Page keys use the same path. At rest, the frame loop sleeps; it also cancels when the document is hidden. Under reduced motion, the sticky system opens into a conventional vertical reading order.

Salt and heat

drawWorld() paints the cyanotype sky, white crust, horizon and converging course lines on #salt-world. makeCracks() uses a seeded linear-congruential generator, so its branching salt fractures look irregular but remain stable between frames. Device-pixel ratio is capped at 1.5 for a crisp result without wasting fill rate.

Above 500 km/h, updateInterface() exposes --heat and --mirage-opacity. Eight clipped copies inside .mirage-bank shear independently while drawWorld() bends salt bands on canvas. Crossing 842 toggles .trap-active: a photo-cell ruler, one-shot scan and chronograph certificate expose the record. calibrateRecord() then lets a fine pointer pull the numeral’s chromatic slices without adding another frame loop.

Machine language

The M-17 is one inline SVG with a long compound body path, glazing, wheels, datum stripe and soft painted shadow. CSS keeps it fixed against the salt while the record cards, push-truck drawing and parachute geometry pass across it. Fine grain comes from an embedded SVG turbulence filter. No request leaves the project.

Six Caps supplies the tall aerodynamic display voice. Space Mono handles every coordinate, timing fraction and certification note. Salt white is #f5f4ed, cyanotype sky is #176f9c, burnt-orange livery is #e34e1a, and course ink is #092f42. Sharp corners and hairline rules keep the visual grammar closer to an instrument than a marketing page.

SALT
#F5F4ED
SKY
#176F9C
LIVERY
#E34E1A
INK
#092F42

Reproduce this

Ask an AI agent for a code-only horizontal scroll narrative whose vertical progress controls one meaningful physical variable. Specify a persistent world, a fixed instrument layer, section-specific compositions and a threshold where the environment changes. Demand semantic HTML, real invented content, focus states, responsive layouts and reduced-motion behavior.

Name the exact material palette and typography. Then ask the agent to test 390, 834 and 1440 pixel viewports, inspect the resulting images and revise concrete visual flaws. The crucial prompt is not “make it fast.” It is “make speed alter the typography, horizon and machine through one shared progress value.”

Constraint as signature

Say explicitly: no image files, no external URLs, no animation library. Use canvas for atmosphere, inline SVG for the hero object, CSS custom properties for shared motion state, and one paused requestAnimationFrame loop for all moving systems.