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
1<div data-type="text"
2 data-animate="fade"
3 data-ease="easeIn"
4 data-duration-animation="2"
5 data-start="0"
6 class="text-4xl font-bold text-blue-600">
7 Your text content here
8</div>
9Attributes
| 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
1<div class="relative w-full h-full bg-blue-500" data-type="container">
2 <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"
3 data-type="text"
4 data-animate="fade"
5 data-ease="easeIn"
6 data-duration-animation="2"
7 data-start="0">
8 Welcome to Tintage
9 </div>
10</div>
11Multiple Text Elements
1<div class="relative w-full h-full bg-gray-900" data-type="container">
2 <!-- Main title -->
3 <div class="absolute top-1/3 left-1/2 -translate-x-1/2 text-white text-5xl font-bold text-center"
4 data-type="text"
5 data-animate="fade"
6 data-start="0"
7 data-duration-animation="2">
8 Main Title
9 </div>
10
11 <!-- Subtitle -->
12 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 text-gray-300 text-2xl text-center"
13 data-type="text"
14 data-animate="fade"
15 data-start="2"
16 data-duration-animation="2">
17 Supporting subtitle text
18 </div>
19
20 <!-- Footer text -->
21 <div class="absolute bottom-1/4 left-1/2 -translate-x-1/2 text-gray-400 text-lg text-center"
22 data-type="text"
23 data-animate="fade"
24 data-start="4"
25 data-duration-animation="2">
26 Additional information
27 </div>
28</div>
29Styled Text with Gradient
1<div class="relative w-full h-full bg-black" data-type="container">
2 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
3 <div class="text-7xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500"
4 data-type="text"
5 data-animate="fade"
6 data-ease="easeIn"
7 data-duration-animation="3"
8 data-start="0">
9 Gradient Text
10 </div>
11 </div>
12</div>
13Styling Options
Typography Classes
1<!-- Large and bold -->
2<div class="text-6xl font-bold" data-type="text">Bold Statement</div>
3
4<!-- Medium and regular -->
5<div class="text-3xl font-normal" data-type="text">Regular Text</div>
6
7<!-- Small and light -->
8<div class="text-lg font-light" data-type="text">Light Text</div>
9
10<!-- Monospace -->
11<div class="text-2xl font-mono" data-type="text">Code Text</div>
12Color Classes
1<!-- Text colors -->
2<div class="text-white" data-type="text">White text</div>
3<div class="text-black" data-type="text">Black text</div>
4<div class="text-blue-600" data-type="text">Blue text</div>
5<div class="text-red-500" data-type="text">Red text</div>
6<div class="text-green-400" data-type="text">Green text</div>
7
8<!-- Gradient text -->
9<div class="bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-purple-600" data-type="text">
10 Gradient text
11</div>
12Positioning Classes
1<!-- Centered -->
2<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center" data-type="text">
3 Centered text
4</div>
5
6<!-- Top-left -->
7<div class="absolute top-4 left-4" data-type="text">Top-left text</div>
8
9<!-- Bottom-right -->
10<div class="absolute bottom-4 right-4" data-type="text">Bottom-right text</div>
11Animation Timing
Quick Fade (1 second)
1<div data-type="text"
2 data-animate="fade"
3 data-duration-animation="1"
4 data-start="0">
5 Quick fade
6</div>
7Slow Fade (4 seconds)
1<div data-type="text"
2 data-animate="fade"
3 data-duration-animation="4"
4 data-start="0">
5 Slow fade
6</div>
7Delayed Start
1<div data-type="text"
2 data-animate="fade"
3 data-start="3"
4 data-duration-animation="2">
5 Starts after 3 seconds
6</div>
7Common Use Cases
Headlines and Titles
1<div class="text-6xl font-bold text-center"
2 data-type="text"
3 data-animate="fade"
4 data-ease="easeIn"
5 data-duration-animation="2">
6 Breaking News
7</div>
8Labels and Captions
1<div class="text-lg text-gray-600"
2 data-type="text"
3 data-animate="fade"
4 data-start="2"
5 data-duration-animation="1">
6 Photo by John Doe
7</div>
8Call-to-Action Text
1<div class="text-2xl font-semibold text-blue-600"
2 data-type="text"
3 data-animate="fade"
4 data-start="4"
5 data-duration-animation="2">
6 Get Started Today
7</div>
8Best 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-starttime 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-animationvalue - 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-starttimes - 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
Last updated: 2026-01-05