Getting Started

A beginner's guide to creating your first motion graphics video using Tintage's template system.

What You'll Learn

By the end of this guide, you'll know how to:

Create a basic template structure
Add animated text elements
Use different widget types
Style your template with CSS
Control animation timing
Export your video

Your First Template

Let's create a simple "Hello World" template to get you started.

Step 1: Basic Structure

Every template needs a container element. This is the foundation of your video:

<div class="relative w-full h-full bg-blue-500" data-type="container">
  <!-- Your content goes here -->
</div>

What this does:

class="relative w-full h-full" - Makes the container fill the entire video frame
bg-blue-500 - Sets a blue background color
data-type="container" - Tells Tintage this is a container element

Step 2: Add Animated Text

Now let's add some text that fades in:

<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-4xl font-bold text-center" 
       data-type="text" 
       data-animate="fade" 
       data-ease="easeIn" 
       data-duration-animation="2" 
       data-start="0">
    Hello World!
  </div>
</div>

What this does:

absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 - Centers the text perfectly
text-white text-4xl font-bold - Styles the text (white, large, bold)
data-type="text" - Makes this an animated text widget
data-animate="fade" - Creates a fade-in effect
data-start="0" - Animation starts immediately
data-duration-animation="2" - Animation takes 2 seconds

Step 3: Test Your Template

Copy the HTML code above
Paste it into the HTML String field in Tintage
Set your background color to #3b82f6 (blue)
Click "Render video"
Watch your first animated video!

Understanding the Basics

Container Element

The container is like a canvas for your video:

<div class="relative w-full h-full" data-type="container">
  <!-- All your content goes inside here -->
</div>

Key points:

Always use relative w-full h-full classes
Must have data-type="container"
This is where you set the background color

Positioning Elements

Use absolute positioning to place elements exactly where you want them:

<!-- Top-left corner -->
<div class="absolute top-4 left-4">Content</div>

<!-- Top-center -->
<div class="absolute top-4 left-1/2 -translate-x-1/2">Content</div>

<!-- Center of screen -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">Content</div>

<!-- Bottom-right corner -->
<div class="absolute bottom-4 right-4">Content</div>

Animation Widgets

Widgets are special elements that can be animated:

Widget

Purpose

Example

data-type="text"

Static or fading text

Headlines, labels

data-type="typewriter"

Typing effect

Messages, descriptions

data-type="counter"

Counting numbers

Statistics, metrics

data-type="image"

Images with fade

Logos, photos

Common Patterns

Centered Content

This is the most common layout pattern:

<div class="relative w-full h-full bg-gray-900" 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-white text-6xl font-bold mb-4" data-type="text" data-animate="fade">
      Main Title
    </div>
    <div class="text-gray-300 text-2xl" data-type="text" data-animate="fade" data-start="2">
      Subtitle
    </div>
  </div>
</div>

Header + Content + Footer

A three-section layout:

<div class="relative w-full h-full bg-white" data-type="container">
  <!-- Header -->
  <div class="absolute top-8 left-1/2 -translate-x-1/2 text-black text-2xl font-bold" 
       data-type="text" data-animate="fade" data-start="0">
    Header Text
  </div>
  
  <!-- Main Content -->
  <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
    <div class="text-black text-5xl font-bold" 
         data-type="text" data-animate="fade" data-start="1">
      Main Content
    </div>
  </div>
  
  <!-- Footer -->
  <div class="absolute bottom-8 left-1/2 -translate-x-1/2 text-gray-600 text-xl" 
       data-type="text" data-animate="fade" data-start="2">
    Footer Text
  </div>
</div>

Side-by-Side Layout

Two elements positioned side by side:

