Scroll Storyteller

Scroll Storyteller allows users to craft engaging and interactive narratives using Anthropic's design principles. Ideal for storytellers and content creators looking to enhance their storytelling with animation and chapter-based structures.

000Updated 3w ago

Storytelling

Quick InstallView Source

$ npx skills add https://github.com/ingpoc/skills --skill scroll-storyteller

Overview

About This Skill

Scroll Storyteller enables creators to build immersive, interactive narratives using Anthropic's authentic design language—featuring strict duotone palettes, organic Bézier SVG illustrations, custom cursors, and chapter-based structures. The skill guides users through a structured workflow: selecting animation preferences (GSAP-powered or CSS-only), choosing mood and color palette, defining narrative chapters, and generating fully customizable scroll experiences. Each chapter alternates between light and dark sections with staggered reveals, parallax effects, and mouse-following spotlight layers. The tool includes topic-driven SVG templates for Biblical, Tech, Business, and Personal narratives, ensuring compositions match narrative position and symbolic intent. Built on IntersectionObserver for CSS-only mode or GSAP 3.x with ScrollTrigger for rich interactions, it's lightweight and performant for explainer pages, product showcases, and visual narratives.

How to Use

Install via the command line using the provided npx command.

Use Cases

Create interactive presentations or narratives for education.

Develop immersive stories for gaming or digital media.

Design engagement experiences for marketing campaigns.

Setup & Installation

Quick Install

Terminal

$ npx skills add https://github.com/ingpoc/skills --skill scroll-storyteller

Alternative Install (Git Clone)

git clone https://github.com/ingpoc/skills

Requirements

Claude Code or compatible AI agent

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

📝

No Examples Available

Check the GitHub repository or documentation for usage examples.

Find the right skills for your stack

Take a free 3-minute scan and get personalized AI skill recommendations.

Take free scan