How to bank
a web page.

The concept

L’Hivernale imagines a six-day winter race in Siena’s fictional Palais du Rail. The visual system treats the page as a lap: black straights are moments of measurement; amber turns bank, overlap and test the reader’s balance. Varnished pine, hot lamps, red wool, brass-band warmth and a thin rainbow rail create a venue with its own weather.

There are no generated assets or stock photographs. That constraint is proudly part of the room. Every track board, cone of smoke, pacing machine, route diagram and rider is CSS, inline SVG or Canvas 2D. The invented rituals—curtained cabins, the 2 a.m. Owl Prime and Madame Orsini’s fourteen-piece band—make the spectacle feel inhabited rather than merely styled.

Techniques on the boards

• The orbit. draw(), pointOnOval() and drawRider() in main.js build concentric lanes and send two tiny riders around them. callTheSling() lets a visitor command the exchange: the pair closes, joins arms and launches through code-drawn speed trails while CSS rings flash across the timber.
• The banking. updateBanking() maps the amber section’s viewport progress to --bank-tilt and --bank-y. The frame leans harder at mid-corner and relaxes on exit. Inside it, .bank-paragraph remains an unapologetic 43-degree reading test.
• The draft. Pointer coordinates and arrow keys feed positionRider(). Distance behind the pacer, lateral alignment and overrun combine into a shelter coefficient. The interface updates watts, a 0–35 percent gauge and the gold wake; at 32 percent it stamps “locked in.”
• The line lesson. Inline SVG compares the pursuit line’s economy with the sprinter’s higher approach. Animated dash offsets suggest velocity, while board texture comes from a local SVG pattern.
• Atmosphere. Layered radial gradients make hot lamps and smoke. Repeating gradients cut individual pine laths. CSS silhouettes, grain, brass bars and restrained parallax supply depth without a single external request.

Palette & type

Dela Gothic One carries the shouts, turn markers and lap numbers; its wide shapes resemble arena lettering applied with a stencil. Jost handles lore and telemetry with calmer geometry. Display lines run tight and compressed, while narrative copy gets open leading and warmer off-white rather than pure white.

Reproduce this

Ask an AI agent for a sports world whose layout physically embodies its venue. Specify one canvas simulation and one pointer-plus-keyboard interaction with visible numeric feedback. Require local fonts, a dominant material palette, invented editorial lore, reduced-motion behavior and code-only imagery. Name phone, tablet and desktop widths, then insist that the agent inspect actual screenshots before calling the work complete.