skills.rest
ingpoc
ingpocCOMMUNITY
Explore all skills by this author →
GitHub

scroll-storyteller

Generate scroll-driven narratives with duotone SVGs and GSAP or CSS animations.

9|Updated Dec 13, 2025
Search Tags:#storytelling#css#svg#gsap#scroll-storytelling#duotone#anthropic-design
One-click install
npx skills add https://github.com/ingpoc/SKILLS --skill scroll-storyteller
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: scroll-storyteller
Source: https://github.com/ingpoc/SKILLS/tree/main/scroll-storyteller
Command: npx skills add https://github.com/ingpoc/SKILLS --skill scroll-storyteller

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

Building immersive, scroll-driven storytelling experiences that align with Anthropic's design language can be time consuming and error-prone. This Skill delivers a self-contained workflow for authoring chapters, generating topic-appropriate SVGs, and orchestrating GSAP or CSS-only animations with a consistent duotone aesthetic.

Core Features & Use Cases

  • Frontmatter-driven discovery: The Skill relies on a SKILL.md frontmatter for naming, description, keywords, and licensing to enable automatic tooling and discovery.
  • Two animation modes: Supports GSAP-powered or CSS-only animation patterns to balance capability and performance.
  • Chapter-based narrative structure: Organize content into a hero, up to five chapters, a transition, a quote, and a finale with alternating light/dark rhythm.
  • Topic-driven SVG generation: Leverages svg-generator.sh and references to craft organic Bézier-based illustrations that match chapter topics.
  • Asset modularity: Uses optional assets/, references/, and scripts/ directories to extend capabilities without impacting the core HTML.

Quick Start

Generate a new scroll-storyteller project by running the provided scripts and customizing chapter content to your topic.

Frequently Asked Questions about scroll-storyteller

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

FAQPage Schema
How do I build immersive scroll-driven storytelling for a product showcase?▼

Build scroll-driven storytelling by structuring content into a hero, up to five chapters, a transition, a quote, and a finale, then orchestrating GSAP or CSS animations to trigger scroll-driven narrative progression.

What is scroll storytelling with duotone SVGs?▼

Scroll storytelling with duotone SVGs combines organic Bézier-based illustrations and scroll-triggered animations to create visual narratives, applying a consistent duotone aesthetic across chapter-specific SVG assets.

Can I use CSS-only animations instead of GSAP for scroll storytelling?▼

CSS-only animations work for scroll storytelling. The workflow supports both GSAP-powered and CSS-only animation modes to balance capability and performance, allowing you to choose based on your project requirements.

Does scroll-storyteller require GSAP to animate scroll narratives?▼

GSAP is not required to animate scroll narratives. The workflow supports both GSAP and CSS-only animation modes, letting you implement scroll-driven narratives without external animation libraries.

What's the best way to structure content for a scroll-driven explainer page?▼

Structure a scroll-driven explainer page using a chapter-based narrative format consisting of a hero section, up to five chapters, a transition, a quote, and a finale with alternating light and dark rhythm.

How do I generate topic-appropriate SVGs for scroll storytelling chapters?▼

Generate topic-appropriate SVGs for scroll storytelling chapters by leveraging the svg-generator.sh script and reference files to craft organic Bézier-based illustrations that match each chapter's specific topic.

Related Skills

Explore More Design & Creative Skills→
ncssm-roboticsncssm-robotics
4

code-review

Validate FTC marketplace skill metadata and directory structure during reviews.

Official
Advanced
NITRR-OfficialNITRR-Official
4

scroll-experience

Design scroll-driven web experiences with GSAP, Framer Motion, and CSS ScrollSnap.

Official
Advanced
ingpocingpoc
9

duotone-identity

Standardize Identity Platform visuals with a cream/charcoal duotone design language.

Community
Advanced
nonputtipongnonputtipong

scroll-experience

Design scroll-driven web experiences with GSAP ScrollTrigger, Framer Motion, and CSS scroll-timeline.

Community
Intermediate