scroll-storyteller

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.