Template Examples
Ready-to-use template examples that demonstrate different animation patterns and use cases.
Basic Examples
Simple Text Animation
A basic template with a single animated text element.
<div class="relative w-full h-full bg-gradient-to-br from-blue-500 to-purple-600" data-type="container">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-white text-6xl font-bold text-center"
data-type="text"
data-animate="fade"
data-ease="easeIn"
data-duration-animation="2"
data-start="0">
Welcome to Tintage
</div>
</div>Features:
Gradient background
Centered text
Fade-in animation
Large, bold typography
Typewriter Effect
A template showcasing the typewriter animation.
<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-white text-4xl font-mono text-center"
data-type="typewriter"
data-duration-animation="5"
data-start="1">
Building the future of video creation...
</div>
</div>Features:
Black background
Monospace font
5-second typewriter effect
Professional messaging
Animated Counter
A template with a counting animation.
<div class="relative w-full h-full bg-green-100" 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-8xl font-bold text-green-800"
data-type="counter"
data-end-number="1000000"
data-start="1"
data-duration-animation="4">
</div>
<div class="text-3xl text-green-600 mt-4"
data-type="text"
data-animate="fade"
data-start="5"
data-duration-animation="2">
Downloads
</div>
</div>
</div>Features:
Large counter animation
Supporting text
Green color scheme
Sequential animations
Business Templates
Product Launch
A template for announcing new products or features.
<div class="relative w-full h-full bg-gradient-to-br from-orange-400 to-red-500" data-type="container">
<!-- Header -->
<div class="absolute top-8 left-1/2 -translate-x-1/2 text-white text-2xl font-bold"
data-type="text"
data-animate="fade"
data-start="0"
data-duration-animation="2">
NEW RELEASE
</div>
<!-- Main message -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
<div class="text-6xl font-extrabold text-white mb-4"
data-type="typewriter"
data-start="2"
data-duration-animation="4">
Introducing Tintage Pro
</div>
<div class="text-2xl text-orange-100"
data-type="text"
data-animate="fade"
data-start="6"
data-duration-animation="2">
Professional video creation made simple
</div>
</div>
<!-- Call to action -->
<div class="absolute bottom-8 left-1/2 -translate-x-1/2 text-white text-xl font-semibold"
data-type="text"
data-animate="fade"
data-start="8"
data-duration-animation="2">
Get Started Today
</div>
</div>Statistics Showcase
A template for displaying impressive numbers and metrics.
<div class="relative w-full h-full bg-gradient-to-br from-purple-600 to-blue-600" data-type="container">
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
<!-- Main stat -->
<div class="text-8xl font-bold text-white mb-4"
data-type="counter"
data-end-number="10000"
data-start="1"
data-duration-animation="3">
</div>
<!-- Stat label -->
<div class="text-3xl text-purple-100 mb-8"
data-type="text"
data-animate="fade"
data-start="4"
data-duration-animation="2">
Happy Customers
</div>
<!-- Supporting text -->
<div class="text-xl text-purple-200"
data-type="text"
data-animate="fade"
data-start="6"
data-duration-animation="2">
Join thousands of creators using Tintage
</div>
</div>
</div>Feature Announcement
A template for highlighting new features or capabilities.
<div class="relative w-full h-full bg-gradient-to-br from-teal-500 to-green-500" data-type="container">
<!-- Feature icon/emoji -->
<div class="absolute top-1/3 left-1/2 -translate-x-1/2 text-8xl"
data-type="text"
data-animate="fade"
data-start="0"
data-duration-animation="2">
🚀
</div>
<!-- Feature title -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 text-white text-5xl font-bold text-center"
data-type="typewriter"
data-start="2"
data-duration-animation="3">
AI-Powered Templates
</div>
<!-- Feature description -->
<div class="absolute bottom-1/3 left-1/2 -translate-x-1/2 text-teal-100 text-2xl text-center max-w-2xl"
data-type="text"
data-animate="fade"
data-start="5"
data-duration-animation="2">
Create professional videos in minutes with our intelligent template system
</div>
</div>Creative Templates
Minimalist Design
A clean, minimal template with subtle animations.
<div class="relative w-full h-full bg-white" 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-6xl font-light text-gray-800 mb-4"
data-type="text"
data-animate="fade"
data-ease="easeIn"
data-start="0"
data-duration-animation="3">
Simplicity
</div>
<div class="w-32 h-1 bg-gray-800 mx-auto mb-8"
data-type="text"
data-animate="fade"
data-start="3"
data-duration-animation="2">
</div>
<div class="text-xl text-gray-600"
data-type="text"
data-animate="fade"
data-start="5"
data-duration-animation="2">
Beautiful design made simple
</div>
</div>
</div>Bold Typography
A template emphasizing strong typography and contrast.
<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-center">
<div class="text-9xl font-black text-white mb-4"
data-type="text"
data-animate="fade"
data-start="0"
data-duration-animation="2">
BOLD
</div>
<div class="text-4xl font-bold text-yellow-400"
data-type="typewriter"
data-start="2"
data-duration-animation="4">
Make a statement
</div>
</div>
</div>Gradient Text
A template with gradient text effects.
<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-7xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500"
data-type="text"
data-animate="fade"
data-start="0"
data-duration-animation="3">
Gradient Magic
</div>
<div class="text-2xl text-gray-300 mt-6"
data-type="text"
data-animate="fade"
data-start="3"
data-duration-animation="2">
Beautiful color transitions
</div>
</div>
</div>Interactive Examples
Multi-step Animation
A template with multiple sequential animations.
<div class="relative w-full h-full bg-gradient-to-br from-indigo-500 to-purple-600" data-type="container">
<!-- Step 1: Title -->
<div class="absolute top-1/4 left-1/2 -translate-x-1/2 text-white text-5xl font-bold text-center"
data-type="text"
data-animate="fade"
data-start="0"
data-duration-animation="2">
Step 1: Planning
</div>
<!-- Step 2: Content -->
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 text-white text-4xl font-bold text-center"
data-type="text"
data-animate="fade"
data-start="3"
data-duration-animation="2">
Step 2: Creation
</div>
<!-- Step 3: Results -->
<div class="absolute bottom-1/4 left-1/2 -translate-x-1/2 text-white text-5xl font-bold text-center"
data-type="text"
data-animate="fade"
data-start="6"
data-duration-animation="2">
Step 3: Success
</div>
</div>Countdown Timer
A template simulating a countdown effect.
<div class="relative w-full h-full bg-red-600" 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-2xl text-red-100 mb-4"
data-type="text"
data-animate="fade"
data-start="0"
data-duration-animation="1">
Starting in...
</div>
<div class="text-9xl font-bold text-white"
data-type="counter"
data-end-number="3"
data-start="1"
data-duration-animation="3">
</div>
</div>
</div>Customization Tips
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 Combinations
Large + Small:
<div class="text-6xl font-bold">Main Title</div>
<div class="text-xl font-light">Subtitle</div>Bold + Regular:
<div class="text-4xl font-black">Bold Statement</div>
<div class="text-2xl font-normal">Supporting text</div>Serif + Sans-serif:
<div class="text-5xl font-serif">Elegant Title</div>
<div class="text-xl font-sans">Modern subtitle</div>Animation Timing Patterns
Quick Succession:
<div data-start="0" data-duration-animation="1">First</div>
<div data-start="1" data-duration-animation="1">Second</div>
<div data-start="2" data-duration-animation="1">Third</div>Overlapping:
<div data-start="0" data-duration-animation="3">First</div>
<div data-start="1" data-duration-animation="3">Second</div>
<div data-start="2" data-duration-animation="3">Third</div>Pause Between:
<div data-start="0" data-duration-animation="2">First</div>
<div data-start="4" data-duration-animation="2">Second</div>
<div data-start="8" data-duration-animation="2">Third</div>Last updated