Turn One AI Video Into an Expensive-Looking 3D Scroll Website (2026)

Complete step-by-step walkthrough

Original TECH4SSD tutorial and reference media

Tools

• Luma Labs (Dream Machine) or any AI video generator with first and last frame support
• ChatGPT, Codex, Claude or any coding agent
• FFmpeg (free, optional but recommended)
• A modern browser and a code editor

Before you begin

• A reference image of what you want to animate: a building, product, car or interior
• An account on an AI video generator (this guide uses Luma Labs)
• Access to a coding agent such as ChatGPT, Codex or Claude
• Basic comfort opening a folder and running one terminal command

Watch the original Instagram tutorial

1. Get a reference image of what you want to animate

Pick one strong visual that will become the star of your page. It can be a building, a product, a car or an interior. Composition matters more than detail: leave space around the subject so the camera or the build animation has room to move. For a construction-style reveal like the villa in the Reel, prepare two images that share the exact same camera angle: - FIRST FRAME: the empty site (terraced hillside, no building). - LAST FRAME: the finished subject (the completed villa with pool, landscaping and warm lights). The last frame defines the final look, so make it the best image you have. Keep the horizon, framing and lighting identical between the two so the AI only has to build, not re-compose.

Tip: Wide landscape (16:9) clips work best for desktop scroll sites. If most of your traffic is mobile, also generate a 9:16 version.

• One hero subject with clear negative space
• First and last frame share the same viewpoint, lens and horizon
• Last frame is the exact final result you want viewers to land on

2. Generate the cinematic movement in an AI video generator

Open your AI video generator. This example uses Luma Labs. Start a new video, upload the FIRST FRAME and LAST FRAME as keyframes, then paste the prompt below into the instruction box and generate a 10 to 12 second clip. The prompt locks the camera and builds the villa from the ground up, so every frame becomes a clean scroll position. Generate a few takes and keep the one with the most stable geometry.

Exact prompt

Create a premium photorealistic architectural construction sequence between the supplied FIRST FRAME and LAST FRAME.
FIRST FRAME: the empty terraced hillside building site.
LAST FRAME: the completed luxury coastal villa. This image defines the exact final architecture, proportions, materials and composition.
Lock the camera throughout. Preserve the same viewpoint, lens, framing, horizon, coastal mountains, sea, sunset, sky and surrounding mature trees. No camera orbit, zoom, pan, cuts or transitions.
Build the villa progressively from the ground upward in one continuous, clearly readable sequence. Begin with the empty site. Foundations and lower retaining structures form first. Structural columns and the lowest floor assemble next. Continue upward with the intermediate floor slabs, supporting walls, upper level and cantilevered roof. Each level must be supported before the next appears.
Show individual construction elements moving into their correct positions with controlled, elegant motion: structural concrete, masonry blocks, stone panels, timber cladding, dark window frames and glass panes. Keep masonry within the finished design; do not add exposed brickwork that is absent from the final image.
Install the glass and wood finishes after the structural shell is established. Complete the terrace, infinity pool, stairs and landscaping. Fill the pool, finish the interiors and gradually illuminate the warm architectural lights near the end.
Every installed element stays fixed in place. Maintain consistent scale and perspective. Build through visible assembly rather than dissolving, inflating or morphing the ground into a house. No melting surfaces, floating unsupported floors, changing floor counts, flickering geometry, workers, cranes or extra buildings.
Match the supplied LAST FRAME as closely as possible at completion, including the villa silhouette, glazing, pool, landscaping and warm lighting. Finish with a brief steady hold on the completed house. No added titles, logos or watermarks.

Tip: Want a camera fly-through instead of a build? Use a single reference image and ask for one smooth, continuous camera move (for example a slow push-in or orbit) with no cuts. The scroll trick works the same way.

• First and last frame uploaded as keyframes
• Prompt pasted in full
• Clip is 10 to 12 seconds with no cuts
• Geometry stays stable from start to finish

3. Match the motion to your scroll direction (or reverse it)

Here's the trick. Scrolling down should feel like moving forward through the story. Generate the movement in the direction that makes sense for your scroll: for a build, empty site at the top of the page and finished villa at the bottom. If your clip came out the wrong way round, generate it normally and reverse it afterward with one FFmpeg command. The result is a clean animation that can move forward or backward depending on how someone scrolls.

Code

# Reverse a clip (drops audio, which a scroll film doesn't need)
ffmpeg -i villa.mp4 -vf reverse -an villa-reversed.mp4

• Top of the page = first frame of the clip
• Bottom of the page = the hero final frame

4. Prepare the video for smooth scrubbing

Video seeking works from keyframes. Widely spaced keyframes can make backward scrubbing less responsive because the browser must decode additional frames. Re-encode this short clip with a keyframe on every frame, then export the first frame as a poster image for the loading state. Keep the clip short (5 to 12 seconds) and at 1080p or lower: an every-frame-keyframe file is larger than a normal video. Test both scroll directions on your target phones; encoding alone does not guarantee smooth playback.

Code

# Every frame becomes a keyframe to make forward/backward seeking more responsive
ffmpeg -i villa.mp4 -an -c:v libx264 -preset slow -crf 20 -g 1 -pix_fmt yuv420p -movflags +faststart scroll.mp4

# Poster image shown while the video loads
ffmpeg -i scroll.mp4 -frames:v 1 -q:v 2 poster.jpg

