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
631200 skills53 agents42 commands3 hooks

Claude Code

$ npx -y skills add coco-research/coco --skill scroll-world --agent claude-code

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
@coco-research
Ships withcoco

495 personas across 13 departments, 229 skills[^installed] and 388 commands in the full catalog (coco 1.9.0, 2026-10-21). Agent skills, slash commands and subagents for Claude Code, Cursor, Codex and other AI coding agents.

631200 skills53 agents
Get the whole plugin

Stars on GitHub

Momentum

stars in total
631
Star history of coco-research/coco on GitHub, a chart by star-history.com

Other skills on coco.

create-rule

create-rule

Create Cursor rules for persistent AI guidance. Use when the user wants to create a rule, add coding standards, set up project…

@coco-research@coco-researchInstall Skill
create-skill

create-skill

Guides users through creating effective Agent Skills for Cursor. Use when the user wants to create, write, or author a new skill,…

@coco-research@coco-researchInstall Skill
create-subagent

create-subagent

Create custom subagents for specialized AI tasks. Use when the user wants to create a new type of subagent, set up task-specific…

@coco-research@coco-researchInstall Skill
migrate-to-skills

migrate-to-skills

Convert 'Applied intelligently' Cursor rules (.cursor/rules/*.mdc) and slash commands (.cursor/commands/*.md) to Agent Skills…

@coco-research@coco-researchInstall Skill
agent-lightning

agent-lightning

Train and optimize AI agents using Microsoft's Agent Lightning framework with reinforcement learning. Use when setting up agent…

@coco-research@coco-researchInstall Skill

More skills from other plugins.

brainstorming
Auto-invoked

brainstorming

You MUST use this before any creative work - creating features, building components, adding functionality, modifying behavior, or…

@obra@obraInstall Skill
ask-matt

ask-matt

Ask which skill or flow fits your situation. A router over the skills in this repo.

skills2w309k
@mattpocock@mattpocockInstall Skill
accessibility
Auto-invoked

accessibility

Design, implement, and audit accessible UI to WCAG 2.2 Level AA across Web, iOS, and Android — semantic ARIA roles and labels,…

ecc2w293k
@affaan-m@affaan-mInstall Skill
compiler-commit

compiler-commit

Use when you want to verify compiler changes and commit with the correct convention. Runs tests, lint, and format, then commits…

react5d252k
@facebook@facebookInstall Skill

Questions about scroll-world.

Which coding agents can use scroll-world?
scroll-world installs in Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode and Windsurf with the skills CLI, using each agent's flag shown on this page. Flowy's auto-invocation, which fires a skill when your prompt matches, runs in Claude Code only.