Direção de Motion Graphics

O que Direção de Motion Graphics faz?

Use esta skill para transformar um briefing de vídeo em motion graphics que explicam, enfatizam, marcam ou ritmam a peça. Trate o movimento como direção editorial: cada movimento deve revelar significado, guiar a atenção, esclarecer a estrutura ou criar uma sensação deliberada.

Isto é independente de provedor. Use antes de escolher um modelo, renderizador, biblioteca de animação, ferramenta de edição ou ambiente de composição.

Postura de evidência

Fatos documentados:

• WCAG 2.2 exige que o conteúdo web evite flashes acima do limite de três flashes e documenta que o movimento acionado por interação deve ser desativável, a menos que seja essencial. Verificado em 2026-07-10 a partir das páginas de Entendimento WCAG do W3C.
• A Técnica C39 do W3C documenta prefers-reduced-motion como uma forma de permitir que os usuários evitem animações. Verificado em 2026-07-10.
• A orientação de contraste da WCAG define 4,5:1 para texto normal e 3:1 para texto grande no Nível AA, com taxas AAA mais altas. Verificado em 2026-07-10.
• Apple, Material Design, Microsoft Fluent e IBM Carbon tratam o movimento como um comportamento do sistema de design com restrições de propósito, tempo, easing, acessibilidade e consistência, em vez de decoração. Verificado em 2026-07-10.
• As diretrizes de texto temporizado da Netflix usam um máximo de duas linhas e limites de comprimento de linha específicos do idioma, como 42 caracteres por linha para muitos modelos de legenda em escrita latina. Verificado em 2026-07-10.
• Datawrapper explica por que gráficos de barras e colunas normalmente devem começar em zero, porque o comprimento da barra codifica a magnitude. Verificado em 2026-07-10.

Observações empíricas da prática de produção:

• Os espectadores leem motion graphics em um pequeno número de janelas de atenção: entrada, permanência, ênfase, saída. Aglomerar muitas mudanças simultâneas geralmente reduz a compreensão.
• Vídeos gerados por IA e baseados em modelos frequentemente falham porque as sobreposições competem com o assunto, as marcas de dados animam sem contexto de escala e a tipografia é escolhida pelo estilo antes da legibilidade.
• Pacotes de movimento fortes geralmente parecem simples porque muitas escolhas ocultas são fixadas: escala tipográfica, grade, áreas seguras, família de easing, proporções de tempo, transições, política de legendas e política de rótulos de dados.

Heurísticas de produção:

• Se o movimento não muda o que o espectador entende, lembra ou sente, remova-o ou torne-o mais sutil.
• Anime a atenção em camadas: no máximo uma ideia primária, uma dica de apoio e um comportamento de fundo.
• Prefira contraste de movimento em vez de volume de movimento: uma única revelação precisa geralmente parece mais premium do que muitas partes animadas.
• Para acessibilidade, projete um caminho de movimento reduzido na fase de conceito, não como um patch tardio.

Comece com a função do gráfico

Classifique cada motion graphic por sua função de produção antes de projetá-lo:

Função	Use para	Teste de direção
Orientação	sequência de título, cartão de seção, abertura de capítulo, etiqueta de mapa/local	O espectador consegue responder "onde estou na história?"
Identificação	crédito inferior, etiqueta do palestrante, etiqueta do produto, etiqueta de fonte	O rótulo é legível antes da atenção retornar à filmagem?
Ênfase	destaque, realce, caixa de zoom, ponteiro, revelação de preço/recurso	Aponta para uma coisa sem cobrir a evidência?
Explicação	diagrama, fluxo de processo, tipografia cinética, walkthrough de UI	O movimento revela causalidade ou ordem?
Prova	destaque de dados, gráfico, cartão de afirmação, citação, antes/depois	Fonte, denominador, unidade e período estão visíveis o suficiente?
Ritmo	tipo sincronizado com batida, transição, pontuação visual	Apoia o ritmo sem obscurecer o conteúdo?
Afeto de marca	sting de logotipo, filme de lançamento, anúncio social, título herói	Expressa a postura da marca, não apenas suas cores?

Se um gráfico tentar fazer mais de duas funções, divida-o em batidas.

Decida o propósito do movimento antes do estilo

