What problem does it solve? Building a landing page where a background animation advances, pauses, and reverses with scroll position is technically tricky: video scrubbing stutters, image morphs look like unrelated cross-fades, and frame sequences jank on mobile. This Skill provides tested implementation patterns for all three approaches so the scroll-driven effect works smoothly across devices. ## Core Features & Use Cases - Approach Decision Logic: Choose between JS image morph (GSAP ScrollTrigger), video scrub, or canvas frame sequence based on available assets and animation complexity. - Canvas Frame Sequence Guide: A complete implementation for drawing pre-rendered JPEG/PNG frames on an HTML5 canvas mapped to scroll position, including cover-fit scaling, DPR handling, progressive loading, and RAF throttling. - Scroll Pacing Technique: Linear interpolation with anchor points and a precomputed LUT to eliminate speed spikes, plus Playwright-based smoothness verification and glassmorphism text overlay patterns. - Use Case: A user wants a premium product reveal page where scrolling down morphs an assembled watch into an exploded component view. The Skill guides keyframe image generation for pixel consistency, implements the GSAP scrub, and adds reactive glow layers. ## Quick Start Build me a landing page hero where the background image morphs from state A to state B as the user scrolls down and reverses when scrolling up.
