Scroll World Storytelling

Meng ToCommunityCreated by Meng To

Skill
Content generator
Design and creative
MIT
Low risk
Has scripts

From the author

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.

— the description by Meng To

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

Scroll World Storytelling provides a structured framework for converting long-form content into interactive, scroll-triggered visual journeys. It guides the user through defining a narrative arc, establishing a style bible, and selecting one of three rendering modes: video-scrubbed footage, real-time Three.js environments, or semantic HTML/SVG layouts. The skill emphasizes maintaining narrative integrity, ensuring responsive accessibility, and providing a consistent user experience across different devices.

What it does

Converts source articles or brand narratives into 5-7 beat scrollable story maps.
Supports video-scrubbed landing pages for cinematic, pre-rendered visual sequences.
Enables real-time 3D experiences using Three.js for spatial and object-based storytelling.
Provides an HTML/SVG mode for data-driven, accessible, and lightweight editorial content.
Includes a structured verification process to ensure narrative flow and technical stability.
Defines a style bible to maintain consistent art direction, palette, and motion grammar.

When to use it

When you need to turn a case study or product journey into a connected visual experience.
When you want to replace stacked sections with a unified, scroll-driven narrative.
When you need to present data or reports in an interactive, scrollytelling format.
When you require a fly-through or animated landing page to explain a complex system.

Advantages

Offers three distinct rendering modes tailored to different content types.
Ensures narrative focus by separating content beats from technical implementation.
Prioritizes accessibility and responsive design through semantic structure and reduced-motion fallbacks.
Provides a clear, repeatable workflow from source material to final delivery.

Usage examples

“Transform this product case study into a Three.js scroll world.”: The agent will guide you through creating a beat ledger, defining a 3D world metaphor, and implementing a Three.js scene mapped to scroll progress.
“Create a video-scrubbed landing page for our new brand narrative.”: The agent will help you generate continuous camera-move footage and configure the ffmpeg encoding and scroll-mapping logic for the video.

Install

1 of its files are not mirrored here, so install it from its source:
https://github.com/MengTo/Skills/tree/5ea1661a0e05d82b054553daaa6baf6d0233c33c/agent-skills/web-design/scroll-world-storytelling

Documentation by Meng To

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:

Video scrub — generated or filmed footage, mapped to scroll.
Three.js world — a real-time 3D object, place, planet, or system.
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

Write these blocks before implementation.

Goal

Turn the supplied story into a one-page journey with 5–7 memorable beats and one final action. A first-time visitor should understand the thesis, tension, mechanism, proof, and payoff without reading the source.

House rules

Preserve the source thesis, sequence, facts, and caveats. Never invent proof.
Use one connected world, one dominant motion grammar, and one art direction.
Let motion carry transitions; let copy explain meaning.
Keep one primary CTA. Keep navigation and utility controls quiet.
Keep native, reversible document scrolling. Never hijack the wheel.
Never spend generation credits, publish, deploy, or replace production files without approval.
Keep builder and verifier separate when agents are available.

Bar

A visitor can explain the arc after one pass.
Scrolling works forward, backward, slowly, and with a fast flick.
No visible jump, flash, or unintended reversal at a seam.
The page remains legible on mobile and with reduced motion.
Every completion claim includes browser, console, responsive, and asset evidence.

Read the whole source

Read the complete article or narrative.
Inspect the target repo, framework, asset pipeline, and current page.
Separate source facts from presentation ideas.
Collect supplied brand assets and 2–3 references when available.
Identify the one action the story should earn.

If a local daily-inspiration archive exists, inspect the latest one or two capture articles, their stills, and representative local motion files before choosing the art direction. Extract principles such as palette, hierarchy, material, composition, and motion; do not copy layouts literally or upload local reference files to an external generator without explicit approval.

When reuse rights are unclear, paraphrase the source and keep quotations short. Never fabricate testimonials, metrics, or customer claims.

Build the story map

Reduce the source to 5–7 beats:

Hook — the promise or surprising thesis.
Old way — the friction or belief being rejected.
New rule — the idea that changes the route.
Mechanism — how the system works.
Proof — the strongest evidence.
Payoff — the transformed end state.
Action — one next step.

