Sistema de templates

Templates se expandem em clips normais em runtime. Eles não devem ser tratados como contêineres pai que passam automaticamente estilo ou animação para seus filhos gerados.

1. Templates registrados

Atualmente suportados:

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

2. Limites compartilhados

Estes campos no próprio clip de template não estão documentados como herdados pelos clips filhos gerados:

transform
style
animations
keyframes
transition

O controle específico do template deve ser passado por data.

3. `product-intro`

Campos efetivos:

name
tagline
features
price
image
cta

Comportamento:

Imagem opcional do produto à esquerda
Título do produto e texto de apoio à direita
Lista opcional de recursos
Preço opcional
Texto de CTA opcional

Exemplo:

{
  "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`

Campos efetivos:

images
durationPerSlide
showCaptions

Comportamento:

Cada imagem se expande em um clip image
Os slides usam o comportamento atual de transição embutida
Texto de legenda é gerado quando um slide inclui caption e showCaptions !== false

Exemplo:

{
  "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`

Campos efetivos:

src
words
config
source
volume
muted
playbackRate

Comportamento:

Gera um video em tela cheia
Gera um subtitle

Exemplo:

{
  "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`

Campos efetivos:

src
words
config
source
volume
muted
playbackRate
speaker
role
title
showLowerThird

Comportamento:

Gera um vídeo principal em tela cheia
Título superior opcional
Bloco lower-third opcional
Faixa de legendas opcional

Exemplo:

{
  "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`

Campos efetivos:

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

Comportamento:

Gera blocos de comparação à esquerda e à direita
Imagens e listas opcionais para ambos os lados
Gera o divisor central e o texto VS

Exemplo:

{
  "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`

Campos efetivos:

from
to
showText
onComplete

Comportamento:

Renderiza uma sequência de contagem regressiva
Pode mostrar texto auxiliar próximo ao final
Pode mostrar uma mensagem de conclusão

Exemplo:

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

9. `text-reveal`

Campos efetivos:

text
style
fontSize
color
textAlign
position

Valores de estilo documentados:

fade
slide
zoom

Comportamento:

Gera um ou mais clips de texto para uma revelação em etapas
Usa o estilo de revelação selecionado onde ele estiver implementado atualmente

Exemplo:

{
  "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`

Campos efetivos:

headline
content
reporter
location
showLowerThird

Comportamento:

Título principal
Bloco de conteúdo opcional
Bloco de informação lower-third opcional

Exemplo:

{
  "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`

Campos efetivos:

quote
author
source

Comportamento:

Renderiza o texto da citação
Linha opcional de autor e fonte

Exemplo:

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

12. `list`

Campos efetivos:

title
items
style
itemDuration
animation

Comportamento:

Gera um título quando fornecido
Gera itens de lista em sequência
Suporta estilo de marcador e animação dos itens
itemDuration: "auto" distribui automaticamente o tempo total

Exemplo:

{
  "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