Scroll cinematics

The part of a site that makes someone stop.

You have seen a page where the picture moves as you scroll and the whole thing feels like film. Here is what that actually is, how it gets built, and when it is worth doing for a business like yours.

Three live examples at the bottom of this page. Nothing loads until you ask for it.

No mystery in it

It is not 3D. It is a film you scroll.

The page holds a canvas. Behind it sits a numbered run of still images, sliced out of a short video clip. Your scroll position picks which one shows. Scroll down and the frames advance. Scroll back up and they run backwards. Nothing is being rendered live, and there is no 3D engine anywhere in it.

The depth people read as 3D comes from the source clip. A camera move that pushes through a room, around a bottle, down a stairwell. The clip carries the movement. The page just hands the visitor the dial.

That is the whole trick, and it is worth knowing because it explains the behaviour. The effect is predictable. It falls back to a still picture on a slow connection or when someone has asked their phone to stop animating things. And it needs no plugin, no app and no player.

The scroll becomes the edit.

Most pages ask a visitor to read. This one gives them something to do, and the doing is the story. That is the whole reason it holds attention where a video header does not.

How it gets built

Four stages, each one signed off before the next.

1

The keyframe

One still image per scene, made and judged before anything moves. If the still is wrong, everything after it is wrong, so this is where the work sits. Stills are cheap and we redo them until the scene is right.

2

The clip

The approved still becomes a short clip, about six seconds, carrying one camera move and nothing else. We never spend clip money on a still you have not approved.

3

The frames

The clip is sliced into a numbered run of stills and compressed hard. That run is what a browser actually downloads, so this is where the page weight is won or lost.

4

The scrub page

The frames get wired to scroll position, with a still poster and the headline sitting underneath. The page reads properly before a single frame arrives, and it still reads properly if none of them do.

You see the still before we animate it, and the clip before we build the page. Every stage ends with a yes or a change, in writing.

Money and time

What it costs and how long it takes.

The Build
$4,000
one site, fixed

One cinematic site. One treatment adapted to your brand: the brand read, a three scene storyboard, approved keyframes, clips, assembled and deployed. The four stages above, with your sign off at each one.

The Showpiece
from $6,500
the flagship

For the hero product or the landmark property. Four to six scenes, or a full journey that runs the length of the page, on a storyboard written for you rather than adapted.

Care
$150
a month

Hosting, copy and content updates, and seasonal re-shoots so the site does not quietly go out of date. Optional, and you can add it later.

The Build is fixed, so the number does not move while the work does. The Showpiece has a range because the scene count and the storyboard are the variables, and both are settled before anything is made. Either way you get the number at the start and there is a ceiling on it. If a scene fights us and the spend is heading past that ceiling, we stop and ask rather than quietly spending your money.

The machinery is fast. A still takes a minute and a clip takes a few. The time goes into judging them: deciding a scene is not right, changing it, and looking again. A single cinematic section moves in days. A full multi scene build takes longer, because there are more decisions in it, not more machinery.

There is no shoot to schedule, no crew to book, no location to hire and no day rate. In film work that is where nearly all of the money and nearly all of the calendar normally goes. It is not in this, which is why the numbers above look the way they do.

Cinematic builds are delivered by The Deliverators, the studio side of the same shop, and run on Skaffold underneath. Same people, same discipline, different name on the door.

Your side of it

What we need from you.

  • A clear answer on the one moment that wins you the job.
  • Your logo, your colours, and whatever real photography you already have.
  • Twenty minutes to look at the stills and say yes or change it.
  • Twenty more to do the same with the clips.
  • An honest read on whether your customers decide on feel or on price.
  • Nothing else. No shoot, no crew, no location, no day off the tools.

The honest part

It is the wrong choice for plenty of businesses.

Worth doing when

  • One moment carries the sale. A finish, a transformation, a room, a product in the hand.
  • You are being judged on feel as much as on price.
  • You are the premium option and the site does not say so yet.
  • There is genuinely something worth looking at.

Not worth doing when

  • Your customer is holding three quotes and wants a number.
  • The gap is follow up, not first impression. A film will not answer the phone.
  • Nobody on your side can look at an image and decide inside a week.
  • Most of your traffic is phones on poor reception with no patience.

If two on the right sound like you, the money is better spent on the system underneath, and we will tell you that on the call rather than after the invoice.

See it running

Three you can go and scroll right now.

01 / Demonstration, not a client

A concept film for Ink Gin.

Built on our own initiative and offered as a gift. Husk Distillers is not a Skaffold client and this is not an Ink Gin production. It is the clearest example we have of a single idea, the colour change, carried the whole way down a page.

02 / The full gallery

Six cinematic builds, and fourteen more sites.

Hotels, logistics, finance, hospitality and fitness, on the studio showcase. Real client work, our own brands and demonstrations, each labelled on the page so you can tell which is which.

03 / Cinematic, applied to a trade

The flagship, and four trade sites carrying one.

The House is sixteen trades building one home, told as a single scroll from bare block to the lights coming on. Around it sit four trade demos with a cinematic section doing one job each.

Every business named on this page is either a demonstration we built or a brand we made a demonstration about. None of them are presented as clients.

A film is a good answer to the right question.