Get furniture and decor delivered free with Prime
- Fast, free delivery on millions of items
- Prime Video, Amazon Music and more included
- Member-only deals all year
A railway you travel by scrolling
Standseilbahn Gisela is an AI-built exhibition piece: a fictional mountain railway presented as a carefully engineered webpage. It is not a real company, historic service, or working timetable. Its premise is an imagined line climbing above Giselau, where the mountain’s pull becomes the central design idea.
The signature move turns scrolling into a return journey. As visitors descend the page, one cabin moves down while a translucent counterpart climbs. At the sticky midpoint, they meet at a passing loop and seem to hold still. Small passengers wave across the gap. Instead of treating the page as a stack of rooms to browse, the experience gives it a spatial rhythm: approach, encounter, release.
That makes the room feel less like a transport brochure and more like a miniature exhibition about balance. The mountain is not scenery behind the interface; gravity is the organizing principle of the interface itself.
As an affiliate, we earn on qualifying purchases.
Built from materials, motion, and a measured crossing
The visual language borrows from a fictional station interior. Varnished walnut shapes the cabins, instrument brass picks out their fittings, and meadow green gives the landscape a grounded accent. Cream provides a calm reading surface, while oxide red is reserved for the emotional pause when the cars meet. Cable steel completes the restrained palette.
Typography reinforces the distinction between public display and working record. Marcellus gives station names and chapter headings a carved, civic quality. Crimson Pro carries the longer narrative, ledger-like details, and italic notes. Together, they suggest an archive without dressing the page up as an authentic historical document.
One journey value drives the scene
The cabin bodies are drawn in CSS, with gradients and borders standing in for wood and brass. SVG paths trace the passing-loop geometry; layered gradients, clipped shapes, and subtle grain create atmosphere without imported imagery. The guide explains that the railway’s cabins, instruments, and visual texture are assembled from HTML, CSS, SVG, and a small amount of JavaScript—no generated pictures or image assets.
Under the surface, a single journey value connects the page’s moving parts. JavaScript reads the visitor’s scroll position and measures the actual crossing section. That value controls the cabins’ opposed movement, their separation into two rails, the window glow at the meeting, and the related gauges. The crossing is deliberately compressed into a pause, then the cars continue on their separate paths. A keyboard-operable signal adds a small reciprocal gesture: one cabin waves, the other answers, and the register records the encounter.
The construction also accounts for different ways of experiencing motion. The page begins in a readable state before animation is added, reduced-motion settings replace continuous movement with a static journey, and rendering pauses when the document is hidden. Those details matter in an exhibition piece: its atmosphere should not come at the cost of access or control.
From prompt to exhibition object
The AI-built site follows a three-pass pipeline: build the code-only railway and its scroll-driven mechanics; apply a merciless critique to test whether the crossing, materials, and instruments feel coherent rather than ornamental; then complete an art-director certification pass for hierarchy, responsive presentation, and accessibility. The accompanying field guide makes the design logic inspectable, documenting the mechanism, material palette, and choices someone would need to reproduce the experience.
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 141 of 175, “funicular”):
FUNICULAR — STANDSEILBAHN GISELA, est. 1897, 73% gradient (fictional Alpine line). Aesthetic: varnished walnut cabin, brass fittings, meadow light; Victorian engineering pride. Palette: walnut, brass, meadow green, cable-steel grey. Fonts: marcellus (display), crimson-pro (body). SIGNATURE: COUNTERWEIGHT — the site is two cabins on one cable: as you scroll down, a ghost content-cabin (the return trip: different micro-stories in its windows) rises past you and you CROSS at the Abt passing loop mid-page — a held, beautiful moment where both pause and the passengers wave. Each section tilts to its true gradient (the steepest reading at 73%). Brass gauge cluster (cable tension, water ballast), the water-balance era explained, the 1897 opening-day ledger in copperplate, winter avalanche-shed section. Unforgettable: meeting yourself coming back up.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/funicular/
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.
Take the return journey
Visit the live Standseilbahn Gisela room and scroll through its fictional route to see the cabins meet at the loop. Then browse all 175 rooms at the hub for more AI-built exhibition pieces, each exploring a different way design and code can shape a space.
Visit the live room → · Browse all 175 rooms
Previously in Wing VI
- Room 138: APEXWERK — The Grip Curriculum
- Room 127: Meridian 843 | The Measured Mile
- Room 136: Courier — Spoke & Signal
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.
Halloween Picks
halloween
As an affiliate, we earn on qualifying purchases.
