scroll-world

Turn one prompt into an animated 3D scroll website. This is an AI agent skill (Claude Code, Codex, Cursor, and any SKILL.md-compatible agent): you tell it what kind of site you want, approve one still image, and it generates a little 3D world — cohesive isometric scenes, real camera flights between them — and wires it into a landing page where scrolling flies the camera through the world with no cuts. The same technique behind Apple's scroll-through product pages.

Everything is generated and billed through one KIE.ai API key — the scene images (GPT-Image-2) and the video clips (Seedance 2.0). No other accounts, no CLI installs, no OAuth.

1. Get a KIE API key — sign up at kie.ai, add some credits, then Dashboard → API Keys. Export it:

   export KIE_API_KEY=kie-...   # or put it in your shell profile / .env

   KIE is the pay-as-you-go platform that hosts the AI models this skill uses. One key covers everything: stills are ~10 credits each, video clips start around ~76 credits — the skill always shows you the total estimate and asks before spending anything.

2. Install the skill — pick your agent:

   # Claude Code (recommended)
   /plugin marketplace add mrdainami/scroll-world
   /plugin install scroll-world@scroll-world
   
   # Codex, Cursor, and 20+ other agents
   npx skills add mrdainami/scroll-world
   
   # Or manually: copy the skill folder in
   git clone https://github.com/mrdainami/scroll-world
   cp -R scroll-world/skills/scroll-world ~/.claude/skills/   # Claude Code
   cp -R scroll-world/skills/scroll-world ~/.codex/skills/    # Codex

You also need ffmpeg, jq, and curl on your machine (most dev setups have them).

Ask your agent for a scroll-through world landing page (in Claude Code you can just invoke /scroll-world). Then:

1. It interviews you — what the site is about (your business, a client's, any idea), colors/brand, art style, which scenes the camera should fly through, and your budget. Nothing renders until you approve the estimate.
2. You sign off one still image — it generates the first scene; thumbs-up or thumbs-down until you like the look. That look locks the whole world's style.
3. It builds the world — every scene image, every camera-flight clip, and the connections between them, then stitches it all into one seamless flight and wires up the page (plain HTML, Next.js, Vue — anything; the scroll engine is self-contained vanilla JS).

A typical 5-6 scene site runs a few thousand KIE credits at 1080p (roughly half at 720p) — the skill states the exact estimate up front and can do a cheap 480p preview pass first.

The skill itself only needs the env key. But if you use Claude Code or Claude Desktop, you can also wire @dainami/kie-mcp so Claude gets first-class KIE tools it can use for everything else too (image edits, music, any KIE model):

git clone https://github.com/mrdainami/kie-mcp.git ~/mcp/kie-mcp
cd ~/mcp/kie-mcp && npm install && npm run build
claude mcp add --scope user kie --env KIE_API_KEY=YOUR_KEY -- node ~/mcp/kie-mcp/dist/index.js

Verify with claude mcp list → kie ✓ Connected. (Claude Desktop has a drag-and-drop path — see the kie-mcp README.)

skills/scroll-world/
├── SKILL.md                    the procedure the agent follows
└── references/
    ├── prompts.md              every prompt template
    ├── pipeline.md             the generation scripts
    ├── scrub-engine.js         the scroll engine (drop into any site)
    ├── index-template.html     a minimal standalone page
    └── knockout.py             background removal for floating scenes

Fork of oso95/scroll-world (MIT) — the skill, the seam method, and the scroll engine are oso95's work; this fork moves all generation onto one KIE API key (the original uses Monid + Higgsfield accounts, both still supported as alternates). Technical details + verification receipts: FORK-CHANGES.md. License: MIT — see LICENSE.