Create a beat ledger before code:

Field	Constraint
id	short stable slug
scene	what exists in the visual world
eyebrow	2–4 words
headline	3–8 words
body	one sentence, ideally under 24 words
evidence	exact source fact or asset
motion	one clear verb phrase
scroll weight	0.7–1.8 viewport heights
CTA	final beat only unless required earlier

Combine repeated arguments. Do not turn every paragraph into a scene.

Write the style bible

Define:

Mood: three precise adjectives.
World metaphor: one place or system that can hold every beat.
Palette: 4–6 named colors with one dominant field and one accent.
Typography: one display voice and one reading voice.
Material language: one system such as paper, glass, clay, photographic, or mechanical.
Motion grammar: forward glide, orbit, crane, lateral track, dive, or staged reveal.
Pacing: where the story pauses and where it moves quickly.
Exclusions: three visual clichés to avoid.

For generated media, reuse the style preamble byte-for-byte in every asset prompt.

Choose one mode

Choose	Best for	Strength	Main cost
Video scrub	cinematic realism, places, products, pre-rendered camera moves	exact art direction and photographic finish	heavier assets and seek tuning
Three.js world	planets, objects, maps, systems, spatial interaction	real-time depth and responsive camera control	WebGL performance and fallback work
HTML / data / type	reports, launches, metrics, editorial stories	accessible, crisp, lightweight, content-first	less photographic spectacle

If the story is primarily proof and numbers, prefer HTML/data. If the central metaphor is spatial and interactive, prefer Three.js. If cinematic imagery is the idea, prefer video.

Mode 1 — Video scrub

Use demo/video/index.html and demo/video/PROMPT.md.

Generate the source clip

Choose one continuous 6–15 second camera move. Avoid cuts.
Write three materially different style studies before generating: change the dominant field, material language, lighting, and composition—not just the accent color.
Keep important subjects near center with usable headline space.
Generate a short calibration clip before the final render when paid tools are used.
For multi-leg journeys, start each leg from the previous leg's actual rendered last frame.
Keep raw masters and record provider, model, prompt, seed, duration, aspect ratio, and rights.

When the user requests Grok Imagine, use its current video interface or API, choose Video, set the requested aspect ratio, duration, and resolution, and generate the approved style studies. Prefer 16:9, 6–10 seconds, and 720p for a first landing-page pass unless the brief requires otherwise. Never substitute a procedural placeholder and call it generated footage.

Preferred prompt shape:

Single continuous [camera move], no cuts. Travel through [world metaphor] from [opening] to [payoff]. [Exact scene sequence]. [Byte-identical style preamble]. Center-safe composition, quiet negative space for editorial copy, no text, no logos, no captions.

Do not promise seamless connectors unless the model accepts the required start frame, or both endpoints for a connector.

Encode for scrubbing

ffmpeg -i source.mp4 -an \
  -c:v libx264 -preset slow -crf 20 -pix_fmt yuv420p \
  -g 8 -keyint_min 8 -sc_threshold 0 \
  -movflags +faststart output.mp4

Use one codec and encode profile across every clip.
Strip audio unless the experience explicitly includes it.
Keep small GOPs for responsive seeking.
Use byte-range hosting or fetch to a Blob URL before scrubbing.
Keep the first frame as a poster until video paints.
Map one normalized scroll value to currentTime; coalesce seeks in requestAnimationFrame.
Reduced motion uses the poster or ordered stills with ordinary document flow.

Mode 2 — Three.js world

Use demo/threejs/index.html and demo/threejs/PROMPT.md.

Produce three art-direction studies before committing. Each must change the field color, object material, light behavior, typography relationship, and composition—not just shader colors.
Reject the generic default of a glowing blue planet in dark space unless the source specifically earns it.
Create one scene, perspective camera, renderer, and world group.
Make the hero object carry the metaphor: sculpture, machine, archive, constellation, city, product, or a non-literal planetary system.
Map scroll progress to camera position, camera target, object rotation, lights, and scene states.
Keep ambient motion subtle; scroll must remain the primary conductor.
Cap device pixel ratio at 2 and update renderer and camera on resize.
Pause continuous rendering when the page is hidden or off-screen.
Dispose geometries, materials, textures, and listeners during teardown.
Provide a static CSS/SVG poster when WebGL fails or reduced motion is requested.

