Scroll-Driven Storytelling
When to use: Building long-form scroll experiences: product landing pages that tell a story, explainer narratives, data storytelling, and 'Apple-style' scroll pages.
npx skills add scroll-driven-storytellinggit clone https://github.com/skillhub-community/scroll-driven-storytelling.gitDescription
A framework for narrative scroll experiences. Core pattern: a sequence of 'scenes', each pinned for a scroll range while inner content scrubs through keyframes — text fades out as the next scene pushes in, images crossfade or parallax, and a progress rail shows the reader where they are in the story. Includes a SceneManager component that handles pin timing, scrub mapping (0-100% scroll ↔ keyframe progress), and smooth transitions between scenes.
Ships with three working stories: a product-feature narrative (hero → problem → solution → demo → CTA), a data-story (numbers that count up and charts that draw as you scroll), and a chaptered essay (long text with sticky section titles and a reading-progress bar). Provides layout guidance for the mobile experience (pinned scenes get shorter, scrubbing becomes a tap-through pager on touch devices) and performance notes (only animate transform/opacity, preload scene images, use will-change sparingly).
AI Hub
Need a model endpoint?
AI Hub is an OpenAI-compatible endpoint for Cursor, Claude Code, and Agent workflows.
Open AI Hub