Un anuncio en vídeo hecho con código

Necesitaba un anuncio de respuesta directa para un producto SaaS: vertical, treinta segundos, del tipo que corre en Meta y TikTok y tiene que ganarse la atención en el primer segundo. El camino habitual es un editor de vídeo y un par de horas en una línea de tiempo. Lo hice de otra forma, tratando el vídeo como código, y me llevó media hora. Así fue.

1. Empieza por la estructura, no por el diseño

Un anuncio de rendimiento no es un vídeo de marca. Sigue una forma que vende: problema, presión, solución, remate. Antes de tocar el diseño, escribí los tiempos en lenguaje normal.

• Gancho (0–5s) — nombra el dolor en menos de dos segundos: "¿A dónde se fue tu ganancia?"
• Presión (5–10s) — apila los síntomas: comisiones, reembolsos, devoluciones, dinero que no vuelve.
• Solución (10–19s) — el producto lo resuelve. El número aparece en pantalla.
• Valor (19–24s) — tres razones concretas para que te importe.
• Cierre (24–30s) — una sola instrucción y la URL.

Si la estructura está mal, no hay animación que la salve. Acertar con esto en papel, antes que nada, es la mayor parte del trabajo.

2. Roba la marca, no la inventes

El producto ya tenía una guía de diseño, así que saqué los valores reales de ahí: el fondo exacto, el color de acción, las tipografías, el radio de los bordes. Un anuncio que usa la paleta real del producto parece el producto. Uno con colores inventados parece una imitación. Es un trabajo de treinta segundos, así que no gasté ni uno adivinando códigos de color.

3. Construye el vídeo como código

En lugar de un editor usé HyperFrames, que trata un archivo HTML como la fuente del vídeo. El layout es CSS, el movimiento es una línea de tiempo de GSAP, y los tiempos viven en atributos. Todo se renderiza a MP4 desde la terminal. Le describí las cinco escenas a Claude, escribió la composición, y yo fui afinando los tiempos en lenguaje normal ("aguanta más el número de ganancia", "mete el gancho más rápido").

Lo bueno del vídeo como código es que todo es exacto y repetible. La cifra de ganancia sube por una curva que yo controlo. Las barras entran con un ritmo que yo marco. Cambias un número y vuelves a renderizar, sin arrastrar una aguja por la línea de tiempo.

4. Finge el producto, pero limpio

La app está detrás de un login, así que grabar la pantalla no era opción. Construí el dashboard como un bloque pequeño de HTML y CSS, con los valores reales de la marca. Una maqueta hecha así queda más nítida que una captura: sin cursor, sin barras del navegador, cada número elegido para reforzar el mensaje.

5. Renderiza y mira los fotogramas

Renderizar un vertical de treinta segundos tardó menos de un minuto. Después saqué fotogramas sueltos en los momentos clave y los revisé como fotos fijas: ¿se lee el gancho?, ¿aguanta el dashboard?, ¿está claro el cierre? El revisor de contraste marcó algunos avisos, pero mirando fotograma a fotograma eran falsos positivos de las transiciones. Los fotogramas son la verdad, no el linter.

Dónde suele fallar

• Bonito, pero sin estructura. Si los beats no venden, el movimiento no los salva. Deja problema, agitación, revelación y remate bien en papel antes de diseñar nada.
• Marca inventada. Colores y tipos adivinados hacen que parezca una copia del producto. Saca los tokens reales del diseño, como en el paso 2.
• Todo moviéndose a la vez. Eso se lee como caos. El movimiento debe llevar el ojo a una cosa por beat, y luego asentarse.

Ahora prueba esto

• Saca una variante. Cambia la línea del gancho y la música, vuelve a renderizar: un segundo anuncio para testear, en cinco minutos.
• Cámbiale el formato. La misma composición, un corte 1:1 y otro 16:9 para otros sitios.
• Hazlos en lote. Tres ganchos, un script de render, y una tarea programada que los reconstruye cuando cambie el copy.

Qué usé

• Claude — escribió la composición y tomó las notas de tiempo en lenguaje normal
• HyperFrames — HTML y GSAP como fuente del vídeo, renderizado a MP4
• ffmpeg — sacó los fotogramas para la revisión de calidad

Lo que te llevas

Tratar el vídeo como código borra la distancia entre la idea y el corte final. La habilidad que importa no es el programa de edición, es conocer la estructura que hace que un anuncio funcione y saber dirigir las herramientas para construirlo. El anuncio de arriba es una pieza de muestra, pero el flujo es lo de verdad: una vez existe, la siguiente variación es un cambio de cinco minutos y volver a renderizar.