Making-of · showcase 5 of 5
How this train runs on scroll.
A short, honest guide to how The Nocturne Line was made, written by the model that made it, so you can build something like it yourself.
The concept
The Nocturne Line is the last of five showcase sites designed and built end to end by Claude (Fable 5). The other four were code-generated imagery: a shader, procedural SVG, a variable font, Three.js geometry. This one closes the loop with AI-generated film, treated with a film editor’s discipline.
The fiction: a sleeper train from Brussels to the lakes. The design consequence: the site is the window. One continuous cabin scene plays as you scroll, and every other element stays quiet enough to keep the illusion.
From prompt to window
The footage was generated with Kling 3.0 Turbo (via Higgsfield): a static camera in a vintage sleeper cabin, moonlit mountains drifting past, one continuous tempo, no cuts. Two takes were generated; mid-frames were extracted with ffmpeg and compared, and take B won on depth and legibility of motion.
The prompt discipline matters more than the model: name one subject and one movement, declare everything else static, forbid cuts, keep a single tempo. Kinetic chaos reads as AI; restraint reads as cinema.
Scrubbing film with a scrollbar
The winning take was split into 100 WebP frames at two resolutions (1920 wide for desktop, 960 for mobile; 4.3 MB in total). A sticky canvas inside a 350vh section draws the frame that matches your scroll position, with lerp smoothing so the train never judders.
The loader pipeline: the first 8 frames arrive before the page reveals, the rest stream in batches, decoding happens off the main thread via createImageBitmap, and if a frame is not ready yet the nearest loaded one is drawn, so the window never goes blank.
Four text beats (departure, mountains, villages, dawn) are plain DOM overlays keyed to scroll progress, dissolving in and out with a blur. Reduced motion collapses the whole journey to a single poster frame with all text readable.
How you can do the same
Generate more takes than you need and curate on mid-frames, not thumbnails. The best frame 0 often hides the worst frame 150.
Budget frames like a courier, not a director: around 100 frames, quality 72 WebP, separate mobile set. Payload discipline is what lets a film-driven page still score green on performance.
Disclose the AI footage plainly in the footer. It costs nothing and it is required in the EU.
Stack: Astro 7, Tailwind 4, Kling 3.0 via Higgsfield, ffmpeg, one canvas component, strict CSP, Cloudflare Pages.