scroll-world README

The project's README from github.com/oso95/scroll-world. As one markdown file: README.md.

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

/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:

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:

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

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

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

Star History

Star History Chart

License

MIT — see LICENSE.

scroll-world (oso95/scroll-world)

scroll
Searching Database…

10.3K ·GitHub
Scroll-world
What is this?scroll-world is an agent skill that builds an immersive, scroll-scrubbed 'fly through the world' landing page for any brand or industry — the camera flies from outside each scene into its interior and on to the next with no cuts, all driven by AI-generated art and video.
Is this a standalone app, or a skill I add to my coding agent?It is a skill — a SKILL.md-compatible package meant to be installed into Claude Code, Codex, or any other agent that supports skills, not something you run on its own.
What do I need besides my coding agent to actually run it?You need the Monid CLI (API key and balance, the default pay-per-clip video backend), the Higgsfield CLI authenticated with credits (renders stills and the Kling fallback), plus ffmpeg/ffprobe and Python 3 with Pillow for frame work; the Codex CLI is optional for generating stills via ChatGPT instead of Higgsfield credits.
Does running this cost money?Yes — asset generation is billed per image and video clip (roughly N image gens on Higgsfield credits plus 2N-1 video gens on Monid, doubled if you also render the mobile chain), with a 6-scene 1080p build estimated around $27; the skill shows the estimated total before spending anything.
What AI models actually generate the art and video?Scene stills are generated with GPT Image 2 (via Higgsfield, or the Codex CLI on a ChatGPT subscription), and the camera-flight clips come from Seedance image-to-video through Monid by default, with Seedance or Kling on Higgsfield credits as a fallback.
Does it support a mobile version of the landing page?Yes, opting in renders a second chain natively in 9:16 portrait — composed for phones rather than cropped from the landscape film — and the scroll engine serves it automatically on mobile devices.
Why does scrolling move the camera instead of just triggering an animation?It mirrors the technique behind Apple's scroll-through product pages: the camera genuinely flies through pre-rendered, frame-locked video seams, and scroll position only drives playback time, not the motion itself.
How does the skill decide what scenes to build?It interviews you for the subject/industry, pitch, brand kit, art direction, the ordered scenes the camera should visit, whether to include a mobile version, and your budget, then shows estimated credit costs before generating anything.
What are similar projects?taste-skill, godogen, 3dicon, EpicInfographics, procedural-film, dioramas, brag, herk-edit-kit
Which topics is it in?landing-page, scroll, ffmpeg, video-generation, 3d, image-generation, skill, skills, animation, generative-ai, agent-skills, codex
Creator
oso95
Size
<0.1 MB
Stars
10.3K
Updated
CommitJul 29
Age
3mo
Commits · 90 Days