scroll-world Turns Any Brand Into a Scrollable 3D World

The Problem

Building an Apple-style scroll-narrative landing page used to have only two paths: pay a motion studio, or wire up Three.js cameras and scroll listeners yourself and spend three months getting it smooth.

The issue is never “can it be done.” It is “is it worth doing.” A camera that flies from outside a scene into its interior, then flows seamlessly into the next scene with zero cuts — all the craft lives in the seams. The eye is ruthless about frame drops; miss one and it looks cheap.

scroll-world tries to package the whole pipeline for you: generate the scenes, generate each camera flight, stitch adjacent scenes with frame-matched connector clips, then hand you a drop-in scroll engine.

Project Overview

scroll-world is an open-source agent skill by oso95, compatible with Claude Code, Codex, and any SKILL.md-aware agent. GitHub currently shows it as a three-thousand-star project, MIT licensed, written mainly in JavaScript.

It is a bundle of “procedure + prompt templates + scroll engine,” not a turnkey site generator. The repo is deliberately lean:

• SKILL.md: full procedure, seam rule, and gotchas
• references/prompts.md: intake checklist + every Higgsfield prompt template
• references/pipeline.md: copy-paste batch scripts (generate → frames → connectors → encode)
• references/scrub-engine.js: config-driven scroll engine (blob-seek, lazy load, seam crossfade)
• references/index-template.html: minimal standalone page
• references/knockout.py: background knockout for floating scenes

The pitch is framework-agnostic. You get the Higgsfield pipeline, the prompt templates, and a vanilla-JS scroll engine that drops into plain HTML, Next.js, Vue, or a Python-served page. No stack lock-in.

Why This One

The genuinely rare part of scroll-world is how it handles seams.

Most AI video stitching dies at the same spot: adjacent clips do not start on the same frame, so the connection flickers as you scroll. scroll-world generates the connector clip directly from the actual rendered frames of both neighboring scenes, so every seam is frame-identical. It is written into SKILL.md as a hard “seam rule” — the most overlooked, most damage-doing detail is treated as a constraint.

Another differentiator: the camera actually moves. It uses Seedance or Kling image-to-video, restricted to models that can frame-lock a shot. Scroll only drives the timeline; the camera motion is genuinely generated. Same technique behind Apple’s product pages.

It also lowers two decision barriers:

• Before spending, it interviews you (industry, brand kit, scene order, mobile portrait option, budget) and estimates total cost against your live balance — nothing generates until you approve
• Mobile is not a crop of the landscape film. It renders a parallel 9:16 portrait chain composed for phones

Quick Start

Note the heavy external dependencies before you begin:

• Higgsfield CLI, authenticated (higgsfield auth login) with credits
• ffmpeg / ffprobe for frame extraction and encoding
• Python 3 with Pillow for portrait canvases and knockout
• Codex CLI (optional): if present, scene stills can use Codex’s image_gen on a ChatGPT subscription instead of Higgsfield credits

Install as a Claude Code plugin:

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

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

For Codex and other agents, use Vercel’s skills CLI:

npx skills add oso95/scroll-world

Manual drop-in copies 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/

Highlight Code

The scroll engine is pure front-end and config-driven. You do not need to understand the video pipeline — just feed it a scene list:

// scrub-engine.js config shape (excerpt)
const world = new ScrollWorld({
  scenes: [
    { still: "scene1.webp", dive: "scene1-dive.mp4", poster: "scene1-poster.webp" },
    { still: "scene2.webp", dive: "scene2-dive.mp4", poster: "scene2-poster.webp" },
  ],
  connectors: ["conn-1-2.mp4"],
  mobilePortrait: true, // auto-swap to portrait chain on phones
});
world.mount(document.getElementById("stage"));

What it does is plain but critical: blob-seek maps scroll position straight to a video frame, lazy loading pulls clips on demand, and seams crossfade. index-template.html already mounts the engine on a minimal page — copy it, change the scene paths, and it runs.

Community and Ecosystem

The project is young: 13 commits on main, single-digit issues and PRs. But the three-thousand-star and several-hundred-fork scale says the demand is real — “Apple-style scroll narrative” is something many people want but never start.

The risk is shared by every skill that depends on a paid external API: the core assets are generated live by Higgsfield, the CLI does not expose per-generation pricing, and cost tracks your balance. The skill calibrates and quotes before spending, which is more honest than most同类 tools.

When to Use It, When Not To

Use it when:

• You want a memorable launch page or hero for a brand, product, or industry
• You will pay for visual impact and accept several hours of generation wait
• You have Higgsfield credits, or are willing to route stills through the Codex CLI on a ChatGPT subscription

Do not use it when:

• Budget is tight and you want free or fully local — it leans hard on paid Higgsfield credits
• You need to change copy or scenes frequently — every change means regenerating video assets, and iteration is not cheap
• You want a zero-intervention “type copy, get a site” tool — it is an expert-in-a-box; key calls (scene order, brand, budget) are still yours

One line: it demotes Apple-style scroll narrative from a studio project to an agent task, but not to a free lunch.

Repository: https://github.com/oso95/scroll-world