How it was built

The source film, Higgsfield and Kling

The hero is a real AI film. Three 10-second draft takes were generated with Kling 3.0 Turbo through the Higgsfield MCP at 720p, 16:9, from one carefully written prompt. The prompt follows three ground rules for scrub sources: one tempo only (slow super dolly-in, never mixing slow and sudden), a named subject and named movement, and a dark cinematic grade.

The takes were compared on their mid and final frames. Take 1 won because it ends on a single, bright, centred magenta bloom. Because scroll drives playback here, a one-way descent that blooms at the end reads better than a seamless loop. The winner was then upscaled to 2K with the ByteDance aigc preset before extraction, so the frames are crisp rather than stretched.

Video to WebP frames

The upscaled clip is sliced into 140 evenly spaced WebP frames at two resolutions: 1920x1080 for desktop and 960x540 for mobile, using the extract_frames.py helper (ffmpeg with libwebp, lanczos scaling, quality 88). A manifest.json records the actual counts.

The dark water compresses to almost nothing: the desktop set is 2.0 MB and the mobile set 0.75 MB in total, both far under the 10 MB and 5 MB budgets. That headroom is what let the frame count and quality go up for a smoother scrub.

The canvas scrub and dwell

A single sticky canvas is pinned inside a tall (450vh) section. As you scroll, the frame index follows scroll progress with LERP smoothing, so the descent feels weighted rather than mechanical, an almost-stop dwell on the way down. Frames are decoded off the main thread with createImageBitmap, and if the exact frame is not ready yet the nearest decoded frame is drawn, so the canvas never flashes blank.

The narrated lines ride the same scroll progress: four story beats crossfade in contiguous bands, with the final beat holding from the moment the bloom begins. Mobile gets its own frameset, chosen automatically at 768px.

Progressive loading, protecting the LCP

The first eight critical frames load before the hero is revealed, then the remainder streams in parallel chunks. A static poster (the first frame) sits behind the canvas so there is something to see immediately, and it doubles as the no-JS fallback. The loader is hidden entirely when scripting is off, so no-JS visitors get the poster and full content rather than a spinner that never stops.

CSP-clean, no compromises

The whole site ships under a strict hash-based Content Security Policy: default-src self, img-src self and data, font-src self, and no unsafe-inline. That means no inline style attributes and no inline event handlers anywhere. The scrub engine, the dwell beats and the count-up numbers all live in bundled scripts and are configured through data attributes and scoped stylesheets. No external scripts, no CDN, no third-party fonts.

Reduced motion and accessibility

prefers-reduced-motion is a first-class path, not an afterthought. With reduced motion the tall scroll region collapses to one viewport, only the first frame is drawn, the particle fields fall back to a few static motes, and the count-up numbers show their final value. Every text pairing was measured against WCAG relative luminance before the palette was locked, and all of them clear AA as text on both the abyss and the mid-water background.

Type and provenance

Two self-hosted variable fonts, served from the origin for GDPR safety: Fraunces driven light and colossal for the display lines, and Hanken Grotesk for body and the tabular telemetry numbers. No Inter, no system-sans display.

Every generative prompt and setting is published verbatim on the prompts page and mirrored as text files in the repository. No exclusivity is claimed over the AI imagery.