The floating seam
KIRIN Express begins with one physical fact: the train runs ten centimetres above its guideway. That gap became the entire layout system. White surfaces hover on broad, cool shadows. Sections never share edges. A fixed luminous seam runs down the viewport, passing behind every panel like an uninterrupted magnetic field. Even the navigation is lifted from the page.
The register is porcelain-clean Japanese industrial design seen at evening departure. It avoids nostalgic rail imagery. The line is fictional, engineered, and precise, but the experience remains tender: sakura light across cool metal, softened mountain silhouettes, and a cabin that warms as daylight fades.
Velocity becomes focus
The signature journey is built in main.js by updateJourney(). It measures every .station against the vertical centre of the viewport, converts distance into the custom properties --speed and --land-blur, then assigns .is-sharp to the nearest stop. Landscapes stretch between stations and resolve when a station reaches the viewing line.
Behind them, drawSpeed() paints a capped field of 72 horizontal traces on #speed-canvas. Scroll delta changes their length and pace without touching layout. An Intersection Observer runs the canvas only near the journey; the visibility handler cancels its animation frame when the tab is hidden. Reduced-motion mode replaces it with a composed still state.
Field, departure, dusk
The departure console uses departureTick() to stage platform sealing, pressure, field alignment, levitation, and linear drive over a genuine twenty seconds. The circular readout and miniature train share one progress value, so the motion reads as a single instrument.
The guideway cross-section is CSS geometry rather than an image. Pressing the polarity switch changes the model between .repel and .attract, moving the carriage, field arcs, and force meter together. triggerFieldPulse() also sends a luminous pressure wave down the measured seam and lifts the visible machine surfaces; the hero’s field-test control makes that physical rule playable before departure. The dusk range calls updateDusk(), shifting the window grade, sun height, mountain blur, and illuminated city frequency while producing a believable clock time.
Porcelain and indigo
Zen Kaku Gothic New carries all display and prose with light, tightly tracked headings and disciplined body rhythm. IBM Plex Mono is reserved for departure times, measurements, coordinates, and controls. Shadows use indigo at low opacity, never black, which makes each object feel magnetically suspended instead of conventionally elevated.
Prompt the physical rule
Ask an AI coding agent to design from one physical phenomenon, not from a list of visual trends. Specify the exact constraint: “Build a self-contained transit story where every surface floats across a ten-centimetre luminous seam. Draw all vehicles, landscapes, and instruments in CSS, SVG, or canvas. Turn station-centred scrolling into sharp focus and between-station travel into velocity blur. Include a real timed departure, an interactive magnetic polarity cross-section, responsive mobile choreography, reduced-motion fallbacks, and a technical guide naming the implementation functions.” Then require screenshots at phone, tablet, and desktop widths and a written critique before completion.
No image or video asset exists in this room. That constraint is intentional and proudly visible: motion, light, depth, vehicle form, and the four landscapes are all native browser drawing.