How to record a website scroll video

Most bad takes are lost before the recorder starts. Do these once and every take improves.

1. 1.Open the page in a fresh profile or a private window, so your extensions, bookmarks bar and signed-in state stay out of the shot.
2. 2.Accept or dismiss the cookie banner, close the newsletter modal and minimise the chat launcher. They tend to come back on reload, so do this last.
3. 3.Scroll to the bottom and back once before recording. That loads lazy images and fires entrance animations, so the take does not catch half-loaded sections.
4. 4.Hide the scrollbar if it bothers you. In DevTools, add html { scrollbar-width: none; } to the page’s styles.
5. 5.Turn off notifications. A banner sliding in at the top right ruins an otherwise perfect take.

Decide the output shape first, then make the browser window that shape. Recording a full 16:10 screen and cropping it to 9:16 afterwards throws away most of your pixels and leaves a blurry result.

• For 16:9, a window of 1280 × 720 or 1920 × 1080 (content area) is the cleanest.
• For a phone-shaped video, open DevTools, switch on the device toolbar and pick a phone. The page then serves its mobile layout, and you record just that viewport.
• Set the page zoom to 100%. Zoomed pages render text at odd sizes and look soft once scaled.

A retina or high-DPI display records at twice the pixel size of the window, which is good: you can scale down to 1080p and keep text sharp.

On a Mac, the built-in recorder (Shift ⌘ 5) and QuickTime write variable frame rate files. OBS Studio, free on macOS, Windows and Linux, records at a constant frame rate you choose. On Windows, the Snipping Tool and Xbox Game Bar both record, but OBS gives you the most control.

This is the step that decides whether the video looks professional. A mouse wheel moves in notches, a trackpad flicks and coasts, and neither holds an even speed for twenty seconds. Why scroll recordings stutter goes into the causes.

The reliable fix is to have the browser scroll itself. A short script pasted into the DevTools console scrolls the whole page on an easing curve over a set time. The full snippet, and how to pace it, is in how to auto-scroll a website for a video.

1. 1

   Paste the script, do not run it yet

   Set the duration inside it to the length you want the scroll to take.

2. 2

   Start the recorder

   Give yourself a second or two of stillness at the top. You can trim it later, and a held first frame makes a better thumbnail.

3. 3

   Run the script and keep your hands off

   Do not touch the mouse or trackpad until the page has stopped. Any input fights the script.

4. 4

   Stop, then trim the ends

   Cut to the first frame of motion and the last, plus whatever hold you want either side.

Done properly, the above is a fifteen-minute job per take, and a different shape means another take. If the page is public, a renderer does all of it from the URL: it opens the page at desktop, tablet or phone width, removes the pop-ups, reads the page at double density and calculates the motion at a locked 24, 30 or 60 fps. You change a setting and export again instead of re-recording.