StaggeredTextRevealAnimation

A scroll-triggered animation that reveals text word-by-word with a smooth upward stagger effect. Perfect for marketing content, headlines, and expressive typography that needs dramatic impact.

✨ Features

Word-by-Word Animation: Each word slides up individually
Scroll-Triggered: Activates when text enters the viewport
Customizable Timing: Control initial delay and stagger between words
Smart Text Extraction: Automatically extracts text from any React element
Class Preservation: Maintains original styling from your text elements
Play Once or Repeat: Choose animation behavior on scroll

📋 Prerequisites

This component requires:

Next.js (with App Router)
Tailwind CSS 4

🚀 Installation

npm install motion

📁 Files Included

The component bundle includes:

index.tsx - Main component
README.md - This documentation

🎯 Basic Usage

tsx.tsxTypeScript

1import { StaggeredTextRevealAnimation } from './components/staggered-text-reveal-animation';
2
3export default function HomePage() {
4    return (
5        <div className="min-h-screen">
6            <StaggeredTextRevealAnimation>
7                <h1 className="text-6xl font-bold text-center">
8                    Welcome to our amazing platform
9                </h1>
10            </StaggeredTextRevealAnimation>
11        </div>
12    );
13}

Each word will slide up with a slight delay, creating a cascading reveal effect.

🔧 Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	Lorem ipsum text	Text content to animate
`initialDelay`	`number`	`0`	Delay before first word starts (in seconds)
`staggerDelay`	`number`	`0.05`	Delay between each word (in seconds)
`playOnce`	`boolean`	`true`	Whether to animate only once or repeat on re-scroll
`className`	`string`	-	Additional CSS classes for the wrapper

📖 Examples

Hero Headline

tsx.tsxTypeScript

1<StaggeredTextRevealAnimation>
2    <h1 className="text-8xl font-black text-center bg-gradient-to-r from-purple-600 to-pink-600 bg-clip-text text-transparent">
3        Revolutionize Your Workflow
4    </h1>
5</StaggeredTextRevealAnimation>

Marketing Tagline with Slower Stagger

tsx.tsxTypeScript

1<StaggeredTextRevealAnimation initialDelay={0.5} staggerDelay={0.15}>
2    <h2 className="text-4xl font-semibold text-gray-800 dark:text-gray-200 max-w-4xl text-center">
3        Build faster, deploy smarter, and scale effortlessly with our platform
4    </h2>
5</StaggeredTextRevealAnimation>

Repeating Animation

tsx.tsxTypeScript

1<StaggeredTextRevealAnimation playOnce={false} staggerDelay={0.08}>
2    <p className="text-2xl text-center text-blue-600 font-medium">
3        Innovation happens here every single day
4    </p>
5</StaggeredTextRevealAnimation>

Quote or Testimonial

tsx.tsxTypeScript

1<StaggeredTextRevealAnimation
2    initialDelay={0.3}
3    staggerDelay={0.04}
4    className="max-w-6xl mx-auto"
5>
6    <blockquote className="text-3xl font-light italic text-center text-gray-700 dark:text-gray-300 leading-relaxed">
7        "This platform has completely transformed how we approach digital
8        marketing. The results speak for themselves."
9    </blockquote>
10</StaggeredTextRevealAnimation>

Multiple Staggered Sections

tsx.tsxTypeScript

1<div className="space-y-16">
2    <StaggeredTextRevealAnimation initialDelay={0}>
3        <h1 className="text-7xl font-bold text-center">Our Mission</h1>
4    </StaggeredTextRevealAnimation>
5
6    <StaggeredTextRevealAnimation initialDelay={1.5} staggerDelay={0.06}>
7        <p className="text-2xl text-center max-w-4xl mx-auto text-gray-600 dark:text-gray-400">
8            To empower creators and businesses with tools that unlock their full
9            potential
10        </p>
11    </StaggeredTextRevealAnimation>
12
13    <StaggeredTextRevealAnimation initialDelay={3} staggerDelay={0.1}>
14        <h2 className="text-4xl font-semibold text-center text-blue-600">
15            Join thousands of satisfied customers
16        </h2>
17    </StaggeredTextRevealAnimation>
18</div>

🎭 Animation Behavior

Word Detection

Automatically splits text content by spaces
Preserves original styling and classes from your elements
Each word becomes an individual animated element

Animation Details

Initial State: Words start 12px below and transparent (opacity: 0)
Final State: Words slide to normal position with full opacity
Duration: 1 second per word with easeOut timing
Spacing: Non-breaking spaces preserve word separation

Trigger Mechanism

Animation starts when entire element enters viewport
Uses amount: "all" for precise control
Configurable play-once or repeat behavior

💡 Usage Tips

Timing Guidelines

tsx.tsxTypeScript

1// Quick, snappy reveals
2staggerDelay={0.03}
3
4// Standard pace (recommended)
5staggerDelay={0.05}
6
7// Dramatic, slow reveals
8staggerDelay={0.12}
9
10// Very long text
11staggerDelay={0.02}

Content Length Considerations

tsx.tsxTypeScript

1// Short headlines (2-5 words)
2<StaggeredTextRevealAnimation staggerDelay={0.1}>
3  <h1>Revolutionary Platform</h1>
4</StaggeredTextRevealAnimation>
5
6// Medium content (6-15 words)
7<StaggeredTextRevealAnimation staggerDelay={0.05}>
8  <h2>Transform your business with cutting-edge technology solutions</h2>
9</StaggeredTextRevealAnimation>
10
11// Long paragraphs (15+ words)
12<StaggeredTextRevealAnimation staggerDelay={0.03}>
13  <p>Long paragraph content works best with faster stagger...</p>
14</StaggeredTextRevealAnimation>

Sequential Reveals

tsx.tsxTypeScript

1const delays = [0, 2, 4, 6]; // Stagger section appearances
2
3{
4    headlines.map((text, index) => (
5        <StaggeredTextRevealAnimation
6            key={index}
7            initialDelay={delays[index]}
8            staggerDelay={0.05}
9        >
10            <h2 className="text-4xl font-bold">{text}</h2>
11        </StaggeredTextRevealAnimation>
12    ));
13}

Landing Page Hero

tsx.tsxTypeScript

1<section className="min-h-screen flex items-center justify-center">
2    <div className="text-center space-y-12">
3        <StaggeredTextRevealAnimation initialDelay={0.5}>
4            <h1 className="text-9xl font-black">TRANSFORM</h1>
5        </StaggeredTextRevealAnimation>
6
7        <StaggeredTextRevealAnimation initialDelay={2.5} staggerDelay={0.08}>
8            <p className="text-3xl text-gray-600">Your ideas into reality</p>
9        </StaggeredTextRevealAnimation>
10    </div>
11</section>

🔧 Technical Notes

Text Extraction: Component intelligently extracts text from any React element
Style Preservation: Original className from children is automatically applied
Non-Breaking Spaces: Uses \u00A0 to maintain proper word spacing
Inline Display: Each word uses inline-block for proper text flow
Viewport Detection: Efficient intersection observer prevents unnecessary animations