Tutoriales
Crear showcase de producto
1. Ejemplo completo
{
"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. Lógica de composición
- Usa un
recta pantalla completa como fondo - Coloca la imagen del producto en un lado
- Mantén el titular, el título y el precio en el otro lado
- Escalona el tiempo del texto en lugar de animarlo todo a la vez
3. Notas
- Prefiere
assets.images + $refcuando reutilices medios - Usa Elemento de imagen para el comportamiento de
objectFit - Para un bloque CTA real, añade otro
texto un parrect + text