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:

<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

1. Choose your widgets: Browse the individual widget pages to see what each one can do
2. 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

Video timeline:

• Total duration: 200 frames at 30 FPS (6.67 seconds)
• Planning: Space animations to fit within this timeframe
• Sequencing: Use data-start to create smooth transitions

Styling Reference

<div
  style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #3b82f6; font-size: 2rem;"
>
  Inline styled content
</div>

SVG attributes are automatically converted from kebab-case to camelCase:

Editable Fields

Make any widget editable by adding data-editable="true" and optionally data-label.

<div data-type="text" data-editable="true" data-label="Company Name">
  Acme Corporation
</div>

For full editable fields details, see the Editable Fields Guide.

Common Patterns

<div class="relative w-full h-full" data-type="container">
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
    Centered content
  </div>
</div>

<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-6xl text-gray-800"
    data-type="text"
    data-start="0"
    data-duration-animation="1"
  >
    BACKGROUND
  </div>
  <div
    class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-4xl text-white"
    data-type="text"
    data-start="2"
    data-duration-animation="2"
  >
    FOREGROUND
  </div>
</div>