Redibujamos en un día cada animación de nuestros vídeos

Hicimos esta revisión a partir de fotogramas renderizados, no del código, porque un movimiento que se lee bien en el código puede sentirse mal en pantalla. Los fotogramas contaban una historia clara.

• Un barrido de color al inicio de cada escena, pensado como transición, cubría media imagen y apartaba la mirada del contenido.
• Más de cincuenta muelles se habían ajustado cada uno por su cuenta, así que nada se movía igual que lo demás.
• El contenido era pequeño, llegaba todo de golpe y se quedaba plano en la imagen.
• Algunas entradas terminaban debajo de ese barrido, así que nadie las veía.

La revisión reunió dieciséis puntos, con una sola raíz: cada escena se había inventado su propio ritmo. La biblioteca no necesitaba dieciséis arreglos, sino un sistema.

La primera versión del día no cambió nada en pantalla, a propósito. Añadió un pequeño sistema de diseño para el movimiento: unas pocas curvas de aceleración, ajustes de muelle medidos en vez de adivinados, duraciones y escalonados estándar, piezas de entrada, niveles de profundidad y una escala tipográfica. Cada movimiento que reconstruimos ese día se haría con estas piezas, para que los vídeos compartieran una misma sensación.

También dimos a cada una de las 22 escenas dibujadas su propio archivo, para leerla y revisarla por separado. Para demostrar que el cambio no alteraba nada, comparamos los fotogramas renderizados antes y después, píxel a píxel. Y construimos una herramienta de revisión que renderiza en minutos tiras de fotogramas y clips cortos de cada escena y movimiento, para que cada decisión posterior se tomara mirando, no adivinando.

La segunda versión reconstruyó lo que ves, sobre ese sistema.

• Las escenas se unen ahora con cortes limpios por defecto. Las quince transiciones se redibujaron con las curvas comunes y nunca cubren más que una franja fina de la imagen, y la entrada de una escena empieza cuando termina su transición.
• Los 37 movimientos de bloque se ven ahora por completo: mueven el propio contenido, sin costura sobre el fondo.
• Los 42 movimientos de texto comparten una receta. Los efectos más recargados se revelan ahora con calma y siguen siendo legibles, y cada nombre existente sigue funcionando, así que ningún storyboard tuvo que cambiar.
• Listas, cronologías, cuadrículas y tablas de precios se construyen con su contenido, con escalonados medidos y un resaltado que recorre los elementos, y las tarjetas de precio se leen con comodidad en 9:16.

Las citas ganaron unas comillas dibujadas, los chats un indicador de escritura, y las tarjetas de apertura y cierre un botón de llamada a la acción de verdad.

La tercera versión reconstruyó cifras y datos: estadísticas, números grandes, contadores, gráficos, medidores y tablas comparten ahora un mismo kit. Un contador sigue una sola curva y se asienta en un ancho reservado desde el principio, así que el diseño no se mueve mientras crecen las cifras, y los enteros siguen siendo enteros. Unos efectos más ligeros hacen que estas escenas se rendericen un 10 % más rápido.

También abrió una puerta nueva, como opción: cuando una escena necesita un visual que ninguna escena integrada ofrece, la IA puede escribir uno en un pequeño lenguaje de movimiento. Cada diseño se revisa: nada debe salirse del encuadre ni solaparse, y la legibilidad, el contraste y el ritmo deben estar bien. Si un diseño no pasa, la escena usa en su lugar una escena integrada probada, así que una idea ambiciosa nunca puede costarte un vídeo. Esa misma tarde, esos diseños partían de una de siete composiciones probadas, como un número grande, una secuencia de pasos o una comparación, y rellenaban sus huecos.

Mirar tan de cerca hizo evidentes dos remates. Los subtítulos viven ahora en su propia capa, por encima de cada transición, así que un fundido entre dos escenas muestra un subtítulo nítido, nunca dos borrosos a la vez.

Las fuentes se cargan ahora antes del primer fotograma. Un vídeo sin fuente de marca usa Inter, como estaba previsto, y las citas usan la tipografía del vídeo o una serif bien cargada. El texto tiene ahora exactamente el aspecto que debía tener.

Tu próximo vídeo debería sentirse más tranquilo y más pensado: cortes en vez de barridos, contenido que llega en un orden cuidado, cifras que se asientan limpias, texto legible del primer fotograma al último. No hace falta cambiar nada en tus storyboards para conseguirlo.

Puedes ver los movimientos reconstruidos en /animations y empezar un vídeo en /new.