Para cada gráfico, escreva uma frase de propósito de movimento:

• "Revelar a sequência de três etapas na mesma ordem em que o narrador explica."
• "Fazer a métrica do produto parecer crível mantendo a fonte e a linha de base visíveis tempo suficiente para ler."
• "Deixar o crédito inferior entrar silenciosamente para identificar o palestrante sem interromper a emoção."
• "Usar um encaixe de tipo nítido na promessa da campanha, depois uma pausa calma para reconhecimento."

Rejeite propósitos como "torná-lo dinâmico", "adicionar energia" ou "parecer legal", a menos que sejam traduzidos em um efeito para o espectador.

Construa hierarquia ao longo do tempo

A hierarquia dos motion graphics é tanto temporal quanto visual. Dê ao espectador um caminho de leitura controlado:

1. Estabeleça o quadro: para onde o olho deve olhar primeiro.
2. Revele a ideia principal: um título, número, etiqueta ou mudança visual.
3. Adicione contexto: unidade, etiqueta, fonte, função do palestrante, localização da UI, comparação.
4. Pause: deixe quietude suficiente para leitura e compreensão.
5. Saia ou settle: limpe o quadro antes que a próxima ideia compita.

Para conteúdo social de formato curto, isso pode acontecer em menos de dois segundos; para explicadores densos ou gráficos de dados, pode precisar de cinco a oito segundos. Não escolha a duração apenas com base nas normas da plataforma; escolha com base na carga de leitura, ritmo da narração e complexidade visual.

Direção de tempo e easing

Descreva o tempo em batidas, não em adjetivos vagos. Uma especificação útil inclui:

• duração da entrada;
• duração da pausa;
• momento de ênfase;
• duração da saída;
• caráter do easing;
• relação com a narração, música ou ponto de edição;
• o que permanece parado.

Heurísticas comuns de tempo:

• Rótulos e créditos inferiores: entrada rápida, pausa estável, saída silenciosa. A entrada deve ser perceptível, mas não teatral, a menos que a peça seja liderada pela marca.
• Tipografia cinética: mova apenas as palavras que carregam significado. Mantenha as palavras de apoio mais calmas.
• Diagramas: revele uma relação de cada vez; termine cada link causal antes de começar o próximo.
• Destaques de dados: anime a medida, depois pause com o valor final, sua unidade e fonte.
• Sobreposições de UI: sincronize com a ação do usuário. Se um ponteiro/destaque chegar tarde, o espectador pode olhar para o estado errado da UI.
• Transições: trate como pontuação. Um corte seco, dissolve, wipe, morph ou explosão de tipo deve refletir a relação lógica entre as cenas.

Vocabulário de easing:

• Linear: mecânico, constante, geralmente melhor para progresso, relógios, varredura ou sistemas intencionalmente robóticos.
• Ease-out: chegada rápida com ajuste suave; útil para rótulos, cartões e destaques entrando na atenção do espectador.
• Ease-in: aceleração atrasada; útil para saídas, puxadas ou elementos "partindo".
• Ease-in-out: movimento controlado entre dois estados; útil para mudanças de estado da UI e diagramas.
• Spring/overshoot: expressivo, físico, lúdico, mas pode parecer barato ou perturbador se usado em afirmações sérias, texto legal ou dados densos.
• Step/hold: editorial, rítmico, útil para cartões de título, demos de terminal/UI e tipografia cinética.

As fontes do sistema de design diferem em valores exatos. Use os tokens de marca do projeto quando disponíveis; caso contrário, descreva a intenção da curva e peça à implementação para escolher tokens correspondentes no runtime escolhido.

Composição e layout

Direcione motion graphics dentro de um quadro real, não em uma prancheta vazia.

Verifique:

• Folga do assunto: não cubra rostos, mãos, interações com o produto, avisos médicos/legais, legendas ou o objeto-chave.
• Áreas seguras: reserve bordas para UI da plataforma, legendas e variantes de corte. Para entregáveis sociais, especifique 9:16, 1:1, 16:9 e derivados cortados separadamente quando necessário.
• Rastreamento ocular: coloque gráficos onde o espectador já está olhando ou para onde você precisa que o olho viaje em seguida.
• Relação de profundidade: decida se os gráficos vivem sobre a filmagem, se anexam a objetos na cena ou existem como cartões editoriais entre os takes.
• Zona de contraste: adicione scrims, painéis, desfoque ou sombras locais quando a filmagem estiver muito ocupada para texto.
• Espaço negativo: deixe uma região tranquila para leitura. Se a filmagem não tiver, crie uma com corte, reenquadramento, desfoque ou cartão.
• Continuidade: carregue posições âncora ao longo de uma sequência para que rótulos recorrentes sejam fáceis de encontrar.

