TypewriterTextRevealAnimation

A scroll-triggered typewriter effect that reveals text character-by-character with a blinking cursor. Perfect for headlines, intros, or any content needing a classic typewriter style with dramatic impact.

✨ Features

Character-by-Character Typing: Classic typewriter effect
Scroll-Triggered: Activates when text enters the viewport
Blinking Cursor: Animated cursor that blinks during and after typing
Configurable Speed: Control typing speed and initial delay
Custom Cursor: Change the cursor character (|, _, █, etc.)
Smart Text Extraction: Works with any React element containing text
Reset on Scroll: Option to replay animation when scrolling back

📋 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 { TypewriterTextRevealAnimation } from './components/typewriter-text-reveal-animation';
2
3export default function HomePage() {
4    return (
5        <div className="min-h-screen">
6            <TypewriterTextRevealAnimation>
7                <h1 className="text-6xl font-bold text-center">
8                    Welcome to the future of technology
9                </h1>
10            </TypewriterTextRevealAnimation>
11        </div>
12    );
13}

The text will type out character-by-character with a blinking cursor when it enters the viewport.

🔧 Props

| Prop | Type | Default | Description | | -------------- | ----------------- | ---------------- | --------------------------------------------------- | ---------------------------------------- | | children | React.ReactNode | Lorem ipsum text | Text content to animate | | initialDelay | number | 0 | Delay before typing starts (in milliseconds) | | typeSpeed | number | 50 | Speed per character (in milliseconds) | | playOnce | boolean | true | Whether to animate only once or repeat on re-scroll | | className | string | - | Additional CSS classes for the wrapper | | cursorChar | string | " | " | Character to use for the blinking cursor |

📖 Examples

Fast Typing Speed

tsx.tsxTypeScript

1<TypewriterTextRevealAnimation typeSpeed={30}>
2    <h1 className="text-7xl font-black text-center bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
3        Innovation at Light Speed
4    </h1>
5</TypewriterTextRevealAnimation>

Slow, Dramatic Reveal

tsx.tsxTypeScript

1<TypewriterTextRevealAnimation
2  typeSpeed={120}
3  initialDelay={1000}
4  cursorChar="█"
5>
6  <h2 className="text-4xl font-mono text-green-400 bg-black p-8 rounded-lg">
7    > Initializing quantum processor...
8  </h2>
9</TypewriterTextRevealAnimation>

Custom Cursor Characters

tsx.tsxTypeScript

1{
2    /* Underscore cursor */
3}
4<TypewriterTextRevealAnimation cursorChar="_">
5    <p className="text-2xl font-mono">Classic terminal style</p>
6</TypewriterTextRevealAnimation>;
7
8{
9    /* Block cursor */
10}
11<TypewriterTextRevealAnimation cursorChar="█">
12    <p className="text-2xl font-mono">Retro computer style</p>
13</TypewriterTextRevealAnimation>;
14
15{
16    /* No cursor */
17}
18<TypewriterTextRevealAnimation cursorChar="">
19    <p className="text-2xl">Just typing, no cursor</p>
20</TypewriterTextRevealAnimation>;

Repeating Animation

tsx.tsxTypeScript

1<TypewriterTextRevealAnimation playOnce={false} typeSpeed={75}>
2    <h3 className="text-3xl text-center text-gray-700 dark:text-gray-300">
3        This will replay every time you scroll past
4    </h3>
5</TypewriterTextRevealAnimation>

Sequential Typewriter Effects

tsx.tsxTypeScript

1<div className="space-y-12">
2    <TypewriterTextRevealAnimation initialDelay={0}>
3        <h1 className="text-6xl font-bold">Hello</h1>
4    </TypewriterTextRevealAnimation>
5
6    <TypewriterTextRevealAnimation initialDelay={2000}>
7        <h2 className="text-4xl text-gray-600">Welcome to our platform</h2>
8    </TypewriterTextRevealAnimation>
9
10    <TypewriterTextRevealAnimation initialDelay={5000}>
11        <p className="text-2xl text-blue-600">Let's build something amazing</p>
12    </TypewriterTextRevealAnimation>
13</div>

