scroll-world
A skill that builds a landing page where scrolling flies a camera through a generated 3D world
Install
/plugin marketplace add oso95/scroll-world
/plugin install scroll-world@scroll-worldInvoke with /scroll-world.
This is third-party code. Review the repository files before installing.
What it does
The skill builds a promo page where scrolling scrubs pre-rendered video: the camera dives into each scene, then flies on to the next with no cuts. The agent first interviews you on brand, scenes, art direction, mobile version and budget, and shows cost estimates before generating. It then renders isometric scenes with GPT Image, fly-in clips with Seedance or Kling, and connector clips from the actual neighbouring frames so seams match. Finally it wires a portable vanilla JS engine that works in plain HTML, Next.js or Vue and serves portrait clips on phones.
Who it is for. For designers, frontend developers and marketers who want a striking promo landing page without manual 3D animation.
Good fit when
- You need a cinematic hero for a brand or industry
- You want a scroll-through product showcase page
- You have a video generation budget and want to skip motion design work
Not a fit when
- There is no budget for paid image and video generation
- You need a lightweight fast page without heavy video
- You need generation services reachable without restrictions
Example request
/scroll-world build a landing page for a logistics company: warehouse, port, truck, officeLimitations
Generation is paid: requires the Monid CLI with key and balance and the Higgsfield CLI with credits, optionally Codex CLI on a ChatGPT subscription for stills. The author estimates a six-scene 1080p chain at about 27 USD, and the mobile version doubles video count. Needs ffmpeg and Python 3 with Pillow. Generation takes a while.
How to disable. Remove the scroll-world plugin via /plugin, with npx skills remove scroll-world, or delete the scroll-world folder from the skills directory.
Security check
- Spends money on paid image and video generation
- Runs external CLIs and ffmpeg
README in short
The README shows a demo and three install routes: Claude Code plugin, skills CLI for Codex and other agents, and manual folder copy. It lists the paid generation CLIs and video tooling required. It describes three stages: interview, generating scenes and connector clips, and wiring the engine. It notes that generation costs money and takes time. MIT licensed.
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 --- # 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. **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*. ## Step 0 — Bootstrap 1. **Monid CLI — the default video-chain backend.** Check `monid --version`, `monid keys list` (active key) and `monid balance`. 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. 3. **ffmpeg / ffprobe** on `$PATH` (frame extraction + encoding).
FAQ
Is this real WebGL 3D?
No, it is pre-generated video scrubbed by scroll position.
Will it spend money without asking?
No, it shows a cost estimate and waits for approval before generating.
Related
Official shadcn/ui skill and MCP server: the agent searches registries, adds components via the CLI and follows the library's rules
A frontend design skill with 23 commands, live browser iteration and 61 detector rules for common AI-generated UI tells
Vercel Agent Skills
Agent Skills
Vercel's skills: React and Next.js performance, UI guideline audits, React Native, component composition and deploys
Three skill plugins for Google Stitch: screen generation, code to design and React builds from mockups