Evite "decoração flutuante" que não se alinha à filmagem, grade, assunto ou narrativa.

Tipografia para movimento

A tipografia deve sobreviver ao movimento, compressão, telas pequenas e pausas curtas.

Lista de verificação de direção:

• Escolha um papel de tipo primeiro: título, subtítulo, rótulo, legenda, número, fonte, texto legal, anotação de UI.
• Use uma escala tipográfica com contraste claro entre papéis. Não dependa apenas da cor.
• Mantenha comprimentos de linha curtos para movimento. Se uma frase não pode ser lida em uma pausa, divida-a em batidas.
• Use mudanças de peso com moderação; mudanças de peso animadas podem cintilar após a compressão.
• Evite traços finos, versaletes minúsculos e tracking apertado sobre vídeo.
• Preserve as fontes da marca quando fornecidas, mas substitua por uma fonte alternativa mais legível para legendas, texto legal ou rótulos de UI muito pequenos, se necessário.
• Para versões multilíngues/localizadas, reserve espaço de expansão e evite layouts que dependam do comprimento de palavras em inglês.
• Para créditos inferiores, separe nome, função, organização e contexto opcional em uma hierarquia intencional.
• Para tipografia cinética, torne o estresse semântico visível: substantivos, verbos, números, contrastes e reversões ganham movimento; palavras de preenchimento permanecem estáveis ou se agrupam com sua frase.

Âncoras de acessibilidade:

• Use o contraste da WCAG como piso para texto digital: 4,5:1 para texto normal e 3:1 para texto grande no Nível AA; considere contraste mais forte para vídeo móvel, compressão e visualização ao ar livre.
• Não comunique significado apenas pela cor. Combine cor com rótulos, ícones, forma, posição ou texto.
• Mantenha texto importante na tela tempo suficiente para ser lido em voz alta em um ritmo natural e, em seguida, adicione uma margem.

Sistemas de marca e linguagem de movimento

Traduza a marca em comportamento, não apenas em aparência:

• Premium/mínimo: menos movimentos, pausas mais longas, easing preciso, transições contidas, espaço negativo generoso.
• Editorial/notícias: cortes diretos, créditos inferiores com fonte, gráficos estáveis, ênfase contida.
• SaaS/produto: sobreposições ancoradas na UI, sequenciamento claro de etapas, gramática consistente de destaques, micro-movimento responsivo.
• Jovem/social: tipo maior, cortes rítmicos, acentos de batida, cor mais ousada, mas ainda protegendo a legibilidade.
• Técnico/explicativo: lógica de diagrama, divulgação progressiva, símbolos consistentes, menos movimento ornamental.
• Luxo/filme de marca: revelação lenta, paralaxe ou profundidade controlados, comportamento de material tátil, menos afirmações.

Crie uma paleta de movimento para o projeto:

• estilo de entrada;
• estilo de saída;
• estilo de ênfase;
• família de transições;
• comportamento do crédito inferior;
• comportamento de revelação de dados;
• alternativa de movimento reduzido;
• movimentos proibidos.

Mantenha esta paleta pequena. A consistência é o que permite que os espectadores aprendam o sistema.

Acessibilidade e segurança do espectador

Aplique estas como restrições rígidas, a menos que o entregável seja um rascunho privado com uma isenção explícita:

