Contenido de la documentación

Diseño y plantillas

Las escenas de un video no se dibujan a mano cada vez. Salen de plantillas que reciben un spec corto y devuelven el proyecto completo, con sus animaciones y sus tiempos, validado contra el motor.

Dos caminos

CaminoCuándoCosto
PlantillaListas, cronologías, rankings, comparaciones, preguntas y respuestas. Todo lo formulaico0 tokens de modelo, milisegundos de CPU
Diseño a manoCuando el video pide algo que ninguna plantilla haceEl de un modelo razonando el layout capa por capa

La diferencia importa más de lo que parece: el conocimiento de diseño -jerarquía, ritmo, entradas, rebotes, dónde va el logo- vive en el código de la plantilla y no en el modelo. Por eso un video formulaico sale idéntico y gratis las mil veces que se pida.

El spec de una plantilla

Se escribe lo que el video dice, no cómo se ve. Un ejemplo de la plantilla general, que sirve para listas y cronologías:

spec.json
{
  "theme": "terminal",
  "duration": 19.1,
  "hook": { "line1": "Mi prueba pasó en verde", "line2": "y borró producción" },
  "items": [
    { "num": 1, "title": "Limpiaba la tabla", "start": 2.8,
      "cmd": "await db.truncate('videos')" },
    { "num": 2, "title": "La URL del entorno", "start": 7.4, "danger": true }
  ],
  "cta": { "at": 16.2, "handle": "@kagonzalezdev" }
}

De ahí salen decenas de capas con sus keyframes. Un short de referencia ronda las 90 a 130 capas.

Los tiempos salen de la voz

El campo start de cada punto es el segundo en que la narración lo menciona. Por eso el orden de trabajo es medir la voz antes de diseñar: la síntesis devuelve el tiempo de cada palabra y las escenas se alinean contra esos tiempos.

Diseñar primero sale caro

Si las escenas se montan contra un reloj inventado y la voz se mide después, no hay ajuste: hay que reescribir el video entero.

El contrato del motor

Todo proyecto, venga de una plantilla o escrito a mano, cumple cuatro reglas. Las tres primeras vienen del motor de capas; la cuarta se añadió después de ver un video con un comando desbordado.

ReglaPor qué
props solo lleva transformaciones: posición, escala, rotación y opacidadCualquier otro atributo va al nivel de la capa. Mezclarlos es la fuente de bugs más común del motor
audioTracks va vacíoLa voz y la música las pone el worker. Un proyecto con pistas propias las oiría duplicadas
La franja de subtítulos es intocableEntre 1450 y 1700 en vertical, entre 820 y 1010 en horizontal. Ahí escribe el worker
Ningún texto se sale del lienzoEl ancho se estima por caracteres y tamaño de fuente, y si se desborda el proyecto no se construye

Qué comprueba el validador

El validador corre al construir, no al renderizar. Un proyecto mal formado falla en milisegundos en vez de a los diez minutos de render, que es cuando ya nadie está mirando.

  • Identificadores duplicados entre capas.
  • Capas sin keyframes o sin transformaciones completas.
  • Imágenes que apuntan a un asset que no se subió.
  • Texto grande dentro de la franja de subtítulos.
  • Texto que se sale por la izquierda o por la derecha.

Lo que ninguna comprobación sustituye

Extraer frames del MP4 y mirarlos. El desbordamiento que motivó la cuarta regla pasaba las pruebas, validaba y renderizaba sin una queja: se veía en la imagen, y solo ahí.