How to One-Shot a Scroll Animation Website With AI

You can now build a cinematic, scroll-scrubbed animation website — the kind agencies charge five figures for — with a single AI skill and one prompt. I ran it with Claude Fable 5 and again with GPT-5.6 Soul inside Codex, and both produced a coherent, premium-looking site where scrolling flies you through a connected series of animated scenes. No hand-editing frames. No stitching videos together by hand. Here's exactly how it works, what it costs, and where each model wins.

The short version: this is one of those things that was a genuine pain three months ago and is now basically a fill-in-the-blank workflow. If you've ever tried to build one of these sites manually, you know the difference.

What Is a Scroll Animation Website?

A scroll animation website ties an animation to your scroll position. As you scroll down, you don't jump between static sections — the camera flies through a continuous world. One scene unfolds into the next. Think of the high-end landing pages you see win Awwwards: a subway pulls into frame, a house opens up, a hotel unfolds, a bird takes off and flies.

Under the hood, the technique is clever but not magic:

• Start with a single image. This is the anchor frame that sets the art direction for everything else.
• Turn that image into a video. The scroll animation you're watching was, at one point, an actual video clip.
• Pull the individual frames out with FFmpeg. Every frame gets extracted one by one.
• Map each frame to a scroll position. Where you are on the page determines which frame shows. Scrolling becomes scrubbing through the footage.

There's more going on behind the scenes to keep it smooth instead of janky — easing, preloading, and blending between clips. And critically, when the scenes get generated, each one references the others so the whole thing looks like a single coherent story instead of a random pile of clips.

What Is the Scroll-World Skill?

The scroll-world skill is what packages all of that into a guided, one-shot workflow. The real credit goes to Peter Wing, who built the original version and open-sourced it. I found it on Twitter, forked it, and made a few improvements:

• Budget tiers — so you can control how many scenes you generate and not torch your credits. Most people don't need six scenes.
• Mobile handling — improvements to how the site behaves on smaller screens, from safe cropping up to full portrait video chains.
• SEO-related fixes — the practical stuff that makes a spectacle site usable as an actual marketing page.

Both versions — Peter's original and my fork — are worth looking at. The skill is the entire value here. Without it, you're making multiple videos, grabbing starting frames, trying to make them line up, and extracting frames one by one by one. It's tedious. The skill collapses all of that into an interview and a wait.

How Does the Scroll-World Skill Work Step by Step?

The skill holds your hand the whole way — it does not just run and dump a finished site on you with no input. Here's the flow.

1. The interview. You invoke the skill (/scroll-world) and tell it what you're building. For my demo I said: a website for a boutique Japan travel brand, art direction leaning into an origami style. If you don't know what look you want, you can go back and forth with the AI and it'll ask you questions until you land on a direction. I already knew what I wanted, so I moved fast — but you don't need a fully formed idea to start.

2. Budget and mobile choices. Next it asks how many scenes you want and how deep to go on mobile. Scenes are where the credits go. For the demo I ran six scenes, which is a lot of video and a long journey from top to bottom — honestly overkill for most people. On mobile you pick anything from a safe crop up to a full portrait chain with extra videos generated just for phones. For this build I kept it lean: crop-safe, cheapest option.

3. The journey proposal. The skill lays out what each scene will look like and how many generations it'll take — image generations, scene videos, plus connector clips and cross-fades between them. My run came out to roughly nine to ten generations total, with an expected generation time that's usually conservative. It doesn't take as long as "AI video" makes you think.

4. The anchor frame. Once you approve the plan, it generates the anchor — that first still image that sets the entire art direction. This is the step you have to nail. If you say yes to an anchor you don't love, every scene after it inherits that look. I liked mine, so I moved forward.

5. It builds. From there it generates the scenes, the videos, the connectors, and wires up the scroll engine. My site finished in about 32 minutes: four scenes, roughly ten generations, live on localhost and ready to scroll.

How Does It Generate the Images and Videos?

All the asset generation runs through the Higgsfield MCP, and you never have to leave the terminal. It calls the image models — namely GPT Image 2 — and the video models — namely Seedance — through the MCP or CLI.

