skills.rest
MengTo
MengToCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

scroll-world-storytelling

Convert articles and narratives into scroll-driven landing pages using video scrub, Three.js, or HTML data renderers.

5.7k|685|Updated Feb 3, 2026
Search Tags:#storytelling#Three.js#scrollytelling#scroll-driven#Web design#Landing Page#video scrub
One-click install
npx skills add https://github.com/MengTo/Skills --skill scroll-world-storytelling
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: scroll-world-storytelling
Source: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/scroll-world-storytelling
Command: npx skills add https://github.com/MengTo/Skills --skill scroll-world-storytelling

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three, and includes references (resource) and assets (resource) components.

What problem does it solve?

Long-form articles, case studies, and brand narratives often get flattened into ordinary stacked web sections that fail to hold attention. This Skill turns source material into a cinematic scroll-driven landing page where scrolling advances a connected visual world and copy reveals the story in deliberate beats.

Core Features & Use Cases

  • Three Production Modes: Choose exactly one renderer per project—video scrub for cinematic generated footage, a real-time Three.js world for spatial metaphors, or semantic HTML/SVG data and typography for evidence-led stories.
  • Structured Story Pipeline: Reduce any source to a 5–7 beat ledger (hook, old way, new rule, mechanism, proof, payoff, action), then define a style bible covering palette, typography, material language, and motion grammar before writing code.
  • Runnable Demo Kit: Includes a three-mode launcher plus standalone video, Three.js, and HTML/data demo pages with prompts, local assets, reduced-motion fallbacks, and verification checklists.
  • Use Case: Given a product launch article, the Skill produces a beat ledger and style bible, recommends the HTML/data mode for its metric-heavy proof, and builds a responsive page with an SVG chart, kinetic typography, native reversible scrolling, and one final CTA.

Quick Start

Use $scroll-world-storytelling to read my complete article, reduce it to 5–7 beats, choose the strongest of the three renderers, and build a verified scroll-driven landing page with one final CTA.

Frequently Asked Questions about scroll-world-storytelling

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

FAQPage Schema
How do I turn an article into a scroll-driven landing page?▼

Read the full source, reduce it to a 5–7 beat ledger covering hook, mechanism, proof, and payoff, then define a style bible with palette, typography, and motion grammar. Choose one renderer—video scrub, Three.js, or HTML/data—and map a normalized scroll value to the visual states.

Should I use video scrub, Three.js, or HTML for scrollytelling?▼

Choose video scrub when cinematic imagery and exact art direction are the argument, Three.js when the central metaphor is a spatial object or system to explore, and HTML/data when the story is primarily proof, metrics, and editorial content. Do not mix modes by default.

How do I make a video scrub page with smooth scroll seeking?▼

Encode the clip with ffmpeg using small GOPs (-g 8 -keyint_min 8), strip audio, and use faststart. Map one normalized scroll value to video currentTime, coalesce seeks through requestAnimationFrame, and keep the first frame as a poster until the video paints.

Does scroll-driven storytelling work with reduced motion preferences?▼

Yes. Each mode provides a reduced-motion fallback: video mode shows a static poster with chapters in normal reading order, Three.js mode renders a CSS/SVG sculptural fallback, and HTML/data mode removes interpolation while keeping the full story and chart legible.

What are common mistakes when building scroll-jacked landing pages?▼

The main mistakes are hijacking the wheel instead of keeping native reversible scrolling, mixing multiple renderers in one page, using generic glowing-planet clichés, and failing to verify reverse scroll restores exact prior states. The Skill requires backward scrolling to restore prior frames and chapter states exactly.

Related Skills

Explore More Design & Creative Skills→
DeliciousHouseDeliciousHouse
2

landing-page-analysis

Analyze landing pages to produce structured CRO reports from screenshots and page text.

Community
Intermediate
inference-shinference-sh
688

landing-page-design

Optimize landing page layout, hero sections, and CTA psychology for conversion.

Official
Intermediate
opensquillaopensquilla
6.8k

seedance-2-prompt

Generates 3-15 second video clips via Seedance 2.0 through OpenRouter or Volcengine ARK backends.

Official
Advanced
openaiopenai
5.3k

scrollytelling-and-parallax-data-visualization

Design and implement scroll-driven data visualizations with parallax, sticky graphics, and scene contracts.

Official
Advanced