Scroll Storyteller
0Scroll 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 2mo ago
Storytelling
Quick InstallView Source
$ npx skills add https://github.com/ingpoc/skills --skill scroll-storytellerOverview
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.
Tags
Setup & Installation
Quick Install
Terminal
$ npx skills add https://github.com/ingpoc/skills --skill scroll-storytellerAlternative Install (Git Clone)
git clone https://github.com/ingpoc/skillsRequirements
- Claude Code or compatible AI agent
Quick Start Guide
1
Install the Skill
Copy the install command above and run it in your terminal.
2
Open Your AI Agent
Launch Claude Code, Cursor, or your preferred AI coding agent.
3
Try It Out
Use the prompt template or examples below to test the skill.
4
Customize
Adapt the skill to your specific use case and workflow.
Usage Examples
Prompt Template
Create an interactive scroll-based story for [AUDIENCE] in the [GENRE] genre. Structure it in chapters with [NUMBER] sections per chapter. Include [THEME] as the central focus. Use [TONE] tone and incorporate [INTERACTIVE_ELEMENT] at the end of each chapter. The story should be [LENGTH] words long.
Example Output
# **The Last Lightkeeper** *A Scroll Story for Fantasy Lovers* --- ## **Chapter 1: The Beacon’s Call** The storm raged over the cliffs of Eldermere, waves crashing against the jagged rocks like the fists of an angry titan. Elias, the last lightkeeper of the Black Lighthouse, clutched his lantern, its flickering glow barely piercing the darkness. The villagers below had long abandoned the shore, fleeing inland after the "Whispering Tide" began stealing their children at night. But Elias refused to leave. *The light must stay lit.* - **Your Choice:** Do you *investigate the noise* on the eastern balcony or *check the supply stores* for more oil? --- ## **Chapter 2: The Whisper’s Secret** Elias chose the balcony. The wind howled as he stepped onto the slick stones, his boots slipping on algal-covered wood. Below, the tide receded unnaturally fast, exposing bones—dozens of them—embedded in the sand like forgotten relics. A voice slithered from the waves: *"You see what we see."* The lantern’s flame turned green. The light wasn’t just guiding ships anymore... - **Your Choice:** *Grab the rusted harpoon* from the wall or *blow out the lantern* to disrupt the voice’s power. --- **Interactive Element:** *What will Elias do next?* Share your choice in 🔥 or vote in 🗳️! --- *Continue the story by asking for Chapter 3 with your next choice!*
Find the right skills for your stack
Take a free 3-minute scan and get personalized AI skill recommendations.
Take free scan