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 and make it editable:

<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-editable="true"
       data-label="Main Headline"
       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-editable="true" - Makes this field editable in the template editor

• data-label="Main Headline" - Gives the field a custom name in the editor

• 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

1. Copy the HTML code above

2. Paste it into the HTML String field in Tintage

3. Set your background color to #3b82f6 (blue)

4. Click "Render video"

5. Watch your first animated video!

Making Templates Editable

What are Editable Fields?

Editable fields allow users to customize your template content without editing HTML. When you add data-editable="true" to an element, it becomes available in the template editor for easy modification.

Adding Editable Fields

<!-- Make text editable -->
<div data-type="text" 
     data-editable="true"
     data-label="Company Name"
     data-animate="fade">
  Your Company Name
</div>

<!-- Make counter editable -->
<div data-type="counter" 
     data-editable="true"
     data-label="Target Number"
     data-end-number="1000">
</div>

<!-- Make image editable -->
<img data-type="image" 
     data-editable="true"
     data-label="Logo"
     src="https://example.com/logo.png" />

Custom Field Labels

Use data-label to give your fields descriptive names in the editor:

<div data-editable="true" data-label="Product Name">iPhone 15 Pro</div>
<div data-editable="true" data-label="Price">$999</div>
<div data-editable="true" data-label="Discount">20%</div>

Complete Editable Example

<div class="relative w-full h-full bg-gradient-to-br from-blue-600 to-purple-700" data-type="container">
  <!-- Editable headline -->
  <div class="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
    <h1 data-type="text" 
        data-editable="true"
        data-label="Main Headline"
        data-animate="fade" 
        data-start="0"
        class="text-6xl font-bold text-white mb-4">
      Welcome to Our Platform
    </h1>
    
    <p data-type="text" 
       data-editable="true"
       data-label="Subtitle"
       data-animate="fade" 
       data-start="1"
       class="text-2xl text-blue-100">
      Discover amazing features
    </p>
  </div>
  
  <!-- Editable counter -->
  <div class="absolute bottom-1/3 left-1/2 -translate-x-1/2 text-center">
    <div data-type="counter" 
         data-editable="true"
         data-label="User Count"
         data-end-number="10000" 
         data-duration-animation="3"
         data-start="2"
         class="text-4xl font-bold text-white">
    </div>
    <div data-type="text" 
         data-editable="true"
         data-label="Counter Label"
         data-animate="fade" 
         data-start="3"
         class="text-lg text-blue-200">
      Active Users
    </div>
  </div>
</div>

📖 For complete editable fields documentation, see Editable Fields Guide

📖 For how to use the Template Editor interface, see Template Editor Guide

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 and made editable:

Widget	Purpose	Example	Editable
data-type="text"	Static or fading text	Headlines, labels	✅ Text content
data-type="typewriter"	Typing effect	Messages, descriptions	✅ Typewriter text
data-type="counter"	Counting numbers	Statistics, metrics	✅ Target number
data-type="image"	Images with fade	Logos, photos	✅ Image URL

Making Widgets Editable

Add data-editable="true" and data-label to any widget:

<!-- Editable text widget -->
<div data-type="text" 
     data-editable="true"
     data-label="Headline"
     data-animate="fade">
  Your headline here
</div>

<!-- Editable typewriter widget -->
<div data-type="typewriter" 
     data-editable="true"
     data-label="Message"
     data-duration-animation="5">
  This message will be typed out
</div>

<!-- Editable counter widget -->
<div data-type="counter" 
     data-editable="true"
     data-label="Target Number"
     data-end-number="1000">
</div>

<!-- Editable image widget -->
<img data-type="image" 
     data-editable="true"
     data-label="Logo"
     src="https://example.com/logo.png" />

Common Patterns

Centered Content

This is the most common layout pattern with editable fields:

<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-editable="true"
         data-label="Main Title"
         data-animate="fade">
      Main Title
    </div>
    <div class="text-gray-300 text-2xl" 
         data-type="text" 
         data-editable="true"
         data-label="Subtitle"
         data-animate="fade" 
         data-start="2">
      Subtitle
    </div>
  </div>
</div>

Header + Content + Footer

A three-section layout with editable fields:

<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-editable="true"
       data-label="Header 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-editable="true"
         data-label="Main Content"
         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-editable="true"
       data-label="Footer Text"
       data-animate="fade" 
       data-start="2">
    Footer Text
  </div>
</div>

Side-by-Side Layout

Two elements positioned side by side with editable fields:

<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-editable="true"
         data-label="Left Content"
         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-editable="true"
         data-label="Right Content"
         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

1. Start Simple: Begin with basic text and animations

2. Test Frequently: Render videos often to see your progress

3. Adjust Timing: Fine-tune animation start times and durations

4. 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:

1. Explore Examples: Check out the Template Examples for inspiration

2. Learn Widgets: Read the Widget Reference for detailed information

3. Make Templates Editable: Learn about Editable Fields for user-friendly customization

4. Experiment: Try different combinations of widgets and animations

5. Create: Build your own unique templates

Recommended Learning Path

1. ✅ Getting Started (this guide) - Learn the basics

2. 📖 Widget Reference - Understand all available widgets

3. ✏️ Editable Fields - Make templates user-friendly

4. 🖥️ Template Editor - Learn the interface

5. 🎨 Template Examples - See real-world examples

6. 🚀 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

---