New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

Scroll World Storytelling

by nirholas in nirholas/three.ws

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…

Apache-2.0Auto-check passedFrontend & Design

Install Scroll World Storytelling

skills CLI
$ npx skills add nirholas/three.ws --skill scroll-world-storytelling -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install nirholas/three.ws scroll-world-storytelling --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/nirholas/three.ws.git skills-src && mkdir -p .claude/skills && cp -r skills-src/third_party/designcode-agent-skills/agent-skills/web-design/scroll-world-storytelling .claude/skills/scroll-world-storytelling && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
scroll-world-storytelling
GitHub stars
228
Used in
1 other repo
Token cost
~3k tokens
SKILL.md length
1,515 words
Files
20
Skills in repo
92
Repo updated
First seen
Licence
Apache-2.0

At a glance

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…

  • Works in 3 steps: Video scrub — generated or filmed… → Three.js world — a real-time 3D object,… → HTML / data / type — semantic DOM, SVG…
  • The user asks for a scroll world
  • SKILL.md covers Start with the contract, Read the whole source, Build the story map and Write the style bible, plus 7 more sections
  • Runs JavaScript scripts from its folder; calls ffmpeg

What it does

Scroll World Storytelling is an agent skill from nirholas/three.ws. 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.

Its SKILL.md is about 3k tokens, which your agent loads only when the skill is triggered. The skill folder holds 25 other files (for example `REFERENCES.md`, `agents/openai.yaml` and `demo/PROMPT.md`).

It sits in Frontend & Design, covering Storytelling, 3D graphics and WebGL and Landing pages. It works with Three.js. The repository describes itself as: Open-source platform for 3D AI agents. Turn text or a photo into a rigged, animated GLB avatar, give it an LLM brain, memory and a wallet, and embed it anywhere with one web… The licence is Apache-2.0.

When your agent uses it

  • The user asks for a scroll world
  • Fly-through landing page
  • Article-to-website transformation
  • Animated planet

Example prompts

  • “/scroll-world-storytelling”

Requirements

  • Node.js

Workflow steps

3 steps, taken from the first numbered list in SKILL.md.

  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.

What it can do on your machine

Read from SKILL.md and the folder at commit ec8d1d2. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Ships script files (JavaScript, from the files we listed), which the agent can run.

    Shell commands in SKILL.md call:

    • ffmpeg

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

Scroll World Storytelling loads about 3k tokens when it runs. Until then it costs about 128 tokens; SKILL.md has 1,515 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~128
When it runs · the whole SKILL.md, loaded when a task matches
~3k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

The full file from nirholas/three.ws at commit ec8d1d2, republished under its Apache-2.0 licence (© nirholas). 1,515 words, ~2,955 tokens.

