Individual skill
scroll-world-storytelling
Turn an article, case study, brand narrative, product journey, or long-form story into a cinematic scroll-driven landing page using one of three renderers: scrubbed video, a real-time Three.js world, or semantic HTML/SVG data and typography. Use when the user asks for a scroll world, fly-through landing page, article-to-website transformation, animated planet, data scrollytelling, video-scrubbed page, connected visual journey, or story-led alternative to ordinary stacked sections.
agent-skills/web-design/scroll-world-storytelling/SKILL.md
Source commit 5ea1661a0e05d82b054553daaa6baf6d0233c33c
What was checked
- Matches the observed repository HEAD
- Yes
- Scanner rules are current
- Yes
- Repository scan complete
- No
- Skill scan complete
- No
- Observed behavior
- Network or broad shell
- Last checked
- Nov 9, 2026
These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.
Install this skill
Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.
An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.
Repository context
- Repository stars (not skill ratings)
- 7,358
- Repository last updated
- Nov 8, 2026
- License
- MIT
Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.
Files and excerpt
File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.
Browse files
REFERENCES.mddoc · 610 bytesSKILL.mdcore · 11,889 bytesSKILL.mdcore · 11,889 bytesSKILL.mdcore · 11,889 bytesSKILL.mdcore · 11,889 bytesSKILL.mdcore · 11,889 bytesSKILL.mdcore · 11,889 bytesSKILL.mdcore · 11,889 bytesSKILL.mdcore · 11,889 bytesSKILL.mdcore · 11,889 bytesSKILL.mdcore · 11,889 bytesSKILL.mdcore · 11,889 bytesSKILL.mdcore · 11,889 bytesagents/openai.yamlasset · 321 bytesdemo/PROMPT.mddoc · 1,718 bytesdemo/html-data/PROMPT.mddoc · 2,288 bytesdemo/html-data/index.htmlasset · 14,236 bytesdemo/index.htmlasset · 11,456 bytesdemo/preview.jpgasset · 51,984 bytesdemo/threejs/PROMPT.mddoc · 3,719 bytesdemo/threejs/assets/THREE-LICENSE.txtdoc · 1,081 bytesdemo/threejs/assets/three.core.min.jsruns · 380,922 bytesdemo/threejs/assets/three.module.min.jsruns · 355,116 bytesdemo/threejs/index.htmlasset · 25,725 bytesdemo/video/PROMPT.mddoc · 3,904 bytesdemo/video/assets/README.mddoc · 666 bytesdemo/video/assets/contract-flight-source.svgasset · 5,641 bytesdemo/video/assets/contract-flight.mp4asset · 3,829,930 bytesdemo/video/assets/contract-flight.webpasset · 50,124 bytesdemo/video/index.htmlasset · 10,820 bytes
Read excerpt
# Scroll World Storytelling
Turn source material into one connected journey. Scroll advances a visual world and the copy reveals the story in deliberate beats.
The skill has exactly three production modes. Choose one primary mode before building:
1. **Video scrub** — generated or filmed footage, mapped to scroll.
2. **Three.js world** — a real-time 3D object, place, planet, or system.
3. **HTML / data / type** — semantic DOM, SVG charts, metrics, and kinetic typography.
Do not mix modes by default. A focused renderer produces a clearer concept, smaller test surface, and more reliable fallback.
## Start with the contract
