Scroll films

How the sites where the camera moves as you scroll actually work, and where we got it wrong. One build, plenty of rough edges, offered as a starting point rather than an answer.

Give this to Claude Code

Open Claude Code on your laptop, paste this one line, and it sets itself up. You never touch a file.

Read this guide and save it as a command I can use in every project: (loading the address)

After that, saying "let's build a scroll film site" in any project is enough. Claude will already know the whole recipe, including the parts below.

Read this as a first draft, not a manual. It comes from one film, made quickly, by someone learning it on the way. Some of it is probably already out of date and some of it was likely never the best way to begin with. The most useful thing you can do with it is give it to Claude and tell it to find where we are wrong, which is what the section near the bottom is for.

The one idea

These sites look like one continuous camera shot moving through a real space. There is nothing three-dimensional in them.

The video is not a video. You make a short clip of a camera move, chop it into a few dozen still pictures, and then let the scroll position decide which picture is on screen. Scrolling down runs the camera forwards. Scrolling up runs it backwards, instantly. That is the entire trick, and everything else is craft on top of it.

You have already seen one. The Disneyland film is built exactly this way, six scenes of it.

The version everyone builds first, and why not to. The obvious approach is to put a normal video on the page and skip it forward as you scroll. It is jerky, and it cannot be fixed by trying harder. A video file only stores a handful of complete pictures and guesses the rest, so asking it to jump to an exact moment makes it stall or go blank. It is worst on phones. Going to still pictures afterwards is a rebuild, not a tweak, so start there.

What you need, and what it costs

What	Cost	What it is for
A Cloudflare account	Free	Putting the site online. These pages are too heavy to share any other way.
An account that makes pictures	Pennies	The opening still of each scene. Google AI Studio or OpenAI both do this.
An account that makes video	See below	Turning that still into a moving camera shot.

The video is the only real cost: about $1.20 for a five second clip. Our six scene film came to about $7 in total. That is cheap enough to play with and expensive enough that regenerating the same shot forty times is a genuine bill.

Set the accounts up in your own name, on your own card. Never work from someone else's key, including Munim's. A key that has been in a chat is in that chat forever.

One piece of software gets installed, called ffmpeg, and it is what does the chopping. Ask Claude to run /guardian before installing it, which is the house habit for anything new. It came back clean here, with one condition worth keeping: only ever point it at video you made yourself.

How a scene gets made

One still picture. The opening frame. Iterate here until you love it, because it costs almost nothing and everything downstream inherits it.
Turn it into a camera move. Describe what the camera does, not what happens: slow push in, crane up over the rooftops, drift left past the arch. Five seconds holds exactly one move.
Chop it into stills. About sixty pictures per scene. This is the ffmpeg step and Claude will run it.
Bind them to the scroll. Roughly one and a half screen heights of scrolling per scene, which is what makes the move feel unhurried rather than frantic.
Join the scenes. Make each scene's last frame the next scene's first picture and the joins disappear.

Three things that separate it from a slideshow

Scrolling through pictures on its own is flat. These three are what make people share it, and they are cheap to add.

Weight. The camera should not stop dead when your finger does. Let it coast and settle. This is where nearly all of the cinematic feeling comes from.
A little movement with the mouse. Shifting the image a few pixels towards the pointer reads as depth.
Things to click. Captions and small buttons over the picture, tied to the scene behind them. Without them it is a video. With them it is a page.

Three things that go wrong

The page goes black and nothing looks broken

This is the one that cost us a day. Publishing replaces the whole site with exactly the files in the folder you point at, so if the pictures are not in that folder they are deleted from the live site. The site then answers requests for them with the homepage instead of an error, so nothing complains anywhere. You get a black page and a clean report. If it happens, it is almost never the code. It is the pictures not being where they should be.

Named characters get refused after you have paid

Ask for a character somebody owns, Donald Duck being ours, and the model will happily draw it and then the service will refuse to hand it over. A described lookalike was refused too. Only a genuinely generic version came through. Fine to try, but expect it and have the generic idea ready.

Spending before the still is right

Every problem in a clip was already in the picture it grew from. Pictures cost a fraction of a penny. Clips do not.

Make Claude argue with this

This is the part worth more than the rest of the page. Once the guide is installed, hand it straight back to Claude and tell it to attack it.

Take the scroll film guide you just installed and treat it as a first draft written by someone learning. Go and research how people are actually building these right now. Find where the guide is wrong, where it is out of date, and where there is a better or simpler way. Watch what the people demonstrating it actually say they do, not just what the posts claim. Then tell me what you would change, and be blunt about it.

The people doing this well are mostly showing their working on X, in videos rather than in writing, which is awkward to research by hand and easy for Claude. If you connect your X account to Claude it can read your own saved posts and check them for you, which is a separate short setup and the single best thing you could add to how you work.

Where this could be wrong

Worth knowing before you lean on any of it.

All of it comes from one build, in July 2026. It is what happened to us, not a survey of what works generally.
The prices move. The $1.20 figure is what we were charged then. Check it on the day rather than trusting this page.
What gets refused changes. The rules on owned characters are the service's, they are not published clearly, and they shift.
Nobody has run the setup line above on a fresh laptop yet. Yours will be the first. If it does anything odd, that is worth saying rather than working around.
This is a point of view on how to do it, not the only way. Please argue with it.

Where this came from

Whole landing pages produced in one pass, and the same thing surviving a phone. Two posts from the same builder, already on your reading list.
The three-dimensional website that is not three-dimensional, which takes the technique apart.
The Disneyland film, our own build, still live.
fal pricing and Google AI Studio, the two places the video can come from.
ffmpeg, the one piece of software involved.