The mountain
keeps the balance.

01 / Concept

A webpage with a return journey

Standseilbahn Gisela treats scrolling as travel, not merely reading. The visitor descends through the document while a translucent return cabin climbs against them. That opposition is the story: funiculars do not conquer gravity so much as negotiate with it. At the centre, the two cabins meet at an Abt passing loop and appear to pause. Their tiny passengers wave across the gap. The encounter makes the upward cabin feel like the visitor’s future—or memory—moving in the other direction.

The fictional line opened in 1897 above Giselau, climbs 612 metres, and reaches a 73 percent maximum gradient. Its invented history gives every chapter a material purpose: varnished walnut at the station, instrument brass in the water-balance room, ledger paper for opening day, blue-black stone inside the avalanche gallery, then meadow light at Sonnenwacht. The page is an exhibition object, not a timetable.

02 / The mechanism

How the counterweight works

In main.js, requestJourney() records scroll position and schedules one animation frame. getJourneyState() measures the actual Abt-loop section rather than guessing from the document midpoint. It maps the approach to 43 percent of the cable journey, compresses motion through the sticky crossing, then releases both cars. renderJourney() measures the cars’ true vertical gap, applies opposed translate3d transforms, separates them into two rails, and makes their window light bloom at the meeting.

Both cabins are CSS constructions: walnut gradients form the bodies, brass borders form the fittings, and miniature windows hold silhouetted passengers. Paired SVG Bézier paths draw the Abt geometry. Gauge needles and the glass ballast column read the same journey value. setStory() changes the return-cabin register as Mara, Otto, and finally the visitor pass by. The waveAcross() interaction turns the midpoint into a conversation: a keyboard-operable brass signal wakes both cabins, animates a reciprocal wave, blooms the window light, and writes a time-stamped receipt into the register.

Atmosphere comes from layered gradients, SVG turbulence grain, clipped diagonal planes, and the mathematically correct 36.13deg grade rule. The default document is fully visible; JavaScript adds the motion-ready state before IntersectionObserver orchestrates reveals. Reduced motion removes continuous effects and presents a static journey. The event-driven renderer simply declines to draw while the document is hidden.

03 / Materials & type

A cabinet of tokens

Marcellus carries station lettering, chapter titles and engineering labels. Its carved capitals suggest civic confidence without costume drama. Crimson Pro handles narrative text, ledgers and italic marginalia. Both are self-hosted from the exhibition library. Display type is tightly tracked and oversized; technical labels are small, uppercase and widely spaced. Cream is the reading field, while oxide red appears only at the emotional crossing.