Scroll Worldby oso95

Scroll World Skill.

A pre-rendered camera journey controlled by scrolling, not a live 3D world.

Scroll Animation
Video
Landing Pages

Source Review · Scroll WorldSKILL.md

Task Scroll Animation Produces • A scroll-driven landing page with section copy and a final call to action • Generated scene stills, camera clips, and any required connectors • Optimized video assets, fallback posters, and a review of transitions between clips Before You Start The documented pipeline uses Higgsfield and a Monid video path, plus ffmpeg/ffprobe and a browser environment. Provider accounts, credits, model capabilities, and any optional image route require fresh verification.

Editorial summary · source reviewed 2026-10-07 · not a generated example

01 What It Does

Scroll World

A generated-video landing-page workflow built around camera architecture, actual-frame continuity, scroll scrubbing, and explicit mobile and rendering-budget decisions.

Source-based workflowNot an execution benchmark

The Working Approach

Scroll World builds a landing page whose scroll position controls a pre-rendered camera flight. Scene stills become video clips, then a JavaScript engine maps scrolling to playback time. The apparent three-dimensional world is generated footage, not a navigable WebGL scene with editable geometry. Its portability comes from a self-contained engine that can be embedded into different frontend stacks.

The source distinguishes a continuous forward walkthrough from a miniature-world flight with separate connecting clips. In both cases, rendered boundary frames matter more than reusing a similar-looking original still. The next clip must be conditioned on actual neighboring footage, and seams still need inspection. The workflow also treats a mobile portrait chain as a separate production decision with extra rendering cost, not a silent crop of the desktop film.

Expected Deliverables

A scroll-driven landing page with section copy and a final call to action
Generated scene stills, camera clips, and any required connectors
Optimized video assets, fallback posters, and a review of transitions between clips

See the Example Brief

From Brief to Review

01
Choose The Journey
Set the subject, ordered scenes, brand kit, art direction, and camera style. Confirm desktop-only versus native portrait production and approve a current rendering estimate.
02
Establish The Visual World
Generate cohesive stills with a shared visual brief. Review scene consistency before committing to a chain of paid video generations.
03
Chain Actual Frames
For a forward journey, feed the prior clip's ending into the next. For aerial connectors, use actual rendered frames from both neighboring clips rather than the original scene images.
04
Encode And Test Scrolling
Prepare seekable assets, mount the portable engine, and inspect seam behavior, reverse scrolling, fallback posters, and reduced motion. Test the portrait chain separately if it was commissioned.

02 When to Use It

When to Use It

The documented pipeline uses Higgsfield and a Monid video path, plus ffmpeg/ffprobe and a browser environment. Provider accounts, credits, model capabilities, and any optional image route require fresh verification.

A Good Fit

A Narrative Brand JourneyUseful when a product or business can be explained as a sequence of places or process stages that benefit from a continuous camera relationship.
Framework-Independent EmbedsThe documented engine is vanilla JavaScript, so the footage workflow is not tied to a particular application framework.

Limits to Check

Generated Footage, Not Real EvidenceThe world is an illustrative construction. It should not be presented as documentary footage of facilities, products, or events it does not actually show.
Paid And Changing BackendsRendering needs provider access and budget. The source contains dated provider observations, so model schemas, availability, billing, and seam behavior must be checked before a new build.

Bring These Inputs

Business StoryDescribe the subject and ordered scenes, with a headline and concise explanatory copy for each stage.
Camera And Art DirectionChoose a grounded walkthrough, aerial miniature-world flight, or locked-angle treatment, along with approved colors and brand cues.
Production BudgetSpecify provider access, spending limits, and whether a separate portrait chain is required. Allow for reviewing and replacing unsuccessful clips.

03 Decisions That Matter

Decisions That Matter

Seams Are A Production Asset
Extracted boundary frames make continuity an inspectable part of the pipeline. A crossfade alone cannot conceal a large change in scene composition.
Mobile Is An Explicit Deliverable
A portrait camera chain can preserve the subject and composition on phones. Treating it separately makes the budget and visual tradeoff visible instead of hiding a crop problem.

04 Try a Focused Brief

Try a Focused Brief

The example brief below has not been tested. Check the skill’s setup before using it.

Review the Setup

Use the repository's engine and pipeline references. Check current provider capabilities and pricing, then obtain approval before running paid generation.

Upstream Source File

https://github.com/oso95/scroll-world/blob/71cc36d3bb150248ae36a2c552f9cbf88802a79c/skills/scroll-world/SKILL.md

Start With One Deliverable

Adapt the scope, source material and constraints in this brief before running the skill.

Example Brief

Use Scroll World to plan an illustrative journey from a tea farm to a finished drink in five miniature scenes. Use our supplied brand colors and an aerial diorama camera style. Before generating anything, verify the current rendering backend and estimate desktop-only production with reroll allowance. Show the scene plan and still direction first. Do not create a mobile chain or incur rendering charges without approval.

Inspect the Result

Check the actual output against these observable criteria.

Neighboring clips have been reviewed just before and after each seam in both scroll directions.
Reduced-motion mode presents usable stills and readable section copy.
Any claimed mobile version actually serves portrait assets rather than an undisclosed landscape crop.

OpenDesign provides a local design workspace for coding agents. This listing does not mean the skill is bundled or that its external tools, credentials and software dependencies are included.

Download OpenDesign Read the Quickstart

05 Source and License

Source and License

This page describes the pinned source revision linked below. Upstream behavior and requirements can change.

Source Owner: oso95
Repository: oso95/scroll-world
Skill File: skills/scroll-world/SKILL.md
License: MIT
Reviewed Snapshot: 2026-10-07 · 71cc36d3bb15

Editorial Source Summary

A generated-video landing-page workflow built around camera architecture, actual-frame continuity, scroll scrubbing, and explicit mobile and rendering-budget decisions.

Original summary by OpenDesign, based on the linked source. Repository stars are a dated popularity signal, not skill usage or a quality score.

06 Questions Before You Start

Questions Before You Start

Does it create a real-time 3D scene?

No. The page scrubs pre-rendered video. That produces camera motion without giving visitors free navigation through a live 3D model.

Why not connect the original still images?

Generated clips can differ from their starting references. Actual rendered boundary frames provide a closer visual handoff than a fresh interpretation of the same still.

Is a mobile film included automatically?

No. The source requires a separate choice for a native portrait chain. The engine's phone-specific playback adjustments are separate from producing that extra footage.

OpenDesign

Make Room for the Next Design Iteration.

Keep your brief, source material and design work together in a local workspace. Check the skill’s own setup before adding it to your workflow.

Download OpenDesign Browse Design Skills