scroll-world skill
A skill that builds a landing page where scrolling flies a camera through a generated 3D world
- 10,638 ★ on the repository
- Last commit
- MIT
Broad access
Why this level
- Spends money on paid image and video generation
- Runs external CLIs and ffmpeg
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/scroll-worldDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewBroad accessThe tool can change data, run commands or handle secrets.
- Spends money on paid image and video generation
- Runs external CLIs and ffmpeg
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.
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.
Discussion
No questions or reviews yet.
Related
SkillsA skill for building premium scroll-driven websites on a real design standard: typography, rhythm, depth, motion and in-browser verification
A skill for Claude Code and Codex that turns AI video and frames into web animation driven by scroll, cursor, touch or device tilt
A skill for Claude Code and other agents that builds websites directed like films: art direction before code, local CLI asset generation and an anti-slop linter
Scroll Video Website Skill
scroll-video-website-skill
A skill turning video into a site with smooth frame-by-frame scrolling. One-command installation with npx skills
A skill methodology for reproducing websites, from a static page to heavy WebGL, built on real source code rather than agent-hallucinated code
Creative coding skills for Claude Code: motion, micro-interactions and visual systems for web, Android and Apple
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.
README badge
Original 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).