Guide

Play a video on scroll: turn footage into a website

You have a clip: a product turning on a table, a drone pass over a site, a kitchen at full tilt. You want it to play as the visitor scrolls, forwards on the way down and backwards on the way up. This guide explains why the obvious way to do that stutters, what works instead, and how to turn your footage into a finished scroll website in the browser.

Why you cannot just scrub a video element

The first thing most people try is setting the video's time from the scroll position:

const video = document.querySelector("video");
addEventListener("scroll", () => {
  const max = document.documentElement.scrollHeight - innerHeight;
  video.currentTime = (scrollY / max) * video.duration;
});

It works on a short, specially encoded clip on a fast laptop, and stutters almost everywhere else. Web video is compressed so most frames are stored as differences from an earlier full frame (a keyframe). To show an arbitrary moment, the browser has to find the keyframe before it and decode forward. Scrolling asks for a new moment dozens of times a second, so the browser is always seeking, and the picture lags or jumps. Re-encoding with a keyframe on every frame helps but makes the file several times larger, and mobile browsers still treat video seeking differently from desktop ones.

What works: turn the video into frames

The reliable approach is the one behind Apple-style product pages. Take still images out of the video at even intervals, load them all, and draw the right one to a canvas as the visitor scrolls. Picking an image that is already in memory takes no seeking and no decoding, so the page keeps up however fast someone scrolls. The full technique, with a code sketch, is in how to make an Apple-style scroll animation.

Doing that by hand usually means running ffmpeg, picking a frame rate, resizing, naming files and writing the scroll code. ScrollCraft does it in the browser instead.

Turn a video into a scroll website with ScrollCraft

  1. Open the builder. Go to the builder, choose any style on the first screen (your video will replace it) and press Next.
  2. Set the frame count. The slider runs from 60 to 200 and starts at 120. More frames scrub more smoothly and make a heavier site.
  3. Decide about phones. Turn on portrait frames if many visitors will be on phones. A second set at 720 by 1280 is cut from the centre of your footage.
  4. Drop in your video. Drag the file onto the upload box or click to choose it. Frames are sampled evenly across the clip, scaled so the long edge is at most 1280 pixels, and saved as JPEGs in your browser. A progress bar shows how far it has got.
  5. Write the page. The editor opens with your footage as the background. Add sections, headings, text and a button, and scroll the preview to see the words move over the video.
  6. Export. The ZIP has index.html and a frames folder (plus frames-mobile if you made a portrait set), ready to drag onto Netlify or push to GitHub Pages. The HTML export guide walks through hosting.

If you would rather not write the words, describe your business and the AI writer drafts the whole site, then swap in your own video in the editor.

Footage that scrolls well

Not every clip makes a good scroll background. What tends to work:

  • One slow, continuous move. An orbit around a product, a push in through a doorway, a slow pan across a landscape. Scrolling stretches and compresses time, so smooth motion stays smooth and jerky motion gets worse.
  • No cuts. A hard cut becomes a single-frame jump in the middle of a scroll. If you need two shots, a dissolve between them scrubs better.
  • Short clips. With 120 frames, a 10 second clip gives 12 frames per second of footage; a 60 second clip gives 2, and the motion between frames starts to show. Ten to thirty seconds is a good range.
  • A steady camera. Handheld shake turns into flicker when the visitor scrolls slowly. Use a stabilised shot, a gimbal or a tripod.
  • Room for text. Your headings sit on top of the footage. Darker or less busy areas of the frame keep them readable.
  • Subject in the centre. Phones crop the sides of landscape footage, so keep what matters near the middle.

Keeping the site light

Every frame is a JPEG the visitor downloads, so frame count, frame size and content all matter. Busy, detailed footage compresses worse than smooth gradients. If the exported frames folder feels heavy, go back and pick a lower frame count before you trim anything else. The exported page loads every fifth frame first so the whole scroll is roughly covered early, then fills in the rest. The netlify.toml and vercel.json in the ZIP tell those hosts to cache the frames for a year, so returning visitors do not download them twice.

Questions

Is my video uploaded to a server?
No. The frames are taken out by your own browser, on your own device, and stored in its local storage (IndexedDB). The video file is never sent to ScrollCraft or anyone else.
What video formats work?
Anything your browser can play: MP4, MOV and WebM in practice. If a file will not decode, convert it to MP4 with H.264, which every browser reads.
Is there a length or size limit?
Files up to 500 MB. Only the first two minutes are sampled, because past that the frames are too far apart to scrub smoothly. If your clip is longer, the builder tells you how much it used.
Will it work on phones?
Yes. Turn on portrait frames before you upload and a second, 720 by 1280 set is cut from the middle of your footage for screens under 768 pixels wide. Without it, phones use the landscape frames, cropped to fill the screen.
Can I use footage I found online?
Only if you have the right to. Stock sites that license clips for commercial use are fine; a clip from someone else's channel is not.

Try it onyour own business

Describe what you do in a paragraph and get a finished scroll site to edit and export, or start from a template.

Write my site Browse templates