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

How long typing takes in seconds

data-start

number

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

Text Widget - For static text with fade effects
Counter Widget - For animated numbers
Container Widget - For grouping typewriter elements

PreviousText Widget NextCounter Widget

Last updated 4 days ago

Basic Usage

Attributes

Animation Behavior

Typing Effect

Cursor Behavior

Examples

Simple Typewriter Effect

Multiple Typewriter Messages

Code-Style Typewriter

Styling Options

Font Families

Text Sizes

Colors

Animation Timing

Fast Typing (2 seconds)

Slow Typing (8 seconds)

Delayed Start

Common Use Cases

Terminal/Code Interface

Storytelling

Status Updates

Best Practices

Timing Guidelines

Content Tips

Visual Design

Advanced Techniques

Sequential Messages

Mixed with Other Widgets

Troubleshooting

Text Not Typing

Typing Too Fast/Slow

Cursor Not Showing

Text Overlapping

Related Widgets