Como Criar Animações de Morph UI com IA

Um botão se transforma em um indicador de carregamento, resolve em um check de confirmação e se abre em um gráfico. O espectador acompanha um único objeto durante toda a sequência. Essa é a ideia por trás deste tutorial de animação de morph UI: mostrar uma interação curta de produto sem cortes entre telas não relacionadas.

Construímos o exemplo no iArt usando o Haiku 5.5, depois revisamos duas vezes. A primeira versão cortava os rótulos do gráfico. A versão seguinte corrigiu o layout, mas ficou lenta. A animação finalizada dura oito segundos, com transições mais rápidas e uma pausa legível no gráfico.

Este passo a passo inclui os prompts utilizados, o que deu errado e as mudanças de tempo que tornaram o resultado mais útil. Pulse, o app de analytics do exemplo, é fictício; os números de cadastro são dados de amostra.

O que você vai criar

A animação segue uma interação curta: Ver relatório → carregando → sucesso → Cadastros semanais → Ver relatório. O container central muda suas dimensões, raio de canto e cor. Seu conteúdo muda conforme cada estado se torna relevante.

Esse formato pode ilustrar o carregamento de um relatório, uma confirmação de pagamento ou um recurso de produto em um vídeo de lançamento. O resultado é uma demonstração em vídeo, não uma interface funcional ou um componente de UI instalável. Para este teste, usamos o modo Animação, tela 16:9 e a opção Haiku 5.5 exibida no iArt em 22 de outubro de 2026. Não solicitamos narração, música ou imagens/vídeos gerados.

Prepare três coisas antes de começar: os estados que deseja mostrar, o texto e dados exatos, e uma direção visual simples. Nosso briefing usou fundo off-white, UI escura e uma cor de destaque. Os valores do gráfico foram 24, 38, 31, 52, 46, 68 e 84, rotulados de segunda a domingo.

1. Descreva o objeto que permanece contínuo

Abra o iArt no modo Animação e escolha seu modelo. Usamos o Haiku 5.5 em todo o exemplo. Não comparamos com outros modelos nem medimos o custo cobrado da execução.

A parte importante do prompt é a relação entre os estados: o mesmo container muda de forma. Pedir uma cena de botão seguida de uma cena de gráfico pode gerar um corte ou crossfade. Diga ao modelo qual objeto persiste, o que muda dentro dele e quando o espectador precisa de tempo para ler.

Esta é uma tradução do prompt original testado em inglês. Mantém o briefing de quinze segundos para que você possa acompanhar as revisões abaixo.

Crie uma animação de morph UI contínua de 15 segundos para um app fictício de analytics chamado Pulse, 16:9. Um container central escuro e arredondado muda de forma continuamente: 0–3s um botão rotulado “Ver relatório” com clique do cursor; 3–5s o MESMO container encolhe para um spinner de carregamento circular; 5–7s vira um check de sucesso verde; 7–12s expande para um card de analytics limpo intitulado “Cadastros semanais”, com sete barras rotuladas Seg–Dom e valores 24, 38, 31, 52, 46, 68, 84; 12–15s retorna suavemente ao botão original, com quadros inicial e final idênticos. Fundo off-white quente, UI quase preta, destaque esmeralda, tipografia nítida, movimento de mola contido. O morph deve ser visivelmente contínuo, não cenas separadas em crossfade. Mantenha todos os rótulos legíveis, sem sobreposição ou corte de texto. Sem narração, música, imagens ou vídeos gerados. Construa a animação diretamente.

O iArt produziu uma prévia com os estados solicitados. Isso estabeleceu um ponto de partida útil, mas a instrução “sem corte” não garantiu que o layout estivesse correto.

2. Inspecione o gráfico antes de julgar a animação

Por volta de dez segundos, a primeira prévia cortava o gráfico na borda inferior. Os rótulos dos dias da semana não apareciam. A transição de forma existia, mas o resultado não comunicava os dados corretamente.

