The Midnight Meridian is a booking site for an invented winter sleeper: Bergfeld Central to Novi Primor, overnight through the Mirna Pass. The concept is luxury rail nocturne: a moonlit compartment, brass instruments, burgundy curtains, and a timetable that feels operational rather than decorative.
Generated Glass
The first viewport now uses the local still /assets/gen/meridian/window.jpg as the dominant hero glass, color-graded in .hero-media with midnight scrims and a fine rail-line overlay. The workflow was GPT Image 2 still, then a Kling 3.0 rolling-past loop through Higgsfield, stored locally as /assets/gen/meridian/rolling.mp4. The Lantern passage serves rolling-lite.mp4, a fast-start site-local rendition of that loop, in <video class="ambient-video"> with the still as poster. In main.js, syncAmbientVideo() pauses the loop when offscreen, under document.hidden, or when reduced motion is requested.
The Scroll Window
The signature remains code-generated. A 720vh .journey-track contains a sticky full-viewport cabin; vertical scroll becomes horizontal country. readScroll() converts track progress to 0–1, measureJourney() derives the SVG tile width, and applyJourney() translates each seamless SVG layer by -(world * speed) % tileWidth. The moon is fixed; mountains move at 0.12, hills 0.35, pines 0.7, snow fence 1.25, and signal posts 1.82.
Railway Machinery
flipTo() drives the fourteen-cell split-flap carriage board; changed letters settle immediately for crisp screenshots while the Web Animations API supplies the snap. The STOPS table maps scroll ranges to dining, sleeper and Lantern panels. drawSnow() paints up to 150 canvas flakes and couples wind to train speed, while updateInstruments() changes kilometre, altitude and temperature gauges only when values actually differ. The new bellPull interaction toggles a brass pulse over the Lantern glass and updates the live status text.
Ticket & Texture
The berth card is a cream-and-oxblood ticket. Its perforation is a CSS mask-image of radial-gradient punches, the stub uses writing-mode: vertical-rl, and “Reserve Passage” triggers @keyframes stampDown. The remaining visuals — viaduct, carriage consist, route ribbon, snow, instruments and ticket paper — are CSS, SVG or canvas, not images.
Palette & Type
Type is Forum for engraved display headings and Zilla Slab for body, labels and timetable. Numerals use font-variant-numeric: tabular-nums; the global grain in body::after, custom selection, brass scrollbars and glass reflections keep the dark field from going flat.
Reproduce this
Prompt an AI agent to build a dark luxury sleeper-train booking page where a generated moonlit window anchors the hero, then a sticky code-built compartment turns vertical scroll into horizontal parallax. Ask for operational fiction: times, kilometres, altitudes, berth numbers, prices and working notes. Require one tactile railway interaction, a brass/burgundy/moonlight palette, local-only assets, and a guide explaining the exact functions and files.