Setenta y tres maneras de entrar en escena
· 4 min de lectura
La mañana del 4 de julio publicamos un catálogo de animaciones para nuestros vídeos, con vistas previas en directo y decenas de ganchos, revelaciones y llamadas a la acción. Parecía rico. Pero al ver unas cuantas seguidas, cada gancho entraba igual y solo cambiaban las palabras. Esa misma tarde, cada una tenía su propio movimiento.
Un catálogo menos rico de lo que parecía
El catálogo en sí ya era un avance. Cada animación se reproducía en directo con el motor de vídeo real, no con una maqueta, en una página de animaciones pública y en la nueva biblioteca Añadir animación del editor, donde un clic mete una escena lista en tu vídeo.
Por debajo, eso sí, sus setenta plantillas se apoyaban en unos nueve tipos de escena: una frase, viñetas, una cifra grande, un contador, una comparación, un gráfico, una cita, una imagen y una galería. Cada plantilla tenía su texto de ejemplo y su ambiente, pero un gancho era una frase, y una frase siempre entraba de la misma manera. Al recorrer la página, o al ver un vídeo, la misma entrada volvía una y otra vez.
Lo que dice una escena y cómo llega
La solución fue separar dos cosas que tratábamos como una: lo que muestra una escena y cómo entra. El cómo pasó a ser su propia capa, un movimiento, que se puede aplicar a cualquier escena del tipo adecuado.
Cada movimiento es una función pura del número de fotograma. Le das el fotograma 12 y siempre devuelve la misma posición, escala, opacidad y desenfoque. Esa sola decisión tiene un gran premio: la vista previa en tu navegador y el render en nuestro servidor producen exactamente el mismo fotograma, así que lo que eliges en el editor es lo que recibes en el MP4.
La primera versión traía 23 movimientos en dos familias, y solo los usaban las escenas que pedían uno. Toda escena sin movimiento se renderizaba exactamente igual que antes, así que ningún vídeo en marcha cambió por sorpresa.
De veintitrés a setenta y tres
Ese mismo día, cincuenta movimientos más llevaron la biblioteca a 73, repartidos casi a partes iguales entre las dos familias:
- Los movimientos de texto animan un titular palabra a palabra: subida, pop, máquina de escribir, cascada, desenfoque, giro, ola, glitch, sello, estallido, elástico, rodar y más.
- Los movimientos de bloque animan una escena entera: barridos, un iris, cortes horizontales y verticales, un telón, una tarjeta que gira, un muelle, un deslizamiento, una inclinación en perspectiva y más.
Cada una de las setenta plantillas del catálogo lleva ahora un movimiento distinto, así que la página se lee como setenta animaciones reales y no como setenta textos. Antes de publicar, renderizamos doce de los nuevos movimientos en el servidor y comprobamos que daban doce fotogramas distintos, sin ningún fallo.
Toda animación tiene que asentarse
Una entrada es solo la mitad de una animación. La otra mitad es dónde aterriza, porque ese fotograma en reposo es el que se lee mientras habla la voz. Al revisar la biblioteca fotograma a fotograma, vimos que el iris se detenía en un círculo que dejaba las esquinas de la imagen cortadas durante toda la escena.
Arreglamos el iris para que se abra del todo y luego nos aseguramos de que ningún movimiento pudiera repetir ese tipo de error. Una comprobación automática lleva cada movimiento hasta su fotograma final y exige un cierre limpio:
- opacidad completa
- nada de desenfoque residual
- el recorte totalmente abierto
- posición, escala y rotación de vuelta a la normalidad
La deriva lenta de las imágenes fijas es la única excepción deliberada, porque derivar es su función. Los 73 movimientos pasan, y un movimiento nuevo que nunca se asienta no se puede publicar.
La IA elige, el código garantiza
Una biblioteca solo importa si los vídeos la usan. Cada movimiento lleva ahora una energía, de tranquila y elegante a contundente, juguetona, dramática o técnica, además de una descripción de una línea. El planificador, el modelo que escribe cada guion gráfico, recibe toda la paleta agrupada por energía y elige un movimiento para cada escena según su momento.
Después probamos el planificador con un sitio de producto realista y puntuamos sus elecciones. Cuando elegía, elegía bien, pero no siempre: a veces dejaba el gancho inicial sin movimiento. Así que el código garantiza un mínimo. Si una escena no tiene movimiento, un gancho sobre un problema saca uno de un grupo contundente, un desenlace de uno triunfal y el resto de escenas de un grupo sobrio y variado. En la prueba, cada escena recibió un movimiento distinto y acorde con su ambiente, sin dos vecinas iguales.
Lo que cambia en un vídeo
Ahora un vídeo tiene ritmo. El gancho puede caer con fuerza, una cita entrar con calma, una cifra grande llegar con peso, y dos escenas seguidas nunca se mueven igual. Cada escena se asienta en un fotograma limpio antes de que la voz llegue a lo importante, así que nada está a medio ver cuando cuenta.
Puedes ver todos los movimientos en la página de animaciones, o crear un vídeo y dejar que el planificador elija por ti.
Míralo en tu propia web
Pega una página y obtén el vídeo narrado del que habla este blog. El primero es gratis.
Sigue leyendo
