Scroll-Driven Banner with AI Video

Back to Tutorials

Tutorial

Your landing page banner is the first moment a visitor feels your brand. Instead of leaving it static, we'll turn it into a scroll-driven scene that draws them into a dynamic world.

Sequencer

Ideas in motion

Build cinematic web moments from a single prompt.

Generate yours

Canopy Ridge

Into the green

Built for damp mornings, long miles, and quiet places.

Explore kit

VoltRush

Uncap the charge

Maison Arc

The Fall Edit

How it works

A normal video plays over time. This hero uses scroll position as the timeline instead. When the visitor scrolls, JavaScript calculates the progress through the hero section and sets the video's current frame.

•

Generate a vertical-feeling camera move with Happy Horse 1080.

•

Export it as a lightweight MP4 with no audio.

•

Place the MP4 beside your HTML file, or in your app public folder.

•

Use the scroll code to seek through the video frames.

What you need

Video prompt

Use a prompt that only describes the image and camera motion. Do not mention the website, banner, or scroll effect to the video model.

Starting banner image

Use the still image that should appear first in your landing page banner.

1. Generate a video

Create the source clip

Go to the Generate Video page, upload your starting banner image, choose your model, and paste the prompt below. Happy Horse 1080 is a great fit, but any model can work if it follows the downward camera move.

Generate a Video

Customize the subject and scene details only. Keep the camera instructions strict: straight down, no orbit, no side pan, no sudden acceleration.

Prompt

Copy

Animate the provided image. Preserve the main subject, composition, lighting, and environment. Move the camera directly downward in one smooth, slow, continuous motion.

Use this motion direction:
{
  "task": "animate_provided_image",
  "source_image": {
    "role": "first_frame",
    "preserve": [
      "main subject",
      "composition",
      "lighting",
      "materials",
      "environment"
    ]
  },
  "camera_motion": {
    "type": "straight_vertical_boom_down",
    "path": "camera moves directly downward in one smooth continuous line",
    "speed": "slow and steady",
    "constraints": [
      "no orbit",
      "no sideways pan",
      "no zoom",
      "no cuts",
      "no sudden acceleration",
      "no camera shake"
    ]
  },
  "scene_motion": {
    "style": "subtle natural motion only",
    "depth": "foreground, midground, and background separate with gentle parallax",
    "subject": "keep the subject stable and recognizable"
  },
  "output": {
    "no_text": true,
    "no_graphics": true,
    "no_audio": true
  }
}

2. Add the video to your site

Download the generated video, rename it hero-scroll.mp4, and host it with your own site. For plain HTML, keep it in the same folder as index.html. For React or Next.js, put it in the public folder.

The code

Pick the tab that matches your setup, paste it into your page, and make the video src point to your hosted MP4. Replace the headline and body text with your own copy. The script keeps the video paused and updates currentTime from the page scroll.

HTML + JS

React

Next.js

Webflow/Framer

HTML + JS

Copy

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Scroll Hero</title>
  <style>
    body { margin: 0; background: #050505; color: white; font-family: Inter, system-ui, sans-serif; }
    .hero { position: relative; height: 100vh; overflow: hidden; display: grid; place-items: center; }
    .hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
    .copy { position: relative; z-index: 2; width: min(1120px, calc(100% - 48px)); }
    h1 { max-width: 720px; margin: 14px 0; font-size: clamp(48px, 9vw, 112px); line-height: .88; letter-spacing: 0; }
    p { max-width: 520px; margin: 0; font-size: clamp(16px, 2vw, 22px); line-height: 1.45; opacity: .84; }
    .next { min-height: 100vh; padding: 80px 24px; }
  </style>
</head>
<body>
  <section class="hero" data-scroll-hero>
    <video muted playsinline preload="metadata" src="./hero-scroll.mp4"></video>
    <div class="copy">
      <h1>Your Hero Headline</h1>
      <p>Your supporting value prop goes here.</p>
    </div>
  </section>
  <section class="next">Your next page section goes here.</section>

  <script>
    const hero = document.querySelector("[data-scroll-hero]");
    const video = hero.querySelector("video");

    function seek() {
      const rect = hero.getBoundingClientRect();
      const raw = (window.innerHeight - rect.top) / (window.innerHeight + rect.height);
      const clamped = Math.max(0, Math.min(1, raw));
      const eased = 1 - Math.pow(1 - clamped, 2.25);
      if (video.readyState >= 1 && Number.isFinite(video.duration)) {
        video.pause();
        video.currentTime = Math.min(video.duration - 0.001, eased * video.duration);
      }
    }

    video.addEventListener("loadedmetadata", seek);
    window.addEventListener("scroll", seek, { passive: true });
    window.addEventListener("resize", seek);
  </script>
</body>
</html>