Template Examples

Ready-to-use template examples that demonstrate different animation patterns and use cases.

📖 For examples with editable fields, see Editable Field Examples

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>

---