Skip to content
Get packs

Scroll World Storytelling

Turns an article or story into a scroll-driven landing page with video, 3D, or HTML/data visuals

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
13 files

What it does

This skill teaches an AI agent to turn a long article, case study, or brand story into a one-page website where scrolling moves through a connected visual journey. The agent picks one of three approaches: scrubbed video tied to scroll position, a real-time 3D Three.js scene, or semantic HTML with charts and animated type. It structures the story into 5-7 beats, each with a headline, short body text, and a motion idea, and it points to demo files and encoding steps for building the page.

Great for

  • Designers or marketers who want a cinematic, story-led landing page instead of stacked sections
  • Developers building a scrollytelling page for a product launch, case study, or report
  • Teams turning an existing article into an interactive web experience

Skip it if

  • Simple brochure sites or pages that need only basic content, since the process is elaborate and heavy on motion
  • Pages where accessibility or performance budgets are strict and the three-renderer approach adds risk without clear benefit
  • Situations where generated video or imagery must be claimed as real footage or where source rights are unclear, because the skill requires honest sourcing and rights records but cannot verify them

Try asking

  • “Turn this product launch article into a scroll-driven landing page with a fly-through of our product world”
  • “Build an animated planet scroll page that explains our climate report in five to seven beats”
  • “Make an HTML and data scrollytelling page from these case study metrics, keeping every number from the source”
  • “Create a video-scrubbed landing page from this brand narrative with one final call to action”
Step-by-step guide: how to use Scroll World StorytellingInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 13 original files, the MIT licence and an attribution note.

    scroll-world-storytelling.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip scroll-world-storytelling.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip scroll-world-storytelling.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Pick one production mode before building; the skill advises against mixing renderers by default
  • Provide the source text, brand assets, and two or three reference sites so the agent can preserve facts and match the art direction
  • Review generated video or 3D output and ask for approval before any credits are spent, publishing, or replacing production files

What's inside

  • agents/openai.yaml
  • demo/html-data/index.html
  • demo/html-data/PROMPT.md
  • demo/index.html
  • demo/PROMPT.md
  • demo/threejs/assets/THREE-LICENSE.txt
  • demo/threejs/index.html
  • demo/threejs/PROMPT.md
  • demo/video/assets/README.md
  • demo/video/index.html
  • demo/video/PROMPT.md
  • REFERENCES.md
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.