Scroll World

An installed MIT agent skill for turning a brand or subject into a continuous, scroll-scrubbed camera flight through generated scenes, with explicit seam, mobile, reduced-motion, provider, and spend gates.

Routing Summary

Use the installed scroll-world skill for a pre-rendered fly-through brand world, isometric diorama journey, or scroll-controlled cinematic page. Route ordinary DOM choreography to GSAP/Motion, interactive scene state to Three.js/R3F, and standalone authored video to HyperFrames. Scroll World also requires provider and spend approval, source-asset rights, position-plus- velocity seam proof, native portrait/mobile delivery, reduced motion, cleanup, and independent playback acceptance.

The saved X post retained only github.com/oso95/scroll-w…. Its prior batch review classified it alongside eight generic frontend skill sources without resolving the URL or repository. Exact expansion identifies oso95/scroll-world: an 8,024-star, MIT-licensed repository at commit 71cc36d3, containing one complete skill, five implementation/reference files, and a framework-agnostic scrub engine. The X post had 304 likes and 746 bookmarks; engagement explains review priority, not correctness. Source: X/@the_cyw 2075033878352494824, captured 2026-07-21; GitHub repository evidence, 2026-08-12

What It Actually Builds

Scroll World does not build an interactive Three.js scene. It generates scene stills and camera-video clips, encodes them for seeking, and maps document scroll position to video currentTime. The apparent 3D world is therefore a pre-rendered cinematic whose timing is controlled by the visitor.

The workflow is:

1. Collect the subject, brand kit, art direction, ordered story beats, camera grammar, mobile scope, still-image source, render tier, and approved budget.
2. Generate one cohesive still per scene.
3. Generate scene dives or forward legs plus any connectors.
4. Extract actual boundary frames and feed them into neighboring generations.
5. Encode seekable desktop and, when approved, native portrait mobile chains.
6. Mount the zero-dependency scrub engine and verify every seam and fallback.

This is a distinct route from ordinary CSS reveals, GSAP pinning, runtime WebGL, and standalone video creation. Use Frontend and Design Skills when DOM choreography is the product; Web3D Library Ranking when geometry and camera state remain interactive; and HyperFrames when the desired output is an authored video rather than a scroll-controlled page.

Durable Engineering Signals

A seam has position and velocity

The repository's strongest reusable rule is that adjacent clips must share the neighboring render's actual frame, not a regenerated approximation. That proves position continuity. The camera must also enter and leave the seam in a compatible direction; a frame-identical boundary can still visibly stutter when the camera reverses. Expressive orbits and crane moves belong inside a clip, while the final movement must settle into the next clip's handoff grammar.

Connector quality should be judged by composition and perceived motion, not a single PSNR threshold. Codec detail can lower PSNR even when the scene is visually continuous, while matching pixels cannot prove compatible velocity. Every build therefore needs before/after seam frames plus a scrubbed-motion review at real speed and in both scroll directions.

Mobile is a second composition, not a crop

The full mobile route renders a parallel 9:16 chain with its own start frames, dives, connectors, posters, and seam proof. A center-cropped landscape encode is only an explicitly approved degraded fallback. Smaller frames and tighter GOPs reduce phone seek-decode work; the engine also coalesces seeks, primes iOS video after a user gesture, keeps the still visible until a frame paints, respects safe areas, and ignores URL-bar-only resize churn.

Reduced motion changes the medium

Under prefers-reduced-motion, the engine avoids loading video and retains stills with quiet cross-dissolves. This is stronger than merely slowing the camera. A production page must also preserve readable copy, navigation, focus, keyboard access, and a useful linear document when the cinematic layer is unavailable.

Runtime And Trust Boundary

Before spending, re-read the live Monid and Higgsfield schemas, price the exact scene count and resolutions, declare provider egress and source-asset rights, and obtain explicit approval. The run receipt must preserve prompts, providers, models, prices, job IDs, input and output hashes, render dimensions, encodes, and seam/mobile/reduced-motion proof.

Admission And Acceptance

The skill is admitted because it is a distinct, reusable end-to-end procedure rather than an overlapping collection of generic animation tips. It must not silently weaken its product promise:

• A failed connector can become a direct crossfade only after the user accepts that the journey is no longer the promised continuous flight.
• A provider or model change requires a cheap first/last-frame qualification probe before batch generation.
• A framework integration must add teardown for global listeners, animation frames, and blob URLs around the upstream mount-only engine.
• Final acceptance requires frozen route/viewport playback, seam frames, desktop and portrait behavior, reduced motion, keyboard/readability, transfer/decode measurements, and an independent visual reviewer.

---

Timeline

• 2026-08-12 | Resolved the truncated saved link, captured the exact MIT repository at 71cc36d3, inspected the complete skill and scrub engine, installed the skill plus exact Monid and Higgsfield CLIs, and promoted its frame-and-velocity seam law, native-mobile boundary, and approval/proof contract into the frontend workflow and routing system. Source: X 2075033878352494824; oso95/scroll-world@71cc36d3; local install verification