staggered-word-reveal

What problem does it solve? Adding polished, editorial-style text animations to headlines and hero copy usually requires heavy animation libraries or custom code that breaks accessibility, hides content without JavaScript, or replays awkwardly on scroll. ## Core Features & Use Cases - Word Splitting with Accessibility: Splits text into word spans while preserving spaces, exposing the original sentence to screen readers via aria-label, and avoiding innerHTML. - Viewport-Triggered Reveal: Uses IntersectionObserver with a 20% threshold and lower viewport bias to trigger the staggered fade-and-rise animation exactly once. - Reduced-Motion and No-JS Fallbacks: Keeps text fully visible when JavaScript is disabled or when the user prefers reduced motion. - Use Case: A portfolio site hero headline like "Build interfaces that feel calm, cinematic, and alive" reveals word by word with a 0.07s stagger as the visitor scrolls it into view, then never replays. ## Quick Start Add a staggered word-by-word reveal animation to my hero headline using IntersectionObserver with the default 0.8s duration and 0.07s stagger.