Get business pricing on tech for your team
- Business-only prices and quantity discounts
- Tax-exempt purchasing
- Multiple users, one account, clear invoices
A train designed around the space beneath it
KIRIN EXPRESS is an AI-built exhibition piece, not a real rail operator or a product from an actual company. Its premise is a fictional maglev train moving at 603 km/h above its guideway. The room’s signature move is to treat the ten-centimetre gap beneath the train as the organising principle for the whole page: panels appear to hover, shadows stay cool and restrained, and a luminous seam runs vertically through the composition like a visible magnetic field.
That choice turns a technical detail into both visual identity and navigation logic. Instead of leaning on familiar railway imagery, the experience suggests speed through changing focus: landscapes soften between stops, then resolve as a station reaches the centre of the screen. No photographs or video are used. Vehicle forms, scenery, instruments, and motion are drawn in the browser, making the absence of image assets part of the exhibition’s story.
browser-based interactive display kits
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
What makes the room move
Porcelain, indigo, and a little sakura
The palette pairs porcelain white and cool grey with deep indigo, reserving a soft sakura pink for moments of warmth. That contrast gives the interface a clean, engineered character without making it feel sterile. Shadows are tinted indigo rather than black, helping the floating surfaces feel suspended instead of simply raised. Zen Kaku Gothic New handles the main text and headings; IBM Plex Mono marks out measurements, times, and controls, where precision matters.
Scroll becomes velocity
The central interaction connects the visitor’s scroll position to the fictional journey. In the page’s JavaScript, updateJourney() checks how close each station is to the viewport’s vertical centre. It uses that distance to adjust speed and blur values, while marking the nearest station as sharp. The result is a sequence that feels less like a stack of conventional sections and more like travel through a changing landscape.
A canvas adds motion traces behind the content. Its drawSpeed() routine paints up to 72 horizontal lines, varying their length and pace in response to scroll movement. The animation is limited to the part of the page where it is relevant, and it pauses when the browser tab is hidden. Visitors who prefer reduced motion get a composed still treatment instead.
Controls with a physical model
The departure console stages a twenty-second sequence, from platform preparation through levitation and onward acceleration. A single progress value drives both the circular instrument and the miniature train, so they read as parts of one control system. Elsewhere, a CSS-built guideway cross-section lets visitors switch between magnetic attraction and repulsion; the carriage, field arcs, and force display respond together. A separate field-test control sends a bright pulse along the seam, making the room’s underlying physical metaphor interactive.
A dusk slider changes the view beyond the train windows, adjusting the light, sun position, mountain softness, and city illumination while updating the displayed time. These are small controls, but they give the fictional environment a sense of progression rather than leaving it as a static concept board.
digital motion canvas for web projects
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
How the build gets its finish
The room follows a three-pass pipeline: build the experience around one clear physical rule, critique it mercilessly across layouts and interactions, then certify the result through an art-director pass. The accompanying AI-written design guide makes the implementation legible, describing the visual system, interaction logic, motion safeguards, and choices behind the asset-free approach.
The full build notes live in the room’s design guide.
Want this? Paste this into your AI coding agent
Build a single-page showcase website from this art-direction brief. Work like an elite creative frontend engineer; commit totally to the direction.
BRIEF (room 129 of 175, “maglev”):
MAGLEV — the KIRIN EXPRESS, a fictional 603 km/h intercity line. Aesthetic: porcelain-clean Japanese industrial design; the floating seam. Palette: porcelain white, cool grey, sakura accent #f5a3b7, deep indigo night running. Fonts: zen-kaku-gothic-new (display), ibm-plex-mono (timetable). SIGNATURE: THE GAP — the 10cm levitation gap is the design system: every element floats above its own soft shadow, never touching (a persistent glowing seam runs the page); station-to-station scroll where landscape blurs into speed-lines between stops and snaps pin-sharp at each station (named, invented). Guideway cross-section with superconducting-magnet interactive (flip polarity, feel the push), the 20-second departure choreography, seat-window vignettes at dusk. Unforgettable: a page that never touches the ground.STACK: pure HTML/CSS/JS, no build step, no frameworks, no CDNs or external requests of any kind; self-hosted fonts only; every visual is code (CSS/SVG/canvas/WebGL) — no image assets required.
QUALITY BAR: flawless at 390px, 834px and 1440px with zero horizontal overflow; tap targets >= 44px; semantic landmarks, focus-visible styles, body-text contrast >= 4.5:1; prefers-reduced-motion pauses or simplifies heavy animation; rAF loops pause when the tab is hidden; hold 60fps (cap particle counts, avoid layout thrash); rich invented content everywhere — real-sounding names, numbers and program notes, never lorem ipsum; orchestrate one beautiful staggered load moment plus scroll and hover surprises. FORBIDDEN: Inter/Roboto/Arial/system-ui, purple-gradient-on-white, and cookie-cutter hero+cards+footer layouts.
PROCESS: iterate in three documented passes — (1) build plus builder self-critique, (2) merciless external critique finding and fixing at least ten real problems, (3) art-director elevation from good to unforgettable. Screenshot at all three widths every pass and fix everything you can see.
— Original brief by Claude Fable 5 (art director), executed by the FABLE/175 pipeline.
— This room lives at https://fable-25-830.netlify.app/sites/maglev/
This is the verbatim art-direction brief that produced the room — exposed by the exhibition itself via the “Prompt” link in the room’s footer.
programmable physical control panels
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Visit the exhibition
Explore the live KIRIN EXPRESS room at fable-25-830.netlify.app/sites/maglev/, then browse all 175 rooms from the exhibition hub. The project is a useful example of AI-built web design when a strong concept, native browser drawing, and thoughtful motion rules do more than stock imagery could.
Visit the live room → · Browse all 175 rooms
Previously in Wing VI
- Room 127: Meridian 843 | The Measured Mile
- Room 126: Slipstream — Vela Corse Works Team
- Room 128: L’Hivernale — Six Nights on the Siena Oval
FABLE / 175 is a finished exhibition of 175 fundamentally different websites, each built end-to-end by an AI. This article is part of our series walking through it room by room.
magnetic field simulation models
As an affiliate, we earn on qualifying purchases.
As an affiliate, we earn on qualifying purchases.
Fall Picks
fall essentials
As an affiliate, we earn on qualifying purchases.
