Como adicionar motion graphics a vídeos
Como adicionar motion graphics a vídeos para que expliquem mais: 8 gráficos que valem o espaço, regras de tempo, um roteiro de 60 segundos e 3 formas de criá-los.
Roozbeh Firoozmand12 min de leitura
A maioria dos vídeos de produto não precisa de mais movimento. Eles precisam que o olhar do espectador esteja no lugar certo no segundo certo. Ao adicionar motion graphics a um vídeo, cada um deve cumprir uma de duas funções: mostrar para onde olhar ou dizer o que algo significa. Qualquer outra coisa é decoração, e em uma gravação de tela, a decoração compete com a interface que você está ensinando.
Abaixo: os 8 gráficos que realmente agregam valor, regras de tempo para cada um, um roteiro de antes/depois para um passo a passo de 60 segundos e 3 formas de criá-los.
O teste que todo gráfico precisa passar
Reproduza o clipe com o gráfico e sem ele. O espectador encontra o botão ou número certo mais rápido com ele? Se a resposta honesta for "fica mais bonito", corte. Mais 2 verificações eliminam a maior parte da poluição visual:
- Um gráfico animado por vez. Escale as entradas em pelo menos meio segundo, ou o espectador não lerá nenhum deles.
- O gráfico chega com a narração. Se a locução diz "clique em Exportar" e o destaque aparece 2 segundos depois, o espectador já está procurando. Faça aparecer na palavra ou alguns quadros antes.
8 gráficos que valem o espaço em uma gravação de tela
| Gráfico | Função | Regra geral |
|---|---|---|
| Callout (rótulo) | Nomeia o item na tela | 2 a 6 palavras, na tela por pelo menos 2x o tempo de leitura |
| Zoom + destaque | Mostra onde está a ação | Zoom antes do clique, segure 1 a 2 segundos após o clique |
| Contador de etapas | Indica aos espectadores onde eles estão | Mesmo canto, mesmo estilo, em todas as etapas |
| Lower third | Nomeia uma pessoa ou seção | Terço inferior, longe da interface que você demonstra |
| Cartão de título | Separa capítulos | 2 a 3 segundos, 1 linha de texto |
| Seta animada | Aponta algo que o zoom não isola | Desenhe e mantenha estático |
| Contador de dados | Faz um número ter impacto | Conte até em cerca de 1 segundo, depois segure o valor final |
| Transição | Marca mudança de cena ou tópico | 1 estilo por vídeo, menos de meio segundo |
Callouts
Um callout deve nomear o controle ou indicar o resultado: "Configurações de faturamento" ou "Fatura enviada". Mantenha em até 6 palavras. As diretrizes de legendagem da BBC recomendam um mínimo de cerca de 0,3 segundos por palavra para legendas. Em uma gravação de tela, seu espectador também está escaneando a interface, então dobre esse tempo: um callout de 4 palavras precisa de cerca de 2,5 segundos, não 1,2.
Zoom + destaque
O motion graphic mais útil em uma gravação de tela, e o mais usado em excesso. Dê zoom 0,5 segundos antes do clique, segure enquanto o resultado aparece e, em seguida, afaste o zoom para que o espectador veja onde está. Um destaque (uma caixa suave ou escurecimento do entorno) faz o mesmo trabalho sem mover o quadro, o que é ideal para painéis densos onde o zoom esconde o contexto. Use um ou outro por ação.
Contadores de etapas
"Etapa 3 de 5" em um canto fixo diz ao espectador quanto falta. Mantenha o local e o estilo fixos e altere apenas o número. Com menos de 3 etapas, pule isso.
Lower thirds
Em vídeos de produto, os lower thirds nomeiam o apresentador em uma bolha de câmera ou rotulam uma seção ("Visualização de administrador"). Observe o posicionamento: a parte inferior da maioria dos aplicativos web contém barras de salvar e widgets de chat.
Cartões de título
Use-os entre capítulos, não a cada etapa. Um vídeo de 60 segundos precisa de 1, no início. Um cartão de título que exige tempo de leitura é um parágrafo fingindo ser um gráfico.
Setas animadas
Uma seta supera o zoom quando 2 coisas na tela se relacionam, como "esta chave altera aquela visualização". Deixe-a ser desenhada em cerca de 0,3 segundos e depois pare. Uma seta saltitante atrai atenção enquanto estiver saltando.
Contadores de dados
Contar até "1.240 tickets" dá peso a um dado em uma demonstração ou clipe de lançamento. Raramente pertence a um tutorial. Anime rapidamente e segure o número final, ou o movimento será a única coisa que o espectador lembrará.
Transições
Use 1 estilo por vídeo, apenas quando a cena ou o tópico mudar. Entre 2 etapas na mesma tela, um corte geralmente é o melhor. Evite efeitos de flash: o critério de sucesso da WCAG sobre 3 flashes ou menos existe porque conteúdo piscante pode desencadear convulsões e enxaquecas.
Regras que mantêm as sobreposições animadas consistentes
Sobreposições animadas parecem profissionais quando parecem um sistema:
1. Um estilo de movimento. Mesmo easing, mesma direção de entrada, mesma duração para cada callout. Se os callouts deslizam da esquerda na etapa 1, eles deslizam da esquerda na etapa 5. 2. Modelos de marca, feitos uma vez. Fontes, cores, revelação de logotipo e layout de cartão de título pertencem a um modelo salvo, não reconstruídos por vídeo. Todas as ferramentas abaixo suportam isso de alguma forma. 3. Uma área segura. Mantenha o texto longe das bordas do quadro e longe dos controles da interface que você está mostrando. Marque a área segura em seu modelo. 4. Gráficos seguem o roteiro. Escreva a narração primeiro, depois marque a palavra em que cada gráfico se baseia. Sem palavra, sem gráfico.
Antes e depois: roteiro de um passo a passo de 60 segundos
Um passo a passo de 60 segundos sobre "enviar sua primeira fatura" em um aplicativo de faturamento SaaS típico. "Antes" é a gravação bruta com narração.
| Tempo | Antes (gravação bruta) | Depois (com motion graphics) |
|---|---|---|
| 0:00–0:03 | Painel, cursor se movendo | Cartão de título: "Envie sua primeira fatura" com revelação de logo, 3 segundos |
| 0:03–0:10 | Narrador explica o objetivo sobre o painel | Contador de etapas aparece ("Etapa 1 de 4"); destaque na aba Faturas enquanto o narrador a nomeia |
| 0:10–0:18 | Clique em Faturas, página carrega | Zoom no botão Nova fatura 0,5 segundos antes do clique; callout "Nova fatura" |
| 0:18–0:32 | Digitando cliente, itens, valor | Etapa 2 de 4; zoom out para mostrar o formulário completo; desfoque no e-mail real do cliente |
| 0:32–0:40 | Rolando até a data de vencimento | Etapa 3 de 4; seta do campo de data de vencimento para a visualização de termos de pagamento |
| 0:40–0:50 | Clique em Enviar, aviso de confirmação | Etapa 4 de 4; zoom no aviso; callout "Fatura enviada", segurado por 2,5 segundos |
| 0:50–0:57 | Narrador menciona lembretes | Transição de slide para a tela de Lembretes; destaque na chave de ativação |
| 0:57–1:00 | Vídeo termina no painel | Cartão final com título do próximo vídeo, mesmo modelo da abertura |
São 16 eventos gráficos em 60 segundos. Funciona porque as entradas são escalonadas e cada uma se baseia em uma palavra no roteiro. O desfoque é por privacidade, e é o único gráfico que você nunca deve pular em dados reais de clientes.
3 formas de adicionar motion graphics a vídeos
1. Um editor tradicional: Premiere, After Effects ou DaVinci Resolve
Adobe Premiere com After Effects. Modelos de Motion Graphics (arquivos .mogrt) são criados no After Effects e reutilizados no Premiere. Conforme a página de ajuda da Adobe, você arrasta um modelo do painel de Modelos de Gráficos para uma trilha de vídeo e, em seguida, altera-o na aba Editar do painel Propriedades. Modelos baseados em dados preenchem gráficos de barras e linhas a partir de dados de planilhas, que é o caminho mais limpo para contadores de dados e gráficos precisos.
DaVinci Resolve. A página Fusion é um compositor baseado em nós dentro do Resolve, com mais de 200 ferramentas. Você pode criar terços inferiores, fundos animados e transições no Fusion, salvá-los como macros e expor apenas os controles que um editor deve tocar. Eles então aparecem na biblioteca de efeitos da página Edit para qualquer projeto. O Resolve é um download gratuito; o Resolve Studio custa US$ 295.
Ideal para: equipes com um motion designer que cria modelos uma vez, e editores que os reutilizam. Compromisso: zooms e chamadas em uma gravação de tela são feitos com keyframes manualmente, todas as vezes.
2. Um editor baseado em modelos: Canva ou CapCut
O Canva permite que você anime páginas, elementos e texto a partir do botão Animar, com predefinições Lento, Médio ou Rápido ou durações exatas de entrada e saída. "Mostrar tempo do elemento" permite definir quando cada elemento aparece, e "Criar uma Animação" permite arrastar um elemento ao longo de um caminho de movimento. Kits de Marca armazenam logotipos, cores e fontes para que os modelos permaneçam dentro da identidade visual.
O CapCut possui uma biblioteca de modelos de texto e animações de texto, e no desktop você pode usar keyframes para posição, escala, rotação e opacidade. É assim que você criaria um zoom manual ou uma chamada deslizante.
Ideal para: profissionais de marketing que já usam essas ferramentas e precisam de texto animado sobre clipes curtos. Compromisso: nenhum deles é construído em torno de gravações de tela, então zooms que seguem cliques, limpeza de cursor e desfoques de privacidade são trabalho manual.
3. Clevera: sobreposições em uma linha do tempo, ou um briefing em palavras simples
O Clevera começa a partir da gravação. Para vídeos de instruções narrados por IA e demonstrações de produtos, ele suaviza o cursor, destaca interações importantes e aplica zoom inteligente enquanto escreve e sincroniza a narração. A maior parte do trabalho de zoom + destaque na lista de cenas acima é feita antes de você abrir o editor.
No editor de linha do tempo, você adiciona ou ajusta o restante: sobreposições de texto, imagem, desfoque e marca-texto, cartões de título, cartões de introdução, revelações de logotipo, zooms e transições como zoom cruzado, escada, persianas, dissolver, limpeza suave e deslizar. Cartões de título, revelações de logotipo e estilo de vídeo são salvos como modelos predefinidos ou personalizados, para que o segundo vídeo pareça com o primeiro. Se você quiser apenas sua própria gravação estilizada com zooms, sobreposições e cartões de título, a opção estilizada (pronta para compartilhar) não usa créditos de IA, sendo ilimitada em todos os planos, incluindo o Gratuito (no Gratuito você compartilha por link ou incorporação; downloads em MP4 vêm com o Starter e Pro).
Para gráficos fora dessa lista, use Descreva o que você quer no gerador de motion graphics por IA. Você escreve um briefing de forma livre, como "adicione um contador animado de 0 a 1.240 em 0:45 e uma seta do campo de data de vencimento para a visualização dos termos", e o Clevera cria gráficos animados sobre o vídeo existente. A lista de sobreposições do editor não inclui uma seta ou contador dedicado, então este é o caminho para eles.
Edições em texto, destaques e desfoques em um vídeo publicado do Clevera atualizam todos os links hospedados e incorporações, então um rótulo de botão renomeado é corrigido uma vez. A nova interface ainda precisa de novas filmagens.
Ideal para: equipes de produto, suporte e marketing que fazem passo a passo toda semana sem um editor. Compromisso: o gravador de IA captura apenas sites e aplicativos web https públicos, então filmagens de softwares de desktop e intranet vêm do aplicativo de desktop ou de um upload. E veja a próxima seção para os trabalhos que ele não deve fazer.
O que o Clevera adicionou por conta própria e o que não adicionou
Em outubro de 2026, fizemos o gravador de IA do Clevera capturar uma tarefa curta em um aplicativo de tarefas de demonstração, 0:58 de filmagem bruta, e a transformamos em um vídeo de instruções. Cerca de 50 segundos e 9 créditos depois, a linha do tempo já continha um cartão de introdução, uma revelação de logotipo e zooms automáticos em 1.5x e 1.8x, reduzidos para 0:40. Esse é o cartão de título e as linhas de zoom da lista de cenas concluídas. Chamadas, um contador de passos e setas não estavam lá; esses são seus para adicionar.
Em seguida, executamos o Estilizado para compartilhamento na mesma gravação com nosso modelo de equipe em vez do Padrão integrado. Levou cerca de 25 segundos e 0 créditos. O resultado durou 1:07, mais longo que a fonte por causa do cartão de introdução, com 2 zooms automáticos em 1.8x e o editor aberto no painel Estilo para fundo, preenchimento, cantos e cursor. A página gravada em si parecia desbotada e com baixo contraste; o painel Estilo enquadra a filmagem, ele não a corrige.
A versão de 1:07 Estilizada para compartilhamento da mesma gravação, sem edição, 0 créditos.
Para o caminho do briefing, um briefing personalizado criou um infográfico animado de 1:00 com uma barra de preenchimento em cerca de 7 a 8 minutos por 86 créditos. Os números estavam certos, mas ele ignorou os 15 segundos escritos no briefing (a duração é definida no menu Formato) e a linha de origem ficou muito pequena para um telefone. Esse clipe foi construído do zero. Ainda não testamos gráficos sobrepostos a uma gravação existente.
O infográfico animado de 1:00 que o Clevera retornou do briefing, sem edição.
Quando vale a pena pagar por um motion designer
Editores de IA e modelos cobrem os gráficos neste guia. Eles não substituem um motion designer para:
- Um vídeo de lançamento ou filme de marca onde cada quadro é dirigido artisticamente e o movimento em si é a mensagem.
- Gráficos rastreados em filmagens em movimento, como um rótulo que segue um telefone em uma tomada feita à mão.
- 3D, animação de personagens ou ilustração personalizada em movimento.
- Seu sistema de modelos. Uma semana do tempo de um designer criando seus terços inferiores, cartões de título e revelação de logotipo no After Effects ou Fusion compensa em cada vídeo que sua equipe faz depois, em qualquer ferramenta que aceite modelos.
A divisão usual: um designer para o sistema e o lançamento principal, uma ferramenta de IA ou editor de modelos para os passo a passo semanais.
Comece com o zoom
Se você adicionar uma coisa à sua próxima gravação de tela, faça com que seja um zoom que aterre meio segundo antes do clique. Isso corrige a reclamação mais comum sobre vídeos de produtos, "Eu não consegui ver o que você clicou", e todos os outros gráficos neste guia se baseiam nesse hábito de colocar o olho do espectador onde a narração está apontando.
