Widgets
Tintage's template system includes several specialized widgets that create different types of animations and effects. Each widget is designed for specific use cases and can be combined to create complex, engaging video templates.
Available Widgets
Text Widget
Animated text with fade effects
The Text Widget displays static or animated text content with smooth fade animations. Perfect for headlines, titles, labels, and any text that needs to appear with a professional fade-in effect.
Key Features:
- Fade-in animations with customizable easing
- Support for all CSS styling and Tailwind classes
- Perfect for headlines and important text
Typewriter Widget
Character-by-character typing animation
The Typewriter Widget creates a realistic typewriter effect that types out text character by character with a blinking cursor. Ideal for creating engaging, dynamic text animations that draw attention.
Key Features:
- Realistic typing animation with blinking cursor
- Customizable typing speed
- Perfect for code, messages, and storytelling
Counter Widget
Animated numbers counting up to target values
The Counter Widget animates a number counting up from 0 to a target value with smooth interpolation. Excellent for displaying statistics, metrics, achievements, and any numerical data that needs to make an impact.
Key Features:
- Smooth counting animation with cubic easing
- Support for integers and decimals
- Automatic number formatting with commas
Image Widget
Images with fade animations and styling
The Image Widget displays images with optional fade animations. Perfect for logos, photos, graphics, and any visual content that needs to appear smoothly in your videos.
Key Features:
- Fade-in animations for images
- Support for all image formats (JPG, PNG, GIF, WebP)
- Full CSS styling support including shadows and effects
Container Widget
Layout structure and element grouping
The Container Widget groups elements together and provides layout structure. It supports both HTML and SVG elements, making it the foundation for organizing your template content.
Key Features:
- Groups related elements together
- Supports HTML and SVG containers
- Essential for creating complex layouts
How to Use Widgets
Basic Structure
Every widget uses the data-type attribute to specify its type:
1<div data-type="text" data-animate="fade">
2 Your content here
3</div>
4Common Attributes
Most widgets share these common attributes:
data-start- When the animation starts (in seconds)data-duration-animation- How long the animation takes (in seconds)data-animate- Animation type (usually "fade")data-ease- Easing function ("easeIn", "easeOut")
Combining Widgets
Widgets work best when combined together:
1<div class="relative w-full h-full bg-blue-500" data-type="container">
2 <!-- Text widget -->
3 <div class="absolute top-1/4 left-1/2 -translate-x-1/2 text-white text-4xl font-bold text-center"
4 data-type="text"
5 data-animate="fade"
6 data-start="0"
7 data-duration-animation="2">
8 Welcome
9 </div>
10
11 <!-- Typewriter widget -->
12 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 text-white text-2xl font-mono text-center"
13 data-type="typewriter"
14 data-start="2"
15 data-duration-animation="4">
16 This text will be typed out
17 </div>
18
19 <!-- Counter widget -->
20 <div class="absolute bottom-1/4 left-1/2 -translate-x-1/2 text-white text-6xl font-bold text-center"
21 data-type="counter"
22 data-end-number="1000"
23 data-start="6"
24 data-duration-animation="3">
25 </div>
26</div>
27Getting Started
- Choose your widgets: Browse the individual widget pages to see what each one can do
- Experiment: Combine different widgets to create your own unique templates
Best Practices
- Use containers: Always wrap your content in a container widget
- Plan your timing: Space out animations to create smooth sequences
- Test frequently: Render videos often to see your progress
- Keep it simple: Start with basic combinations before trying complex layouts
Reference
If you need full attribute lists and examples, open the individual widget pages linked above.
Animation Timing Reference
| Easing | Description | Use Case |
|---|---|---|
| easeIn | Slow start, fast end | Text appearing |
| easeOut | Fast start, slow end | Text disappearing |
| Default | Cubic ease-out | General animations |
| Animation Type | Recommended Duration | Use Case |
|---|---|---|
| Text fade | 1-3 seconds | Headlines, titles |
| Typewriter | 3-8 seconds | Long text, messages |
| Counter | 2-6 seconds | Statistics, numbers |
| Image fade | 1-2 seconds | Logos, photos |
Video timeline:
- Total duration: 200 frames at 30 FPS (6.67 seconds)
- Planning: Space animations to fit within this timeframe
- Sequencing: Use
data-startto create smooth transitions
Styling Reference
| Category | Classes | Description |
|---|---|---|
| Position | absolute, relative, fixed | Element positioning |
| Layout | top-1/2, left-1/2, -translate-x-1/2 | Centering elements |
| Typography | text-4xl, font-bold, text-center | Text styling |
| Colors | text-blue-600, bg-red-500 | Text and background colors |
| Spacing | mt-4, px-8, py-2 | Margins and padding |
| Size | w-full, h-full, w-32, h-32 | Width and height |
1<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #3b82f6; font-size: 2rem;">
2 Inline styled content
3</div>
4SVG attributes are automatically converted from kebab-case to camelCase:
| HTML Attribute | React Property |
|---|---|
| stroke-width | strokeWidth |
| stroke-linecap | strokeLinecap |
| stroke-linejoin | strokeLinejoin |
| stroke-dasharray | strokeDasharray |
| fill-opacity | fillOpacity |
| stroke-opacity | strokeOpacity |
| clip-path | clipPath |
Editable Fields
Make any widget editable by adding data-editable="true" and optionally data-label.
1<div data-type="text" data-editable="true" data-label="Company Name">
2 Acme Corporation
3</div>
4| Widget Type | Editor Field Type | What Users Can Edit |
|---|---|---|
| data-type="text" | Text Input | Text content |
| data-type="typewriter" | Textarea | Typewriter text |
| data-type="counter" | Number Input | Target number value |
| img | Text Input | Image URL |
For full editable fields details, see the Editable Fields Guide.
Common Patterns
1<div class="relative w-full h-full" data-type="container">
2 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
3 Centered content
4 </div>
5</div>
61<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-6xl text-gray-800"
3 data-type="text" data-start="0" data-duration-animation="1">
4 BACKGROUND
5 </div>
6 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-4xl text-white"
7 data-type="text" data-start="2" data-duration-animation="2">
8 FOREGROUND
9 </div>
10</div>
11Last updated: 2026-01-05