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

Animation duration in seconds

data-start

number

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

Typewriter Widget - For typing effects
Container Widget - For grouping text elements
Image Widget - For combining text with images

PreviousWidgets NextTypewriter Widget

Last updated 4 days ago

Basic Usage

Attributes

Animation Behavior

Fade Animation

Easing Functions

Examples

Simple Fade-In Text

Multiple Text Elements

Styled Text with Gradient

Styling Options

Typography Classes

Color Classes

Positioning Classes

Animation Timing

Quick Fade (1 second)

Slow Fade (4 seconds)

Delayed Start

Common Use Cases

Headlines and Titles

Labels and Captions

Call-to-Action Text

Best Practices

Timing

Styling

Positioning

Troubleshooting

Text Not Appearing

Animation Too Fast/Slow

Text Overlapping

Poor Readability

Related Widgets