Exemplos de motion graphics: vídeos assistidos por IA ordenados pela função
Por Potto AI Team·
Exemplos de motion graphics ordenados pela tarefa: filmes de lançamento, telas de produto, kinetic type, histórias de dados, explainers e reveals de logo, cada um de um autor creditado.
Os exemplos de motion graphics mais úteis se ordenam pela tarefa que o vídeo cumpre, não pelo estilo visual: um filme de lançamento, uma tela de produto animada, um reel de kinetic type, uma história de dados, um explainer ou um reveal de logo. Cada tarefa tem a própria duração, a própria proporção e a própria ordem das ideias, então um "bom exemplo" só ajuda se for o tipo certo de exemplo. Este guia escolhe 21 exemplos de motion graphics da biblioteca de vídeos de motion graphics com IA no Potto, reparte esses exemplos nas seis tarefas e, para cada um, lista o autor, a duração, a proporção e o que observar.
Uma coisa antes: nenhum desses vídeos foi feito pelo Potto. Foram feitos e publicados por criadores independentes, creditados abaixo pelo usuário no X. O Potto os reúne para você assistir, ler o prompt quando o autor compartilhou um e começar o seu próprio vídeo a partir da ideia. As descrições usam só o título de cada vídeo e os dados da página (autor, categoria, duração, proporção, ferramentas), porque o objetivo é ajudar você a escolher o que estudar, não resenhar o trabalho de outras pessoas. Tudo o que se diz sobre a ferramenta do Potto vem do produto como ele funciona hoje.
O que conta como motion graphics
Motion graphics são design gráfico posto em movimento: texto, formas, ícones, gráficos e imagens que se movem para explicar algo, anunciar algo ou dar uma cara a uma marca. O guia da Adobe sobre motion graphics os define como "gráficos com movimento" e os chama de "peças de animação mais curtas que entretêm ou transmitem informação", em contraste com longas-metragens animados com personagens e um enredo. O artigo da Wikipedia sobre diz que o motion design costuma ser associado a colocar em movimento objetos abstratos, texto e outros elementos de design gráfico.
Juntas, as duas fontes nomeiam os lugares em que o trabalho aparece: créditos de abertura de cinema e televisão, gráficos de broadcast e de telejornal, publicidade e branding, tipografia animada, design de interface e vídeos explainer e promocionais. Essa lista se organiza por setor. Este guia se organiza por tarefa, porque, quando você faz um vídeo, a pergunta é "o que eu quero transmitir?" e não "de qual setor isto é?". As seis tarefas abaixo correspondem às categorias usadas pela biblioteca e cobrem a maior parte do que uma empresa ou um criador de fato precisa.
Tarefa
O que faz
Pergunta típica que responde
Lançamento
Anuncia um produto ou um release
O que há de novo e por que isso importa?
Telas de produto
Anima uma interface
Como este produto parece e funciona?
Kinetic type
Move as palavras como visual principal
Qual é a frase que eu devo lembrar?
História de dados
Faz um número ou uma tendência chegar
O que mudou, e em quanto?
Explainer
Ensina uma ideia em etapas
Como isto funciona?
Animação de logo
Revela uma marca
Quem fez isto?
Como os 21 exemplos foram escolhidos
A biblioteca é grande e continua crescendo, então este guia não cita totais; a página mostra sempre os números atuais. Para escolher os exemplos, o guia usou quatro filtros. Cada obra precisa ter um autor creditado, uma duração e uma proporção registradas, um vídeo que funcione e um título que diga do que o vídeo trata. Dentro de cada tarefa, privilegiou obras que variam em duração, proporção e ferramentas, para você ver a faixa e não um único padrão repetido.
Dois fatos sobre a biblioteca inteira valem a pena antes dos exemplos. Eles vêm dos registros da biblioteca conferidos em 2026-10-12 e vão mudar à medida que novas obras forem adicionadas:
A maioria das obras é 16:9. Cerca de quatro em cada cinco são 16:9, mais ou menos uma em cada oito é 9:16 e o resto é 1:1. Cada tarefa abaixo segue o mesmo viés, que combina com onde as pessoas assistem: sites, apresentações e X.
A duração depende da tarefa. A duração mediana é de cerca de 9 segundos para animação de logo, 15 para kinetic type, 30 para lançamento, 35 para história de dados, 36 para telas de produto e 60 para explainer. As medianas por tarefa aparecem em cada seção.
As 21 obras aparecem nas seções próprias abaixo, cada uma ligada à sua página, onde você pode reproduzi-la. Para cada obra, o guia dá o usuário do autor no X, a duração, a proporção, as ferramentas quando a página as lista e se o autor compartilhou o prompt. "Prompt compartilhado" significa que o autor publicou o prompt na página da obra, para você poder lê-lo antes de decidir reutilizá-lo.
Exemplos de filme de lançamento
Um filme de lançamento anuncia algo e pede ao espectador que lembre de uma coisa: o nome. Entre os vídeos de lançamento da biblioteca, a duração mediana é de 30 segundos, e cerca de metade tem 30 segundos ou menos. A categoria também é a que tem a maior variedade de proporções, com cerca de um em cada cinco em 9:16, para o celular.
Reddit marketing tool launch video, de @anthonyriera, dura 52,8 segundos em 16:9. A página lista o Remotion como ferramenta, o mesmo renderer que o Potto usa, o que faz dele uma referência útil do que um filme de lançamento feito em código pode conter perto de um minuto.
TypingMind showreel announces team features, de @ann_nnng, dura 15,0 segundos em 16:9, foi feito em canvas, e o autor compartilhou o prompt. O título nomeia o conteúdo, recursos para equipes, e a forma, um showreel.
CodePilot promo floats 17 model-provider logos, de @op7418, dura 50,0 segundos em 16:9. O título já é um briefing preciso: um único recurso visual repetido, 17 logos, num relógio de 50 segundos.
O que observar. Assista a um filme de lançamento uma vez sem som e anote o segundo em que o nome do produto aparece pela primeira vez. Depois conte quantas afirmações separadas o filme faz. Os exemplos acima sugerem uma regra que vale na categoria inteira: quanto mais curto o filme, menos afirmações ele carrega. Um filme de 15 segundos leva uma ideia e um nome; um filme de 50 segundos tem espaço para um problema, alguns recursos e uma frase de fechamento.
Empreste com o Potto. O criador de vídeo de produto do Potto monta filmes de lançamento a partir de uma descrição ou de um link. Um briefing que funciona bem nomeia o público, a duração e os beats:
Filme de lançamento para um app de orçamento fictício chamado Ledgerly, 30 segundos, 16:9. Abra com o problema de acompanhar gastos em planilhas, mostre três recursos e termine no nome do app e num call to action.
Exemplos de tela de produto
A animação de telas de produto mostra uma interface fazendo alguma coisa: uma lista se ordena sozinha, um painel se preenche, um celular percorre um fluxo. A duração mediana da categoria é de 36 segundos, mas a metade do meio das obras vai de cerca de 24 a cerca de 67 segundos, então é a mais variada das seis. Também é onde os exemplos em 9:16 e 1:1 são mais úteis, porque fluxos de app costumam ser mostrados no celular.
Mac app onboarding sorts messages into one calm list, de @dhruvalgolakiya, dura 13,4 segundos em 16:9. O título nomeia uma única transformação, mensagens que viram uma lista, e a duração deixa espaço exatamente para isso.
Sixteen UI motion studies laid out in a four-by-four grid, de @charliejhills, dura 8,0 segundos em 1:1, o único exemplo quadrado daqui: uma grade mostra muitos movimentos pequenos ao mesmo tempo, em vez de um único fluxo grande.
O que observar. Pause no primeiro quadro que mostra a interface e pergunte o que o espectador deve olhar. Depois veja quanto tempo cada estado fica na tela. A animação de tela de produto falha quando a tela muda antes de o olho ter encontrado a mudança, e por isso os exemplos mais curtos daqui mostram uma única transformação e os mais longos agrupam os estados em etapas.
Empreste com o Potto. Um vídeo de demonstração de produto começa pelas capturas que você envia, até oito imagens, documentos ou arquivos de áudio por projeto. As cenas de captura dão zoom e seguem o caminho de um cursor, e cada cena pode levar uma legenda, então o briefing usual é uma lista de etapas:
Demonstração de produto para um app de faturamento fictício, 30 segundos, 16:9. Use as minhas três capturas: criar uma fatura, enviá-la, vê-la paga. Uma legenda curta por captura, fechando no nome do app.
Exemplos de kinetic type
O kinetic type coloca as palavras em movimento como visual principal. É a mais curta das tarefas conduzidas por texto: a mediana fica em cerca de 15 segundos, e cerca de sete em cada dez obras duram 30 segundos ou menos. Como não há interface nem gráfico para carregar o sentido, a escrita é que tem de carregar.
Showreel opens on a bold Decision title card, de @kenn, dura 15,0 segundos em 16:9, e o autor compartilhou o prompt. É um showreel de tipografia, então o title card é o movimento de abertura.
Slanted credit names glide over an orange grid, de @goodside, dura 75,0 segundos em 16:9, com o prompt compartilhado. Nessa duração, o recurso repetido é uma lista de nomes que se move sobre um único fundo.
O que observar. Mute o vídeo e leia. Kinetic type precisa funcionar como texto: se as frases forem fracas, o movimento não as salva. Depois ligue o som e confira se o tempo de cada palavra segue o áudio. Os dois exemplos de 15 segundos amarram o movimento a um title card ou a um tempo, enquanto os dois de 75 segundos se apoiam na estrutura, uma lista de créditos e títulos de capítulo, para segurar a atenção.
Empreste com o Potto. As cenas de texto do Potto entram no cue, e as cenas de citação, título e lista levam linhas curtas. Ele não oferece animação livre de letras, então uma ondulação a 128 BPM fica fora do que ele renderiza. O que ele trata bem é um roteiro curto em que cada linha tem a própria tela:
Vídeo de texto cinético, 15 segundos, 16:9, estilo Bold Pop. Cinco linhas curtas, uma por tela, sobre uma equipe que publica toda sexta-feira. Termine na linha "Ship it."
Exemplos de história de dados
Uma história de dados faz um único número ou uma única tendência chegar. Entre os vídeos de história de dados da biblioteca, a mediana fica em cerca de 35 segundos, e a dispersão é larga, de 15 segundos a bem mais de um minuto. A categoria está entre as menores, o que faz destes um bom lugar para estudar cada exemplo.
LLM release timeline tracks 2026 models month by month, de @nummanali, dura 62,1 segundos em 16:9, foi feito em canvas, com o prompt compartilhado. A página descreve uma animação em canvas que percorre 2026 mês a mês, então o tempo é o eixo.
O que observar. Encontre o único número que o vídeo quer que você lembre e depois confira como o vídeo o conquista: o que vem antes e o que é mostrado depois. Os três exemplos usam três recursos diferentes para a mesma tarefa. Um declara um resultado, um percorre uma linha do tempo e um junta um número à imagem daquilo que ele mede.
Empreste com o Potto. Cenas de estatística mostram um único número grande, e cenas de gráfico desenham gráficos de barras ou de rosca com três a seis valores que contam para cima. Se você escrever os números no briefing, o vídeo os usa como foram escritos, então confira cada número contra a sua fonte antes de exportar. A página de gráfico animado reúne mais destes:
História de dados, 30 segundos, 16:9. A média de xícaras por dia de uma cafeteria fictícia subiu de 120 em junho para 190 em setembro. Abra com a pergunta, mostre os quatro meses como gráfico de barras e termine na alta de 58%.
Exemplos de explainer
Um explainer ensina uma ideia em etapas. É o mais longo dos seis: a duração mediana é de 60 segundos, e só cerca de um em cada cinco dura 30 segundos ou menos. Os vídeos explainer da biblioteca também têm a maior variedade de tratamentos, de pixel art a quadros brancos desenhados à mão.
Kinetic word cloud pitches an AI inference startup, de @deedydas, dura 26,0 segundos em 16:9, feito com SVG e GSAP, com o prompt compartilhado. É o explainer mais curto daqui e comprime um pitch num único recurso em movimento.
O que observar. Um explainer precisa passar no teste da frase: depois de uma única vez, você consegue dizer a ideia numa frase? Procure o momento em que o problema vira a solução e conte as etapas entre esse momento e o fim. Dois dos três exemplos buscam um assunto pequeno e concreto (um dígito, um fluxo de onboarding) e deixam que ele carregue a lição inteira.
Empreste com o Potto. A estrutura por trás da maioria dos explainers é problema, solução, como funciona e próximo passo, que o guia sobre o que é um explainer video cobre em detalhe, e 12 exemplos de explainer video decompõe pela ordem das cenas.
O criador de vídeo explicativo do Potto pode começar de um tema, um link ou um documento como um PDF. Ele não tem estilo desenhado à mão nem de quadro branco: os doze estilos embutidos são Clean Modern, Midnight Tech, Editorial Paper, Bold Pop, Blueprint, Warm Organic, Neon Night, Soft Pastel, Mono Minimal, Sunset Gradient, Studio Noir e Fresh Mint.
Exemplos de animação de logo
Um reveal de logo é a tarefa mais curta: a duração mediana na biblioteca fica abaixo de 9 segundos, e os exemplos daqui vão de 8,7 a 21,0 segundos. Há uma única coisa para olhar, então o vídeo trata sobretudo de timing e da forma do movimento.
TypingMind logo reveal, de @tdinh_me, dura 21,0 segundos em 16:9, com o prompt compartilhado. A página descreve um reveal lento em que a marca se monta aos poucos.
O que observar. Olhe o último quadro. Um reveal de logo funciona se a marca final está limpa, centralizada e legível por tempo suficiente para se registrar, e o movimento anterior é o que dá personalidade à marca. O exemplo de 8,7 segundos mostra o quanto um único movimento, uma forma que se transforma em outra, consegue fazer.
Empreste com o Potto. A cena de fechamento com call to action do Potto pode encerrar um vídeo no seu logo, e a categoria logo animation da biblioteca é o lugar para estudar reveals autônomos. O Potto renderiza a partir de um conjunto fixo de tipos de cena e de estilos, sem código de animação sob medida, então uma curva de easing específica como o morph elástico acima é algo para estudar, não algo para copiar à letra.
Faça a sua versão
Você tem três caminhos para um vídeo como estes. Escreva o código você mesmo, peça a um agente de código que o escreva, ou descreva o vídeo para uma ferramenta que o renderize para você.
Muitos criadores da biblioteca constroem com código. O Remotion, o renderer que o Potto usa, se descreve como uma forma de criar vídeos e motion graphics com React, e publica skills de agente para que agentes de código possam trabalhar com ele. A página de skills do Potto reúne skills de agente gratuitas de autores terceiros, que você pode instalar num agente que lê arquivos SKILL.md; elas rodam no seu próprio agente, com o seu próprio modelo.
O Claude Motion da Anthropic, anunciado em 8 de outubro de 2026 e em beta nos planos Team e Enterprise em 2026-10-12, anima texto, gráficos, formas e imagens a partir de um prompt e exporta um MP4. O Potto não é o Claude Motion e não tem relação oficial com a Anthropic. O texto sobre alternativas ao Claude Motion compara os caminhos por fatos que você pode conferir.
O caminho da descrição é a ferramenta de motion graphics com IA do Potto. Você entrega um prompt, um link público ou um documento. O Claude Opus 5.5 escreve o briefing, o roteiro e o storyboard, e o Remotion renderiza as cenas num MP4 com narração, legendas e música, em 16:9, 9:16 ou 1:1. Você pode editar o storyboard tela a tela ou pedir uma mudança no chat. Nas páginas da biblioteca, um vídeo com prompt compartilhado tem um botão "Usar este prompt" que o envia ao criador de vídeo do Potto. O resultado é a versão do Potto, com os tipos de cena e os estilos dele, então não vai coincidir com o original; trate o original como referência da ideia, do ritmo e do visual.
Prévias e storyboards não custam nada; os créditos são cobrados na exportação, e o total aparece antes de você confirmar (veja os preços). O Potto não gera filmagem de ação real, avatares nem pessoas, e não edita um vídeo que você já tem.
Perguntas frequentes
Quais são os tipos de motion graphics?
Os tipos de motion graphics costumam ser agrupados pelo lugar em que aparecem: sequências de título de cinema e televisão, gráficos de broadcast e de telejornal, publicidade e branding, tipografia cinética, animação de interface e vídeos explainer ou promocionais. Este guia os ordena pela tarefa: filmes de lançamento, telas de produto, kinetic type, histórias de dados, explainers e animações de logo. O artigo da Wikipedia sobre motion graphic design também separa gráficos explainer, emotivos e promocionais, conforme o objetivo seja esclarecer, evocar um sentimento ou aumentar o reconhecimento.
O que é considerado motion graphics?
Motion graphics são design gráfico animado: texto, formas, ícones, gráficos e imagens postos em movimento para informar, promover ou marcar. A Adobe os define como "gráficos com movimento" e os descreve como peças de animação mais curtas que entretêm ou transmitem informação. Um vídeo que anima uma captura de produto, um gráfico de barras ou um logo é motion graphics. Um longa-metragem animado com personagens e um enredo costuma se chamar animação.
Qual é a diferença entre motion graphics e animação?
Motion graphics movem elementos de design gráfico, como tipos, formas e gráficos, em geral para transmitir informação numa peça curta, enquanto a animação, num sentido mais amplo, conta histórias com personagens e enredos. Os dois se sobrepõem, então a linha é questão de propósito e de escala, mais do que de técnica. O guia da Adobe traça a linha por duração e propósito: motion graphics são peças mais curtas que entretêm ou transmitem informação.
Quanto tempo um vídeo de motion graphics deve durar?
Depende da tarefa. Na biblioteca do Potto em 2026-10-12, a duração mediana é de cerca de 9 segundos para animação de logo, 15 para kinetic type, 30 para vídeos de lançamento, 35 para histórias de dados, 36 para telas de produto e 60 para explainers. Ajuste a duração ao número de ideias: uma ideia cabe em 15 segundos, e um problema, três recursos e uma frase de fechamento cabem em 30 a 45. As opções de duração do Potto são 15, 30, 45, 60 e 90 segundos.
Os vídeos deste guia foram feitos com o Potto?
Não. Foram feitos por criadores independentes, e cada um é creditado ao autor pelo usuário no X. O Potto não os reivindica como obra própria. Eles entram como referências, e a página de cada obra liga a publicação original quando há uma disponível.
Posso fazer motion graphics como estes com o Potto?
Sim, para os tipos de motion graphics que o Potto oferece: filmes de lançamento, telas de produto, vídeos conduzidos por texto, histórias de dados e explainers montados a partir dos onze tipos de cena, dos doze estilos e das cores da sua marca. O Potto renderiza a própria versão a partir do seu prompt, então o resultado não copia um original, e ele não aceita código de animação sob medida, estilos desenhados à mão nem animação livre de letras.
Páginas do Potto AI das 21 obras, dos autores, durações, proporções e prompts compartilhados, e das medianas da biblioteca por categoria (conferidas em 2026-10-12)
Potto AI
Crie seu próximo vídeo de lançamento.
Transforme o que despertou seu interesse em um vídeo ou uma imagem de sua autoria. Traga capturas de tela, um tema ou um prompt.