• Não crie flashes acima do limite de três flashes da WCAG. Evite cintilação rápida de alto contraste, mesmo quando tecnicamente abaixo do limite.
• Forneça ou especifique um tratamento de movimento reduzido para superfícies interativas/web/app e para versões prováveis de serem incorporadas na UI.
• Evite paralaxe desnecessária, rotação, vórtice, zoom rápido, mudanças de profundidade em grande campo e movimento multieixo quando não forem essenciais.
• Garanta contraste de texto e contraste de não texto contra a filmagem em mudança, não apenas contra um mock de design estático.
• Não coloque informações essenciais apenas em movimento; o estado final mantido ainda deve comunicar o ponto-chave.
• Evite legendas ou subtítulos em movimento rápido. O movimento da legenda não deve competir com a leitura.
• Se um vídeo contiver animação contínua, gráficos de avanço automático ou loops de fundo, especifique o comportamento de pausa/parada quando publicado em um ambiente interativo.
• Para vídeos em plataformas, inclua legendas ou layout seguro para legendas quando a fala carregar significado.

Movimento reduzido nem sempre significa nenhuma animação. Prefira opacidade, cortes simples, distância de viagem mais curta, estados finais estáveis e velocidade mais baixa, preservando orientação e significado.

Integridade de dados, afirmações e fontes

O movimento pode fazer as afirmações parecerem mais persuasivas do que as evidências suportam. Trate os gráficos de dados como evidência editorial.

Exija:

• fonte;
• data ou período;
• denominador ou população base;
• unidades;
• linha de base de comparação;
• incerteza, status de estimativa ou tamanho da amostra quando relevante;
• notas de transformação, como valores indexados, médias, suavização ou projeções.

Regras de movimento de dados:

• Anime as marcas proporcionais honestamente. Se o comprimento da barra codifica magnitude, uma linha de base zero é normalmente necessária, a menos que uma alternativa claramente rotulada seja justificada.
• Não use 3D, perspectiva, overshoot elástico ou escala decorativa quando distorcer a comparação.
• Evite animar um número para cima sem o denominador ou período.
• Não escolha um quadro inicial ou final para exagerar uma tendência.
• Mantenha eixos, rótulos e unidades do gráfico presentes durante a pausa, não apenas antes ou depois da animação.
• Se uma afirmação for qualitativa ("onboarding mais rápido"), não a faça parecer dados medidos, a menos que exista uma fonte medida.
• Para filmagens de antes/depois, combine corte, ponto no tempo, iluminação e escala quando a justiça da comparação for importante.
• Para sobreposições de UI de produto, distinga entre "UI conceitual", "protótipo", "dados simulados" e "captura real do produto".

Se aparecerem afirmações legais, médicas, financeiras ou de segurança, solicite cópia aprovada e material de origem. A direção de movimento não pode inventar comprovação.

Trabalhando com filmagem ou vídeo gerado

Antes de adicionar sobreposições, inspecione o take real:

• Para onde está a atenção do assunto?
• Quais áreas são visualmente tranquilas?
• O movimento da câmera luta contra a sobreposição?
• A profundidade de campo torna o rastreamento de anexação plausível?
• Há espaço para legendas e UI da plataforma?
• Há momentos em que o gráfico deve desaparecer para deixar a performance ou evidência respirar?

Estratégias de sobreposição:

• Sobreposição no espaço da tela: cartões estáveis, legendas, etiquetas, gráficos de título.
• Sobreposição anexada à cena: etiquetas rastreadas, setas, alfinetes de produto, pontos de mapa. Use apenas quando a qualidade do rastreamento suportar.
• Inserção editorial: diagrama em tela cheia ou cartão entre batidas de filmagem.
• Composição dividida: filmagem mais painel de gráfico/UI. Use quando a evidência precisar de mais espaço do que uma sobreposição pode fornecer com segurança.
• Corte correspondente ou morph: transição de objeto/filmagem para representação gráfica.

Revisão e QA

Revise motion graphics contra o propósito, não contra a preferência:

1. O gráfico tem uma função e propósito claros declarados?
2. O caminho de leitura é controlado ou o olho é puxado em várias direções?
3. Texto e dados permanecem visíveis e contrastantes durante a pausa?
4. As proporções de tempo são consistentes com a complexidade e o ritmo da narração?
5. A animação é evitável ou desnecessária?
6. A sobreposição compete com o assunto, legenda ou UI da plataforma?
7. A fonte, o período e as unidades estão visíveis para as afirmações?
8. O tratamento de movimento reduzido é acionado ou especificado?
9. O comportamento da marca é consistente em todos os gráficos na sequência?
10. Existe espaço para localização se necessário?

