Skip to content
Get packs

Guide · Open source

How to use scroll-world: install the agent skill and build a scroll landing page

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

scroll-world is an agent skill for Claude Code, Codex and other SKILL.md-compatible agents. It guides the agent through building a landing page where scrolling moves a camera through a connected set of generated isometric scenes. This guide covers installation, prerequisites, what the workflow produces and what it costs, so you can decide whether it fits your project.

scroll-worldoso95/scroll-world · ★ 10.7k · MIT

Quick start

  1. 1Check prerequisites. Confirm you have Claude Code, Codex or another SKILL.md-compatible agent, plus ffmpeg, ffprobe and Python 3 with Pillow.
  2. 2Set up generation services. Get a Monid CLI API key with balance, or an authenticated Higgsfield CLI with credits.
  3. 3Install the skill. Use the Claude Code plugin commands, or run npx skills add oso95/scroll-world (add -a codex for Codex).
  4. 4Describe your brand. Ask the agent for a scroll-through world landing page and answer its interview on subject, brand kit, scenes and mobile.
  5. 5Approve the budget. Review the estimated credit costs and stills source, then approve before generation starts.
  6. 6Wait for generation. Let the skill generate stills, dive-in clips and connector clips in the background while it polls for results.
  7. 7Wire up the page. Use the generated config with scrub-engine.js and index-template.html, or the framework of your choice.

Check the requirements before you install

scroll-world does not run as a standalone app. It is a skill that an AI coding agent follows, and the skill depends on several external services and tools.

The README lists these requirements: Claude Code or Codex (or another SKILL.md-compatible agent), the Monid CLI with an API key and balance, or the Higgsfield CLI with credits, ffmpeg and ffprobe, and Python 3 with Pillow.

  • Monid CLI with an API key and balance: the default video-chain backend.
  • Higgsfield CLI, authenticated with credits: renders scene stills and is the fallback.
  • ffmpeg and ffprobe for frame extraction and encoding.
  • Python 3 with Pillow for mobile portrait canvases.
  • Codex CLI (optional): can generate scene stills through its built-in image_gen, billed to a ChatGPT subscription.

Install scroll-world in Claude Code or Codex

For Claude Code, the README recommends installing it as a plugin. Run the two plugin commands, then ask for a scroll-through world landing page or invoke /scroll-world.

For Codex and other agents, use Vercel's skills CLI. Running the first command lets you pick your agents when prompted. The second targets Codex directly. In Codex, invoke the skill with $scroll-world, or browse with /skills.

/plugin marketplace add oso95/scroll-world /plugin install scroll-world@scroll-world npx skills add oso95/scroll-world npx skills add oso95/scroll-world -a codex

Install manually by copying the skill folder

If you prefer not to use a CLI, clone the repository and copy the skill folder into your agent's skills directory. The README gives paths for Claude Code and Codex.

  • The skill lives in skills/scroll-world inside the repo.
  • The folder contains SKILL.md, references/prompts.md, references/pipeline.md, scrub-engine.js, index-template.html and knockout.py.
git clone https://github.com/oso95/scroll-world cp -R scroll-world/skills/scroll-world ~/.claude/skills/ cp -R scroll-world/skills/scroll-world ~/.codex/skills/

Run the workflow to generate your scroll world

Once installed, ask the agent for a scroll-through world landing page. The skill interviews you first: the subject or industry and pitch, a brand kit, art direction, the ordered scenes the camera visits, whether you want a mobile version, and your budget.

Next it generates the assets: one still per scene, one dive-in camera clip per scene, and connector clips joining neighbouring scenes. The README says connectors are generated from the actual rendered frames of their neighbours so every seam is frame-identical. Finally it wires up a config-driven scroll engine that plays the chain as one flight.

  • Budget is shown and must be approved before anything generates.
  • Generations run in the background and the skill polls for results.
  • The generated .mp4 and .webp assets are produced per project and are not included in the repo.

Understand the cost before you start

Asset generation costs money. The README says the Monid default is pay-per-use with no subscription, and gives a rough example of about $27 for a 6-scene 1080p chain. Higgsfield pricing is not exposed by its CLI, so the skill calibrates against your live balance.

The README notes that the estimated total is stated before any spending happens. Generation also takes a while.

  • Monid pricing is printed per run.
  • Mobile chains roughly double the video generations, according to the README.

Use the scroll engine in your own page

The scroll engine is framework-agnostic according to the README. It is a portable vanilla-JS file, scrub-engine.js, that the README says works in plain HTML, Next.js, Vue or a Python-served page. The index-template.html file is a minimal standalone page that mounts the engine.

  • Scroll position drives time in the camera clip; the camera itself moves.
  • The engine supports blob-seek, lazy loading and seam crossfade, per the README.
  • Mobile visitors are served portrait clips and posters automatically when the mobile version is generated.

What people use it for

  • A logistics or product company wants a scroll-driven homepage that flies visitors through its operations.
  • A designer prototypes a visually striking brand homepage concept for client review.
  • A developer on a team already using Claude Code or Codex wants a repeatable process for this landing page style.
  • A marketer tests an immersive product tour before committing to a full build.

Frequently asked questions

Is scroll-world free?

scroll-world is released under the MIT licence, so the code is free to use. The README says asset generation is not free: it uses paid Monid or Higgsfield credits, with a rough example of about $27 for a 6-scene 1080p chain.

What do I need to install scroll-world?

You need an agent such as Claude Code or Codex, the Monid CLI or Higgsfield CLI with access, ffmpeg and ffprobe, and Python 3 with Pillow. Install the skill with the plugin commands, npx skills add oso95/scroll-world, or by cloning the repo and copying the skill folder.

Can I use scroll-world without Monid or Higgsfield?

The README lists Monid and Higgsfield as requirements. Monid is the default video backend and Higgsfield is the fallback and renders the stills. Without access to either service, the README does not describe a path to generate the assets.

Does scroll-world include a finished template?

No. The README says the generated .mp4 and .webp assets are produced per project and are not shipped in the repo. You generate the scenes and clips for your own brand.

Does scroll-world work with Next.js or Vue?

The README says the scroll engine is framework-agnostic and is a vanilla JavaScript file that works in plain HTML, Next.js, Vue or a Python-served page.

How does scroll-world compare to other tools?

The analysis for this listing notes there are no comparable projects listed. It is an agent skill rather than a website builder, so it depends on an AI coding agent and paid generation services.

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

scroll-world suits developers and teams who already use Claude Code or Codex and are willing to pay per project for AI-generated imagery and video. It is a poor fit if you need a lightweight, low-cost page or a finished template without a generation step.

Install options & downloads