Claude Design: motion graphics sem cara de IA

Existe um recurso dentro do Claude Design chamado "animation" que a maioria das pessoas nem percebe que está lá, mas que uso o tempo inteiro pra criar os gráficos animados que aparecem nos próprios vídeos. Ele serve pra sites, redes sociais e apresentações, e o resultado, quando feito com um pouco de cuidado, fica bem longe do visual genérico de IA. Vou mostrar os níveis de uso, do mais simples até o processo completo que uso pra transformar uma fala gravada em motion graphics sincronizados.

Duas formas de acessar esse fluxo

Dá pra chegar nesse recurso de duas formas, pelo Claude Design na web ou pela skill /design dentro do Claude Code, que já comentei em outro post aqui no blog. Nesse caso específico o foco é a versão web do Claude Design, usando a opção "animation" que aparece junto com as outras ferramentas de criação.

Nível básico: gráfico animado a partir de dados

O uso mais simples é pedir um gráfico animado a partir de algum dado. Testei pedindo uma animação mostrando a variação histórica do preço do Bitcoin, destacando os eventos que impactaram alta e queda ao longo do tempo. O prompt foi direto, só descrevendo o que eu queria ver.

O Claude Design responde com algumas perguntas de esclarecimento antes de gerar qualquer coisa, o formato do vídeo, horizontal, vertical ou quadrado, e a duração da animação. Quando não quero detalhar tudo, basta responder "decide for me" e ele decide por conta própria. Depois que a animação é gerada, ainda dá pra ajustar manualmente quanto tempo ela passa em cada bloco ou cena, o que ajuda a dar ritmo certo pro conteúdo.

Nível intermediário: evitando o AI Slop no design dos gráficos

Um gráfico animado genérico ainda tem cara de IA, mesma fonte padrão, mesmos elementos neutros. A dica principal pra fugir disso é trocar a fonte padrão por uma fonte específica, enviando referência visual de fontes pro Claude Design. Uso o fontshare e o Typewolf pra isso, e a fonte Switzer, que pego também pelo fontshare, é uma das que mais uso nesse tipo de peça.

Também vale passar referências de ícones e imagens. Uso o IconScout e o LottieFiles pra isso, além de uma biblioteca paga de assets, ícones e vídeos que já assino. Prefiro baixar os ícones em formato JSON, geralmente animações Lottie, porque o Claude Design trabalha bem com esse formato e consegue aplicar a animação do ícone de forma coerente com o resto da peça.

No exemplo do gráfico do Bitcoin, pedi pro Claude Design trocar os elementos genéricos, uma bolinha na ponta da curva e bolinhas marcando os eventos, por ícones customizados, um foguete, o símbolo do Bitcoin e um calendário. Junto com isso, ajustei a identidade visual geral pra ficar coerente com esses ícones e com a fonte escolhida. O resultado fica muito mais específico e menos genérico do que a primeira versão.

Nível avançado: motion graphics a partir de transcrição de vídeo

O processo que mais uso na prática é gerar motion graphics a partir da transcrição de um vídeo, que é como monto os gráficos animados que aparecem nos meus próprios vídeos. O primeiro passo é gerar a transcrição em formato SRT de um trecho do vídeo. Uso o Gemini pra isso, mas qualquer IA que transcreva áudio serve.

Com essa transcrição em mãos, passo ela junto com um prompt detalhado pro Claude Design, pedindo pra criar motion graphics sincronizados com a fala, no formato talking head, vídeo com o rosto do criador em destaque na tela. No prompt eu já deixo claro que precisam existir espaços reservados na composição pra encaixar a imagem da pessoa falando depois, já que o rosto entra numa etapa posterior de edição.

Também envio referências visuais de contexto, o logo do Claude Code, prints da própria interface do Claude Code e um wallpaper de fundo, pra a animação conversar visualmente com o que está sendo mostrado. Depois que a peça é gerada, exporto o motion graphic como vídeo pela opção de compartilhar do Claude Design.

O processo de edição no Premiere

A parte final é juntar esse motion graphic com o vídeo da pessoa falando. Uso uma extensão própria do Premiere Pro pra isso, que cria uma máscara recortando o rosto, que originalmente ocupa a tela toda, e transforma ele numa janelinha pequena, posicionável em diferentes cantos da tela conforme a cena do motion graphic exige.

Essa extensão também anima a transição entre o vídeo em tela cheia e a janelinha pequena, de forma automática. O ponto central aqui é que essa ferramenta faz esse recorte e essa animação de máscara sem esforço manual, evitando o trabalho que seria necessário numa edição profissional tradicional, com algo como After Effects, pra chegar no mesmo resultado.

Resultado final

O motion graphic criado a partir da transcrição se encaixa perfeitamente com o que está sendo dito no vídeo, porque ele foi gerado com base no próprio conteúdo falado, não numa animação solta sem relação com a fala. Combinando fonte própria, ícones customizados e sincronização com a transcrição, o resultado visual fica bem acima do padrão genérico de IA, seja pra vídeo, redes sociais ou apresentações.