Use local, pinned Three.js files in portable demos. Do not depend on a remote CDN for the core renderer.

Mode 3 — HTML / data / type

Use demo/html-data/index.html and demo/html-data/PROMPT.md.

Start with semantic headings, paragraphs, lists, tables, and real links.
Turn the strongest evidence into one chart grammar: bars, line, range, slope, or comparison.
Use inline SVG only when a DOM chart needs paths or axes; keep labels as selectable text.
Drive CSS custom properties from one normalized scroll value.
Animate transforms, opacity, clip paths, counters, and SVG stroke offsets.
Keep chart scales truthful and expose values in accessible text or a table.
Let the page remain complete and readable when JavaScript is disabled.
Reduced motion removes interpolation while preserving state changes and order.

This mode should not secretly become Canvas or WebGL. Its advantage is native layout, accessibility, and sharp responsive typography.

Shared page contract

Keep content separate from renderer code:

const story = {
  title: "The journey",
  cta: { label: "Begin", href: "#begin" },
  sections: [
    {
      id: "hook",
      eyebrow: "01 / Premise",
      title: "A destination, not a route.",
      body: "Define arrival clearly and let the system find the path.",
      evidence: null,
      scroll: 1.4
    }
  ]
};

Every runtime needs:

A pinned or sticky visual stage.
One scroll conductor and config-driven chapters.
Native reversible scrolling and keyboard focus.
Local easing without changing scene endpoints.
Work that stops when settled, unless ambient motion is visibly required.
Lazy loading for heavy current and next assets.
Semantic headings, one real CTA, and visible focus.
A reduced-motion version with ordinary document flow.

Verify with a fresh pass

Check:

Story — every beat advances the thesis.
Timing — the right state is active at each scroll position.
Reverse — backward scroll restores the exact prior state.
Performance — no unnecessary work after settling; no decoder or WebGL backlog.
Responsive — verify 390, 768, 1024, and 1440 pixel widths.
Mobile — fast flick, orientation change, safe areas, and readable copy.
Accessibility — semantic order, visible focus, contrast, and reduced motion.
Integrity — every fact matches the source and the CTA works.
Console — no errors or failed local assets.
Mode proof — confirm the result actually uses the selected renderer.

Repeat: build, verify, close the largest gap. Stop when no material gap remains against the bar.

Deliverables

Return:

Story map and final beat ledger.
Style bible.
Chosen mode and why it fits.
Working page and reusable story configuration.
Exact asset-generation and page prompts.
Local assets with source, model, and rights notes where applicable.
Desktop and mobile behavior.
Verification evidence and known limitations.

Start at demo/index.html for the three-mode launcher. Keep REFERENCES.md as the external reading list.

Files

ATTRIBUTION.mdAdded by AutoGineer872 B
LICENSELicence file added by AutoGineer1.0 KiB
REFERENCES.md610 B
SKILL.md11.6 KiB
agents/openai.yaml321 B
demo/PROMPT.md1.7 KiB
demo/html-data/PROMPT.md2.2 KiB
demo/html-data/index.html13.9 KiB
demo/index.html11.2 KiB
demo/preview.jpg50.8 KiB
demo/threejs/PROMPT.md3.6 KiB
demo/threejs/assets/THREE-LICENSE.txt1.1 KiB
demo/threejs/assets/three.core.min.jsScript372.0 KiB
demo/threejs/assets/three.module.min.jsScript346.8 KiB
demo/threejs/index.html25.1 KiB
demo/video/PROMPT.md3.8 KiB
demo/video/assets/README.md666 B
demo/video/assets/contract-flight-source.svg5.5 KiB
demo/video/assets/contract-flight.mp4(opens on GitHub)Not mirrored: opens on GitHub3.7 MiB
demo/video/assets/contract-flight.webp48.9 KiB
demo/video/index.html10.6 KiB

