Text Widget

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

Related Widgets

• Typewriter Widget - For typing effects

• Container Widget - For grouping text elements

• Image Widget - For combining text with images

---