text-reveal-and-stagger

name	text-reveal-and-stagger
description	Use when entering hero text or making titles dramatic. Staggered text reveal makes titles unfold dramatically.

Text Reveal and Stagger

Staggered text reveal: words appear one at a time, 80-150ms delay between. Dramatic and editorial.

Word-stagger pattern

Wrap each word in span, animate with staggered delay:

<h1 class='stagger'>
  <span class='word'>The</span>
  <span class='word'>most</span>
  <span class='word'>accurate</span>
  <span class='word'>AI</span>
  <span class='word'>card</span>
  <span class='word'>grader</span>
</h1>

CSS animation with animation-delay calculated per word.

CSS stagger

.stagger .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: word-rise 0.6s ease-out forwards;
}
.stagger .word:nth-child(1) { animation-delay: 0.1s; }
.stagger .word:nth-child(2) { animation-delay: 0.2s; }
.stagger .word:nth-child(3) { animation-delay: 0.3s; }
.stagger .word:nth-child(4) { animation-delay: 0.4s; }
.stagger .word:nth-child(5) { animation-delay: 0.5s; }
@keyframes word-rise {
  to { opacity: 1; transform: translateY(0); }
}

When to use

1. Hero headline on key landing pages
2. Section reveals on scroll
3. Quote/testimonial reveal
4. Product name introduction

Don't use on every heading — saves drama for important moments.

Where this fits in the X3 empire

Used on CardPrepAI hero and methodology page reveal.