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
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
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
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
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
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:
<div data-type="text" data-animate="fade">
Your content here
</div>Common 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:
<div class="relative w-full h-full bg-blue-500" data-type="container">
<!-- Text widget -->
<div class="absolute top-1/4 left-1/2 -translate-x-1/2 text-white text-4xl font-bold text-center"
data-type="text"
data-animate="fade"
data-start="0"
data-duration-animation="2">
Welcome
</div>
<!-- Typewriter widget -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 text-white text-2xl font-mono text-center"
data-type="typewriter"
data-start="2"
data-duration-animation="4">
This text will be typed out
</div>
<!-- Counter widget -->
<div class="absolute bottom-1/4 left-1/2 -translate-x-1/2 text-white text-6xl font-bold text-center"
data-type="counter"
data-end-number="1000"
data-start="6"
data-duration-animation="3">
</div>
</div>Getting Started
Start with the basics: Read the Getting Started Guide to understand the fundamentals
Choose your widgets: Browse the individual widget pages to see what each one can do
Try examples: Check out the Template Examples for ready-to-use templates
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
Need Help?
Documentation: Each widget page has detailed examples and troubleshooting
Examples: Check the Template Examples for inspiration
Support: Contact us at [email protected] for assistance
Last updated