How we built this site: a film that plays as you scroll

When you open our home page you see a short film called "Lights, Camera, Against": a lamp switches on, lights and a camera get ready, a lens opens, and finally the A of Against appears in light. On a computer the film does not play by itself. It moves forward as you scroll and rewinds when you scroll back. This post explains how we built it.

Why scroll?

The first screen of an agency site is usually a showreel or a big headline. We wanted visitors to set the pace of the film themselves. Scrolling turns a viewer into the director. The film's four scenes are matched with four headlines on screen, and each time the scene changes, so does the headline.

What happens technically

A video that plays with scrolling has to be prepared differently from a normal one. When video is compressed, a full frame is usually stored only every few seconds, and the frames in between hold only the changes. Jumping back and forth while scrolling can stutter as a result. We re-encoded the film with a full frame every 8 frames. The file got a little bigger, but every frame became quick to reach.

The video is downloaded completely before scrolling takes over. Meanwhile a small loading ring and the first frame of the film are on screen. Scrolling is not wired straight to the video but to a layer that smooths it, so the film moves fluidly even when you scroll fast.

Movement when you stop

When the page is still, the film does not freeze. It drifts very slowly back and forth around the current frame, as if breathing, so the screen never looks like a photo.

Different on phones

Controlling video by scroll on a phone is heavy on battery and data, and it does not feel the same with a finger. So on phones a lighter version of the film plays on a loop. The headlines still change with the scenes, and there is a button to pause the film.

For people who prefer less motion

If someone has turned on reduced motion in their operating system, the film does not play at all. They see the final frame of the film with the last headline. We treat accessibility as part of the design, not something added later. There is more on this in our post on the accessibility act.

Speed

The desktop version of the film is about 3.4 MB, the phone version 1.1 MB. The rest of the page keeps working while the film loads. We wrote about keeping video-heavy sites fast in our Core Web Vitals post.

In the end

The first screen of a website is the brand's first sentence. Ours is a film, and we wanted to put it in the visitor's hands. If you are thinking about a similar experience for your site, head to our web design and development page.