Websites that feel like film.

Generate 4 keyframe images in 16:9, same resolution and EXACTLY the same style (light, lens, palette). No text or logos. Name them kf1..kf4. kf1: [opening scene]. kf2: [transition]. kf3: [piece]. kf4: [ending]. Deliver them for review before the video.

Single continuous shot, 15 s, 16:9, no audio. Use kf1→kf4 as sequential keyframes. CAMERA: one movement per segment (push-in → travel → orbit → pull-back). Smooth, stable motion when played forward and backward (it will be scrubbed by scroll). No cuts, no morphing, no text. Same style and subject throughout.

Convert the video to 96 WebP frames with alpha (ffmpeg fps=96/duration). Create a sticky canvas inside a 260vh section that maps scroll progress to frame index with lerp, preloads every tenth frame first, respects DPR ≤ 1.5 and prefers-reduced-motion (last frame fixed). Write dataset.prog for QA. Never animate by time: only by scroll.

Over the canvas, HTML chapters (no text baked into the video): a label with a thin growing rule, a headline word by word with mask and blur, metadata in glass labels. Each chapter appears in its progress range [a,b] and leaves before the camera reaches the subject. A few pixels of parallax between text and video.

Over the base image, a layer with the reveal image and a 260px radial mask with a soft edge that follows the cursor with lerp. pointer-events:none on the layer. Outside the container, hide the reveal. Only CSS mask-image plus --x/--y variables.

With Playwright: real wheel down to the last pixel of the footer (never scrollTo with Lenis), 1440 and 375 px, no horizontal overflow, H1 in 2 lines, nav in 1, CTAs ≥ 48 px and none covered by the float (elementFromPoint), 3D dataset.prog at three points. Then TestSprite CLI: “Use TestSprite CLI to test this project and fix what fails”.