Build a cinematic scroll website with AI.

Create a goal for this project: Build a complete cinematic, scroll-scrubbed SaaS website from the supplied reference recording and generated media. Act as the project manager. Break the work into research, story, asset planning, implementation, performance and QA. Keep a checklist and maintain a handover file containing every decision, media path, completed step and unfinished task. Continue until the site has been tested in the browser on desktop and mobile. Ask only when approval is genuinely required, and do not mark the goal complete while required work remains.

Build an original cinematic launch website for a fictional SaaS product called ARCT, short for Agent Runtime Control + Telemetry. ARCT is a control plane for production AI agents.

Use the attached website and complete screen recording only as interaction references—not as a design to copy. First audit the full forward and reverse experience. Identify the pinned chapters, camera or object movement, scroll timing, media transitions, text choreography, cursor behaviours and UI overlays. Then translate that interaction grammar into five landing-page chapters: a governed shelter hero, a floating runtime-artefact feature scene, a Control Plane product dashboard, a trace tunnel proof section and a NIVA incident-investigator problem section, followed by a return to the opening world.

Keep the visual media full bleed. Layer real semantic HTML product interfaces over it. Use restrained polar art direction, reversible scroll motion, fog transitions and cursor-reactive details. Keep accessibility, reduced-motion behaviour, mobile composition and smooth reverse scrolling in scope. Before coding, return a chapter map with the purpose, visual beat, copy beat, scroll range and transition for every scene.

Before writing code, divide this experience into five short, reversible video chapters. For every chapter, give me: (1) an exact first-frame image prompt, (2) an exact last-frame image prompt, (3) one Google Flow first-and-last-frame motion prompt, (4) a negative continuity lock, (5) an approved filename, (6) the recommended duration and active motion window, and (7) the transition into the next scene.

Keep the palette, camera, materials, lighting and object identity consistent across every chapter. Use one continuous shot with linear motion and no cuts. Do not ask Flow to morph unrelated objects or scenes. Hide scene changes with designed fog, blur and bloom transitions in the browser.

Use the attached master image as the exact world, material, lighting, lens and colour reference. Original polar-tech art direction, not another brand and not a copy of its model. Cinematic 16:9 desktop composition. Nearly monochrome blue-grey palette, soft overcast light, frosted mineral surfaces, restrained cold-white internal glow, fine airborne snow, subtle volumetric haze, distant low-contrast mountain forms. Camera and subject geometry must remain physically coherent. Leave clean negative space in the corners for HTML typography. No words, letters, numbers, logos, interface, watermark or border inside the image.

One continuous shot. Linear motion at constant speed. No cut, dissolve, time jump, speed ramp, camera shake, handheld movement, lens change, object replacement, new object, melting, liquid morph, duplicate geometry, extra panels, text, logo or watermark. Preserve the exact material, proportions, landscape and exposure from the supplied frames.

Find the approved 1080p video clips and copy them into this project's media folder. Preserve the original source files. Inspect their duration, resolution, frame rate and keyframe spacing. Create separate web-scrub MP4 derivatives with a keyframe on every frame using this command, replacing the input and output names as needed:

ffmpeg -i INPUT.mp4 -c:v libx264 -preset medium -crf 18 -g 1 -keyint_min 1 -sc_threshold 0 -pix_fmt yuv420p -movflags +faststart -an OUTPUT-web-scrub.mp4

Build the complete page in plain HTML, CSS and JavaScript using GSAP and the ScrollTrigger plug-in. Create one pinned 100dvh master timeline. Map scroll progress to each video's currentTime; do not play the videos normally. Use Blob URLs when the host does not expose usable byte-range seeking. Give every chapter a deliberate active-motion window followed by enough hold time for the copy and UI to be read.

Crossfade chapters through fog, blur and bloom instead of hard cuts. Keep the logo, copy, dashboard, trace cards and controls as semantic HTML or inline SVG above the videos. Every animation must reverse correctly when scrolling upward. Add loading, mobile and prefers-reduced-motion fallbacks. Test multiple forward and reverse scroll checkpoints in a real browser and fix console errors, missing media, jumping playheads and slow frames before calling the build complete.

Polish the final interaction layer. Add a cursor-local video reveal using a second copy of the active video under a feathered radial CSS mask. Let the secondary video advance independently with GSAP while the pointer is present, but never let pointer movement change the master scroll time. Add a visible cursor cue and a coarse-pointer fallback.

Use the 21st.dev Stacking Cards component as a visual and mechanical reference, then adapt the behaviour to the existing GSAP master timeline without adding React or Motion. Before the final assistant explanation, introduce two larger diagnostic cards: a healthy-run comparison and a policy-threshold panel. Animate their inline SVG paths with stroke-dashoffset, opacity and transforms. Let each card remain readable, then scale and offset it into a three-card stack. Make the entire sequence reversible and validate it on desktop and mobile.