Tutorials
Produkt-Showcase erstellen
1. Vollständiges Beispiel
{
"meta": {
"version": "2.0.0",
"width": 1920,
"height": 1080,
"fps": 30,
"background": "#050816"
},
"assets": {
"images": [
{
"id": "product-shot",
"src": "https://example.com/product.png"
}
]
},
"tracks": [
{
"id": "main",
"clips": [
{
"type": "rect",
"start": 0,
"duration": 8,
"transform": {
"x": "50%",
"y": "50%",
"width": "100%",
"height": "100%"
},
"style": {
"fill": {
"type": "linear",
"angle": 135,
"stops": [
{ "offset": 0, "color": "#020617" },
{ "offset": 1, "color": "#1d4ed8" }
]
}
}
},
{
"type": "image",
"start": 0,
"duration": 8,
"src": { "$ref": "product-shot" },
"transform": {
"x": "30%",
"y": "54%",
"width": 560,
"height": 560
},
"style": {
"objectFit": "contain"
}
},
{
"type": "text",
"start": 0.5,
"duration": 7.5,
"text": "New Release",
"transform": {
"x": "72%",
"y": "28%"
},
"style": {
"fontSize": 30,
"fontWeight": 600,
"fill": "#93c5fd"
},
"animations": [
{
"type": "fadeIn",
"duration": 0.4
}
]
},
{
"type": "text",
"start": 0.8,
"duration": 7.2,
"text": "Smart Watch Pro",
"transform": {
"x": "72%",
"y": "40%"
},
"style": {
"fontSize": 72,
"fontWeight": 800,
"fill": "#ffffff"
},
"animations": [
{
"type": "slideIn",
"direction": "right",
"distance": 140,
"duration": 0.6
}
]
},
{
"type": "text",
"start": 1.4,
"duration": 6.6,
"text": "$299",
"transform": {
"x": "72%",
"y": "56%"
},
"style": {
"fontSize": 56,
"fontWeight": 700,
"fill": "#22c55e"
}
}
]
}
]
}2. Logik der Komposition
- Verwende ein
rectim Vollbild als Hintergrund - Platziere das Produktbild auf einer Seite
- Halte Überschrift, Titel und Preis auf der anderen Seite
- Staffel das Timing des Textes, statt alles gleichzeitig zu animieren
3. Hinweise
- Bevorzuge
assets.images + $ref, wenn du Medien wiederverwendest - Nutze Bildelement für das Verhalten von
objectFit - Für einen echten CTA-Block füge ein weiteres
textoder ein Paarrect + texthinzu