The background is the video playing behind the title of your homepage: the first thing people see, before they have read a word. In the studio, it doesn’t come from a stock library that other sites already use. You describe the scene, a stone bakehouse, a dining room, a workshop, and the studio films it for you. It is created from your description: it looks like your place without being footage of it.
These five backgrounds were filmed by the studio for real businesses, and are shown without retouching.
Describing the scene
A good description fits in three or four sentences, and answers four questions.
- Where are we? The place, the material, the era: “a stone bakehouse, before dawn”, rather than “a bakery”.
- What light? Warm or cool, low or direct, one source or several. It sets the mood, far more than the set does.
- What moves? One thing, slowly: the oven door opening, the steam, a hand flouring the counter. A background that moves everywhere tires the eye and fights with the title.
- Where does the title sit? Keep a calm area, often on the left or at the bottom, where the text will rest.
Two traps to avoid: asking for text in the image (video models write it badly, and the real title is laid on top anyway), and close-up faces, which draw every glance and date quickly.
Five ways to make the background move
- Looping video: the video plays while the sections rise as you scroll. Simple and sturdy, it is the default choice.
- Hero video: it exists only on the first screen, then makes way for the page. The best balance between effect and risk.
- Scroll video: the frames advance with the wheel or the finger, like a film you unroll. The most spectacular, and the heaviest.
- Sequence: the background changes scene as you go down.
- Reveal: two images stacked, and the mouse pierces the top one. With a finger, on a phone, the image underneath simply stays on screen.
Without video, the library also offers a still image and a strip of images that slides on its own.
What it costs
The background is part of your site’s price: it isn’t billed as a separate video. Its render, finer or coarser, and the way it moves make that price vary; you see it before starting the shoot, and a shoot that fails is refunded.
A whole site, with its copy, its background and four images, comes to $31 to $70, from the plainest render to the most spectacular. There is no subscription. To work out yours, the calculator gives the total.
A background that doesn’t slow the page down
A poorly prepared video can weigh tens of megabytes and hold back everything else. Before it is placed on your page, each background is reworked:
- re-encoded in H.264, 1,920 pixels wide: any wider, it would weigh twice as much with nothing gained to the eye;
- without a sound track, because a background doesn’t need one, and because browsers, as a rule, only start a muted video on their own: Chrome always allows it, and Safari on iPhone as soon as it is muted or silent;
- prepared for immediate playback: the start of the file is enough to begin, without waiting for the download to finish;
- paired with its poster, a still taken from the film that shows at once, while the video arrives.
The poster also counts for the speed Google measures. For a video, the Largest Contentful Paint, the time it takes to display the largest element on screen, keeps the earlier of two moments: the poster loaded, or the first frame of the film. It is rated good under 2.5 seconds.
The scroll video is cut into WebP images rather than played as a video: that is what keeps it smooth, in either direction.
Finally, if visitors have asked their system to reduce motion (a setting in Windows, iOS and Android, which browsers pass on to pages), the video fades away and the poster stays: the page is complete, and calm.