It looks like a 3D scene rendering live, but it is one video whose playhead is tied to how far you have scrolled. Scroll a little, the video moves a little. You keep it paused and let the scroll bar be the slider. That is the whole effect, and it is the easiest of my website builds to pull off.
In Higgsfield, make one slow cinematic clip with Seedance 2.5: a portrait dissolving into particles, a gentle push-in, a product turning, a landscape unfolding. Same rules as always: one continuous take, subtle motion, a single camera move. Upload a start frame for control, and use the AI Background Video Generator for a clean loop.
Start from a calm portrait on a dark studio background. The face slowly dissolves
into fine drifting particles from one side, dust and tiny fragments lifting gently
and floating away in slow motion while the rest of the face stays intact. Soft
directional light, subtle glowing embers, deep black backdrop. The camera holds one
slow steady push in, one continuous take. No cuts, no flashing, no fast bursts.
Elegant, ethereal, cinematic. Even slow motion throughout, loop friendly.Save your clip as hero.mp4, open Claude Code in that folder, and paste this. No Claude Code? Paste it into regular Claude, download the HTML, and drop it next to your video.
Build me a single self-contained index.html: a cinematic scroll-video hero. Create a
tall scroll section (about 400vh) with an inner sticky wrapper pinned to the viewport
(position: sticky; top: 0; height: 100svh) holding hero.mp4 (object-fit: cover,
muted, playsinline, preload="auto", with a poster). Keep the video PAUSED and drive
its timeline by scroll: as I scroll through the tall section, map my progress from 0
to 1 onto the video from first frame to last frame. Do it inside a
requestAnimationFrame loop that eases currentTime toward the target (a lerp) so it
feels buttery, not jumpy. Never set currentTime directly in the scroll event, and
guard the math until loadedmetadata so duration is not NaN. Layer a headline over the
hero with z-index, and add a couple of normal page sections below it. On touch or
prefers-reduced-motion, skip the scrub and autoplay-loop the video or show the
poster. Also re-encode my video with ffmpeg using -x264-params keyint=1:min-keyint=1
-pix_fmt yuv420p so every frame is a keyframe and scrubbing is smooth, and extract
the first frame as poster.jpg (ffmpeg -frames:v 1) to use as the poster. Then run it
and show me a preview.Picture a normal video like a book with only a few bookmarks in it: to land on an exact page it flips forward from the nearest bookmark, which feels slow and jumpy. The re-encode in the prompt (keyint=1) puts a bookmark on every single frame, so the video jumps to any exact moment instantly and it glides as you scroll. If yours stutters, that line is what is missing.
🎬 Higgsfield (Seedance 2.5, 33 days of unlimited access) · 🤖 Claude Code · 🌐 want all four effects in one place? Four websites to build with Claude x Higgsfield · the 3D world build