Guide · Agent skill
How to use the scroll-world agent skill (3D scroll landing page)
Updated · written with AI from the project's own documentation and checked against our catalogue data
scroll-world is an agent skill that lets an AI agent turn a business or idea into a landing page where scrolling moves a camera through a pre-rendered miniature world. This guide explains what the skill does, how to install it, how to ask for it in plain language, and what it needs before you start. You will finish knowing whether the workflow fits your project and budget, and how to run it without surprises.
Scroll-Driven 3D World Landing Pageoso95/scroll-world · MIT Download the skill Quick start
- 1Install the skill. Download the ZIP, unzip it into ~/.claude/skills/ or a project's .claude/skills/ folder, or upload it under Settings → Capabilities → Skills.
- 2Check your tools and accounts. Confirm the Monid CLI has an active key and balance, the Higgsfield CLI is logged in, and ffmpeg and ffprobe are on your PATH.
- 3Describe your world. Ask for the scroll-world page in plain words and say what the subject is, in your own words.
- 4Answer the interview. Give your brand kit, pick an art direction, choose a camera style and approve the ordered list of sections.
- 5Let the agent generate the assets. The agent creates scene stills, camera clips and connector clips in the background, polling until each job completes.
- 6Review the seams. Play the page and check each join between scenes for pops before publishing.
- 7Embed the scrub engine. Place the output in your site using the self-contained scrub engine, which works in plain HTML or any framework.
What is an agent skill, and what does scroll-world make the agent do?
An agent skill is a folder of instructions and helper files that an AI agent loads when a task matches it. scroll-world covers one job: building a scroll-controlled landing page. The visitor's scrolling drives a camera that flies from outside each scene into its interior, then continues to the next scene as one connected flight.
The agent interviews you about the subject, brand colours and art style. It then generates scene images and connecting camera video clips with paid AI image and video services, and wires them into a self-contained JavaScript engine that plays the clips in order. The skill does not assume a particular web framework.
- Scene stills are generated first, one per section of your page.
- Each scene gets a camera clip that dives into it, and connector clips join consecutive scenes.
- The output is a scrub engine that maps scroll position to video time.
Install the scroll-world skill from the ZIP or the Claude apps
Download the scroll-world ZIP from the skill page and unzip it. For a personal setup, place the unzipped folder in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder so only that project uses it.
If you use the Claude apps, you can instead upload the skill under Settings → Capabilities → Skills. Either way, the skill's main instructions live in SKILL.md, and its helper files sit in a references folder.
- Personal install: ~/.claude/skills/ (available across projects).
- Project install: .claude/skills/ inside the project folder.
- Claude apps: Settings → Capabilities → Skills, then upload.
Check the requirements before you start
The video chain is billed per clip through the Monid CLI by default, and it needs an active key and a USD balance. The Higgsfield CLI and an account with credits are still required, because it renders the scene stills and is the fallback for video. You also need ffmpeg and ffprobe on your PATH.
Python 3 with PIL is optional and only needed for background knockout, which makes scenes float. Codex CLI with a ChatGPT login is optional and can generate stills instead of using Higgsfield credits.
- Monid CLI with an active key and USD balance (default video backend).
- Higgsfield CLI and account with credits (stills and fallback video).
- ffmpeg and ffprobe on PATH.
- Python 3 with PIL for optional background knockout.
- Optional: Codex CLI with ChatGPT login for still generation.
monid balanceTrigger the skill with a natural request
You do not need special syntax. Ask for what you want in plain words, and the agent matches the request to the skill. The skill's description names phrases such as a 3D world hero, a browse-through hero, a scroll cinematic, a diorama landing page, or turning a business into a scrollable world.
Expect the agent to ask questions before generating anything. It will ask what the world is about in your own words, how you want the brand kit handled, which art direction to use, and what camera style you want.
- Example: Build a scroll-driven 3D world landing page for my bubble tea company.
- Example: Turn our agency client's coffee brand into a scrollable diorama hero.
- Example: I want a browse-through-the-industry hero for our farm-to-table business.
Choose a camera style and brand kit
The agent always asks for the camera style, because it sets the film's personality. Fly through the world dives into each scene and hops to the next with big aerial moves. One continuous walkthrough is a single forward flight that never pulls back. Locked isometric glide keeps one fixed angle, so the world slides past.
For the brand kit, you can import from a URL with the Higgsfield marketing studio command, hand over a palette and name directly, or approve a palette the agent proposes. The default art direction is a soft matte low-poly clay diorama with warm light.
- Fly through the world: the most expressive look, and the default for diorama styles.
- One continuous walkthrough: a forward-only flight, the default for realistic styles.
- Locked isometric glide: the calmest option and the cheapest to re-roll.
higgsfield marketing-studio brand-kits fetch --url <site> --waitReview seams and deploy the page
The skill's main rule is that seams between clips must be frame-identical. A mismatch shows as a visible pop between scenes. The skill itself warns that these must be checked, so plan to review the output rather than accept it blindly.
The scrub engine is plain JavaScript that builds its own DOM and injects its own CSS into a container you give it. It can go into plain HTML, Next.js, Vue or a Python-served page. Because the output is pre-rendered video and images, check page weight before launch.
- Watch each join between consecutive scenes at full speed.
- Confirm the page loads acceptably on your target connections.
- Keep the scene art direction identical across all stills.
Safety notes: scripts and network use
The skill runs scripts and uses the network. It calls paid AI image and video services through command-line tools, so each run can spend credits or USD. Check your Monid balance and Higgsfield credits before a long chain, and confirm the chosen video model's options with the model get command.
Higgsfield generations can take three to eight minutes each. The skill runs them in the background and polls for results, so the agent may keep working while you wait. Authentication steps such as higgsfield auth login are interactive and must be run by you.
- Scripts run locally and call external paid services.
- Costs accumulate per clip; a six-scene chain at 1080p is roughly $27 according to the skill's assessment.
- Log in yourself with higgsfield auth login when prompted.
higgsfield model get <job_type>What people use it for
- A homepage hero for a bubble tea brand that walks visitors from leaf to last sip.
- A campaign page for a product launch that flies through the company's value chain.
- An agency pitch piece that gives a client a branded scroll experience for their industry.
- A demo of an industry's workflow, such as a farm-to-table journey, as one continuous flight.
Frequently asked questions
Is the scroll-world skill free?
The skill itself is released under the MIT licence. The AI generation it relies on is paid: the Monid chain is billed per clip in USD, and Higgsfield stills and fallback video use credits. The skill's assessment puts a six-scene chain at 1080p at roughly $27.
What do I need to install scroll-world?
You need the skill folder placed in ~/.claude/skills/ or a project's .claude/skills/ folder, or uploaded in the Claude apps under Settings → Capabilities → Skills. You also need the Monid and Higgsfield CLIs, ffmpeg and ffprobe on your PATH, and Python 3 with PIL for optional background knockout.
Does scroll-world work with React, Next.js or WordPress?
The scrub engine is self-contained vanilla JavaScript, and the skill does not assume a frontend framework. It can go into plain HTML, Next.js, Vue or a Python-served page. Check your own site's setup before embedding.
Why does my scroll page show a pop between scenes?
A pop means the seam between two clips was not frame-identical. The skill's main rule is that connector clips must match the frames at each join, so regenerate the affected connector and check the seam again.
Can I use scroll-world without a Higgsfield account?
The skill still needs the Higgsfield CLI for scene stills and as the fallback for video. Without an active Higgsfield account and credits, the workflow cannot complete as described, so it is not a good fit for users without one.
Is scroll-world an alternative to a video background on a normal page?
Yes. Rather than looping one video, scroll-world ties video time to scroll position so the camera moves as the visitor scrolls. The skill's output is heavier than a simple hero image, so weigh the page-speed cost against the visual payoff.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use scroll-world if you are a marketing team, developer or agency that wants an immersive scroll hero and can pay for AI video generation and review the output. Skip it if your budget is tight, your page must be lightweight, or you expect fully automatic results without checking the seams.
Download the skill