Requirement: Prepare a short, seek-friendly clip before tuning the scroll animation. File size, device performance and the page's seeking logic all affect smoothness.

5. Ask your coding agent to build the page

Take the video into ChatGPT, Codex, Claude or your favorite coding agent and tell it to build a web page where video playback is controlled by the user's scroll position. Use the prompt below so you get smoothing, loading, mobile support and accessibility in the first pass. Put scroll.mp4 and poster.jpg in a folder called media next to the page.

Exact prompt

Build a single-page website where a pre-rendered video is controlled by the visitor's scroll position.

Assets:
- media/scroll.mp4 (encoded with a keyframe on every frame, no audio)
- media/poster.jpg (the first frame)

Requirements:
1. A tall scroll section (about 500vh) containing a sticky, full-viewport stage that holds the video (object-fit: cover, muted, playsinline, no controls).
2. Map scroll progress through that section (0 at its top, 1 at its bottom) to video.currentTime = progress × duration. Scrolling down plays the animation forward; scrolling back up plays it backward.
3. Make it smooth: run a requestAnimationFrame loop that eases currentTime toward the target (lerp factor around 0.12) instead of seeking on every scroll event.
4. Show the poster until the video's metadata and first frame are ready, then reveal the stage.
5. Overlay 3 or 4 text sections (headline plus one short line) that fade in at set progress points, for example 0.05, 0.45 and 0.85, over a subtle dark gradient for legibility.
6. Work on iOS Safari and Android Chrome with touch scrolling (muted, playsinline; unlock seeking on the first touch with a play then pause).
7. Respect prefers-reduced-motion: show the final frame as a still image and stack the text sections normally.
8. Plain HTML, CSS and JavaScript in one file, no frameworks. Comment the scroll-to-time mapping.

Deliver the complete file.

• scroll.mp4 and poster.jpg are in a media folder
• Agent returned one complete HTML file
• Page opens locally in the browser

6. Reference implementation (if you want to see the core idea)

This is the minimal version of what the agent builds: a tall section, a sticky video, and a loop that maps scroll progress to the video's current time with easing. Save it as index.html next to the media folder and open it in a browser (or serve the folder locally) to test. This example demonstrates the core effect, not the complete production page. Before publishing your site, ask your agent to add the loading, reduced-motion and mobile checks specified in step 5. The attached screen recording is a result preview; use your original generated animation as media/scroll.mp4.

Code

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Scroll film</title>
<style>
  html,body{margin:0;background:#06070C;color:#fff;font-family:system-ui,sans-serif}
  .scroll{height:500vh;position:relative}
  .stage{position:sticky;top:0;height:100vh;overflow:hidden}
  .stage video{width:100%;height:100%;object-fit:cover;display:block}
  .copy{position:absolute;left:6vw;bottom:12vh;max-width:32rem;opacity:0;transition:opacity .4s}
  .copy.on{opacity:1}
  .copy h2{font-size:clamp(2rem,5vw,4rem);margin:0}
</style>
</head>
<body>
<section class="scroll" id="scroll">
  <div class="stage">
    <video id="film" src="media/scroll.mp4" poster="media/poster.jpg" muted playsinline preload="auto"></video>
    <div class="copy" data-at="0.05"><h2>Architecture without compromise.</h2></div>
    <div class="copy" data-at="0.45"><h2>A vision takes shape.</h2></div>
    <div class="copy" data-at="0.85"><h2>Life above the horizon.</h2></div>
  </div>
</section>
<script>
  const film = document.getElementById('film');
  const scroll = document.getElementById('scroll');
  const copies = [...document.querySelectorAll('.copy')];
  let current = 0;

  // Scroll progress through the tall section: 0 at its top, 1 at its bottom.
  function progress() {
    const r = scroll.getBoundingClientRect();
    return Math.min(1, Math.max(0, -r.top / (r.height - innerHeight)));
  }

  function tick() {
    const target = progress() * film.duration;     // down = forward, up = backward
    current += (target - current) * 0.12;          // ease toward the target
    if (Math.abs(target - current) > 0.001) film.currentTime = current;
    const p = current / film.duration;
    copies.forEach(c => {
      const at = Number(c.dataset.at);
      c.classList.toggle('on', p >= at && p < at + 0.25);
    });
    requestAnimationFrame(tick);
  }

  film.addEventListener('loadedmetadata', () => requestAnimationFrame(tick));
  // iOS: unlock seeking on the first touch
  addEventListener('touchstart', () => film.play().then(() => film.pause()).catch(() => {}), { once: true });
</script>
</body>
</html>

Tip: Opening the file directly works in most desktop browsers. If the video won't seek, serve the folder instead, for example with: npx serve .

7. Test forward and backward, then polish

Scroll down slowly: the animation should move forward frame by frame. Scroll back up: it should reverse just as smoothly. That's the expensive-looking interactive 3D scroll effect, without manually building the animation from scratch. Then polish: tune the section height (taller = slower animation), adjust the easing factor (lower = smoother but laggier), place your headlines on the most striking frames, and test on a real phone. Watch the finished Aurelia demonstration below: the villa builds as the page scrolls down and returns to the empty site as it scrolls back up. This is a finished-site screen recording, not the AI clip to use as scroll.mp4.

• Scrolling down plays forward with no stutter
• Scrolling up reverses smoothly
• Headlines appear on the right frames
• Tested on a real phone
• Final frame looks like your hero image

Open reference video

Explore More Breakdowns