Scroll Video Heroes: How They Work and When to Use One

The scroll video hero has become the signature of premium websites. You arrive, you scroll, and instead of the page moving down, a film moves forward: a watch comes apart, a room is built, a camera walks you through a door. It is the effect clients ask us about most, and the one most often built badly.

This guide explains how it works under the hood, the two ways to use it, what makes footage work, and how to keep it fast. Everything here comes from scroll heroes we have built for Singapore businesses and our own demo sites, which you can open and try.

A scroll video hero is a film at the top of a page whose playback follows the visitor's scroll instead of a clock. Scroll down and it plays forward. Stop and it holds. Scroll up and it runs backwards. The visitor is effectively holding the playhead.

That is different from a normal video background, which plays on its own whatever the visitor does. The difference matters because control changes how people watch. When they are steering, they slow down at the moments that interest them, which is exactly what you want when the film is your product.

There are two ways to build one. The first uses a normal video element and sets its playback position from the scroll on every frame. The catch is encoding. Ordinary video only stores a complete picture every few seconds and records the changes in between, so jumping backwards forces the browser to rebuild frames and the film stutters. Encoding the video so every frame is a complete picture fixes that, at the cost of a larger file. Our NEXORA demo is built this way.

The second way skips video entirely. The film is exported as a sequence of still images and drawn onto a canvas, one image per step of the scroll. It is perfectly smooth in both directions and gives precise control over every frame, but it means loading many images, so they need to be small and loaded progressively. Our Timeless & Co. watch demo and the SUMI omakase demo both draw their films frame by frame like this.

A scrubbed hero follows the scroll the whole way, which is ideal when visitors should examine something: a watch movement, a product turning, a building assembling. The risk is length. If the film takes many scrolls to finish, people get tired before they reach your content.

A play once hero starts the film on the first scroll, runs it through at its own pace and then holds the last frame with the headline over it. For Voilà, the first scroll plays a film through to the finished room and the headline then stays still. For Esthemax, the film plays once and settles on its final frame. It suits mood and atmosphere, and it never makes visitors work for the page.

Slow, steady camera movement with no cuts. A scroll hero exaggerates every jolt, so handheld shots and fast edits look broken. The best films have one continuous move, like a walk through a door, a slow orbit around a product or a reveal from close up to wide.

Plan the last frame first, because that is where the visitor's eye rests and where the headline sits. It needs a calm area for text and should be a frame you would happily use as a photograph. Keep the film short, a few seconds of real time, and shoot or crop a separate vertical version for phones so the subject stays centred.

It can, which is why the details matter. Google's Largest Contentful Paint, the measure of how fast the main content appears, counts a hero video by its poster image or its first frame, whichever shows first, according to Google's own documentation. So the poster image is the most important file on the page. Make it a compressed still of the opening frame and load it first.

Then keep the film itself lean: short, compressed, sized for the screen it plays on and loaded after the poster is visible. Frames encoded for scrubbing are larger, so a scrubbed film should be shorter than a played one. We cover the rest of the speed picture in do website animations slow your site down.

Phones need their own version. Use a vertical crop so the subject fills the screen, smaller frames or a lower resolution file, and make sure the video is muted and set to play inline, because iPhones will not autoplay video otherwise. Test on a mid range Android phone on mobile data, not only on the latest iPhone.

Some visitors also turn on the reduce motion setting on their device. For them, the hero should show the final frame as a still image with the headline over it. They lose nothing important, and the page respects their choice.

When there is no good footage. A scroll hero built on shaky or generic video looks worse than a strong photograph. When the business is about information rather than feeling, like an accounting firm's service page. And on any page where visitors arrive to do a task, such as booking or checkout.

If you are weighing it against other options, our guide on how to choose a hero section compares the main hero styles, and what makes a website look premium covers the details that matter whichever you pick.