How I Built a Scroll-Scrub Website with AI

​

1. Start with the concept

Before touching any code, decide:

• What's the story?

• What video will play in the background?

• How many sections will the website have?

• What text and images appear in each section as the visitor scrolls?

I decided on 7 sections:

• Intro

• Five feature/story moments

• Final ending scene

The entire website is built around one continuous background video.

​

2. Generate the website with Claude

I used Claude to generate the HTML, CSS, and JavaScript.

Here's the prompt I used:

Create a modern single-page website with a scroll-scrub video effect.

The background should be a fullscreen video that does not autoplay. Instead, the video's playback should be entirely controlled by the user's scrolling:

• Scrolling down advances the video frame by frame.

• Scrolling up rewinds it.

• The video progress should stay perfectly synchronized with the scroll position.

On top of the video, create 7 full-screen content sections that fade in and out while scrolling. Each section contains a headline, supporting text, and optionally an image. The transitions should be smooth and cinematic.

Build everything in a single HTML project using HTML, CSS, and JavaScript with clean, commented code that's easy to customize.

​

3. Create the visuals

Once the base website was ready, I created the content.

For my project I wanted:

• Intro scene

• Five story moments

• Ending scene

I generated all the key images in NanoBanana 2, using my character SKY for consistency.

Then I animated each image using Kling, primarily with First Frame + Last Frame animation, before editing all the clips into one continuous video.

​

4. Prepare the video for scroll scrubbing

This is the step almost everyone skips.

A normal MP4 isn't designed for frame-by-frame seeking. Most videos only contain a keyframe every couple of seconds, which makes scrolling feel laggy and imprecise.

Instead, re-encode the video so every frame becomes a keyframe.

I was working on Windows, so after exporting my final video I installed FFmpeg and ran this PowerShell command:

ffmpeg -i myvideo.mp4 -an -g 1 -crf 26 -vf "scale=1280:-2,fps=15" -movflags +faststart -pix_fmt yuv420p scrub.mp4

This creates a scroll-friendly version of the video that seeks smoothly as the user scrolls.

​

5. Organize your project

My project folder looked like this:

project/

│

├── index.html

├── scrub.mp4

└── images/

    ├── image1.jpg

    ├── image2.jpg

    ├── ...

Keeping everything together makes deployment straightforward.

​

6. Deploy the website

Finally, upload the project to a web host.

I used Netlify because it's free, incredibly simple, and lets you deploy a static website in just a few clicks.

Once uploaded, the site is live and the video scrubbing works exactly like it does locally.

​

Workflow at a glance

1.  Plan the story and page structure.

2.  Ask Claude to generate the website.

3.  Create your visuals (I used NanoBanana 2).

4.  Animate the scenes (I used Kling).

5.  Edit everything into one continuous video.

6.  Re-encode the video with FFmpeg for smooth scrubbing.

7.  Put the HTML, video, and assets into one folder.

8.  Deploy with Netlify.

Good luck prompting!

If this tutorial helped you, I'd really appreciate your support.

• Subscribe to my YouTube: https://www.youtube.com/@saranmtart
  It really helps the channel and motivates me to make more AI tutorials!

• Follow me on Instagram for more AI tips: https://www.instagram.com/saranmt/

Thanks for reading, and have fun building your own scroll-scrub websites!