Skip to content
Development
Skill

/scroll-world

Build an immersive scroll-scrubbed "fly through the world" landing page for any industry or brand using Higgsfield. As the visitor scrolls, a pre-rendered camera flies from outside each scene into its interior, then flows on to the next scene with NO cuts — one continuous

From plugin
coco
264174 skills37 agents41 commands
Install
$ npx -y skills add coco-research/coco --skill scroll-world --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/scroll-world

Context preview

The summary Claude sees to decide when to auto-load this skill.

Build an immersive scroll-scrubbed "fly through the world" landing page for any industry or brand using Higgsfield. As the visitor scrolls, a pre-rendered camera flies from outside each scene into its interior, then flows on to the next scene with NO cuts — one continuous

SKILL.md

scroll-world.SKILL.md
name: scroll-world
description: >
  Build an immersive scroll-scrubbed "fly through the world" landing page for any
  industry or brand using Higgsfield. As the visitor scrolls, a pre-rendered camera
  flies from outside each scene into its interior, then flows on to the next scene
  with NO cuts — one continuous connected flight (Emons-style isometric diorama world,
  or any art direction you pick). The skill interviews the user for the topic, the
  story beats/sections, and brand kit, then generates cohesive scenes + seamless camera
  clips with Higgsfield and wires a portable, framework-agnostic scroll-scrub engine.
  The video chain renders through Monid by default (Seedance 2.0, pay-per-clip
  USD — capability re-checked each build, see Step 4) with Higgsfield credits as
  the fallback biller. Use when the user wants a "3D world" /
  "browse-through-the-industry" hero, a scroll cinematic, a diorama landing, or to
  turn a business into a scrollable world.
allowed-tools: Bash, Read, Write, Edit, AskUserQuestion, Skill
domain: design

scroll-world

Produces a landing page where **scroll drives a camera**: it dives from outside a scene into its interior, then flies out and into the next scene, continuously, with no visible cuts. The visuals are AI-generated — stills via Higgsfield (or Codex), the video chain via **Monid by default** (pay-per-clip Seedance 2.0; Higgsfield credits as fallback) — and the page just scrubs pre-rendered video by scroll position. This is the same technique behind Apple's scroll-through product pages — the camera genuinely moves, scroll only drives time.

**What you generate:** N scene stills → N "dive-in" camera clips → N-1 "connector" clips that join consecutive scenes seamlessly → a portable scrub engine that plays the whole chain as one flight.

**The one rule that makes or breaks it:** seams must be *frame-identical*. Read [The seamless chain](#step-5--the-seamless-chain-the-critical-part) before generating any connector. Getting this wrong is the single most common failure and produces a visible "pop" between scenes.

Do not assume a frontend framework. The scrub engine in `references/scrub-engine.js` is self-contained vanilla JS (it builds its own DOM + injects its own CSS into a container you give it), so it drops into plain HTML, Next.js, Vue, a Python-served page, anything. The value of this skill is the Higgsfield pipeline, the prompts, and the seam method — not the framework.

---

Step 0 — Bootstrap

1. **Monid CLI — the default video-chain backend.** Check `monid --version`, `monid keys list` (active key) and `monid balance` — the chain is billed per clip in USD (Step 1.7 has the numbers; a 1080p N=6 chain ≈ $27). If the CLI is missing or the balance can't cover the chain, say so and fall back to rendering the chain on Higgsfield credits instead — same model, same pipeline, different biller (Step 4 → Monid backend). 2. **Higgsfield CLI — still required even on the Monid path**: it renders the scene stills (`gpt_image_2`) and is the home of the `kling3_0` NSFW fallback and the fallback chain. If `higgsfield` is not on `$PATH`, install per the `higgsfield-generate` skill. If `higgsfield workspace list` fails auth, ask the user to run `higgsfield auth login` (interactive OAuth — you cannot run it) and, if needed, `higgsfield workspace set <id>`. Confirm credits cover the stills (~N image gens) — plus `(2N-1)` video gens if the chain falls back here. 3. **ffmpeg / ffprobe** on `$PATH` (frame extraction + encoding). 4. **An image tool** for background knockout if you want floating scenes: PIL (`python3 -c "import PIL"`), or `cwebp`/`sips`. Optional — see Step 3. 5. **(Optional) Codex CLI** — if `codex` is on `$PATH` (≥ 0.125) and `codex login status` reports a ChatGPT login, the scene stills can be generated through Codex's built-in `image_gen` (the same gpt-image-2 model) billed to the user's ChatGPT subscription instead of Higgsfield credits — offer it at Step 1.7, command in Step 2. Absence just removes the option. 6. Caveats: macOS ships **bash 3.2** (no `declare -A`); don't use associative arrays in scripts. Higgsfield generations take **3–8 min each** — always run them detached (background) and poll, never a foreground blocking call. Reference-by-job-UUID is rejected by media flags — pass **local file paths** to `--image/--start-image/--end-image`. Video models differ in accepted params (e.g. Kling has no `--resolution`) and in whether they support start/end-image conditioning at all — before batching, confirm the chosen model's schema with `higgsfield model get <job_type>` and see the Step 4 model table.

---

Step 1 — Interview the user

The **subject is the user's to state — ask it as an open question in plain prose**, never a fabricated multiple-choice. A made-up list of industries biases them and reads as you deciding their business for them; let them answer in their own words (their real business, a client's, or any idea). Reserve structured multiple-choice (`AskUserQuestion` in Claude Code; a plain either/or question elsewhere) for the genuinely enumerable, lower-stakes choices below — art direction, camera style, and brand-kit approach — and even there, signal they can go their own way ("Other"). Ask only what you can't sensibly default. Cover:

1. **Subject** (ask openly, not multiple-choice) — "What should this world be about? Your business, a client's, or any idea — a word or a sentence is fine." Capture the industry/product + a one-line pitch (e.g. "a bubble tea company, from leaf to last sip"), and a brand name if they have one; otherwise you'll propose one below. 2. **Brand kit** — offer three paths, pick one:

  • Import from a URL: `higgsfield marketing-studio brand-kits fetch --url <site> --wait`

(pulls name, colours, tone). Then read it back with `brand-kits list --json`.

  • The user hands you palette + name + tone directly.
  • Y
Read more
Ships withcoco

Meet Coco. A superintelligent agent framework powered by an advisory board of 389 world-class minds. Scale your AI assistant into a complete engineering department with 142 skills, 277 commands, and persistent state. Universal compatibility. Local privacy. Free and open source.

Get the whole plugin

Other skills on coco.