Ao checar um gráfico gerado, compare cada valor com o briefing e procure rótulos fora do container. Verifique tanto o gráfico estável quanto os quadros em que ele expande ou encolhe. Um layout que cabe no tamanho total ainda pode cortar durante a transição.

Esta é uma tradução da primeira revisão: identificamos o problema visível, preservamos os dados e pedimos uma mudança de cor.

A prévia aos 10 segundos tem um bug real de layout: a parte inferior do gráfico está cortada e os rótulos dos dias Seg–Dom não aparecem. Corrija o layout do gráfico para que todos os sete valores E todos os sete rótulos dos dias fiquem totalmente dentro do card com pelo menos 24px de padding inferior, durante toda a exibição do gráfico entre 8–12 segundos. Também remova a pausa de card vazio antes de encolher: mantenha o conteúdo do gráfico visível até o início do morph, depois faça-o desaparecer durante o encolhimento sem corte. Mantenha o mesmo design, dados, duração de 15 segundos e quadros inicial/final iguais. Troque o destaque de esmeralda para violeta #7C3AED para eu verificar edição no chat também. Sem áudio ou mídia gerada. Inspecione quadros aos 9, 10, 11, 12, 13 segundos antes de finalizar.

A prévia revisada mostrou todos os sete valores e rótulos dos dias da semana, incluindo o 84 de domingo. A mudança de cor também apareceu. Agora era possível avaliar o ritmo sem um defeito de layout obscurecendo o resultado. Para mais exemplos focados em gráficos, veja gráficos animados no iArt.

3. Encurte as transições, não o tempo de leitura

O próximo feedback foi simples: as transições pareciam lentas demais. O briefing original dava vários segundos para os estados iniciais de botão, carregamento e confirmação. O resultado demorava muito para chegar à informação.

Mudamos a duração da cena de quinze para oito segundos. Mais importante, demos funções diferentes para cada parte da sequência: as transições são rápidas, enquanto o gráfico finalizado permanece tempo suficiente para leitura.

Tempo no briefing revisado	Ação	Propósito
0–0,55 segundos	Botão e chegada do cursor	Estabelecer a ação sem longa espera inicial.
0,55–0,90 segundos	Botão encolhe para loader	Responder imediatamente ao clique.
0,90–2,05 segundos	Carregando, depois confirmação	Tornar as mudanças de status reconhecíveis, mas breves.
2,05–3,20 segundos	Container expande; barras e rótulos entram	Revelar o resultado em um movimento conectado.
3,20–6,65 segundos	Gráfico completo em pausa	Dar tempo para comparar os sete valores.
6,65–8 segundos	Retorno ao botão e finalização	Fechar a sequência sem longa pausa de card vazio.

Esses tempos são o briefing para esta pequena demonstração, não regras universais de animação de UI. Uma interface maior ou gráfico mais complexo pode precisar de mais tempo de leitura.

Esta é uma tradução da revisão de tempo enviada ao mesmo projeto:

O feedback do usuário é que as transições parecem lentas e desconectadas. Ajuste de tempo: reduza toda a animação para 8 segundos e realmente mude a duração das cenas (não a velocidade do player). Mantenha o design violeta, dados exatos do gráfico e layout legível corrigido. Cronograma: 0–0,55s botão em repouso e chegada rápida do cursor; clique em 0,55s, morph imediato do botão para loader entre 0,55–0,90s; spinner 0,90–1,45s; morph para check de sucesso 1,45–1,70s, pausa até 2,05s; expanda o mesmo container para gráfico 2,05–2,50s; todas as barras e rótulos entram até 3,20s, com 40ms de atraso e subida de 300ms; pausa do gráfico completo 3,20–6,65s; encolha para botão 6,65–7,15s com conteúdo escalando/desaparecendo durante o morph, restaure texto do botão até 7,15s; repouso 7,15–8s e quadro inicial exatamente igual ao final. Transições de forma devem durar 250–450ms com ease-out cúbico e assentamento contido, sem tween linear longo, sem pausa de container vazio, sem fade-to-blank repetido entre estados. O cursor deve clicar visivelmente e acionar o morph imediatamente. Sem áudio/mídia. Verifique duração e quadros em 0, 0,75, 1,2, 1,9, 2,3, 3,3, 6,8, 7,3, final; cheque explicitamente ausência de cortes ou falhas.