To wire it up, you go to Higgsfield, open the MCP and CLI section, copy the MCP URL, and run the authentication process. After that, you drop in the skill — copy the URL and hand it to Claude Code or Codex, or install it as a plugin. Either path works.

There's one important difference between the two agents:

• In Claude Code, there's no native image generation, so Higgsfield carries the entire load — both images and video.
• In Codex with GPT-5.6 Soul, you get native image generation. You can have Codex create the anchor and scene images with GPT Image 2 itself, and only send the video generation out to Higgsfield.

Both get you there. It just changes where the image work happens.

Fable 5 vs GPT-5.6 Soul: Which One Wins?

I built the same site in both, and the interesting difference showed up in the scene transitions.

Inside the Codex + GPT-5.6 Soul build, the individual scenes looked great. The subway coming into frame, the detail inside each scene — excellent. But some of the scene-to-scene cuts were hard cuts. Going from scene one to two, and two to three, felt abrupt. The exception was the scene three to four transition, which was genuinely great: the hotel opens up, and you can see scene four blurred in the background, popping into focus and giving the whole thing a real 3D sense of depth before it seamlessly hands off. If every transition looked like that one, I'd have been thrilled.

In the Claude Code + Fable 5 build, the scene-to-scene transitions were noticeably sleeker across the board. Elements push out of the top of the frame, the camera zooms out, and you flow into the next scene as close to seamlessly as you get. Scene to scene, Fable 5 had the edge.

My verdict: Fable 5 wins on transition smoothness. But keep the context — both of these were one-shot from a single skill. That's the part that's mind-blowing. Neither result required me to babysit the frame stitching.

Can You Turn This Into a Real, Functional Website?

Yes — and this is the part that matters if you're building for a client instead of just making a demo. Right now the output is a visual spectacle. The hard problem was always the spectacle: making an animated scrolling site that looks coherent, doesn't feel janky, and doesn't look low-quality. That's the thing that used to take real time and skill.

Once you have that base, the rest is standard web work:

• What does the text say over each scene?
• Where's the CTA, and how do you pull the user from the hero all the way to a form?
• How do you layer the conversion path on top of the animation?

Every website already solves these problems. You're not reinventing anything — you're adding a normal marketing layer on top of a hero experience that would've cost you weeks. The spectacle was the moat, and the skill just handed it to you.

What Does It Cost to Build?

The cost is in Higgsfield credits, and it scales with scene count. My six-scene run cost about 800 Higgsfield credits. That's a lot, and it's why I built the budget tiers into my fork.

If you're not on a higher-tier plan, four scenes is the sweet spot. You can go as low as three. Fewer scenes means fewer image generations, fewer video generations, and fewer connector clips — which is where the credits actually get spent. Don't default to six just because it's offered; most sites don't need that long a journey.

Frequently Asked Questions

What is the scroll-world skill?

It's an AI skill that builds a cinematic, scroll-scrubbed animation website in one shot. It runs you through an interview, generates a series of connected scenes through the Higgsfield MCP, extracts the video frames with FFmpeg, and maps them to your scroll position. It's a fork of Peter Wing's open-source original with added budget tiers, mobile handling, and SEO fixes.

Do I need both Claude Code and Codex to use it?

No. It works in either one. Claude Code runs everything through Higgsfield since it has no native image generation. Codex with GPT-5.6 Soul can generate the images natively and only send video generation to Higgsfield. Pick whichever agent you already use.

How much does it cost to generate a scroll animation website?

My six-scene build cost around 800 Higgsfield credits. Cost scales with scene count, so if you're not on a premium plan, stick to three or four scenes to keep credit usage down.

How long does it take to build?

My site finished in about 32 minutes for four scenes and roughly ten generations. The skill's estimated generation times tend to be conservative — it usually runs faster than the AI-video reputation would suggest.

Is the output a finished, functional website?

It's a finished visual layer — the hard part. You still add the text, CTA, and conversion path on top, but that's standard web work that any site already does. The spectacle, which used to be the hard and expensive part, is what the skill hands you.

---

If you want to go deeper into building with AI skills like this, join the free Chase AI community for templates, prompts, and live breakdowns. And if you're serious about building with AI, check out the paid community, Chase AI+, for hands-on guidance on how to make money with AI.