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

<div data-type="typewriter" 
     data-duration-animation="5" 
     data-start="2"
     class="text-3xl font-mono text-green-600">
  This text will be typed out character by character
</div>

Attributes

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

<div class="relative w-full h-full bg-black" data-type="container">
  <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" 
       data-type="typewriter" 
       data-duration-animation="5" 
       data-start="1">
    Building the future of video creation...
  </div>
</div>

Multiple Typewriter Messages

<div class="relative w-full h-full bg-gray-900" data-type="container">
  <!-- First message -->
  <div class="absolute top-1/3 left-1/2 -translate-x-1/2 text-white text-3xl font-mono text-center" 
       data-type="typewriter" 
       data-duration-animation="4" 
       data-start="0">
    Welcome to our platform
  </div>
  
  <!-- Second message -->
  <div class="absolute top-2/3 left-1/2 -translate-x-1/2 text-green-400 text-2xl font-mono text-center" 
       data-type="typewriter" 
       data-duration-animation="3" 
       data-start="5">
    Let's create something amazing
  </div>
</div>

Code-Style Typewriter

<div class="relative w-full h-full bg-gray-800" data-type="container">
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-green-400 text-2xl font-mono">
    <div data-type="typewriter" data-duration-animation="3" data-start="0">
      $ npm install tintage
    </div>
    <div data-type="typewriter" data-duration-animation="2" data-start="4">
      ✓ Installation complete
    </div>
    <div data-type="typewriter" data-duration-animation="4" data-start="7">
      $ tintage create video
    </div>
  </div>
</div>

Styling Options

Font Families

<!-- Monospace (recommended for typewriter effect) -->
<div class="font-mono" data-type="typewriter">Monospace text</div>

<!-- Sans-serif -->
<div class="font-sans" data-type="typewriter">Sans-serif text</div>

<!-- Serif -->
<div class="font-serif" data-type="typewriter">Serif text</div>

Text Sizes

<!-- Small -->
<div class="text-lg" data-type="typewriter">Small text</div>

<!-- Medium -->
<div class="text-3xl" data-type="typewriter">Medium text</div>

<!-- Large -->
<div class="text-5xl" data-type="typewriter">Large text</div>

Colors

<!-- Terminal green -->
<div class="text-green-400" data-type="typewriter">Terminal style</div>

<!-- Classic white -->
<div class="text-white" data-type="typewriter">Classic white</div>

<!-- Bright cyan -->
<div class="text-cyan-400" data-type="typewriter">Bright cyan</div>

<!-- Warm orange -->
<div class="text-orange-400" data-type="typewriter">Warm orange</div>

Animation Timing

Fast Typing (2 seconds)

<div data-type="typewriter" 
     data-duration-animation="2" 
     data-start="0">
  Quick typing
</div>

Slow Typing (8 seconds)

<div data-type="typewriter" 
     data-duration-animation="8" 
     data-start="0">
  Slow, deliberate typing for emphasis
</div>

Delayed Start

<div data-type="typewriter" 
     data-duration-animation="4" 
     data-start="3">
  Starts typing after 3 seconds
</div>

Common Use Cases

Terminal/Code Interface

<div class="relative w-full h-full bg-black" data-type="container">
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-green-400 text-2xl font-mono">
    <div data-type="typewriter" data-duration-animation="3" data-start="0">
      > Initializing system...
    </div>
    <div data-type="typewriter" data-duration-animation="2" data-start="4">
      > Loading components...
    </div>
    <div data-type="typewriter" data-duration-animation="4" data-start="7">
      > Ready to create videos!
    </div>
  </div>
</div>

Storytelling

<div class="relative w-full h-full bg-gray-900" data-type="container">
  <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">
    <div data-type="typewriter" data-duration-animation="6" data-start="0">
      Once upon a time, there was a platform...
    </div>
    <div data-type="typewriter" data-duration-animation="5" data-start="7">
      That made video creation simple and fun.
    </div>
  </div>
</div>

Status Updates

<div class="relative w-full h-full bg-blue-900" data-type="container">
  <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">
    <div data-type="typewriter" data-duration-animation="3" data-start="0">
      Processing your request...
    </div>
    <div data-type="typewriter" data-duration-animation="2" data-start="4">
      Almost done...
    </div>
    <div data-type="typewriter" data-duration-animation="3" data-start="7">
      Complete! Your video is ready.
    </div>
  </div>
</div>

Best 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

<div class="relative w-full h-full bg-black" data-type="container">
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-green-400 text-2xl font-mono">
    <div data-type="typewriter" data-duration-animation="3" data-start="0">
      Step 1: Planning
    </div>
    <div data-type="typewriter" data-duration-animation="3" data-start="4">
      Step 2: Creation
    </div>
    <div data-type="typewriter" data-duration-animation="3" data-start="8">
      Step 3: Success
    </div>
  </div>
</div>

Mixed with Other Widgets

<div class="relative w-full h-full bg-gray-800" data-type="container">
  <!-- Static title -->
  <div class="absolute top-1/4 left-1/2 -translate-x-1/2 text-white text-4xl font-bold text-center" 
       data-type="text" 
       data-animate="fade" 
       data-start="0" 
       data-duration-animation="2">
    System Status
  </div>
  
  <!-- Typewriter message -->
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 text-green-400 text-2xl font-mono text-center" 
       data-type="typewriter" 
       data-duration-animation="5" 
       data-start="2">
    All systems operational
  </div>
  
  <!-- Counter -->
  <div class="absolute bottom-1/4 left-1/2 -translate-x-1/2 text-white text-3xl font-bold text-center" 
       data-type="counter" 
       data-end-number="100" 
       data-start="8" 
       data-duration-animation="2">
  </div>
</div>

Troubleshooting

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-start time is reasonable

• Ensure data-duration-animation is set

Typing Too Fast/Slow

Problem: Animation speed doesn't feel right

Solutions:

• Adjust data-duration-animation value

• 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-start times

• 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

---