<div class="relative w-full h-full bg-blue-100" data-type="container">
  <!-- Left side -->
  <div class="absolute top-1/2 left-1/4 -translate-y-1/2 text-center">
    <div class="text-blue-800 text-4xl font-bold" 
         data-type="text" data-animate="fade" data-start="0">
      Left Content
    </div>
  </div>
  
  <!-- Right side -->
  <div class="absolute top-1/2 right-1/4 -translate-y-1/2 text-center">
    <div class="text-blue-800 text-4xl font-bold" 
         data-type="text" data-animate="fade" data-start="1">
      Right Content
    </div>
  </div>
</div>

Animation Timing

Understanding Timing

Video Length: 6.67 seconds (200 frames at 30 FPS)
Start Time: When animation begins (in seconds)
Duration: How long animation takes (in seconds)
End Time: Start time + Duration

Timing Examples

Sequential Animations:

<!-- First animation: 0-2 seconds -->
<div data-type="text" data-start="0" data-duration-animation="2">
  First
</div>

<!-- Second animation: 2-4 seconds -->
<div data-type="text" data-start="2" data-duration-animation="2">
  Second
</div>

<!-- Third animation: 4-6 seconds -->
<div data-type="text" data-start="4" data-duration-animation="2">
  Third
</div>

Overlapping Animations:

<!-- First animation: 0-3 seconds -->
<div data-type="text" data-start="0" data-duration-animation="3">
  First
</div>

<!-- Second animation: 1-4 seconds (overlaps) -->
<div data-type="text" data-start="1" data-duration-animation="3">
  Second
</div>

Styling Your Template

Color Schemes

Professional Blue:

<div class="bg-gradient-to-br from-blue-600 to-blue-800">
  <div class="text-blue-100">Light text</div>
  <div class="text-white">Main text</div>
</div>

Warm Orange:

<div class="bg-gradient-to-br from-orange-400 to-red-500">
  <div class="text-orange-100">Light text</div>
  <div class="text-white">Main text</div>
</div>

Cool Green:

<div class="bg-gradient-to-br from-green-500 to-teal-600">
  <div class="text-green-100">Light text</div>
  <div class="text-white">Main text</div>
</div>

Typography

Large and Bold:

<div class="text-6xl font-bold">Bold Statement</div>

Elegant and Light:

<div class="text-4xl font-light">Elegant Text</div>

Monospace (for typewriter):

<div class="text-3xl font-mono">Typewriter Text</div>

Spacing

Add margins:

<div class="mb-4">Content with bottom margin</div>
<div class="mt-8">Content with top margin</div>

Add padding:

<div class="px-8 py-4">Content with padding</div>

Testing and Iteration

Preview Your Work

Start Simple: Begin with basic text and animations
Test Frequently: Render videos often to see your progress
Adjust Timing: Fine-tune animation start times and durations
Refine Styling: Experiment with colors, fonts, and spacing

Common Issues and Solutions

Text not appearing:

Check that data-type="text" is set correctly
Verify the element has content inside
Make sure data-start time is reasonable

Animation too fast/slow:

Adjust data-duration-animation value
Longer duration = slower animation
Shorter duration = faster animation

Elements overlapping:

Use different positioning classes
Add margins or padding
Check your layout structure

Background not showing:

Make sure container has w-full h-full classes
Verify background color class is correct
Check that data-type="container" is set

Next Steps

Now that you understand the basics:

Explore Examples: Check out the Template Examples for inspiration
Learn Widgets: Read the Widget Reference for detailed information
Experiment: Try different combinations of widgets and animations
Create: Build your own unique templates

Recommended Learning Path

✅ Getting Started (this guide) - Learn the basics
📖 Widget Reference - Understand all available widgets
🎨 Template Examples - See real-world examples
🚀 Create Your Own - Build custom templates

Getting Help

If you run into issues:

Check the syntax: Make sure all HTML is properly formatted
Verify attributes: Ensure all data-* attributes are correct
Test incrementally: Add one element at a time
Contact support: Email [email protected] for help

PreviousFormats and Compatibility NextWidget Reference

Last updated 4 days ago