Building
Thirtyseven.

The concept

Thirtyseven treats a web visit as a lap of a fictional 37.73-mile island time-trial. The visual language combines old timing cards, weathered course programmes and instrument-panel precision. Speed is exhilarating, but never clean or consequence-free: the memorial bench deliberately interrupts the velocity register and gives the course its conscience. The persistent clock turns browsing into personal performance without ranking anyone. A press-and-hold rider tuck makes the opening onboard participatory; the best speed banked there returns as a private seal on the visitor’s finish ticket.

How the onboard works

The hero landscape is one inline SVG inside index.html. Mountains, road, cottages, church, phone box, stone walls and hedges are separated into depth groups. CSS keyframes such as landmark, flash-left and roadside-pulse move those groups at different rates. Directional feGaussianBlur filters stretch only the near layers, preserving distant landmarks. In main.js, the frame() loop adds restrained pointer lean and road vibration with compositor transforms. It also eases the --tuck value, tightens the field of view and records top speed while the hold control is pressed by pointer or keyboard. The loop cancels whenever the document is hidden.

The same frame function formats elapsed time through formatTime(). An IntersectionObserver records the value when the finish section is reached. A second observer adds memory-pace while Keeper’s Bench is visible, changing the shared --speed token so the roadside motion eases to walking pace. Reduced-motion mode keeps the tuck’s numerical result while removing the camera compression.

Weather, map, and road lore

The mountain gamble is a genuine control, not a painted dial. The range input calls updateWeather(), which adjusts a --storm custom property. That one value dims the sun, deepens the sky, increases rain, and rewrites temperature, visibility, wind and road-state readouts. The course map is another inline SVG: a rough island silhouette supports a dotted orange route, named braking points and four believable fictional sector times. No imagery or animation is fetched; every visual in this wing is proudly made from code.

Palette and type

Instrument Serif supplies the expressive programme-title scale: elegant enough for heritage, loose enough to feel windblown. Space Mono handles every braking marker, time and technical label. Both are self-hosted. The palette stays narrow so orange behaves like safety paint rather than decoration.

Reproduce this

Prompt an AI coding agent to build a code-only, single-page editorial journey around one measurable action. Specify a dominant historical register, one urgent safety colour, a persistent instrument that changes throughout the visit, and an SVG hero split into at least four parallax depths. Ask for one interactive environmental system whose control changes both visuals and data. Require a quiet chapter that alters the motion language, then make the ending transform the visitor’s elapsed time into a designed keepsake. Insist on reduced-motion fallbacks, hidden-tab animation pausing, responsive screenshot review, and invented subject knowledge deep enough to make the world feel researched.