Guide · how this site was built

A page that runs on a timetable

Everything below is the working drawing for The Meridian Sleeper — a single-night rail journey told as a single scroll, built in plain HTML, CSS and JavaScript with no build step.

01Concept & art direction

One line, one night: Vienna 21:04 to Klarsee 07:30. The page is the journey — every section is a timed station (dinner at 21:40, turndown at 23:00, the border at 02:00, first light at 05:47), a timetable spine rides the left edge with a live “now” marker, and the sky colour of the whole page darkens past midnight and warms toward arrival as you scroll. The hero is a cinematic night-window video framed in drawn brass and burgundy curtains.

02Palette

Five colours, all borrowed from the carriage: the night outside, the upholstery, the fittings, the moon, the reading lamp. No colour appears that you couldn't find on the train.

03Type pairing

04Techniques — how the signature works

The scroll-driven night. Each section declares its own time and sky colour. On scroll, the script finds the two surrounding “stations,” interpolates a clock (21:04→07:30) and a blended sky, and writes both to the page — the spine marker, the mobile chip, and the background all ride the same number:

<section id="border" data-time="02:00" data-sky="#060b18">

// interpolate between surrounding stations a → b
var nowMin = a.min + (b.min - a.min) * t;
html.style.setProperty("--sky", mix(a.sky, b.sky, t));
spineNow.style.top = ((nowMin - DEP) / (ARR - DEP) * 100) + "%";

The night-window video. The hero footage (video: Higgsfield Seedance 2.0, a silent 6-second loop) sits inside a drawn brass frame with CSS-gradient curtains, and is graded into the palette with a multiply overlay so it belongs to the page rather than sitting on it:

.window-glass::after {
  background:
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(6,13,26,.5)),
    linear-gradient(to bottom, rgba(12,24,48,.18), rgba(94,31,44,.1));
  mix-blend-mode: multiply;
}

Under prefers-reduced-motion the script strips autoplay and pauses the video, leaving the poster frame — a still from the same loop.

The fold-down beds. The sleeping car is one inline SVG in side elevation, so a stowed berth is what it really is: a slim panel flat against the back wall, hanging from its brass rail. Hover, focus or selection unfolds it downward into a made bed — a scaleY from the panel's top edge, with the linens fading in a beat later:

.car-class .bed {
  transform-box: fill-box;
  transform-origin: center top;
  transform: scaleY(0.24);          /* stowed: wall panel */
}
.car-class:hover .bed,
.car-class:focus-visible .bed,
.car-class.selected .bed { transform: scaleY(1); }
.car-class:hover .soft { opacity: 1; transition-delay: .18s; }

Passing lights. Night sections carry a slow background-position keyframe on a screen-blended diagonal gradient — a station lamp sweeping the carriage every nine seconds. It is disabled entirely under reduced motion.

05The three iteration passes

1. Correctness & composition. The first screenshots caught two real bugs: the stowed berths' rotation geometry swung them through the carriage roof (rebuilt as the wall-panel fold above), and the hero video's range requests aborted on the static server (now fetched whole and fed to the element as a data URL). Also: a reveal fallback so no section can stay hidden, the Grand Suite label untangled from its window, and the mobile masthead stopped wrapping.
2. Elevate. The carriage's timetable type was unreadable at 390px, so the SVG labels get a larger size while the drawing shrinks; the curtains now draw back when you rest on the window (a peek out into the night); the arrival sky was warmed so 07:30 visibly breaks from 02:00's black; and this guide was corrected to document the real fold mechanism.
3. Taste. Chanel rule: the dawn window lost its brass plaque — one plaque per page is enough. Final checks at 390px (the spine folds into the bottom journey chip) and under reduced motion, where the video holds its poster, the passing lights stay off, and the page reads as a quiet, complete poster.

06Do this yourself — the recipe

1. Pick a subject with a real chronology (a night, a season, a recipe) and make the scroll be that chronology — every section gets a true timestamp.
2. Steal your palette from the subject's physical world — five colours you could point to in a photograph of it — and refuse all others.
3. Choose one display face with a period argument (why this era?) and one tabular-numeral face for the information layer.
4. Ask Claude for one signature mechanic, not ten: here, “the night passes as you scroll” — a scroll-mapped clock driving colour, a progress spine, and copy.
5. Generate or source two or three photographs with full photographic direction (lens, film stock, light) and grade them into the palette with CSS overlays.
6. Draw the interactive diagram as inline SVG so every part can be styled and animated; hinge animations are just transform-origin + rotate.
7. Screenshot, critique, fix — three times, at 1440 and 390. Read the screenshots like an art director, not a developer.
8. Finish with the Chanel rule: remove one thing you were proud of.

← Back aboard

Stills: gpt-image-2 · Video: Higgsfield Seedance 2.0 · Type: Jost + Spline Sans Mono via Google Fonts