What problem does it solve? Scroll-driven pages often degrade into a pile of disconnected parallax effects, broken pinned sections, and janky performance. This Skill provides a structured methodology for building cinematic scrollytelling experiences where scroll acts as a narrative timeline controller, covering storyboarding, engine selection, choreography, performance, and accessibility. ## Core Features & Use Cases - Narrative storyboarding: Convert pages into beats with defined entry/exit states, stable elements, and reduced-motion alternatives before writing code. - Engine selection guidance: Choose between CSS scroll-driven animations, Motion, GSAP + ScrollTrigger, Lenis, Lottie/Rive, or Three.js based on the actual motion requirements. - Product exploded views: Choreograph GLB/glTF part separation along authored axes with anchored labels and supporting camera work. - Image-sequence scrubbing: Map scroll progress to pre-rendered frames with intelligent preloading and mobile fallbacks. - Use Case: A marketing site needs a product page where scrolling disassembles a 3D product into labeled components. Use this Skill to storyboard the beats, build a pinned GSAP/Three.js scene, and verify it across viewports and reduced-motion settings. ## Quick Start Use the scrollytelling-web skill to design and build a scroll-driven product page where scrolling explodes a 3D product into labeled parts with pinned scenes and smooth section transitions.
