Skip to content
Get packs

scroll-world

An agent skill that generates a scroll-driven 3D-style world landing page for a brand.

GitHub Download source
Stars
10.7k
Forks
1.2k
Licence
MIT
Language
JavaScript
Last update
3 months ago
Type
AI model / agent

What it is

scroll-world is a skill for AI coding agents such as Claude Code and Codex. It guides the agent through making a landing page where scrolling moves a camera through a connected set of generated isometric scenes, flying from outside each scene into its interior without cuts. The art and camera clips are produced with AI image and video models, and a vanilla JavaScript scroll engine plays them back in a regular web page.

  • Generate a scroll-through landing page for a logistics, retail, or other industry brand
  • Produce isometric diorama scenes and camera flight clips for each section of a site
  • Add a portrait 9:16 mobile chain alongside the desktop version
  • Drop the vanilla JavaScript scroll engine into a plain HTML, Next.js, Vue, or Python-served page

Great for

  • Developers who want an immersive scroll-through landing page for a product or brand
  • Marketers or designers prototyping a visually striking homepage concept
  • Teams already using Claude Code or Codex who want a repeatable workflow for this style
  • People comfortable paying for AI image and video generation per project

Not ideal for

  • Anyone who needs a lightweight, low-cost page; asset generation costs money through Monid or Higgsfield credits, and the README gives a rough example of about $27 for a 6-scene 1080p chain
  • Teams without access to the Monid or Higgsfield services, since the README lists them as requirements
  • Users who want a finished template with no generation step, because the generated .mp4 and .webp assets are not shipped in the repo
Step-by-step guide: how to use scroll-worldInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    Install with a package manager

    You'll need: Claude Code or Codex, or another SKILL.md-compatible agent · Monid CLI with API key and balance, or Higgsfield CLI with credits · ffmpeg and ffprobe · Python 3 with Pillow

    Install via Vercel skills CLI (Codex or other agents)

    npx skills add oso95/scroll-world

    Target Codex directly

    npx skills add oso95/scroll-world -a codex

    Manual clone

    git clone https://github.com/oso95/scroll-world
  2. 2

    Run it

    • Install the skill using one of the install commands for your agent.
    • In Claude Code, run /scroll-world or ask for a scroll-through world landing page; in Codex, use $scroll-world.
    • Answer the intake questions about the brand, scenes, art direction, and budget, then approve the estimated cost.
    • Let the skill generate the stills and video clips, then use the scroll engine to wire them into your page.
  3. 3

    Get the most out of it

    • Provide a brand kit URL or specification at intake so the art direction matches your brand
    • Use the optional mobile version to get a portrait chain composed for phones rather than a cropped desktop film
    • Use the Codex CLI image_gen option for scene stills if you have a ChatGPT subscription, to reduce Higgsfield credit use
    • Check the per-run cost estimate before approving generation

Downloads

Source code (.zip)main branch · straight from GitHub

Strengths

  • Framework-agnostic: the scroll engine works in plain HTML and several common stacks
  • Seamless transitions are built in, with connector clips generated from neighbouring frames
  • MIT licensed and open source, with an install path for several agents

Trade-offs

  • Depends on paid third-party services (Monid, Higgsfield) and a Codex CLI option, so ongoing cost and account setup are required
  • Generation takes a while and runs in the background, and the README does not give a detailed cost model beyond examples
  • The README is truncated and does not fully document configuration or troubleshooting

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.