Typewriter Widget
The Typewriter Widget creates a realistic typewriter effect that types out text character by character with a blinking cursor. It's perfect for creating engaging, dynamic text animations that draw attention and add personality to your videos.
Basic Usage
1<div data-type="typewriter"
2 data-duration-animation="5"
3 data-start="2"
4 class="text-3xl font-mono text-green-600">
5 This text will be typed out character by character
6</div>
7Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
| data-type | string | - | Must be "typewriter" |
| data-duration-animation | number | 3 | How long typing takes in seconds |
| data-start | number | 0 | When typing starts in seconds |
Animation Behavior
Typing Effect
The typewriter widget creates a realistic typing animation:
- Before start: No text visible, no cursor
- During animation: Text appears character by character with blinking cursor
- After animation: Full text visible, cursor disappears
Cursor Behavior
- During typing: Blinking cursor appears after the last typed character
- Cursor style: Vertical line (|) that blinks every 1 second
- After completion: Cursor disappears completely
Examples
Simple Typewriter Effect
1<div class="relative w-full h-full bg-black" data-type="container">
2 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-4xl font-mono text-center"
3 data-type="typewriter"
4 data-duration-animation="5"
5 data-start="1">
6 Building the future of video creation...
7 </div>
8</div>
9Multiple Typewriter Messages
1<div class="relative w-full h-full bg-gray-900" data-type="container">
2 <!-- First message -->
3 <div class="absolute top-1/3 left-1/2 -translate-x-1/2 text-white text-3xl font-mono text-center"
4 data-type="typewriter"
5 data-duration-animation="4"
6 data-start="0">
7 Welcome to our platform
8 </div>
9
10 <!-- Second message -->
11 <div class="absolute top-2/3 left-1/2 -translate-x-1/2 text-green-400 text-2xl font-mono text-center"
12 data-type="typewriter"
13 data-duration-animation="3"
14 data-start="5">
15 Let's create something amazing
16 </div>
17</div>
18Code-Style Typewriter
1<div class="relative w-full h-full bg-gray-800" data-type="container">
2 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-green-400 text-2xl font-mono">
3 <div data-type="typewriter" data-duration-animation="3" data-start="0">
4 $ npm install tintage
5 </div>
6 <div data-type="typewriter" data-duration-animation="2" data-start="4">
7 Installation complete
8 </div>
9 <div data-type="typewriter" data-duration-animation="4" data-start="7">
10 $ tintage create video
11 </div>
12 </div>
13</div>
14Styling Options
Font Families
1<!-- Monospace (recommended for typewriter effect) -->
2<div class="font-mono" data-type="typewriter">Monospace text</div>
3
4<!-- Sans-serif -->
5<div class="font-sans" data-type="typewriter">Sans-serif text</div>
6
7<!-- Serif -->
8<div class="font-serif" data-type="typewriter">Serif text</div>
9Text Sizes
1<!-- Small -->
2<div class="text-lg" data-type="typewriter">Small text</div>
3
4<!-- Medium -->
5<div class="text-3xl" data-type="typewriter">Medium text</div>
6
7<!-- Large -->
8<div class="text-5xl" data-type="typewriter">Large text</div>
9Colors
1<!-- Terminal green -->
2<div class="text-green-400" data-type="typewriter">Terminal style</div>
3
4<!-- Classic white -->
5<div class="text-white" data-type="typewriter">Classic white</div>
6
7<!-- Bright cyan -->
8<div class="text-cyan-400" data-type="typewriter">Bright cyan</div>
9
10<!-- Warm orange -->
11<div class="text-orange-400" data-type="typewriter">Warm orange</div>
12Animation Timing
Fast Typing (2 seconds)
1<div data-type="typewriter"
2 data-duration-animation="2"
3 data-start="0">
4 Quick typing
5</div>
6Slow Typing (8 seconds)
1<div data-type="typewriter"
2 data-duration-animation="8"
3 data-start="0">
4 Slow, deliberate typing for emphasis
5</div>
6Delayed Start
1<div data-type="typewriter"
2 data-duration-animation="4"
3 data-start="3">
4 Starts typing after 3 seconds
5</div>
6Common Use Cases
Terminal/Code Interface
1<div class="relative w-full h-full bg-black" data-type="container">
2 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-green-400 text-2xl font-mono">
3 <div data-type="typewriter" data-duration-animation="3" data-start="0">
4 > Initializing system...
5 </div>
6 <div data-type="typewriter" data-duration-animation="2" data-start="4">
7 > Loading components...
8 </div>
9 <div data-type="typewriter" data-duration-animation="4" data-start="7">
10 > Ready to create videos!
11 </div>
12 </div>
13</div>
14Storytelling
1<div class="relative w-full h-full bg-gray-900" data-type="container">
2 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-3xl font-mono text-center max-w-4xl">
3 <div data-type="typewriter" data-duration-animation="6" data-start="0">
4 Once upon a time, there was a platform...
5 </div>
6 <div data-type="typewriter" data-duration-animation="5" data-start="7">
7 That made video creation simple and fun.
8 </div>
9 </div>
10</div>
11Status Updates
1<div class="relative w-full h-full bg-blue-900" data-type="container">
2 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-blue-200 text-2xl font-mono text-center">
3 <div data-type="typewriter" data-duration-animation="3" data-start="0">
4 Processing your request...
5 </div>
6 <div data-type="typewriter" data-duration-animation="2" data-start="4">
7 Almost done...
8 </div>
9 <div data-type="typewriter" data-duration-animation="3" data-start="7">
10 Complete! Your video is ready.
11 </div>
12 </div>
13</div>
14Best Practices
Timing Guidelines
| Text Length | Recommended Duration | Use Case |
|---|---|---|
| Short (1-10 words) | 2-3 seconds | Quick messages |
| Medium (10-25 words) | 4-6 seconds | Standard content |
| Long (25+ words) | 6-10 seconds | Detailed messages |
Content Tips
- Keep it readable: Don't make text too long for a single typewriter effect
- Break up long content: Use multiple typewriter widgets for long messages
- Use appropriate fonts: Monospace fonts work best for the typewriter effect
- Consider context: Match the typing speed to the message's urgency
Visual Design
- Terminal aesthetic: Use green text on black background for code/terminal feel
- High contrast: Ensure good readability with contrasting colors
- Consistent spacing: Use proper line spacing for multiple messages
- Font choice: Monospace fonts enhance the typewriter effect
Advanced Techniques
Sequential Messages
1<div class="relative w-full h-full bg-black" data-type="container">
2 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-green-400 text-2xl font-mono">
3 <div data-type="typewriter" data-duration-animation="3" data-start="0">
4 Step 1: Planning
5 </div>
6 <div data-type="typewriter" data-duration-animation="3" data-start="4">
7 Step 2: Creation
8 </div>
9 <div data-type="typewriter" data-duration-animation="3" data-start="8">
10 Step 3: Success
11 </div>
12 </div>
13</div>
14Mixed with Other Widgets
1<div class="relative w-full h-full bg-gray-800" data-type="container">
2 <!-- Static title -->
3 <div class="absolute top-1/4 left-1/2 -translate-x-1/2 text-white text-4xl font-bold text-center"
4 data-type="text"
5 data-animate="fade"
6 data-start="0"
7 data-duration-animation="2">
8 System Status
9 </div>
10
11 <!-- Typewriter message -->
12 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 text-green-400 text-2xl font-mono text-center"
13 data-type="typewriter"
14 data-duration-animation="5"
15 data-start="2">
16 All systems operational
17 </div>
18
19 <!-- Counter -->
20 <div class="absolute bottom-1/4 left-1/2 -translate-x-1/2 text-white text-3xl font-bold text-center"
21 data-type="counter"
22 data-end-number="100"
23 data-start="8"
24 data-duration-animation="2">
25 </div>
26</div>
27Troubleshooting
Text Not Typing
Problem: Typewriter effect doesn't work
Solutions:
- Check that
data-type="typewriter"is set correctly - Verify the element has text content inside
- Make sure
data-starttime is reasonable - Ensure
data-duration-animationis set
Typing Too Fast/Slow
Problem: Animation speed doesn't feel right
Solutions:
- Adjust
data-duration-animationvalue - Longer duration = slower typing
- Shorter duration = faster typing
- Consider the length of your text
Cursor Not Showing
Problem: No blinking cursor appears
Solutions:
- This is normal behavior - cursor only shows during typing
- Cursor disappears after animation completes
- Check that the animation is actually running
Text Overlapping
Problem: Multiple typewriter elements overlap
Solutions:
- Use different positioning classes
- Space out the
data-starttimes - Use different vertical positions
- Add margins between elements
Related Widgets
- Text Widget - For static text with fade effects
- Counter Widget - For animated numbers
- Container Widget - For grouping typewriter elements
Last updated: 2026-01-05