Widgets/Text Widget

Text Widget

Display static or animated text with smooth fade effects.

View as MarkdownOpen in ChatGPT Open in Claude

The Text Widget displays static or animated text content with fade animations. It’s perfect for headlines, titles, labels, and any text that needs to appear with a smooth fade-in effect.

Basic Usage

<div
  data-type="text"
  data-animate="fade"
  data-ease="easeIn"
  data-duration-animation="2"
  data-start="0"
  class="text-4xl font-bold text-blue-600"
>
  Your text content here
</div>

Attributes

Attribute Type Default Description
data-type string - Must be "text"
data-animate string - Animation type: "fade"
data-ease string - Easing function: "easeIn", "easeOut"
data-duration-animation number 2 Animation duration in seconds
data-start number 0 When animation starts in seconds

Animation Behavior

Fade Animation

The text widget supports fade animations that smoothly transition the element’s opacity:

  • Before start: Element is invisible (opacity: 0)
  • During animation: Fades in from 0 to 1 opacity
  • After animation: Remains fully visible (opacity: 1)

Easing Functions

Easing Description Best For
easeIn Slow start, fast end Text appearing
easeOut Fast start, slow end Text disappearing
Default Cubic ease-out General use

Examples

Simple Fade-In Text

<div class="relative w-full h-full bg-blue-500" data-type="container">
  <div
    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-6xl font-bold text-center"
    data-type="text"
    data-animate="fade"
    data-ease="easeIn"
    data-duration-animation="2"
    data-start="0"
  >
    Welcome to Tintage
  </div>
</div>

Multiple Text Elements

<div class="relative w-full h-full bg-gray-900" data-type="container">
  <!-- Main title -->
  <div
    class="absolute top-1/3 left-1/2 -translate-x-1/2 text-white text-5xl font-bold text-center"
    data-type="text"
    data-animate="fade"
    data-start="0"
    data-duration-animation="2"
  >
    Main Title
  </div>

  <!-- Subtitle -->
  <div
    class="absolute top-1/2 left-1/2 -translate-x-1/2 text-gray-300 text-2xl text-center"
    data-type="text"
    data-animate="fade"
    data-start="2"
    data-duration-animation="2"
  >
    Supporting subtitle text
  </div>

  <!-- Footer text -->
  <div
    class="absolute bottom-1/4 left-1/2 -translate-x-1/2 text-gray-400 text-lg text-center"
    data-type="text"
    data-animate="fade"
    data-start="4"
    data-duration-animation="2"
  >
    Additional information
  </div>
</div>

Styled Text with Gradient

<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-center"
  >
    <div
      class="text-7xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500"
      data-type="text"
      data-animate="fade"
      data-ease="easeIn"
      data-duration-animation="3"
      data-start="0"
    >
      Gradient Text
    </div>
  </div>
</div>

Styling Options

Typography Classes

<!-- Large and bold -->
<div class="text-6xl font-bold" data-type="text">Bold Statement</div>

<!-- Medium and regular -->
<div class="text-3xl font-normal" data-type="text">Regular Text</div>

<!-- Small and light -->
<div class="text-lg font-light" data-type="text">Light Text</div>

<!-- Monospace -->
<div class="text-2xl font-mono" data-type="text">Code Text</div>

Color Classes

<!-- Text colors -->
<div class="text-white" data-type="text">White text</div>
<div class="text-black" data-type="text">Black text</div>
<div class="text-blue-600" data-type="text">Blue text</div>
<div class="text-red-500" data-type="text">Red text</div>
<div class="text-green-400" data-type="text">Green text</div>

<!-- Gradient text -->
<div
  class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-purple-600"
  data-type="text"
>
  Gradient text
</div>

Positioning Classes

<!-- Centered -->
<div
  class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center"
  data-type="text"
>
  Centered text
</div>

<!-- Top-left -->
<div class="absolute top-4 left-4" data-type="text">Top-left text</div>

<!-- Bottom-right -->
<div class="absolute bottom-4 right-4" data-type="text">Bottom-right text</div>

Animation Timing

Quick Fade (1 second)

<div
  data-type="text"
  data-animate="fade"
  data-duration-animation="1"
  data-start="0"
>
  Quick fade
</div>

Slow Fade (4 seconds)

<div
  data-type="text"
  data-animate="fade"
  data-duration-animation="4"
  data-start="0"
>
  Slow fade
</div>

Delayed Start

<div
  data-type="text"
  data-animate="fade"
  data-start="3"
  data-duration-animation="2"
>
  Starts after 3 seconds
</div>

Common Use Cases

Headlines and Titles

<div
  class="text-6xl font-bold text-center"
  data-type="text"
  data-animate="fade"
  data-ease="easeIn"
  data-duration-animation="2"
>
  Breaking News
</div>

Labels and Captions

<div
  class="text-lg text-gray-600"
  data-type="text"
  data-animate="fade"
  data-start="2"
  data-duration-animation="1"
>
  Photo by John Doe
</div>

Call-to-Action Text

<div
  class="text-2xl font-semibold text-blue-600"
  data-type="text"
  data-animate="fade"
  data-start="4"
  data-duration-animation="2"
>
  Get Started Today
</div>

Best Practices

Timing

  • Quick text: Use 1-2 second durations for labels and captions
  • Main content: Use 2-3 second durations for headlines and titles
  • Emphasis: Use longer durations (3-4 seconds) for important messages

Styling

  • Contrast: Ensure good contrast between text and background
  • Readability: Use appropriate font sizes for your content
  • Hierarchy: Use different sizes and weights to create visual hierarchy

Positioning

  • Center important text: Use centering classes for main content
  • Corner positioning: Use corners for labels, timestamps, and secondary info
  • Consistent spacing: Use margin and padding classes for consistent spacing

Troubleshooting

Text Not Appearing

Problem: Text doesn’t show up in the video

Solutions:

  • Check that data-type="text" is set correctly
  • Verify the element has content inside the tags
  • Make sure data-start time is reasonable (not too high)
  • Ensure the text color contrasts with the background

Animation Too Fast/Slow

Problem: Animation timing doesn’t feel right

Solutions:

  • Adjust data-duration-animation value
  • Longer duration = slower animation
  • Shorter duration = faster animation
  • Test different values to find the right timing

Text Overlapping

Problem: Multiple text elements overlap

Solutions:

  • Use different positioning classes
  • Add margins or padding between elements
  • Space out the data-start times
  • Use different vertical positions (top, middle, bottom)

Poor Readability

Problem: Text is hard to read

Solutions:

  • Increase font size with larger text classes
  • Improve contrast with different color classes
  • Add background colors or shadows
  • Use bold or semibold font weights

Last updated on January 5, 2026