Cómo crear animaciones de morphing UI con IA
Un botón se convierte en un indicador de carga, se resuelve en una marca de verificación y se despliega en un gráfico. El espectador sigue un solo objeto durante toda la secuencia. Esa es la idea detrás de este tutorial de animación de morphing UI: mostrar una pequeña interacción de producto sin cortar entre pantallas no relacionadas.
Construimos el ejemplo en iArt usando Haiku 5.5, luego lo revisamos dos veces. La primera versión cortaba las etiquetas del gráfico. La siguiente versión corrigió el diseño pero se sentía lenta. La animación final dura ocho segundos, con transiciones más rápidas y una pausa legible en el gráfico.
Este paso a paso incluye los prompts que usamos, qué salió mal y los cambios de tiempo que hicieron el resultado más útil. Pulse, la app de analítica del ejemplo, es ficticia; los números de registro son datos de muestra.
Qué vas a crear
La animación sigue una interacción corta: Ver informe → cargando → éxito → Registros semanales → Ver informe. El contenedor central cambia sus dimensiones, radio de esquina y color. Su contenido cambia a medida que cada estado se vuelve relevante.
Este formato puede ilustrar la carga de un informe, la confirmación de un pago o una función de producto en un video de lanzamiento. La salida es una demostración en video, no una interfaz funcional ni un componente UI instalable. Para esta prueba, usamos el modo Animación, un lienzo 16:9 y la opción Haiku 5.5 mostrada en iArt el 22 de octubre de 2026. Solicitamos que no hubiera narración, música ni metraje generado.
Prepara tres cosas antes de empezar: los estados que quieres mostrar, el texto y los datos exactos, y una dirección visual simple. Nuestro brief usó un fondo blanco cálido, UI oscura y un color de acento. Los valores del gráfico fueron 24, 38, 31, 52, 46, 68 y 84, etiquetados de lunes a domingo.
1. Describe el objeto que permanece continuo
Abre iArt en modo Animación y elige tu modelo. Usamos Haiku 5.5 en todo este ejemplo. No lo comparamos con otros modelos ni medimos el costo facturado de la ejecución.
La parte importante del prompt es la relación entre los estados: el mismo contenedor cambia de forma. Pedir una escena de botón seguida de una escena de gráfico puede producir un corte o un fundido cruzado en su lugar. Indica al modelo qué objeto persiste, qué cambia dentro de él y cuándo el espectador necesita tiempo para leer.
Esta es una traducción del prompt original que probamos en inglés. Conserva el brief de quince segundos para que puedas seguir las revisiones posteriores.
Crea una animación de morphing UI continua de 15 segundos para una app de analítica ficticia llamada Pulse, 16:9. Un contenedor central oscuro y redondeado cambia de forma continuamente: 0–3s un botón etiquetado “Ver informe” con un clic de cursor; 3–5s el MISMO contenedor se encoge en un spinner de carga circular; 5–7s se convierte en una marca de verificación verde de éxito; 7–12s se expande en una tarjeta de analítica limpia titulada “Registros semanales”, con siete barras etiquetadas Lun–Dom y valores 24, 38, 31, 52, 46, 68, 84; 12–15s regresa suavemente al botón original, con primeros y últimos fotogramas idénticos. Fondo blanco cálido, UI casi negra, acento esmeralda, tipografía nítida, movimiento de resorte contenido. El morph debe ser visiblemente continuo y no escenas separadas con fundido cruzado. Mantén todas las etiquetas legibles, sin superposición de texto ni recortes. Sin voz en off, música, metraje de stock, imágenes o video generados. Construye la animación directamente.iArt produjo una vista previa con los estados solicitados. Eso estableció un punto de partida útil, pero la instrucción “sin recortes” no garantizó que el diseño fuera correcto.
2. Inspecciona el gráfico antes de juzgar la animación
Alrededor de los diez segundos, la primera vista previa cortó el gráfico en su borde inferior. Las etiquetas de los días de la semana no eran visibles. La transición de forma existía, pero el resultado no comunicaba los datos correctamente.
Al revisar un gráfico generado, compara cada valor con el brief y busca etiquetas fuera del contenedor. Revisa tanto el gráfico estable como los fotogramas donde se expande o se encoge. Un diseño que cabe en tamaño completo aún puede recortarse durante una transición.
Esta es una traducción de la primera revisión: identificamos el problema visible, conservamos los datos y pedimos un cambio de color.
La vista previa en el segundo 10 tiene un error real de diseño: la parte inferior del gráfico está recortada y las etiquetas de los días Lun–Dom no son visibles. Corrige el diseño del gráfico para que los siete valores Y las siete etiquetas de los días estén completamente dentro de la tarjeta con al menos 24px de padding inferior, durante toda la pausa del gráfico de los segundos 8–12. Además, elimina la pausa de tarjeta vacía antes de encoger: mantén el contenido del gráfico visible hasta que comience el morph, luego desvanece durante el encogimiento sin recortes. Mantén el mismo diseño, datos, duración de 15 segundos y primeros/últimos fotogramas iguales. Cambia el acento de esmeralda a violeta #7C3AED para que pueda verificar la edición por chat también. Sin audio ni medios generados. Inspecciona los fotogramas en los segundos 9, 10, 11, 12, 13 antes de finalizar.
La vista previa revisada mostró los siete valores y etiquetas de los días, incluido el 84 del domingo. El cambio de color también apareció. Ahora podíamos evaluar el ritmo sin un defecto de diseño que oscureciera el resultado. Para más ejemplos centrados en gráficos, consulta gráficos animados en iArt.
3. Acorta las transiciones, no el tiempo de lectura
El siguiente feedback fue simple: las transiciones se sentían demasiado lentas. Nuestro brief original había asignado varios segundos a los primeros estados de botón, carga y confirmación. El resultado tardaba demasiado en llegar a la información.
Cambiamos la duración de la escena de quince segundos a ocho. Más importante aún, dimos a cada parte de la secuencia un propósito diferente: las transiciones se mueven rápido, mientras que el gráfico completo permanece quieto el tiempo suficiente para leer.
| Tiempo en el brief revisado | Acción | Propósito |
|---|---|---|
| 0–0,55 segundos | Botón y llegada del cursor | Establecer la acción sin una larga espera inicial. |
| 0,55–0,90 segundos | El botón se encoge en el loader | Responder inmediatamente al clic. |
| 0,90–2,05 segundos | Cargando, luego confirmación | Hacer que los cambios de estado sean reconocibles pero breves. |
| 2,05–3,20 segundos | El contenedor se expande; barras y etiquetas entran | Revelar el resultado en un solo movimiento conectado. |
| 3,20–6,65 segundos | El gráfico completo se mantiene | Dar tiempo a los espectadores para comparar los siete valores. |
| 6,65–8 segundos | Regreso al botón y asentamiento | Cerrar la secuencia sin una larga pausa de tarjeta vacía. |
Estos tiempos son el brief para esta pequeña demostración, no reglas universales de animación UI. Una interfaz más grande o un gráfico más complejo puede necesitar más tiempo de lectura.
Esta es una traducción de la revisión de tiempos que enviamos al mismo proyecto:
El feedback del usuario es que las transiciones se sienten lentas y desconectadas. Revisión de tiempos: acorta toda la animación a 8 segundos y cambia realmente la duración de la escena (no la velocidad del reproductor). Mantén el diseño violeta, los datos exactos del gráfico y el diseño legible corregido. Cronograma: 0–0,55s botón en reposo y llegada rápida del cursor; clic en 0,55s, morph inmediato de botón a loader durante 0,55–0,90s; spinner 0,90–1,45s; morph a marca de éxito 1,45–1,70s, mantener hasta 2,05s; expandir el mismo contenedor a gráfico 2,05–2,50s; todas las barras y etiquetas terminan de entrar en 3,20s, usando 40ms de escalonamiento y 300ms de subida; mantener el gráfico completo y legible 3,20–6,65s; encoger a botón 6,65–7,15s con escalado/desvanecimiento de contenido durante el morph, restaurar texto de botón en 7,15s; reposo 7,15–8s y coincidir exactamente el fotograma inicial. Las transiciones de forma deben ser de 250–450ms con ease-out cúbico y asentamiento contenido, sin tween lineal largo, sin pausa de contenedor vacío, sin fundido repetido a blanco entre estados. El cursor debe hacer clic visiblemente y disparar el morph de inmediato. Sin audio/medios. Verifica duración y fotogramas en 0, 0,75, 1,2, 1,9, 2,3, 3,3, 6,8, 7,3, final; comprueba explícitamente que no haya recortes ni huecos.El reproductor actualizado mostró una duración de ocho segundos a velocidad normal. Revisamos el loader cerca del primer segundo y el gráfico completo alrededor de los tres segundos. Los siete valores y etiquetas de los días seguían siendo legibles.
El easing y la duración abordan partes diferentes del problema. La duración controla cuánto dura el movimiento; el easing controla cómo progresa dentro de ese tiempo. Si quieres entender la implementación, la documentación de interpolación de Remotion explica cómo mapear rangos de fotogramas a valores visuales, y su referencia de easing documenta funciones lineales, cúbicas y ease-out. Puedes describir el tiempo deseado en el chat sin escribir esas funciones tú mismo.
4. Revisa el resultado a velocidad normal
Una captura de pantalla puede confirmar texto legible. No puede establecer que el movimiento se sienta fluido. Reproduce la secuencia a 1× y revisa el momento del clic, la transición de loader a check, la expansión de la tarjeta y el regreso al botón.
- Acción y respuesta: ¿empieza a cambiar la forma cuando el cursor hace clic?
- Continuidad: ¿puedes seguir el contenedor entre estados, o desaparece y es reemplazado?
- Lectura: ¿entran todos los valores antes de la pausa del gráfico?
- Regreso: ¿el contenido sale con la tarjeta que se encoge, sin una pausa vacía notable?
- Bucle: inspecciona el final respecto al inicio, incluyendo el cursor y el texto. Pedir fotogramas idénticos no prueba que el bucle sea perfecto.
Nuestra vista previa final es una demostración básica y útil de UI. No es evidencia de que cada prompt produzca movimiento pulido al primer intento. La revisión de tiempos también pasó por una reparación automática antes de producir una vista previa funcional. No realizamos una medición fotograma a fotograma de la suavidad ni verificamos de forma independiente la costura exacta del bucle final.
5. Exporta la versión que realmente revisaste
Una vez que la vista previa esté lista, abre Exportar y elige una resolución. Si cambias la animación después, exporta la versión actualizada en lugar de usar un render anterior.
Exportamos la versión final de ocho segundos en 720p y la incrustamos al principio de este artículo. La versión web usa video H.264 a 1280 × 720 y 30 fps, sin pista de audio. Revisa el archivo exportado además de la vista previa del editor antes de compartirlo.
Para adaptar el ejercicio, reemplaza el nombre de la app de ejemplo, las etiquetas y los números por los tuyos, manteniendo la secuencia de estados corta. Para una historia de producto más larga, continúa con nuestra guía para crear un video de lanzamiento de producto.
Crea tu propia animación UI en iArt
FAQ
¿Necesito escribir código para hacer esta animación?
Creábamos y revisábamos este ejemplo a través de la interfaz de chat de iArt. No editamos manualmente el código de animación generado. El trabajo útil fue especificar los estados, revisar la vista previa y describir correcciones concretas.
¿Qué modelo probaste?
Usamos la opción Haiku 5.5 mostrada en iArt el 22 de octubre de 2026, para la primera generación y ambas revisiones posteriores. Fue un solo proyecto, no una comparación ni un benchmark de fiabilidad entre modelos.
¿Por qué la primera versión se sentía lenta?
El brief de quince segundos dio demasiado tiempo a los primeros estados y transiciones para esta interacción simple. Reducimos la duración total a ocho segundos, acortamos los cambios de forma y mantuvimos poco más de tres segundos para leer el gráfico finalizado.
¿Esto crea una interfaz de producto interactiva real?
No. Este ejemplo crea un video animado de una interfaz. El botón, el cursor y el gráfico ilustran un flujo de producto; no son un dashboard funcional ni un componente UI desplegable.
¿Puedo reutilizar el prompt con otros datos?
Sí. Reemplaza las etiquetas y valores de ejemplo, luego revisa el resultado de nuevo. Etiquetas más largas, números mayores o barras extra pueden requerir un diseño de tarjeta diferente y más tiempo de lectura.