Scroll world

Make a landing page where scrolling flies a camera through a world of scenes, built from AI pictures and video.

A Scroll world is a landing page where the visitor's scrolling moves a camera. It dives into one scene, flies out, crosses to the next scene and dives in again, with no cuts, like a guided tour of your business. Each scene is a picture and a short video made with AI, and a small script plays the videos as you scroll.

The method and the scroll script come from the open-source scroll-world project by cyw (MIT licence). Site Haus runs the whole process for you.

Start one#

On the home screen, choose the Scroll world icon (a rounded scroll shape) above the box. Rest the pointer on it to see its label. A window opens with your Scroll worlds and a New Scroll world button.

1. Describe it. Give it a name and a sentence, such as "a bubble tea company, from the tea leaf to the last sip". Press Suggest the journey and the AI proposes the scenes, the colours and the words. Or choose I will write it myself.
2. Edit the scenes. Each scene has a name, a description of what is in it (this is what the picture is painted from), a small label, a headline, one sentence and up to three tags. Choose between 2 and 7 scenes and put them in the order the camera should fly through them. Pick a look (clay diorama, paper craft, glossy toy or neon night), the background and palette colours, and the button on the last scene.
3. See the cost. You see how many pictures and clips will be made, and how much video. Then press Start building.
4. Watch it build. The steps fill in as they finish: pictures, dive-in clips, connecting clips, then the page. Finished pictures appear as you go. When it is done, press Open the project.

Building takes a while, because each video clip takes a few minutes. You can close the window and come back: it keeps going, and you can Pause and carry on later.

What you get#

An ordinary web app project, like any other. Open it in the preview, change the words by chatting, and publish it. It holds the page, the scroll script, one picture and one dive-in clip for each scene, and one connecting clip between each pair of scenes. The scroll script is saved with its licence file, which should stay with it.

How the seams stay smooth#

Each connecting clip starts on the last frame of one dive-in clip and ends on the first frame of the next, so every join lands on the pixels that were really rendered. A short crossfade hides what is left. This is why the dive-in clips are made first.

Who pays#

Pictures and video cost money to make. There are two ways to pay, and you can use either:

• Your own key. Connect a fal key in Integrations, under AI pictures and video. fal bills you directly and Site Haus charges nothing. See AI pictures and video.
• Site Haus credits. If the site owner has turned this on, pictures and clips are charged to your included usage and then your credits, with a small markup, one at a time and only after each one works. Add credits without leaving the app.

The cost shown before you start is an estimate for one clean run. A clip that needs to be made again costs a little more.

If something stops#

A step that fails is tried again up to three times. If it still fails, or you run out of credits, the build pauses and says why. The pictures and clips already made are kept. Fix the problem (add credits, or check your key), then press Start building again. Only what is missing is made again.

Tips#

• Name concrete things in each scene: tanks, crates, an awning, string lights, people doing the work. The picture follows what you write.
• Keep the same look for every scene. That is what makes it feel like one world.
• Put the hero product or the payoff in the last scene. It carries the button.
• Five to six scenes is a good length.