Système de templates

Les templates se développent en clips normaux à l'exécution. Ils ne doivent pas être traités comme des conteneurs parents qui transmettent automatiquement le style ou l'animation à leurs enfants générés.

1. Templates enregistrés

Actuellement pris en charge :

product-intro
slideshow
subtitle-video
talking-head
comparison
countdown
text-reveal
news
quote
list

2. Limites partagées

Ces champs sur le clip template lui-même ne sont pas documentés comme hérités par les clips enfants générés :

transform
style
animations
keyframes
transition

Le contrôle spécifique au template doit être transmis via data.

3. `product-intro`

Champs effectifs :

name
tagline
features
price
image
cta

Comportement :

Image produit optionnelle à gauche
Titre produit et texte de support à droite
Liste de fonctionnalités optionnelle
Prix optionnel
Texte CTA optionnel

Exemple :

{
  "type": "template",
  "template": "product-intro",
  "start": 0,
  "duration": 8,
  "data": {
    "name": "Smart Watch Pro",
    "tagline": "Built for modern teams",
    "features": ["AMOLED display", "7-day battery", "Health tracking"],
    "price": "$299",
    "image": "https://example.com/watch.png",
    "cta": "Order Now"
  }
}

4. `slideshow`

Champs effectifs :

images
durationPerSlide
showCaptions

Comportement :

Chaque image se développe en clip image
Les slides utilisent le comportement de transition intégré actuel
Un texte de légende est généré quand une slide inclut caption et que showCaptions !== false

Exemple :

{
  "type": "template",
  "template": "slideshow",
  "start": 0,
  "duration": 9,
  "data": {
    "images": [
      { "image": "https://example.com/slide-1.jpg", "caption": "Welcome" },
      { "image": "https://example.com/slide-2.jpg", "caption": "New Features" },
      { "image": "https://example.com/slide-3.jpg", "caption": "Get Started" }
    ],
    "durationPerSlide": 3,
    "showCaptions": true
  }
}

5. `subtitle-video`

Champs effectifs :

src
words
config
source
volume
muted
playbackRate

Comportement :

Génère une video plein écran
Génère un subtitle

Exemple :

{
  "type": "template",
  "template": "subtitle-video",
  "start": 0,
  "duration": 8,
  "data": {
    "src": { "$ref": "host-video" },
    "words": { "$ref": "subtitle-main" },
    "muted": false,
    "volume": 1,
    "config": {
      "position": "bottom",
      "fontSize": 58,
      "highlightColor": "#22d3ee"
    }
  }
}

6. `talking-head`

Champs effectifs :

src
words
config
source
volume
muted
playbackRate
speaker
role
title
showLowerThird

Comportement :

Génère une vidéo hôte en plein écran
Titre supérieur optionnel
Bloc lower-third optionnel
Piste de sous-titres optionnelle

Exemple :

{
  "type": "template",
  "template": "talking-head",
  "start": 0,
  "duration": 8,
  "data": {
    "src": { "$ref": "host-video" },
    "words": { "$ref": "subtitle-main" },
    "title": "Weekly Update",
    "speaker": "Alex Chen",
    "role": "Founder",
    "showLowerThird": true,
    "config": {
      "position": "bottom",
      "fontSize": 60,
      "highlightColor": "#22d3ee"
    }
  }
}

7. `comparison`

Champs effectifs :

left.title
left.items
left.image
right.title
right.items
right.image
vsText

Comportement :

Génère des blocs de comparaison à gauche et à droite
Images et listes optionnelles pour les deux côtés
Génère un séparateur central et le texte VS

Exemple :

{
  "type": "template",
  "template": "comparison",
  "start": 0,
  "duration": 7,
  "data": {
    "left": {
      "title": "Before",
      "items": ["Manual workflow", "Slow review", "Higher cost"],
      "image": "https://example.com/before.png"
    },
    "right": {
      "title": "After",
      "items": ["Automated workflow", "Fast review", "Lower cost"],
      "image": "https://example.com/after.png"
    },
    "vsText": "VS"
  }
}

8. `countdown`

Champs effectifs :

from
to
showText
onComplete

Comportement :

Rend une séquence de compte à rebours
Peut afficher un texte d'aide près de la fin
Peut afficher un message de fin

Exemple :

{
  "type": "template",
  "template": "countdown",
  "start": 0,
  "duration": 6,
  "data": {
    "from": 5,
    "to": 0,
    "showText": true,
    "onComplete": "Launch"
  }
}

9. `text-reveal`

Champs effectifs :

text
style
fontSize
color
textAlign
position

Valeurs de style documentées :

fade
slide
zoom

Comportement :

Génère un ou plusieurs clips texte pour une révélation progressive
Utilise le style de révélation sélectionné là où il est actuellement implémenté

Exemple :

{
  "type": "template",
  "template": "text-reveal",
  "start": 0,
  "duration": 5,
  "data": {
    "text": "Ship faster with AI video",
    "style": "slide",
    "fontSize": 72,
    "color": "#ffffff",
    "textAlign": "center",
    "position": "center"
  }
}

10. `news`

Champs effectifs :

headline
content
reporter
location
showLowerThird

Comportement :

Titre principal
Bloc de contenu optionnel
Bloc d'information lower-third optionnel

Exemple :

{
  "type": "template",
  "template": "news",
  "start": 0,
  "duration": 8,
  "data": {
    "headline": "Quarterly results exceed expectations",
    "content": "Revenue grew 38% year over year, driven by strong subscription growth.",
    "reporter": "Maya Lin",
    "location": "San Francisco",
    "showLowerThird": true
  }
}

11. `quote`

Champs effectifs :

quote
author
source

Comportement :

Rend le texte de citation
Ligne optionnelle pour l'auteur et la source

Exemple :

{
  "type": "template",
  "template": "quote",
  "start": 0,
  "duration": 6,
  "data": {
    "quote": "Simplicity scales better than complexity.",
    "author": "Alex Chen",
    "source": "Team Memo"
  }
}

12. `list`

Champs effectifs :

title
items
style
itemDuration
animation

Comportement :

Génère un titre lorsqu'il est fourni
Génère les éléments de liste en séquence
Prend en charge le style de marqueur et l'animation des éléments
itemDuration: "auto" répartit automatiquement la durée totale

Exemple :

{
  "type": "template",
  "template": "list",
  "start": 0,
  "duration": 8,
  "data": {
    "title": "Release Checklist",
    "items": ["Finalize copy", "Export assets", "Publish update"],
    "style": "checkmark",
    "itemDuration": "auto",
    "animation": "fadeIn"
  }
}

On this page