scroll-world Documentation

A skill that turn any brand into a scrollable 3D world

5,635 stars JavaScript JavaScript 1 file ยท ~1,453 tokens
RAW Doc

scroll-world

https://github.com/user-attachments/assets/b08e641e-985b-4bd4-83ff-6750272d0c37

An agent skill โ€” for Claude Code, Codex, and any SKILL.md-compatible agent โ€” that
builds an immersive, scroll-scrubbed "fly through the world" landing page for any industry or brand โ€” the kind where, as you scroll, a camera flies
from outside each scene into its interior, then flows on to the next scene with no
cuts
. One continuous connected flight through a little generated world (think the Emons
logistics site, applied to whatever you want).

Install

text
/plugin marketplace add oso95/scroll-world
/plugin install scroll-world@scroll-world

Then just ask for a scroll-through world landing page, or invoke /scroll-world.

Codex & other agents โ€” via the skills CLI

Using Vercel's skills CLI, which installs into
Codex, Claude Code, Cursor, and 20+ other agents:

bash
npx skills add oso95/scroll-world            # pick your agent(s) when prompted
npx skills add oso95/scroll-world -a codex   # or target Codex directly

In Codex, invoke it with $scroll-world (or /skills to browse), or just ask for a
scroll-through world landing page.

Manually (drop-in skill)

Copy the skill folder into your agent's skills directory:

bash
git clone https://github.com/oso95/scroll-world
cp -R scroll-world/skills/scroll-world ~/.claude/skills/   # Claude Code
cp -R scroll-world/skills/scroll-world ~/.codex/skills/    # Codex

Requirements

  • The Monid CLI with an API key and balance โ€” the default
    video-chain backend
    (Seedance 2.0, billed per clip in USD; see below).
  • The Higgsfield CLI, authenticated (higgsfield auth login),
    with credits โ€” renders the scene stills, the kling3_0 fallback, and the whole
    chain when Monid is absent.
  • ffmpeg / ffprobe for frame extraction and encoding.
  • Python 3 with Pillow (for the mobile portrait canvases; also the optional
    transparent-scene knockout).
  • The Codex CLI (optional) โ€” if present, the scene
    stills can be generated through Codex's built-in image_gen (the same GPT Image
    model), billed to a ChatGPT subscription instead of Higgsfield credits.
  • About the Monid default: verified 2026-07-25 โ€” first/last-frame conditioning
    frame-locks, so it renders the full seamless chain; frames travel via Monid's
    free workspace file system. Pay-per-use with no subscription or monthly expiry
    (a 6-scene 1080p chain โ‰ˆ $27). The skill re-checks the endpoint schema each
    build and keeps qualification probes in the pipeline for when the catalog
    changes; Higgsfield credits remain the fallback biller.

What it does

It generates the art with AI: cohesive isometric diorama scenes (GPT Image 2 โ€” via
Higgsfield, or the Codex CLI on a ChatGPT subscription) and the camera flights
themselves (Seedance image-to-video via Monid by default, pay-per-clip; Seedance
or Kling on Higgsfield credits as fallback โ€” only models that can frame-lock a
seam), scrubbed
by scroll position โ€” the same technique behind Apple's scroll-through product pages. The
camera genuinely moves; scroll only drives time. It's framework-agnostic: you get the
Higgsfield pipeline, the prompt templates, and a portable vanilla-JS scrub engine that
drops into plain HTML, Next.js, Vue, or a Python-served page โ€” nothing assumes a stack.

When invoked, the skill:

  1. Interviews you โ€” the subject/industry + pitch, a brand kit (import from a URL, hand
    it over, or have it proposed), art direction, the ordered scenes the camera visits,
    whether you want the mobile version (a second chain rendered natively in 9:16
    portrait โ€” composed for phones, not a crop of the landscape film), and the budget โ€”
    render tiers and stills source shown with estimated credit costs, approved before
    anything generates.
  2. Generates the assets โ€” one still per scene, one "dive-in" camera
    clip per scene, and the connector clips that join consecutive scenes, generated
    from the actual rendered frames of their neighbours so every seam is frame-identical.
    Mobile opt-in renders a parallel portrait chain the same way, frame-locked against its
    own 9:16 renders.
  3. Wires it up โ€” a config-driven scroll engine that plays the whole chain as one
    flight, serving the portrait clips and posters automatically on phones.

What's in the skill

text
skills/scroll-world/
โ”œโ”€โ”€ SKILL.md                    the procedure + the seam rule + gotchas
โ””โ”€โ”€ references/
    โ”œโ”€โ”€ prompts.md              intake checklist + every Higgsfield prompt template
    โ”œโ”€โ”€ pipeline.md             copy-paste batch scripts (generate โ†’ frames โ†’ connectors โ†’ encode)
    โ”œโ”€โ”€ scrub-engine.js         portable, config-driven scrub engine (blob-seek, lazy load, seam crossfade)
    โ”œโ”€โ”€ index-template.html     a minimal standalone page that mounts the engine
    โ””โ”€โ”€ knockout.py             background knockout for floating scenes

Notes

  • Asset generation costs money (~N image gens on Higgsfield credits + ~2N-1 video
    gens billed per clip on Monid by default; the mobile chain doubles the video gens)
    and takes a while โ€” the skill runs generations in the background and polls. Monid
    pricing is per-token and printed per run; Higgsfield pricing isn't exposed by its
    CLI, so the skill calibrates against your live balance. Either way the estimated
    total is stated before spending.
  • The generated .mp4/.webp assets are produced per project; they're not shipped here.

Star History

License

MIT โ€” see LICENSE.