Guide · Agent skill

How to use the Scroll World Storytelling agent skill

Updated 2026-11-02 · written with AI from the project's own documentation and checked against our catalogue data

Scroll World Storytelling is an agent skill that turns a long article, case study, or brand story into a one-page website where scrolling moves the reader through a connected visual journey. It is for designers, marketers and developers who want a story-led landing page instead of ordinary stacked sections. After this guide you will know what the skill does, how to install it, how to trigger it with a natural request, and what it needs before you start.

Scroll World StorytellingMengTo/Skills · MIT Download the skill

Quick start

1Download and unzip. Download the skill ZIP from this page and unzip it so SKILL.md sits at the top of the skill folder.
2Place the skill folder. Move it into ~/.claude/skills/ for personal use or a project's .claude/skills/ folder, or upload it under Settings → Capabilities → Skills in the Claude apps.
3Gather your source. Collect the complete article, case study or narrative, plus any brand assets and references you have rights to use.
4Make the request. Ask for a scroll world or scrollytelling landing page and name the mode if you know it, for example HTML / data / type.
5Review the beat ledger. Before code is written, check the 5 to 7 beats, the style bible and the chosen mode, and confirm the facts match your source.
6Test and verify. Check scrolling in both directions, mobile layout, reduced motion and the browser console before publishing anything.

What the skill makes the agent do

The skill tells an AI agent to take your source material and build one connected scroll experience. The agent first reduces the story to 5 to 7 beats, each with a headline, a short body sentence and a motion idea, ending in one final action. It then chooses one of three production modes: scrubbed video tied to scroll position, a real-time Three.js 3D scene, or semantic HTML with SVG charts and animated type.

The skill also includes demo files for each mode and guidance on encoding video for scrubbing. It asks the agent to preserve the source's facts and caveats and never to invent proof, testimonials or metrics.

Pick exactly one mode: video scrub, Three.js world, or HTML / data / type.
Structure the story into beats: hook, old way, new rule, mechanism, proof, payoff, action.
Keep native document scrolling; the skill says never to hijack the mouse wheel.
Check the result for legibility on mobile and with reduced motion.

Install the skill from the ZIP

Download the ZIP of the skill from this page and unzip it. The folder should contain SKILL.md at its top level along with the demo and agents folders. Then place it in one of two locations: your personal skills folder at ~/.claude/skills/, or a project's .claude/skills/ folder if you want it available only inside one repository.

If you use the Claude apps instead of the file system, upload the skill under Settings, then Capabilities, then Skills.

Personal use: unzip into ~/.claude/skills/.
Single project: unzip into the project's .claude/skills/ folder.
Claude apps: Settings → Capabilities → Skills, then upload.

Trigger the skill with a natural request

You do not need to type the skill name. The skill is matched by its description, so a request that mentions a scroll world, fly-through landing page, article-to-website transformation, animated planet, data scrollytelling, video-scrubbed page, connected visual journey, or a story-led alternative to stacked sections should activate it. You can also name it directly by writing $scroll-world-storytelling, as the included prompt files do.

Include your source material and say what the page should earn. The skill will then ask for or infer the mode and produce a beat ledger and style bible before writing code.

Turn this case study into a scroll world landing page with one final signup CTA.
Use $scroll-world-storytelling in HTML / data / type mode to turn this report into a scrollytelling page.
Build a fly-through landing page from this product journey story, using Three.js.

Choose the right mode

Video scrub suits cinematic imagery of places or products. Three.js suits planets, objects, maps and systems that benefit from spatial depth. HTML / data / type suits reports, launches and metrics, and is the lightest and most accessible option. The skill advises against mixing modes by default.

For video mode, the skill expects ffmpeg to encode the clip. The sample command in the skill uses libx264, strips audio with -an, and sets a small keyframe interval (-g 8) so the browser can seek responsively. If you choose Grok Imagine as the generator, that is a paid service with its own account and credentials.

Proof and numbers: HTML / data / type.
Spatial, interactive metaphor: Three.js world.
Cinematic camera move through a place or product: video scrub.

ffmpeg -i source.mp4 -an \
  -c:v libx264 -preset slow -crf 20 -pix_fmt yuv420p \
  -g 8 -keyint_min 8 -sc_threshold 0 \
  -movflags +faststart output.mp4

Check the result before you ship it

The skill sets a bar for completion: a visitor can explain the arc after one pass, scrolling works forward, backward, slowly and with a fast flick, there is no visible jump at a seam, and the page stays legible on mobile and with reduced motion. Any claim that the page is finished should come with browser, console, responsive and asset evidence.

The skill also says not to spend generation credits, publish, deploy or replace production files without your approval. Review those steps yourself.

Test in a modern web browser across device sizes and with reduced-motion turned on.
Check the browser console for errors.
Confirm every fact and quote against the source.

What people use it for

Turning a customer case study into a one-page story with a single sign-up action.
Presenting a research report as a scrollytelling page with an animated chart and bars driven by scroll position.
Building a product launch page that moves through a 3D planet or system with the Three.js mode.
Converting a long-form brand narrative into a cinematic video-scrubbed landing page using ffmpeg-encoded footage.

Frequently asked questions

Is the scroll-world-storytelling skill free?

The skill is published under the MIT licence, which permits use, modification and distribution subject to its conditions. The video mode can optionally use Grok Imagine, which is a paid AI video generator with its own account, so that cost is separate.

What do I need to use it?

You need an agent environment that supports skills, ffmpeg if you use video mode, and a modern web browser to check the page on different devices and reduced-motion settings. The skill also runs scripts and uses the network, so review those before running it.

How do I install agent skills from a ZIP file?

Unzip the download so SKILL.md is at the top of the folder, then move it to ~/.claude/skills/ for personal use or to a project's .claude/skills/ folder. In the Claude apps you can instead upload it under Settings → Capabilities → Skills.

Which mode should I pick: video, Three.js or HTML?

Pick video for cinematic footage of places or products, Three.js for planets, objects or systems you want to explore in 3D, and HTML / data / type for reports and metrics. The skill recommends one mode per page rather than mixing them.

Does the skill write the page for me?

Yes, the agent builds the page from your source, but it first produces a beat ledger and style bible and keeps your facts and caveats intact. Expect to review the output and test it yourself.

Is this skill safe for an article with rights-restricted images?

The skill asks the agent to keep rights records and avoid claiming generated or unverified media is real footage. It cannot verify rights itself, so you must confirm you have permission to use any source images or video.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use this skill if you want a cinematic, story-led landing page built from an existing article, case study or brand narrative and you are comfortable reviewing agent output. Pick something simpler if you only need a brochure site or a page with strict performance or accessibility budgets, since the process is elaborate and motion-heavy.

Download the skill