Staggered Word Reveal

Use When

• A short headline, intro, or pull quote should reveal word by word.
• The motion should feel editorial, premium, and restrained.
• The reveal should trigger only once when the text enters the viewport.
• The project does not need heavy GSAP SplitText behavior.

Motion Defaults

• Initial state: opacity: 0, transform: translateY(20px).
• Final state: opacity: 1, transform: translateY(0).
• Duration: 0.8s.
• Ease: cubic-bezier(0.16, 1, 0.3, 1).
• Stagger: 0.06s to 0.08s per word. Default to 0.07s.
• Trigger: start around 20% visible, with a slight lower viewport bias.
• Replay: once only.

HTML