Edited by humans. Written by AI. How our editing works
All articles

Scroll World: AI-Generated Scroll Animations Explained

Chase AI demos Scroll World, an open source skill that uses AI coding agents to build cinematic scroll-animated websites in a single prompt session.

Dev Kapoor

Written by AI. Dev Kapoor

July 12, 20267 min read
Share:
A stylized 3D isometric landscape featuring an origami red crane, Asian-inspired buildings, and a central teacup surrounded…

Photo: AI. Mika Sørensen

There's a particular kind of website that stops you mid-scroll — the ones where the scene moves with you, where a crane unfolds as you inch down the page, or a subway rushes in from the right while you're still reading the headline. Building that kind of experience the traditional way is genuinely miserable. You're rendering video, extracting individual frames with FFmpeg, mapping frame indices to scroll positions, wrangling multiple animations to feel like one coherent story. It takes time, patience, and a specific kind of stubbornness that most people don't have on deadline.

That's the problem a developer named Peter Wing appears to have quietly solved — and it's what Chase AI, a YouTuber and AI tools educator, is now showing off with a forked and improved version of Wing's open source project, Scroll World.

What Scroll World Actually Does

The core mechanic is elegant in retrospect, even if executing it manually was nightmarish. You start with a single still image. That image gets turned into a short video. FFmpeg then extracts every individual frame from that video, and a bit of JavaScript maps each frame to a scroll position on the page. As the user scrolls down, they're essentially scrubbing through a video timeline — except it feels like the world is moving around them.

Chase AI describes the underlying challenge well: "You're making multiple videos, you're getting the starting frames, you're trying to make them match up, you're taking all the frames out one by one by one. It's a pain in the butt."

The Scroll World skill automates this entire pipeline. You invoke it through Claude Code or OpenAI's Codex, provide some creative direction, and the agent handles image generation, video generation, frame extraction, and the glue code that ties it all together — all without leaving the terminal.

The image and video generation runs through the Higgsfield platform, accessed via an MCP (Model Context Protocol) server or CLI. Connecting it is straightforward: grab the MCP URL from the Higgsfield dashboard, authenticate, and your AI coding agent gains access to Higgsfield's generation models directly from the command line.

The Fork, and What Changed

Chase AI credits Peter Wing as the original author — he found the project on Twitter, Wing open sourced it, and that's the stack this whole demo builds on. What Chase AI added in his fork (also linked in the video description) are two practical improvements: budget tiers that let you control how many scenes you generate, and better mobile handling, including an option for a full portrait video chain that creates separate assets for mobile viewports.

The budget question matters here because generating multiple AI videos for a single website isn't free. The Higgsfield credit system is opaque enough that the specific cost of any given project will depend on your plan tier and what generation options you select — so it's worth checking Higgsfield's current pricing directly before committing to a multi-scene build. Chase AI's broader point, though, is that four scenes hits a reasonable sweet spot between visual impact and cost. Six scenes, which he used for his original Claude Code demo, is — his words — "probably overkill for most people."

The Demo: A Japan Travel Brand in Origami

For the Codex demo, Chase AI builds a website for a fictional boutique Japan travel brand, directing the AI toward an origami visual aesthetic. The workflow starts with a brief interview: the skill asks what kind of site you're building, what each scene should depict, how many scenes you want, and how aggressively you want to handle mobile optimization. You can arrive with a fully formed creative vision or just start talking — the agent will ask questions and help you figure it out.

The "anchor image" step is where the creative direction crystallizes, and Chase AI flags it as the moment that deserves the most attention: "This is the part you really have to nail because if you don't like it and you say yes, everything's going to be based on it." Every subsequent scene will reference the anchor's aesthetic, which is how the tool ensures visual coherence across what would otherwise be a bunch of unrelated AI generations. One style, one story, multiple chapters.

After approving the anchor, you basically wait. In Chase AI's demo, the full four-scene build took 32 minutes — which is, depending on your perspective, either impressively fast for what's being generated or a good time to make coffee.

The result: a Japan travel site with scenes moving from city streets and subway arrivals, through a traditional house unfolding, to a hotel, ending with a bird in flight. Visually, it lands. The individual scenes are strong. The per-scene motion is genuinely cinematic.

The Honest Part: Where It Falls Short

Chase AI doesn't pretend the output is perfect, and that candor is worth noting. His main complaint is scene transitions. The Codex-generated version produces hard cuts between most scenes — "When we go from scene one to scene two, pretty hard cut." Scene three to scene four happens to look great, with a blurred background element gradually coming into focus before the transition, giving the whole thing a real sense of depth. But that quality isn't consistent across the build.

His comparative read is that the Claude Code version handles scene-to-scene transitions more smoothly overall — describing scenes that "push out of the top" into the next rather than cutting abruptly. That's an interesting data point, not a verdict: these are one-shot outputs from two different AI coding agents running the same skill, and iteration would almost certainly close the gap.

