What problem does it solve? Headlines and hero copy often appear statically on scroll, missing the polished editorial feel of word-by-word masked reveals. Implementing this effect by hand requires careful text splitting, accessibility handling, and reduced-motion support that is easy to get wrong. ## Core Features & Use Cases - Masked Word Splitting: Splits text into word spans wrapped in overflow-hidden masks without the paid GSAP SplitText plugin, preserving spaces and the original text via aria-label. - ScrollTrigger Animation: Animates words from yPercent 110 to 0 with configurable duration, stagger, and easing when the element reaches 82% of the viewport. - Accessibility and Safety: Hides text only when JavaScript runs, respects prefers-reduced-motion, and provides a React cleanup pattern using gsap.context. - Use Case: Apply it to a landing page hero heading so each word rises through an invisible mask in a staggered sequence as the user scrolls it into view. ## Quick Start Add a masked staggered word reveal to my hero heading using GSAP ScrollTrigger with the data-masked-reveal attribute.
