A memory with machinery inside it
The Meridian is imagined as a 1908 fairground attraction discovered intact at the edge of evening. The page avoids a literal museum treatment. Instead, it behaves like a ride: the opening is immersive and kinetic, the middle opens the stable ledger and mechanism, and the final ticket window makes departure feel like another invitation. Dusk violet is the dominant field; carousel cream creates paper and painted-wood intervals, while carmine and gilt arrive in sharp theatrical beats.
Abril Fatface supplies the broad, handbill-like display voice. Zilla Slab keeps paragraphs warm and period-adjacent without becoming costume typography. Large titles are packed tightly, while labels use small uppercase forms with generous tracking—the typographic contrast used on old tickets and machinery plates.
The ring, the rise, the return
CSS 3D carousel
In main.js, eight entries in the horses array generate eight .horse-slot elements. Each slot rotates by forty-five degrees and moves outward with translateZ(var(--radius)). The parent #carouselRing receives Y rotation from animate(). Pointer events preserve momentum, arrow keys step between mounts, and spinToHorse() takes the shortest route to a selected name.
Painted mounts and poles
horseSvg() draws each horse as inline SVG: carved contours, distinct leg angles, mane, bridle, saddle, rosette, eye, tail, and optional dapples. The nested .horse-rise wrapper follows a four-beat curve with a lingering crest. Phases stagger by 0.6 seconds, sending the crucial rise-and-fall around the platform as a travelling wave.
Generated night plate
The full-bleed stable photograph began as a GPT Image 2 still in Higgsfield; the same local-first workflow carries stills into Kling 3.0 ambient loops when motion footage is supplied. Here, horses.jpg stays deliberately photographic: .lantern-color duplicates it beneath a movable radial mask, while the brass house-lamp control reveals the complete exposure. All horses, gears, canopy, moths, bulbs, and diagrams elsewhere remain code-generated.
Atmosphere and sound
makeLights() plots bulbs along sagging SVG cables with varied pulse and halo values. The brass lever plays the locally stored Higgsfield waltz.mp3; startSynthFallback() supplies the oscillator arrangement only if decoding fails. syncAnimation() cancels animation frames, pauses the recording, and suspends Web Audio while hidden. Reduced-motion visitors receive a still ring and near-instant reveals.
Prompt for a world, not a widget
“Build a one-page digital attraction around a specific historic entertainment at a precise hour. Choose one dominant environmental color, one paper tone, and two painted accents. Make the hero’s central object genuinely interactive in CSS 3D, with eight data-driven inline SVG characters that move in offset rhythm and reveal individual stories. Support drag momentum, keyboard focus, reduced motion, and a user-initiated Web Audio detail. Carry the physical materials—paint, brass, bulbs, wood grain, tickets—through five editorial sections and a matching process guide.”
The important instruction is specificity. Ask for named objects, measured machinery, program times, weather, inscriptions, and provenance. Atmosphere becomes convincing when interaction and invented history reinforce each other.