scroll-world

Generates scroll-scrubbed landing pages with AI-rendered camera flights through cohesive scenes.

Updated Mar 4, 2026
One-click install
npx skills add https://github.com/gmolike/Claude-Template --skill scroll-world-gmolike
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: scroll-world
Source: https://github.com/gmolike/Claude-Template/tree/main/.claude/skills/scroll-world
Command: npx skills add https://github.com/gmolike/Claude-Template --skill scroll-world-gmolike

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @fal-ai/client, Pillow, and includes references (resource) components.

What problem does it solve? Building a cinematic "fly through the world" landing page requires generating visually coherent AI scenes, chaining video clips with frame-exact seams, and wiring a scroll-driven video scrubber — a multi-day effort across image models, video models, ffmpeg, and frontend code. ## Core Features & Use Cases - End-to-end generation pipeline: Interviews the user for theme, brand palette, and story beats, then generates cohesive scene stills and camera clips via fal.ai first/last-frame endpoints so every seam hands off a real rendered frame. - Portable scrub engine: Ships a framework-agnostic vanilla-JS engine that binds video currentTime to scroll position, with Blob-based seeking, mobile variants, and prefers-reduced-motion support. - Production-hardened workflow: Includes copy-paste bash pipelines, prompt templates, a mandatory stills-approval gate before expensive video renders, and PSNR-based seam QA. - Use Case: A startup wants a landing page where scrolling flies the camera through an isometric diorama of their business — farm, kitchen, delivery, product finale — with no visible cuts between scenes. ## Quick Start Ask the assistant to build a scroll-world landing page for your business, describing your product, brand colors, and the 5-7 scenes you want visitors to fly through.

Frequently Asked Questions about scroll-world

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a scroll-driven video landing page?

Generate scene stills and camera clips with fal.ai first/last-frame endpoints, encode them with ffmpeg for scrubbing, then mount the included vanilla-JS engine with a config listing sections and connectors. The engine binds video currentTime to scroll position using Blob URLs so seeking works without HTTP byte-range support.

How do I make AI video clips transition seamlessly between scenes?

Extract the actual last frame of one clip and the first frame of the next with ffmpeg, then pass them as start and end frames to a first-last-frame video endpoint like fal-ai/veo3.1. Never use the original stills as seam endpoints, and keep the whole chain on one model family to avoid color and motion pops.

What tools are required to run the scroll-world pipeline?

You need a FAL_KEY environment variable, ffmpeg and ffprobe, jq, curl, cwebp, Python 3 with Pillow, and a bash 3.2-compatible shell such as Git-Bash on Windows. A headless browser is used for seam QA, and Codex CLI is an optional zero-credit alternative for stills.

Why does my scroll-scrubbed video freeze or show a black frame on iOS?

iOS will not paint a seeked frame from a muted video that never played, and hosts without byte-range support report seekable as [0,0]. The engine fixes this by loading clips as Blob URLs, keeping the still as a poster until the first frame paints, and priming each video on first touch.

How much does it cost to generate a scroll-world page with fal.ai?

A typical six-scene page costs roughly $10-25: about $0.90 for chained nano-banana stills plus around $16 for five 8-second veo3.1 1080p connectors, with local ffmpeg breathing loops replacing paid dive clips. Prices shift often, so verify against the live fal.ai model pages before rendering.

When should I use continuous forward legs instead of dive-and-connector architecture?

Use the continuous forward architecture for grounded, realistic walkthroughs: each leg starts from the previous leg's actual last frame with no end frame, avoiding the camera reversal that dive-plus-connector causes at every seam. The dive-and-connector style only suits miniature or bird's-eye diorama worlds where a pull-back reads as intentional.