Code Terminal Style

tsx.tsxTypeScript

1<TypewriterTextRevealAnimation
2    typeSpeed={40}
3    cursorChar="█"
4    className="bg-black p-8 rounded-lg max-w-4xl mx-auto"
5>
6    <pre className="text-green-400 font-mono text-lg">
7        $ npm install awesome-package Installing dependencies... ✓ Project setup
8        complete!
9    </pre>
10</TypewriterTextRevealAnimation>

🎭 Animation Behavior

Typing Sequence

Initial Delay: Waits for specified delay (if any)
Cursor Appears: Blinking cursor starts immediately
Character Typing: Each character appears at the specified speed
Completion: Cursor continues blinking for 2.5 seconds, then disappears

Cursor Animation

Blinking Pattern: Opacity transitions (1 → 0 → 0 → 1) over 1 second
Timing: 10% visible, 70% hidden, 20% visible
Duration: Continues during typing + 2.5 seconds after completion

Reset Behavior

Play Once (true): Animation never repeats
Play Multiple (false): Resets and replays when scrolling back to element

💡 Usage Tips

Speed Guidelines

tsx.tsxTypeScript

1// Very fast (excited, urgent)
2typeSpeed={25}
3
4// Fast (energetic, modern)
5typeSpeed={40}
6
7// Standard (readable, balanced)
8typeSpeed={50}
9
10// Slow (dramatic, emphasis)
11typeSpeed={100}
12
13// Very slow (suspenseful, retro)
14typeSpeed={150}

Content Length Considerations

tsx.tsxTypeScript

1// Short text (1-20 characters)
2<TypewriterTextRevealAnimation typeSpeed={80}>
3  <h1>LAUNCH</h1>
4</TypewriterTextRevealAnimation>
5
6// Medium text (20-60 characters)
7<TypewriterTextRevealAnimation typeSpeed={50}>
8  <h2>Building the future, one line at a time</h2>
9</TypewriterTextRevealAnimation>
10
11// Long text (60+ characters)
12<TypewriterTextRevealAnimation typeSpeed={30}>
13  <p>Long paragraphs work better with faster speeds to maintain user attention and prevent waiting too long for the full message to appear.</p>
14</TypewriterTextRevealAnimation>

Terminal/Code Themes

tsx.tsxTypeScript

1// Matrix style
2<TypewriterTextRevealAnimation
3  typeSpeed={35}
4  cursorChar="█"
5  className="bg-black"
6>
7  <p className="text-green-400 font-mono">Wake up, Neo...</p>
8</TypewriterTextRevealAnimation>
9
10// Retro computer
11<TypewriterTextRevealAnimation
12  typeSpeed={60}
13  cursorChar="_"
14  className="bg-blue-900"
15>
16  <p className="text-amber-400 font-mono">READY.</p>
17</TypewriterTextRevealAnimation>
18
19// Modern terminal
20<TypewriterTextRevealAnimation
21  typeSpeed={40}
22  cursorChar="|"
23  className="bg-gray-900 p-4 rounded"
24>
25  <p className="text-white font-mono">user@localhost:~$ </p>
26</TypewriterTextRevealAnimation>

Marketing Headlines

tsx.tsxTypeScript

1<section className="hero min-h-screen flex items-center justify-center">
2    <TypewriterTextRevealAnimation initialDelay={500} typeSpeed={60}>
3        <h1 className="text-8xl font-black text-center">REVOLUTIONIZE</h1>
4    </TypewriterTextRevealAnimation>
5</section>

🔧 Technical Notes

Text Extraction: Automatically extracts text from any React element
Style Preservation: Maintains original className and styling
Character-Based: Animation works at the character level, not word level
Cursor Positioning: Cursor appears after the last typed character
Memory Efficient: Cleans up intervals and timeouts on component unmount
Viewport Detection: Uses intersection observer for scroll triggering