Marque itens específicos, não sentimentos vagos. Prefira "O rótulo de dados some antes que o espectador possa verificar a fonte" a "O gráfico parece apressado".

Adaptação da plataforma de entrega

Direcione para o ambiente onde o espectador vê, não apenas para o software de produção:

• Web/mobile: tratamento de movimento reduzido, interação de toque, contraste variável, proporções de aspecto flexíveis, vida útil do gráfico orientada por rolagem.
• Broadcast/cinema: pausas de leitura mais longas, espaço seguro para legendas, tratamento de cor e alcance, preparação para legendas ocultas.
• Social (vertical, quadrado, paisagem): reflita a proporção; torne o texto grande; teste o som desligado;
• Apresentação ao vivo: auxiliares de palco, posicionamento de câmera, legibilidade da sala, texto do apresentador.
• Ambiente de jogo: em tempo real, resolução variável, contrastes de HUD, compatibilidade de modo daltônico.
• AR/VR: profundidade, paralaxe, ancoragem espacial, conforto do usuário, tempo de renderização.

Especificação de implementação

Entregue uma especificação que uma ferramenta, motor ou animador pode executar:

• Comportamento de movimento para cada gráfico
• Propósito, duração e easing para cada estado
• Posições de layout em relação ao quadro ou à filmagem
• Hierarquia e fonte tipográfica
• Conduta de acessibilidade (contraste, movimento reduzido, legenda)
• Tratamento de dados e fonte
• Comportamento de marca
• Observações de transição de sequência
• Variantes de plataforma de entrega

Use formato de especificação que corresponda ao runtime pretendido: JSON de timeline, chamadas de API de animação, parâmetros de motor de renderização, anotações de edição ou instruções de linguagem natural com valores vinculados.

Se a saída esperada for código, inclua comentários com propósito, decisão de tempo e restrições de acessibilidade.

Diretrizes de implementação para agentes de IA

Ao gerar motion graphics por meio de código ou APIs:

1. Sempre use um método de renderização que suporte estados de animação em vez de apenas valores finais.
2. Inclua movimento reduzido como uma ramificação de condição no início.
3. Para gráficos com dados, primeiro renderize o quadro final verificável e, em seguida, anime até ele.
4. Para sobreposições de UI, sincronize a animação com a ação e garanta que o rótulo seja legível antes da próxima ação.
5. Use propriedades CSS/estilo de animação que podem ser substituídas por preferências do usuário.
6. Teste saída de exemplo para contraste de pausa, legibilidade de fonte e distração de cintilação antes de enviar.
7. Quando a saída de vídeo for esperada, especifique duração, resolução, taxa de quadros e codec de entrega.
8. Escolha uma biblioteca de animação que corresponda à escala e método de entrega do projeto (CSS para web, Lottie/Rive para aplicativos, estruturas de composição para filme).
9. Para gráficos de dados, nunca anime valores ausentes ou inventados; use apenas dados fornecidos.
10. Para edição de vídeo, rotule claramente cada clipe com seu propósito e restrições de tempo.

Iteração

Motion graphics melhoram através de revisão, não apenas através de configuração inicial. Espera-se que os agentes:

1. Produzam especificação ou código de rascunho.
2. Apresentem para revisão contra critérios listados.
3. Ajustem tempo, layout e hierarquia com base no feedback.
4. Verifiquem a acessibilidade e a integridade dos dados novamente.
5. Produzam variantes de entrega a partir de uma especificação central.

Cada iteração deve declarar o que mudou e por quê, não apenas o que é diferente.

Verificação final de entrega

Antes de marcar como concluído:

• O gráfico faz seu trabalho declarado?
• O caminho de leitura é controlado?
• O texto é legível na pausa?
• Os dados são íntegros (fonte, período, denominador, unidade visíveis)?
• A acessibilidade é tratada (contraste, movimento reduzido, sem flash)?
• O comportamento da marca é consistente?
• A sobreposição compete com o conteúdo?
• A especificação é executável pelo runtime alvo?
• A variante de entrega corresponde aos requisitos da plataforma?
• As notas de iteração e decisão estão preservadas?

Use esta lista de verificação para finalizar o trabalho de motion graphics. Se alguma resposta for "não", revise e reenvie.