Widgets/Typewriter Widget

Typewriter Widget

Create a typewriter effect that types text character by character with a blinking cursor.

View as MarkdownOpen in ChatGPT Open in Claude

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

Last updated on January 5, 2026