O player atualizado exibiu duração de oito segundos em velocidade normal. Checamos o loader perto de um segundo e o gráfico completo em torno de três segundos. Os sete valores e rótulos dos dias da semana permaneceram legíveis.

Easing e duração resolvem partes diferentes do problema. Duração controla quanto tempo o movimento dura; easing controla como o progresso muda nesse tempo. Se quiser entender a implementação, a documentação de interpolação do Remotion explica como mapear intervalos de quadros para valores visuais, e sua referência de easing documenta funções linear, cúbica e ease-out. Você pode descrever o tempo desejado no chat sem escrever essas funções.

4. Revise o resultado em velocidade normal

Uma captura de tela pode confirmar texto legível. Não garante que o movimento seja suave. Reproduza a sequência em 1× e verifique o momento do clique, a transição loader-para-check, a expansão do card e o retorno ao botão.

• Ação e resposta: a forma começa a mudar quando o cursor clica?
• Continuidade: é possível acompanhar o container entre estados, ou ele desaparece e é substituído?
• Leitura: todos os valores entram antes da pausa do gráfico?
• Retorno: o conteúdo sai junto com o card encolhendo, sem pausa vazia perceptível?
• Loop: compare o final com o início, incluindo cursor e texto. Pedir quadros idênticos não prova que o loop é perfeito.

Nossa prévia final é uma demonstração básica e utilizável de UI. Não é garantia de que todo prompt produzirá movimento polido na primeira tentativa. A revisão de tempo também passou por um reparo automático antes de gerar uma prévia funcional. Não fizemos medição quadro a quadro da suavidade nem verificamos independentemente a costura exata do loop final.

5. Exporte a versão que você realmente revisou

Quando a prévia estiver pronta, abra Exportar e escolha uma resolução. Se mudar a animação depois, exporte a versão atualizada em vez de usar um render anterior.

Exportamos a versão final de oito segundos em 720p e a incorporamos no topo deste artigo. A versão web usa vídeo H.264 em 1280 × 720 e 30 fps, sem áudio. Revise o arquivo exportado além da prévia do editor antes de compartilhar.

Para adaptar o exercício, troque o nome do app, rótulos e números pelos seus, mantendo a sequência de estados curta. Para uma história de recurso mais longa, continue com nosso guia de como fazer um vídeo de lançamento de produto.

Crie sua própria animação de UI no iArt

FAQ

Preciso programar para fazer esta animação?

Criamos e revisamos este exemplo pela interface de chat do iArt. Não editamos manualmente o código da animação gerada. O trabalho útil foi especificar os estados, checar a prévia e descrever correções concretas.

Qual modelo vocês testaram?

Usamos a opção Haiku 5.5 exibida no iArt em 22 de outubro de 2026, tanto na primeira geração quanto nas duas revisões. Foi um projeto, não uma comparação ou benchmark de confiabilidade entre modelos.

Por que a primeira versão parecia lenta?

O briefing de quinze segundos deu tempo demais para os estados e transições iniciais nesta interação simples. Reduzimos a duração total para oito segundos, encurtamos as mudanças de forma e mantivemos pouco mais de três segundos para leitura do gráfico finalizado.

Isso cria uma interface de produto interativa real?

Não. Este exemplo gera um vídeo animado de uma interface. O botão, cursor e gráfico ilustram um fluxo de produto; não são um dashboard funcional ou componente de UI implantável.

Posso reutilizar o prompt com outros dados?

Sim. Troque os rótulos e valores de exemplo e revise o resultado novamente. Rótulos maiores, números maiores ou barras extras podem exigir outro layout de card e mais tempo de leitura.