Creating a video from a website: how to auto-scroll through it

Open the page, open DevTools (F12, or ⌥ ⌘ I on a Mac), paste this into the Console and press Enter. It waits three seconds so you can start your recorder, then scrolls from top to bottom along an ease-in-out curve over the time you set.

const SECONDS = 20;        // how long the scroll takes
const WAIT = 3;            // time to start your recorder

document.documentElement.style.scrollBehavior = 'auto';
window.scrollTo(0, 0);

const end = document.documentElement.scrollHeight - innerHeight;
const ease = (t) => (t < 0.5 ? 4 * t ** 3 : 1 - (-2 * t + 2) ** 3 / 2);

setTimeout(() => {
  const start = performance.now();
  const step = (now) => {
    const t = Math.min(1, (now - start) / (SECONDS * 1000));
    window.scrollTo(0, end * ease(t));
    if (t < 1) requestAnimationFrame(step);
  };
  requestAnimationFrame(step);
}, WAIT * 1000);

• scrollBehavior = 'auto' matters. Many sites set scroll-behavior: smooth, which turns every one of the script’s small moves into its own animation and brings the stutter straight back.
• requestAnimationFrame moves the page once per displayed frame, so the scroll is as even as the display allows.
• Scroll to the bottom and back once by hand before running it, so lazy-loaded images are already in place and the page height does not change mid-take.
• Sites built on a smooth-scroll library such as Lenis or Locomotive Scroll handle scrolling themselves and may fight the script. If the page lurches, that is why.

A script still leaves the frame rate to your recorder and your machine. A renderer removes both: Website Scroll Video reads the whole page once, then calculates where it should be on every frame of a locked 24, 30 or 60 fps video, so a heavy page cannot drop frames and a long one cannot drift. You set the same things the script does, in seconds and by curve, and preview the result before spending anything.

Measure the page in screens: its full height divided by the window height. A typical landing page is five to eight screens. Then:

Faster than a screen a second and text smears into a blur, especially at 30 fps or in a GIF. Slower than three and viewers drift. Where one section matters more than the rest, a pause on it beats slowing down the whole page; Website Scroll Video allows up to 6, between 0.5 and 5 seconds each.

• Smooth (ease-in-out). Starts from rest, cruises, comes to rest. The right default: both ends look deliberate rather than clipped.
• Glide (ease-out). Leaves quickly and coasts to a stop, like a flick on a trackpad. Good for short teasers that should open with energy.
• Linear. One speed throughout. Best for a background loop, where any change of pace draws the eye.
• Pulse. Moves a section, settles, moves again. Reads like someone paging through the site, which suits product tours.

A video that scrolls down and then cuts back to the top has a visible jump when it loops. Scroll down and back up along the same curve instead: the last frame matches the first and the loop is seamless. In Website Scroll Video that is the Down and Back playback, with an optional rest at the bottom before the return and at the top before the loop begins again.