Templates
Tintage's template system allows you to create custom motion graphics videos using HTML and CSS with special animation widgets. This powerful system lets you build professional videos without needing video editing software.
Editor Tabs
The Video Template editor has four tabs, and this documentation is organized to match them:
- Edit - Change editable fields and preview content
- Properties - Background, resolution, and aspect ratio
How It Works
The template system uses a custom HTML parser that converts your HTML markup into animated video content. You write HTML with special data-* attributes that tell Tintage how to animate different elements.
Core Components
- HTML Structure: Write standard HTML with CSS classes and inline styles
- Animation Widgets: Use special
data-typeattributes to create animated elements - Timing Control: Control when animations start and how long they last
- Background: Set a solid color background for your video
Getting Started
Basic Template Structure
Every template needs:
- A container element with
data-type="container" - Animation widgets with appropriate
data-typeattributes - CSS classes for styling (Tailwind CSS is supported)
- Optional background color setting
Example Template
1<div class="relative w-full h-full bg-orange-200" data-type="container">
2 <div class="absolute top-0 left-1/2 -translate-x-1/2 mt-4 text-red-600 text-2xl font-bold"
3 data-type="text"
4 data-animate="fade"
5 data-ease="easeIn">
6 ULTIMATE SAAS
7 </div>
8 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-4xl font-extrabold"
9 data-type="typewriter">
10 Introducing Tintage
11 </div>
12 <div class="absolute bottom-4 left-1/2 -translate-x-1/2 text-2xl font-bold"
13 data-type="counter"
14 data-end-number="1000000">
15 </div>
16</div>
17Widget Types
Text Widget (data-type="text")
Displays static or animated text content.
Attributes:
data-animate: Animation type ("fade")data-ease: Easing function ("easeIn","easeOut")data-duration-animation: Animation duration in seconds (default: 2)data-start: When animation starts in seconds (default: 0)
Example:
1<div data-type="text"
2 data-animate="fade"
3 data-ease="easeIn"
4 data-duration-animation="3"
5 data-start="1">
6 Your animated text here
7</div>
8Typewriter Widget (data-type="typewriter")
Creates a typewriter effect that types out text character by character.
Attributes:
data-duration-animation: How long typing takes in seconds (default: 3)data-start: When typing starts in seconds (default: 0)
Example:
1<div data-type="typewriter"
2 data-duration-animation="5"
3 data-start="2">
4 This text will be typed out character by character
5</div>
6Counter Widget (data-type="counter")
Animates a number counting up from 0 to a target value.
Attributes:
data-end-number: Final number to count to (default: 1000)data-decimal: Show decimal places ("true"or"false", default: false)data-duration-animation: How long counting takes in seconds (default: 4)data-start: When counting starts in seconds (default: 0)
Example:
1<div data-type="counter"
2 data-end-number="50000"
3 data-decimal="false"
4 data-duration-animation="6">
5</div>
6Image Widget (data-type="image")
Displays images with optional fade animations.
Attributes:
src: Image URLalt: Alt text for accessibilitydata-animate: Animation type ("fade")data-ease: Easing function ("easeIn","easeOut")data-duration-animation: Animation duration in seconds (default: 2)data-start: When animation starts in seconds (default: 0)
Example:
1<img data-type="image"
2 src="https://example.com/image.jpg"
3 alt="Description"
4 data-animate="fade"
5 data-ease="easeIn"
6 data-duration-animation="2"
7 data-start="1" />
8Container Widget (data-type="container")
Groups elements together and provides layout structure.
Supported Tags:
div,span,p(HTML elements)svg,g(SVG elements)
Example:
1<div data-type="container" class="flex items-center justify-center">
2 <div data-type="text">Content inside container</div>
3</div>
4Styling
CSS Classes
Templates support Tailwind CSS classes for styling:
1<div class="absolute top-4 left-1/2 -translate-x-1/2 text-2xl font-bold text-blue-600">
2 Styled text
3</div>
4Inline Styles
You can also use inline styles:
1<div style="position: absolute; top: 20px; left: 50%; transform: translateX(-50%); color: #3b82f6;">
2 Inline styled text
3</div>
4SVG Support
SVG elements are fully supported with proper attribute conversion:
1<svg data-type="text"
2 viewBox="0 0 100 100"
3 width="100"
4 height="100"
5 data-animate="fade">
6 <circle cx="50" cy="50" r="40" fill="blue" />
7</svg>
8Animation Timing
Understanding Timing
- Video Duration: Default is 200 frames at 30 FPS (about 6.7 seconds)
- Animation Start: When your animation begins (in seconds)
- Animation Duration: How long the animation takes (in seconds)
- Easing: How the animation accelerates/decelerates
Timing Examples
Sequential Animations:
1<!-- Text fades in at 0 seconds -->
2<div data-type="text" data-animate="fade" data-start="0" data-duration-animation="2">
3 First text
4</div>
5
6<!-- Typewriter starts at 2 seconds -->
7<div data-type="typewriter" data-start="2" data-duration-animation="3">
8 Second text
9</div>
10
11<!-- Counter starts at 5 seconds -->
12<div data-type="counter" data-start="5" data-duration-animation="2">
13</div>
14Best Practices
Layout
- Use
absolutepositioning for precise control - Use Tailwind classes like
top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2for centering - Set container to
w-full h-fullto fill the video frame
Animation
- Start animations at different times to create sequences
- Use appropriate durations (2-4 seconds for most animations)
- Test your timing to ensure smooth flow
Performance
- Keep image file sizes reasonable
- Use efficient CSS classes
- Avoid overly complex animations
Common Patterns
Centered Text with Background
1<div class="relative w-full h-full bg-gradient-to-br from-blue-500 to-purple-600" data-type="container">
2 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-6xl font-bold"
3 data-type="text"
4 data-animate="fade"
5 data-ease="easeIn">
6 Welcome
7 </div>
8</div>
9Multi-line Typewriter
1<div class="relative w-full h-full bg-black" data-type="container">
2 <div class="absolute top-1/3 left-1/2 -translate-x-1/2 text-white text-4xl"
3 data-type="typewriter"
4 data-start="0"
5 data-duration-animation="3">
6 Line 1: First message
7 </div>
8 <div class="absolute top-2/3 left-1/2 -translate-x-1/2 text-white text-4xl"
9 data-type="typewriter"
10 data-start="4"
11 data-duration-animation="3">
12 Line 2: Second message
13 </div>
14</div>
15Animated Counter with Text
1<div class="relative w-full h-full bg-green-100" data-type="container">
2 <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
3 <div class="text-6xl font-bold text-green-800"
4 data-type="counter"
5 data-end-number="1000000"
6 data-start="1"
7 data-duration-animation="4">
8 </div>
9 <div class="text-2xl text-green-600 mt-4"
10 data-type="text"
11 data-animate="fade"
12 data-start="5">
13 Downloads
14 </div>
15 </div>
16</div>
17Troubleshooting
Common Issues
Animation not working:
- Check that
data-typeis correctly set - Verify
data-startanddata-duration-animationvalues - Ensure the element has content (for text/typewriter widgets)
Layout problems:
- Use
absolutepositioning for precise control - Check that container has
w-full h-full - Verify Tailwind classes are correct
SVG not displaying:
- Ensure SVG attributes use kebab-case (e.g.,
stroke-width) - Check that
viewBoxis set correctly - Verify SVG content is valid
Last updated: 2026-01-05