Templatesystem

Templates werden zur Laufzeit in normale Clips expandiert. Sie sollten nicht als übergeordnete Container behandelt werden, die Styling oder Animation automatisch an ihre erzeugten Kinder weitergeben.

1. Registrierte Templates

Derzeit unterstützt:

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

2. Gemeinsame Einschränkungen

Diese Felder am Template-Clip selbst sind nicht als vererbt an die erzeugten Kind-Clips dokumentiert:

transform
style
animations
keyframes
transition

Template-spezifische Steuerung sollte über data übergeben werden.

3. `product-intro`

Wirksame Felder:

name
tagline
features
price
image
cta

Verhalten:

Optionales Produktbild links
Produkttitel und unterstützender Text rechts
Optionale Feature-Liste
Optionaler Preis
Optionaler CTA-Text

Beispiel:

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

Wirksame Felder:

images
durationPerSlide
showCaptions

Verhalten:

Jedes Bild expandiert zu einem image-Clip
Slides verwenden das aktuell eingebaute Übergangsverhalten
Beschriftungstext wird erzeugt, wenn ein Slide caption enthält und showCaptions !== false ist

Beispiel:

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

Wirksame Felder:

src
words
config
source
volume
muted
playbackRate

Verhalten:

Erzeugt ein video im Vollbild
Erzeugt ein subtitle

Beispiel:

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

Wirksame Felder:

src
words
config
source
volume
muted
playbackRate
speaker
role
title
showLowerThird

Verhalten:

Erzeugt ein Host-Video im Vollbild
Optionaler Titel oben
Optionaler Lower-Third-Block
Optionale Untertitelspur

Beispiel:

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

Wirksame Felder:

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

Verhalten:

Erzeugt Vergleichsblöcke links und rechts
Optionale Bilder und Listen für beide Seiten
Erzeugt einen mittleren Trenner und den VS-Text

Beispiel:

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

Wirksame Felder:

from
to
showText
onComplete

Verhalten:

Rendert eine Countdown-Sequenz
Kann gegen Ende Hilfstext anzeigen
Kann eine Abschlussmeldung anzeigen

Beispiel:

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

9. `text-reveal`

Wirksame Felder:

text
style
fontSize
color
textAlign
position

Dokumentierte Style-Werte:

fade
slide
zoom

Verhalten:

Erzeugt einen oder mehrere Text-Clips für eine gestufte Enthüllung
Verwendet den gewählten Reveal-Stil dort, wo er aktuell implementiert ist

Beispiel:

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

Wirksame Felder:

headline
content
reporter
location
showLowerThird

Verhalten:

Hauptüberschrift
Optionaler Inhaltsblock
Optionaler Informationsblock im Lower Third

Beispiel:

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

Wirksame Felder:

quote
author
source

Verhalten:

Rendert den Zitattext
Optionale Zeile für Autor und Quelle

Beispiel:

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

12. `list`

Wirksame Felder:

title
items
style
itemDuration
animation

Verhalten:

Erzeugt einen Titel, wenn einer angegeben ist
Erzeugt Listeneinträge nacheinander
Unterstützt Marker-Stil und Item-Animation
itemDuration: "auto" verteilt die Gesamtzeit automatisch

Beispiel:

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