demo/index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Three production modes for turning a story into a scroll-driven landing page.">
  <title>Scroll Worlds — Three Modes</title>
  <style>
    :root {
      color-scheme: dark;
      --ink: #090b0e;
      --paper: #f1eadc;
      --muted: #9d9a91;
      --line: rgba(241, 234, 220, .16);
      --amber: #ffb23e;
      --cyan: #6de7ff;
      --acid: #d6ff63;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-width: 320px;
      background:
        radial-gradient(circle at 85% 8%, rgba(109, 231, 255, .07), transparent 26rem),
        var(--ink);
      color: var(--paper);
      font-family: "Arial Narrow", "Avenir Next Condensed", "Roboto Condensed", sans-serif;
    }
    a { color: inherit; }
    .shell { width: min(1440px, 100%); margin: 0 auto; border-inline: 1px solid var(--line); }
    .topbar {
      min-height: 68px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 28px;
      border-bottom: 1px solid var(--line);
      text-transform: uppercase;
      letter-spacing: .16em;
      font-size: 11px;
    }
    .signal { display: flex; align-items: center; gap: 10px; }
    .signal::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--acid); box-shadow: 0 0 18px var(--acid); }
    .hero {
      min-height: 66vh;
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(280px, .55fr);
      border-bottom: 1px solid var(--line);
    }
    .hero-copy { padding: clamp(44px, 8vw, 116px) clamp(24px, 6vw, 92px); border-right: 1px solid var(--line); }
    .kicker { color: var(--amber); letter-spacing: .18em; text-transform: uppercase; font-size: 12px; }
    h1 {
      max-width: 900px;
      margin: 22px 0 24px;
      font: 400 clamp(52px, 9vw, 138px)/.78 Georgia, "Times New Roman", serif;
      letter-spacing: -.07em;
    }
    .lede { max-width: 620px; margin: 0; color: #b9b5ab; font-size: clamp(17px, 2vw, 22px); line-height: 1.5; }
    .hero-index { display: grid; grid-template-rows: repeat(3, 1fr); }
    .hero-index div { display: flex; align-items: flex-end; justify-content: space-between; padding: 26px; border-bottom: 1px solid var(--line); }
    .hero-index div:last-child { border-bottom: 0; }
    .hero-index span { color: var(--muted); letter-spacing: .14em; text-transform: uppercase; font-size: 10px; }
    .hero-index b { font: 400 42px/1 Georgia, serif; }
    .modes { counter-reset: modes; }
    .mode {
      counter-increment: modes;
      position: relative;
      display: grid;
      grid-template-columns: 88px minmax(260px, .72fr) minmax(320px, 1.28fr);
      min-height: 430px;
      color: inherit;
      text-decoration: none;
      border-bottom: 1px solid var(--line);
      overflow: hidden;
      isolation: isolate;
    }
    .mode::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      opacity: 0;
      transition: opacity .35s ease;
      background: linear-gradient(110deg, rgba(255,178,62,.07), transparent 55%);
    }
    .mode:hover::after, .mode:focus-visible::after { opacity: 1; }
    .number { display: grid; place-items: start center; padding-top: 35px; color: var(--muted); border-right: 1px solid var(--line); }
    .number::before { content: "0" counter(modes); }
    .mode-copy { padding: clamp(36px, 5vw, 72px); border-right: 1px solid var(--line); }
    .mode-copy h2 { margin: 14px 0 24px; font: 400 clamp(42px, 5.2vw, 82px)/.88 Georgia, serif; letter-spacing: -.055em; }
    .mode-copy p { max-width: 430px; color: #aaa79e; font-size: 17px; line-height: 1.55; }
    .open { display: inline-flex; gap: 14px; align-items: center; margin-top: 38px; color: var(--paper); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; }
    .open::after { content: "↗"; font-size: 18px; transition: transform .25s ease; }
    .mode:hover .open::after, .mode:focus-visible .open::after { transform: translate(5px,-5px); }
    .preview { min-height: 360px; position: relative; overflow: hidden; background: #07090b; }
    .preview::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,11,14,.22), transparent); pointer-events: none; }
    .preview-video { background: radial-gradient(circle at 66% 47%, #9d4c16 0 3%, #2e170c 9%, #0b0d11 31%, #050608 66%); }
    .preview-video .orbit, .preview-three .orbit { position: absolute; left: 66%; top: 47%; width: 44%; aspect-ratio: 1; border: 1px solid rgba(255,178,62,.42); border-radius: 50%; transform: translate(-50%,-50%) rotate(-18deg); box-shadow: 0 0 50px rgba(255,178,62,.08); }
    .preview-video .route { position: absolute; left: 10%; right: 8%; top: 58%; height: 1px; background: linear-gradient(90deg, transparent, var(--amber), transparent); transform: rotate(-8deg); box-shadow: 0 0 20px var(--amber); }
    .preview-video .gate { position: absolute; left: calc(16% + var(--i) * 12%); top: calc(67% - var(--i) * 5%); width: calc(42px - var(--i) * 4px); height: calc(68px - var(--i) * 7px); border: 1px solid rgba(241,234,220,.35); transform: skewY(-7deg); }
    .preview-three { background: radial-gradient(circle at 66% 48%, #f1eee7 0 7%, #cbc7bd 8% 22%, #e6e2da 23% 58%, #f04427 59% 61%, #d8d4cc 62%); }
    .preview-three::after { background: linear-gradient(90deg,rgba(9,11,14,.14),transparent); }
    .preview-three .orbit { border: 3px dotted #161616; transform: translate(-50%,-50%) rotate(24deg) scaleY(.48); box-shadow: none; }
    .preview-three .orbit.two { border: 1px solid #f04427; transform: translate(-50%,-50%) rotate(-35deg) scaleY(.78); width: 56%; }
    .preview-three .star { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #141414; left: calc(9% + var(--x) * 8%); top: calc(15% + var(--y) * 7%); opacity: .8; }
    .preview-data { display: grid; grid-template-columns: .72fr 1.28fr; padding: clamp(26px, 5vw, 64px); background: #ece6d8; color: #141515; gap: 34px; }
    .data-figure { align-self: end; }
    .data-figure strong { display: block; font: 400 clamp(66px, 9vw, 136px)/.8 Georgia, serif; letter-spacing: -.07em; }
    .data-figure span { color: #5d5d58; text-transform: uppercase; letter-spacing: .15em; font-size: 10px; }
    .bars { display: flex; align-items: end; gap: 9px; border-bottom: 1px solid #777; padding-top: 30px; }
    .bars i { flex: 1; height: calc(16% + var(--h) * 8%); min-height: 18px; background: #161819; }
    .bars i:last-child { background: #e45b31; }
    footer { display: flex; justify-content: space-between; gap: 20px; padding: 32px 28px 72px; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-size: 10px; }
    :focus-visible { outline: 2px solid var(--acid); outline-offset: -5px; }
    @media (max-width: 900px) {
      .hero { grid-template-columns: 1fr; }
      .hero-copy { border-right: 0; border-bottom: 1px solid var(--line); }
      .hero-index { grid-template-columns: repeat(3,1fr); grid-template-rows: none; }
      .hero-index div { min-height: 112px; border-bottom: 0; border-right: 1px solid var(--line); }
      .mode { grid-template-columns: 56px 1fr; }
      .mode-copy { border-right: 0; }
      .preview { grid-column: 1 / -1; min-height: 340px; border-top: 1px solid var(--line); }
    }
    @media (max-width: 560px) {
      .topbar { padding-inline: 18px; }
      .topbar span:last-child { display: none; }
      .hero-copy { padding: 56px 22px 64px; }
      .hero-index b { font-size: 30px; }
      .hero-index div { padding: 16px; }
      .mode { grid-template-columns: 44px 1fr; }
      .mode-copy { padding: 46px 22px; }
      .preview { min-height: 300px; }
      .preview-data { grid-template-columns: 1fr; }
      footer { flex-direction: column; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
      *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
    }
  </style>
</head>
<body>
  <main class="shell">
    <header class="topbar">
      <span class="signal">Scroll world system</span>
      <span>One story / three renderers</span>
    </header>

    <section class="hero" aria-labelledby="page-title">
      <div class="hero-copy">
        <span class="kicker">The Contract / Demo Kit</span>
        <h1 id="page-title">Choose the world.</h1>
        <p class="lede">The same six-beat story, translated into video, real-time 3D, and semantic data typography. Pick the renderer that strengthens the source.</p>
      </div>
      <div class="hero-index" aria-label="Demo summary">
        <div><span>Modes</span><b>03</b></div>
        <div><span>Beats</span><b>06</b></div>
        <div><span>CTA</span><b>01</b></div>
      </div>
    </section>

    <section class="modes" aria-label="Scroll world demos">
      <a class="mode" href="video/">
        <span class="number" aria-hidden="true"></span>
        <div class="mode-copy">
          <span class="kicker">Pre-rendered / cinematic</span>
          <h2>Video<br>scrub</h2>
          <p>Scroll seeks through a generated continuous camera move. Best when atmosphere, realism, and exact art direction are the argument.</p>
          <span class="open">Open demo</span>
        </div>
        <div class="preview preview-video" aria-hidden="true">
          <i class="orbit"></i><i class="route"></i>
          <i class="gate" style="--i:0"></i><i class="gate" style="--i:1"></i><i class="gate" style="--i:2"></i><i class="gate" style="--i:3"></i>
        </div>
      </a>

      <a class="mode" href="threejs/">
        <span class="number" aria-hidden="true"></span>
        <div class="mode-copy">
          <span class="kicker">Real-time / spatial</span>
          <h2>Three.js<br>studies</h2>
          <p>One live sculptural world in signal-red, monochrome, and soft-pearl directions. Best when the story is a system or object to explore.</p>
          <span class="open">Open demo</span>
        </div>
        <div class="preview preview-three" aria-hidden="true">
          <i class="orbit"></i><i class="orbit two"></i>
          <i class="star" style="--x:1;--y:3"></i><i class="star" style="--x:4;--y:1"></i><i class="star" style="--x:7;--y:6"></i><i class="star" style="--x:9;--y:2"></i><i class="star" style="--x:3;--y:8"></i>
        </div>
      </a>

      <a class="mode" href="html-data/">
        <span class="number" aria-hidden="true"></span>
        <div class="mode-copy">
          <span class="kicker">Semantic / evidence-led</span>
          <h2>Data &amp;<br>type</h2>
          <p>Native HTML, SVG charts, live values, and editorial typography. Best when proof, clarity, accessibility, and responsive precision matter most.</p>
          <span class="open">Open demo</span>
        </div>
        <div class="preview preview-data" aria-hidden="true">
          <div class="data-figure"><span>Verified arrival</span><strong>94%</strong></div>
          <div class="bars"><i style="--h:1"></i><i style="--h:3"></i><i style="--h:5"></i><i style="--h:7"></i><i style="--h:9"></i></div>
        </div>
      </a>
    </section>

    <footer><span>Native scroll / reversible / reduced-motion ready</span><span>Standalone HTML demos</span></footer>
  </main>
</body>
</html>

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Needs Node.js

Security

What our scanner noticed· Low risk

Scripts that your agent may run

This skill includes scripts that your agent may run. Read them before you use it.

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Created by

Meng To

Publisher

Meng To (Community)

Source

MengTo/Skills · agent-skills/web-design/scroll-world-storytelling · commit 5ea1661

Licence

MIT License (redistribution allowed)

LICENSE (added by AutoGineer from LICENSE)
ATTRIBUTION.md (written by AutoGineer)

Synced

2026-11-08

AutoGineer is not affiliated with or endorsed by Meng To.

Get it from the source

1 of this skill’s files are not mirrored here, so there is no ZIP. Get the complete skill from its source: MengTo/Skills

From the author

AutoGineer summary

What it does

When to use it

Advantages

Usage examples

Install

Documentation by Meng To

Scroll World Storytelling

Start with the contract

Goal

House rules

Bar

Read the whole source

Build the story map

Write the style bible

Choose one mode

Mode 1 — Video scrub

Generate the source clip

Encode for scrubbing

Mode 2 — Three.js world

Mode 3 — HTML / data / type

Shared page contract

Verify with a fresh pass

Deliverables

Files

demo/index.html

Requirements and compatibility

Security

Attribution and licence

Related skills

Theme Factory

Brand Guidelines

Frontend Design

Impeccable

Diagram Design

Choreograph

Get it from the source