The larger question Chase AI raises at the end is the right one: this is a visual foundation, not a complete website. "I think the technical problems of creating an animated scrolling website like this that looks coherent and doesn't look janky and doesn't look low quality is pretty difficult." That problem appears to be largely solved. What remains — CTAs, copy, forms, actual user flows — is the more conventional web work that any competent developer or AI agent can layer on top.

The Open Source Angle

This is where it gets interesting from a community perspective. The foundation of this whole thing is Peter Wing's open source project. Chase AI forked it, improved it, and is now distributing both versions. That's the OSS model working as intended: someone builds something clever, posts it on GitHub and Twitter, a second person finds it, adds mobile support and budget controls, and suddenly a workflow that required specialist expertise is accessible to anyone with a terminal and an API key.

The Scroll World skill is essentially a very long, very opinionated prompt — a set of instructions that tells an AI coding agent how to orchestrate a complex multi-step process. Skills like these are becoming their own quiet category of open source contribution: not code libraries exactly, but reusable reasoning structures that make AI agents dramatically more capable for specific tasks. Whether that pattern gets treated with the same care and attribution that traditional OSS contributions receive is an open question. Chase AI's explicit credit to Wing is a good sign. Not everyone in this space is as scrupulous.

For developers watching this space, the more durable takeaway isn't about any specific model or platform — it's that the effort floor for visually ambitious web work just dropped significantly. A year ago, a cinematic scroll-animated website for a boutique travel brand was a multi-day project. Now it's a 32-minute agent run and some honest feedback about which transitions need polish.

Whether that changes who gets to build premium-looking digital experiences, or whether it just makes cheap work cheaper while the ceiling stays the same — that's the conversation this tool is quietly opening.


Dev Kapoor covers open source software and developer communities for Buzzrag.

From the BuzzRAG Team

AI Moves Fast. We Keep You Current.

Framework breakdowns, tool comparisons, and AI coding insights — distilled from the best tech YouTube creators. Free, weekly.

Weekly digestNo spamUnsubscribe anytime

More Like This

Bold white and blue text announcing Claude Code skills upgrade, featuring NotebookLM and Gemini 3.1 logos with a terminal…

NotebookLM + Claude: Teaching AI Agents Domain Expertise

A developer demonstrates using NotebookLM to generate Claude Code skills—custom knowledge modules that teach AI agents specific domains in minutes.

Dev Kapoor·4 months ago·6 min read
Orange background with "10X DESIGN" text, Claude Code app icon with crown, and Impeccable/Awesome Design.md branding…

Ten Tools to Fix Claude Code's Terrible Design Aesthetic

Claude Code generates the same purple gradients and Inter font on every site. Here are ten plugins and skills that might actually fix its design problem.

Marcus Chen-Ramirez·3 months ago·8 min read
A retro pixelated "Claude Code" logo plus symbol next to a reconstructed caveman face illustration on a rust-colored…

When Being Less Articulate Makes AI Models More Accurate

A GitHub repo forcing Claude to 'talk like a caveman' went viral. The research behind it reveals something unexpected about how large language models fail.

Dev Kapoor·3 months ago·5 min read
Retro pixel art style image with orange robot characters wearing sunglasses against a desert cityscape backdrop with…

Claude Code's Agent Teams: The Coordination Layer Nobody Saw Coming

Anthropic quietly released Agent Teams in Claude Code—an experimental feature that lets AI agents coordinate like actual dev teams. How it works, what it costs.

Dev Kapoor·5 months ago·6 min read
Three pixelated characters in a loop cycle with hypnotic eyes on the center character, illustrating repetitive AI…

Claude Code Loop Types: A Practical Breakdown

AI LABS maps five Claude Code agentic loops—from stateless to self-improving—and explains which use case each one is actually built for.

Dev Kapoor·2 days ago·7 min read
Three professionals smiling against an orange background with blue banner text reading "IT JUST WORKS

Anthropic Engineers Have No Consensus on Claude Code

Ray Amjad attended a Claude Code event in Tokyo and found Anthropic engineers running wildly different workflows. What that non-consensus actually means for developers.

Dev Kapoor·1 week ago·7 min read
Bold orange and white text "CLAUDE CODE FREE" with pixel art character and AI tool icons on dark background with dotted…

Google's Gemma 4 Turns Claude Code Into a Free Local Tool

Google's new Gemma 4 models let developers run Claude Code locally for free. Here's what works, what doesn't, and who this actually serves.

Marcus Chen-Ramirez·3 months ago·6 min read
Bold yellow text "KARPATHY SKILL IS CRAZY!" overlays a screenshot of Claude AI interface with code editor and task…

Karpathy Skills Repo: Discipline Over Features for AI Code

Andrej Karpathy's lightweight GitHub repo tackles AI coding agents' behavioral problems with four principles that prioritize reliability over power.

Samira Barnes·3 months ago·6 min read

RAG·vector embedding

2026-07-12
1,666 tokens1536-dimmodel text-embedding-3-small

This article is indexed as a 1536-dimensional vector for semantic retrieval. Crawlers that parse structured data can use the embedded payload below.