Download SKILL.mdSave it as .claude/skills/scroll-world-storytelling/SKILL.md (or your agent's skills folder). This skill also uses 19 other files; get the full folder from GitHub.
name
scroll-world-storytelling
description
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.

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

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

  1. Read the complete article or narrative.
  2. Inspect the target repo, framework, asset pipeline, and current page.
  3. Separate source facts from presentation ideas.
  4. Collect supplied brand assets and 2–3 references when available.
  5. 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:

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

Create a beat ledger before code:

FieldConstraint
idshort stable slug
scenewhat exists in the visual world
eyebrow2–4 words
headline3–8 words
bodyone sentence, ideally under 24 words
evidenceexact source fact or asset
motionone clear verb phrase
scroll weight0.7–1.8 viewport heights
CTAfinal 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

ChooseBest forStrengthMain cost
Video scrubcinematic realism, places, products, pre-rendered camera movesexact art direction and photographic finishheavier assets and seek tuning
Three.js worldplanets, objects, maps, systems, spatial interactionreal-time depth and responsive camera controlWebGL performance and fallback work
HTML / data / typereports, launches, metrics, editorial storiesaccessible, crisp, lightweight, content-firstless 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
  1. Choose one continuous 6–15 second camera move. Avoid cuts.
  2. Write three materially different style studies before generating: change the dominant field, material language, lighting, and composition—not just the accent color.
  3. Keep important subjects near center with usable headline space.
  4. Generate a short calibration clip before the final render when paid tools are used.
  5. For multi-leg journeys, start each leg from the previous leg's actual rendered last frame.
  6. 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.

Show full SKILL.md (625 more words)Show less
Encode for scrubbing
bash
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.

  1. 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.
  2. Reject the generic default of a glowing blue planet in dark space unless the source specifically earns it.
  3. Create one scene, perspective camera, renderer, and world group.
  4. Make the hero object carry the metaphor: sculpture, machine, archive, constellation, city, product, or a non-literal planetary system.
  5. Map scroll progress to camera position, camera target, object rotation, lights, and scene states.
  6. Keep ambient motion subtle; scroll must remain the primary conductor.
  7. Cap device pixel ratio at 2 and update renderer and camera on resize.
  8. Pause continuous rendering when the page is hidden or off-screen.
  9. Dispose geometries, materials, textures, and listeners during teardown.
  10. 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.

  1. Start with semantic headings, paragraphs, lists, tables, and real links.
  2. Turn the strongest evidence into one chart grammar: bars, line, range, slope, or comparison.
  3. Use inline SVG only when a DOM chart needs paths or axes; keep labels as selectable text.
  4. Drive CSS custom properties from one normalized scroll value.
  5. Animate transforms, opacity, clip paths, counters, and SVG stroke offsets.
  6. Keep chart scales truthful and expose values in accessible text or a table.
  7. Let the page remain complete and readable when JavaScript is disabled.
  8. 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:

js
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:

  1. Story — every beat advances the thesis.
  2. Timing — the right state is active at each scroll position.
  3. Reverse — backward scroll restores the exact prior state.
  4. Performance — no unnecessary work after settling; no decoder or WebGL backlog.
  5. Responsive — verify 390, 768, 1024, and 1440 pixel widths.
  6. Mobile — fast flick, orientation change, safe areas, and readable copy.
  7. Accessibility — semantic order, visible focus, contrast, and reduced motion.
  8. Integrity — every fact matches the source and the CTA works.
  9. Console — no errors or failed local assets.
  10. 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.

© nirholas, Apache-2.0. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file

Files

SKILL.md and 19 other files in third_party/designcode-agent-skills/agent-skills/web-design/scroll-world-storytelling of nirholas/three.ws.

  • SKILL.md
  • REFERENCES.md
  • agents/openai.yaml
  • demo/PROMPT.md
  • demo/html-data/PROMPT.md
  • demo/html-data/index.html
  • demo/index.html
  • demo/preview.jpg
  • demo/threejs/PROMPT.md
  • demo/threejs/assets/THREE-LICENSE.txt
  • demo/threejs/assets/three.core.min.js
  • demo/threejs/assets/three.module.min.js
  • demo/threejs/index.html
  • demo/video/PROMPT.md
  • demo/video/assets
  • … and 5 more

Open the folder on GitHubat commit ec8d1d2

Used in 1 other repository

We found 1 copy of this SKILL.md (exact, near-identical or edited) in other folders, from 1 other GitHub owner. This page covers the copy in nirholas/three.ws, which our catalogue first saw on October 7, 2026.

Compare with similar skills

Scroll World Storytelling next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

Scroll World Storytelling compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
Scroll World Storytelling this skillnirholas/three.ws2281 repos~3kAutomated safety check: PassApache-2.0
Auteuragiwhitelist/auteur1k—~5kAutomated safety check: PassMIT
Epic Designalirezarezvani/claude-skills28k1 repos~4kAutomated safety check: PassMIT
Motion Webfeitangyuan/motion-web680—~18kAutomated safety check: PassCC-BY-NC-4.0
Inspira UIsecondsky/claude-skills227—~2.6kAutomated safety check: PassMIT
Oma Designfirst-fluke/oh-my-agent1.3k—~2.9kAutomated safety check: PassMIT

Similar skills

  • Auteur

    agiwhitelist/auteur

    Design and build complete web experiences from scratch — award-level product and marketing pages, cinematic scroll-directed sites where the page is directed like a film, and multi-screen products…

    1k GitHub stars~5k tokensUpdated 2 mo ago
    Frontend & DesignAuto-check passed

  • Epic Design

    alirezarezvani/claude-skills

    Build immersive, cinematic 2.5D interactive websites using scroll storytelling, parallax depth, text animations, and premium scroll effects — no WebGL required.

    28k GitHub starsUsed in 1 repo~4k tokens
    Frontend & DesignAuto-check passed

  • Motion Web

    feitangyuan/motion-web

    Design and build motion-first creative websites — page design (structure, type scale, palette, spacing) plus interaction choreography: scroll animation, Framer Motion, GSAP, and light 3D via…

    680 GitHub stars~18k tokensUpdated 24 days ago
    Game DevelopmentAuto-check passed

  • Inspira UI

    secondsky/claude-skills

    120+ Vue/Nuxt animated components with TailwindCSS v4, motion-v, GSAP, Three.js.

    227 GitHub stars~2.6k tokensUpdated 11 days ago
    Frontend & DesignAuto-check passed

  • Oma Design

    first-fluke/oh-my-agent

    AI design specialist skill with DESIGN.md management, anti-pattern enforcement, optional Stitch MCP integration, and component library guidance.

    1.3k GitHub stars~2.9k tokensUpdated today
    Frontend & DesignAuto-check passed

  • Top Design

    wondelai/skills

    Create award-winning, immersive web experiences at the level of Awwwards-featured agencies.

    2.4k GitHub stars~5.8k tokensUpdated 29 days ago
    Frontend & DesignAuto-check passed

More from nirholas/three.ws

All 92 skills in this repo

  • Add Shader Cursor Trail

    nirholas/three.ws

    Add the Shaders WebGPU mouse effect used for the Tidal Commons hero: a white twinkling halftone cursor trail driven by ChromaFlow, masked through a DotGrid, finished with chromatic ripples and film…

    228 GitHub starsUsed in 1 repo~760 tokens
    Auto-check passed

  • Publish Project To GitHub

    nirholas/three.ws

    Package a finished local project into an intentional GitHub repository, create a strong README and visual preview, push it safely, configure a public GitHub Pages URL when the project is compatible…

    228 GitHub starsUsed in 1 repo~2.2k tokens
    Auto-check: notes

  • Audit Reference Originality

    nirholas/three.ws

    Audit a website or digital experience against its supplied source references for originality and plagiarism risk.

    228 GitHub starsUsed in 1 repo~1.8k tokens
    Auto-check passed

  • Build Daily Inspiration Sites

    nirholas/three.ws

    Turn a completed daily UI inspiration capture into exactly five original landing-page builds, one per separate Codex task, using Sites.

    228 GitHub starsUsed in 1 repo~1.9k tokens
    Auto-check passed

  • Write Like Meng On X

    nirholas/three.ws

    Write, rewrite, review, or continuously refine X/Twitter posts in Meng To's current voice using his deduplicated authored-post corpus, personal and product context, shared resources, and Content…

    228 GitHub starsUsed in 1 repo~2k tokens
    Auto-check passed

  • Browser Video Recording

    nirholas/three.ws

    Create polished 60 fps 4:3 4K browser screen-recording style videos from Codex in-app browser captures, with browser-only crop, natural macOS cursor styling, deliberate click choreography…

    228 GitHub starsUsed in 1 repo~1.5k tokens
    Auto-check passed

Works with

Categories

Questions about Scroll World Storytelling

What does Scroll World Storytelling do?

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…. ws.js world, or semantic HTML/SVG data and typography.

When should I use Scroll World Storytelling?

Scroll World Storytelling fits situations like: the user asks for a scroll world; fly-through landing page; article-to-website transformation; animated planet.

How do I install Scroll World Storytelling in Claude Code?

Run `npx skills add nirholas/three.ws --skill scroll-world-storytelling -a claude-code`. Or copy the skill folder (third_party/designcode-agent-skills/agent-skills/web-design/scroll-world-storytelling in nirholas/three.ws) into .claude/skills/scroll-world-storytelling in your project. Claude Code loads it when a task matches its description.

How do I install Scroll World Storytelling in Codex?

Run `npx skills add nirholas/three.ws --skill scroll-world-storytelling -a codex`. Or copy the skill folder (third_party/designcode-agent-skills/agent-skills/web-design/scroll-world-storytelling in nirholas/three.ws) into .agents/skills/scroll-world-storytelling in your project. Codex loads it when a task matches its description.

Can I use Scroll World Storytelling in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add nirholas/three.ws --skill scroll-world-storytelling -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/scroll-world-storytelling, .gemini/skills/scroll-world-storytelling, .github/skills/scroll-world-storytelling and .opencode/skills/scroll-world-storytelling in your project.

What does Scroll World Storytelling need to run?

Going by SKILL.md and its folder, Scroll World Storytelling needs JavaScript for the scripts in its folder and the command-line tools its instructions call (ffmpeg). Our summary lists: Node.js.

Does Scroll World Storytelling access the network?

SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.

Is Scroll World Storytelling safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does Scroll World Storytelling use?

Scroll World Storytelling is published under the Apache-2.0 licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.

How many tokens does Scroll World Storytelling use?

About 3k tokens (SKILL.md is roughly 12k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to Scroll World Storytelling?

Skills that share tags, products or a category with Scroll World Storytelling: Auteur (agiwhitelist/auteur, 1k stars), Epic Design (alirezarezvani/claude-skills, 28k stars), Motion Web (feitangyuan/motion-web, 680 stars) and Inspira UI (secondsky/claude-skills, 227 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains Scroll World Storytelling?

nirholas (a GitHub user) maintains it in nirholas/three.ws, which has 228 GitHub stars. The repository holds 92 skills in this directory. The repository was last updated on October 9, 2026.

Source: nirholas/three.ws on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.