Skip to content

Scroll-Driven 3D World Landing Page

Builds a scroll-scrubbed fly-through landing page from AI-generated scenes and camera clips

Stars
10,728
Licence
MIT
Files
6 files

What it does

Once installed, the agent can turn a business or idea into a scroll-controlled landing page where the visitor's scrolling moves a camera through a pre-rendered miniature world. The agent interviews you about the subject, brand colours and art style, generates a set of 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 as one continuous flight. It does not assume a particular web framework.

Great for

  • Marketing or product teams who want an immersive hero section for a homepage or campaign page
  • Developers building a scroll cinematic who are comfortable running command-line tools and paying for AI video generation
  • Agencies producing a branded scroll experience for a client

Skip it if

  • Anyone on a tight budget or without an active Monid or Higgsfield account, since a six-scene chain can cost roughly $27 at 1080p and needs credits for stills too
  • Sites that need lightweight pages, as the output is a set of pre-rendered videos and images that can be heavy to load
  • Users who expect fully automatic results without review, because the skill itself warns that seam mismatches cause visible pops that must be checked

Try asking

  • “Build a scroll-scrubbed fly-through landing page for my bubble tea company, from leaf to last sip”
  • “Turn our software startup's brand into a scrollable 3D diorama world with the brand colours from our website”
  • “Create a scroll cinematic hero with a neon-night art direction for a coffee roastery”
Step-by-step guide: how to use Scroll-Driven 3D World Landing PageInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 6 original files, the MIT licence and an attribution note.

    scroll-world.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip scroll-world.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip scroll-world.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Review every connector clip's seam frame-by-frame before publishing, since mismatched frames cause a visible pop between scenes
  • Confirm the chosen video model's parameters with the Higgsfield model command before batching, and check Monid balance first to avoid surprise charges
  • Run long generations in the background; each Higgsfield job can take 3 to 8 minutes

What's inside

  • references/index-template.html
  • references/knockout.py
  • references/pipeline.md
  • references/prompts.md
  • references/scrub-engine.js
  • SKILL.md

Redistributed unmodified from oso95/scroll-world under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.