Wagon-Lit Field guide · design compartment
Board SELENEDesign & engineering record · site 158
WAGON-LIT makes the browser berth 26 aboard the fictional night express SELENE. The interface is not decorated with railway imagery; it is the act of looking through glass. Linen notices, a dining folio and border impressions pass above one persistent, code-built landscape. The result is a reading experience with geography: Wien begins in station blue, the Karawanks erase the exterior, moonlight keeps pace beside water, and Venezia arrives as a change in the color of the glass.
System drawing · one journey variable
updateJourney() in main.js normalizes the scroll position, publishes --progress, computes the dawn mix and updates the tiny berth-height location instrument. Nearby layers multiply that value more aggressively than distant ones. Scroll work is scheduled through one requestAnimationFrame; layout is never measured per layer.
scrollY / maxNormalize distance--progressShare one control valuetranslateX()Move depth layersdata-sceneChange the weather of glassThe fixed .world in index.html holds two inline SVG ranges, a CSS moon, telegraph wire, signals, a station platform, lake lines and near-field trees. The far range drifts; foreground silhouettes sweep continuously with transform-only keyframes. Brief speed lines respond to --velocity, so a quick scroll feels like a burst of track speed. Every exterior visual is code—no generated assets and no image requests.
A scene IntersectionObserver watches every data-scene section. The tunnel raises .glass-reflection: lamp, berth edge, reader and the current heading reversed in black glass. The Mist Glass control calls paintMist() to draw condensation on a canvas; pointer or touch movement runs wipeMist(), erasing a real path to a passenger’s hidden lagoon note. Platform, lake and dawn states then change the same glass.
Reading surfaces borrow physical rules from the compartment. The hero is a punched sleeping-car ticket with serial stub; body copy sits on fibrous linen; the menu carries an inset printer’s rule. The anatomy illustration is composed from brass gradients, perspective bedding and tartan repeats. Keyboard- and touch-operable hotspots reveal its ladder, blanket and berth. Border stamps use passportStrike, a single overshooting impact paired with a restrained carriage tremor.
Only transforms, opacity and filters animate. visibilitychange applies .page-hidden, pausing ambient CSS movement while the tab is away. Under prefers-reduced-motion, parallax takes a composed still position, stamps arrive without impact, speed streaks disappear, reveals become immediate and smooth scrolling is removed. The timetable retains 44-pixel controls on phones, active stops expose aria-current, and Escape closes the mobile route drawer.
Lacquer · metal · distance · reading
Reproduction order · berth 26
Prompt an AI frontend agent to treat the viewport as a persistent physical object, then name the journey and the environmental transitions it must survive. Ask for a fixed multi-layer SVG/CSS landscape controlled by one normalized scroll variable; scene-aware tunnel, platform, water and dawn states; artifact-shaped content instead of generic cards; and controls tied to the fiction. Specify Abril Fatface for poster drama, Manrope for quiet reading, one dominant lacquer color and one metal accent. Require responsive captures at phone, tablet and desktop widths, keyboard access, clean network auditing and reduced-motion behavior. Most importantly, insist that every visual be code and that the window illusion remain unbroken from first departure to final arrival.