Start here
What you will make, the method in one line, what you need and how long it takes.
Most sites made with AI look the same: a gradient, a big vague headline, three cards with icons, a row of logos. Visitors have seen that page a thousand times and they scroll past it.
This guide shows you how to make the other kind: a premium spatial motion website, the sort that sells for $2,000, with a short film in it that moves when the visitor does. Hover over a product and it turns, opens or lights up. Scroll down the page and a camera travels through a scene, frame by frame, as if the visitor were holding it.
You do not need to know how to code, how to use 3D software or how to edit video. You need four free accounts and an idea.
What you will make
By the end you will have a live site with one of these, or both:
- A hover film. One short clip that plays when the pointer is over it and comes back to rest when the pointer leaves. It loops cleanly because it starts and ends on the same picture.
- A scroll film. Four short clips joined into one continuous shot that plays forwards as the visitor scrolls down and backwards as they scroll up, with your headlines appearing at the right moments.
Every site in the Spatial Sites gallery was made this way or close to it. Open Camper, Unfolded and scroll slowly to see a scroll film, and hover over the boot on Molt Lacquer Boot to see a hover film.
The method in one line
Make still pictures first, then let a video tool fill in the movement between them, then let an AI builder put the video on a page and tie it to the pointer or the scroll.
- Idea. Pick something that moves in a way that shows off the business (chapter 1).
- Frames. Make five still images in ChatGPT, one for each key moment (chapter 2).
- Clips. In Google Flow, turn each pair of neighbouring frames into a clip: 1 to 2, 2 to 3, 3 to 4, 4 to 5 (chapter 3).
- Technique. Decide how the film is driven: hover (chapter 4) or scroll (chapter 5).
- Files. Make the video small and scrub-friendly (chapter 6).
- Build. Give the files and a prompt to your AI builder (chapter 7).
- Polish. Make it fast, readable on a phone and free of the usual AI giveaways (chapter 8).
Chapter 9 gives you a coach: a prompt you paste into ChatGPT or Claude that walks you through every step above, asks you questions, writes your prompts for you and checks your work.
Why frames first
If you ask a video tool for "a camper van unfolding into a tiny home" you get whatever it imagines, and the next clip will not match the first. If you give it the exact first picture and the exact last picture, it only has to invent the movement in between. You stay in charge of what the visitor sees, and every clip joins the next one perfectly because the last frame of one clip is the first frame of the next.
That one idea is the whole trick. Everything else in this guide is detail.
What you need
| What | Used for | Cost |
|---|---|---|
| A ChatGPT account | Making the still frames | The free plan makes only a few images a day; a month of Plus makes this much quicker |
| A Google account with Flow | Turning frames into clips | 50 free credits a day, enough for a few clips; see chapter 3 |
| An AI site builder | Building the page | Lovable, Replit, ChatGPT, Claude, Grok, Cursor or Muse; most have a free tier |
| A free video converter | Making the video scrub smoothly | HandBrake (free, Windows and Mac) |
Optional: a domain name for when you publish, and a free video editor such as Clipchamp, iMovie or CapCut if you would rather join clips yourself.
How long it takes
Your first hover site: an afternoon, most of it spent getting the frames right. Your first scroll site: a day, because you make five frames and four clips and you will throw some away. Once your clips are ready, the build itself is one prompt and a few rounds of small fixes, usually well under an hour.
You get much quicker with practice. The slow part is always the pictures, never the code.
How to read this guide
Read chapters 1 to 3 in order, because they build on each other. Then read chapter 4 if you are making a hover film or chapter 5 if you are making a scroll film. Chapters 6 to 8 apply to both.
Every prompt in this guide sits in a grey box with a copy button. Words in square brackets, like [your product], are for you to replace. Leave everything else as it is: the wording is deliberate.