Estes são os prompts exatos que geraram as animações da abertura do vídeo, um por bloco de fala. Antes deles tem o prompt que monta a sua identidade visual, que é o que faz os sete blocos parecerem o mesmo vídeo. Cole um de cada vez.
o prompt zero
Antes dos sete, a sua identidade visual
Cole no chat normal do Claude, não no Design. Ele faz uma entrevista curta com você e devolve um documento com paleta, tipografia e regras de estilo. Esse documento vira o seu Design System dentro do Claude Design, e é por isso que os sete prompts abaixo nem precisam citar cor nenhuma.
prompt 00 · identidade visualno chat normal do claude
Você vai me ajudar a criar a identidade visual da minha marca para eu usar em motion graphics e animações.
Antes de escrever qualquer coisa, me faça uma entrevista curta, uma pergunta por vez, esperando minha resposta antes de seguir para a próxima. Se eu não souber responder alguma, sugira uma opção e siga.
Pergunte sobre:
1. O que é a marca ou o canal, e para quem ele fala.
2. Que sensação as pessoas devem ter ao ver: sério e profissional, leve e divertido, tecnológico, acolhedor, sofisticado.
3. Se eu já tenho cores, e quais são. Se não tiver, se prefiro fundo escuro ou fundo claro.
4. Duas ou três marcas cujo visual eu admiro, e o que me agrada nelas.
5. Onde essas animações vão aparecer: YouTube, Instagram, apresentações, site.
6. O que eu não quero de jeito nenhum no meu visual.
Depois da entrevista, me entregue um documento organizado com:
PALETA
Cores em código hexadecimal, com nome e função de cada uma: fundo base, superfícies elevadas, bordas, texto principal, texto secundário, cor de acento da marca, cores de apoio para separar categorias, e cores de estado (sucesso, atenção, erro). Explique em uma linha quando usar cada uma.
TIPOGRAFIA
Duas fontes no máximo, disponíveis no Google Fonts. Diga qual é para título e qual é para texto corrido, com pesos e tamanhos de referência.
PRINCÍPIOS VISUAIS
Regras claras de formato: cantos, bordas, uso de sombra, estilo dos ícones, quantidade de espaço vazio, e como as linhas ligam os elementos.
O QUE EVITAR
Lista do que nunca deve aparecer nas minhas animações.
TOM
Como o visual deve soar: sóbrio, energético, didático, elegante.
Escreva o documento de forma que eu possa colar em qualquer ferramenta de IA e ela consiga aplicar o estilo sem me perguntar mais nada.
por quêVocê cadastra o resultado uma vez na aba Design System do Claude Design e ele passa a aparecer num menu toda vez que for gerar animação. Sem isso, cada bloco sai com uma cara diferente e o vídeo fica remendado.
o mapa
Cada bloco tem uma função na fala
Os sete cobrem o primeiro minuto do vídeo, cinco segundos cada. A técnica de animação não foi escolhida por bonita: ela acompanha o que está sendo dito naquele momento.
0:00
Gancho
Split screen mostrando o caos de antes e a calma de depois.
0:05
O que é
Morph do logo virando janela, com o nome entrando em kinetic type.
0:15
Como entra a animação
Três entradas convergindo num único ícone de play.
0:25
O diferencial técnico
Código sendo digitado e virando forma visual.
0:35
Design system
Peças de quebra-cabeça montando um cartão de identidade.
0:45
CTA e ponte
Contador regressivo com barra de progresso sincronizada.
0:55
Fecho
Zoom com blur pra servir de corte entre blocos.
os 7 prompts
Copie e cole um de cada vez
Cole direto no Claude Design, espere a animação gerar, revise, ajuste se precisar, e só então passe pro próximo. Todos assumem que o seu design system já está aplicado, então não repita cores e fontes manualmente.
01 · gancho · 0:00 a 0:05split screen + wipe
Crie uma animação de motion graphics de 5 segundos, formato horizontal 16:9, usando o meu design system (cores e fontes da marca já configurados no projeto). A tela começa dividida ao meio na vertical: do lado esquerdo, uma timeline de editor de vídeo caótica, com múltiplas camadas, clipes coloridos desalinhados e ícones de ferramentas complexas, transmitindo confusão. Do lado direito, uma interface limpa e minimalista, com poucos elementos, bastante espaço em branco e a paleta da marca. Nos primeiros 2 segundos as duas metades ficam paradas lado a lado. Entre o segundo 2 e 3, uma transição tipo wipe horizontal (cortina deslizando da esquerda pra direita) cobre a tela inteira com a cor de destaque da marca. A partir do segundo 3, a wipe revela só o lado direito ocupando a tela toda, com leve zoom in suave até o final. Movimento fluido, sem cortes bruscos, easing ease-in-out.
por quêO gancho precisa mostrar o antes e o depois sem você precisar explicar. A tela dividida faz isso em 2 segundos, e a wipe entrega a virada exatamente quando a fala vira.
02 · o que é · 0:05 a 0:15morph + kinetic typography
Crie uma animação de motion graphics de 5 segundos, horizontal 16:9, usando meu design system. Começa com o logo da marca centralizado na tela, pequeno. Nos primeiros 1,5s o logo se expande suavemente (morph) até virar o contorno de uma janela de aplicativo, revelando atrás uma prévia simplificada de interface (retângulos representando painéis). A partir do segundo 2, o texto 'MOTION GRAPHICS' entra em kinetic typography: as palavras aparecem uma de cada vez com leve atraso entre elas (stagger), crescendo de tamanho com pequeno bounce ao assentar, alinhadas ao centro inferior da tela. Finaliza no segundo 5 com todos os elementos parados na composição final. Easing suave, sem movimento de câmera brusco.
por quêMorph liga duas ideias sem corte: o logo vira a ferramenta. E o texto entrando palavra por palavra dá tempo de ler sem parecer legenda.
03 · como entra a animação · 0:15 a 0:25stagger reveal + convergência
Crie uma animação de 5 segundos, horizontal 16:9, com meu design system. Três ícones simples (documento/texto, imagem, transcrição/legenda) aparecem em posições espaçadas horizontalmente na tela, cada um entrando com fade + slide up, em sequência com 0,3s de intervalo entre eles, completando por volta do segundo 2. A partir do segundo 2,5, os três ícones se movem simultaneamente em direção ao centro da tela, encolhendo de tamanho enquanto se aproximam (ease-in), até convergirem e se fundirem em um único ícone de play (triângulo) no centro, que pulsa levemente (scale bounce) ao se formar, por volta do segundo 4. Finaliza com o ícone de play parado e brilhando sutilmente até o segundo 5.
por quêTrês entradas viram uma saída. É a forma visual de dizer "texto, imagem ou transcrição, tudo vira animação" sem escrever uma frase na tela.
04 · o diferencial técnico · 0:25 a 0:35typewriter + code-to-shape
Crie uma animação de 5 segundos, horizontal 16:9, meu design system. Nos primeiros 2,5 segundos, mostre linhas de código sendo digitadas com efeito typewriter (caracteres aparecendo um a um, cursor piscando), em fonte monoespaçada, alinhadas à esquerda, simulando HTML/CSS. A partir do segundo 2,5, as linhas de código se transformam gradualmente (morph) em formas geométricas coloridas simples (círculos, retângulos, triângulos) que se organizam em uma composição visual harmônica, como se o código estivesse virando o resultado visual. A transição deve ser suave, com as letras se dissolvendo em partículas pequenas que se recompõem nas formas. Finaliza no segundo 5 com a composição de formas estática.
por quêEsse é o bloco que explica a diferença pras outras IAs de vídeo: o Claude escreve código e o código vira imagem. Mostrar isso acontecendo vale mais que qualquer explicação falada.
05 · design system · 0:35 a 0:45puzzle / brand assembly
Crie uma animação de 5 segundos, horizontal 16:9, usando meu design system já configurado (cores, fontes e logo da marca). Três a quatro elementos representando o design system (amostra de paleta de cores em quadrados, amostra de tipografia com a letra 'Aa', e o logo da marca) entram na tela como peças de quebra-cabeça vindas de direções diferentes (uma de cima, uma da esquerda, uma da direita), deslizando e encaixando dentro de um cartão retangular centralizado, cada peça com um leve efeito de snap (pequeno bounce ao encostar). A montagem finaliza por volta do segundo 4, formando um cartão de identidade visual completo, que fica parado até o segundo 5.
por quêPeças que se encaixam é a metáfora certa pra design system: partes soltas virando uma coisa só. E o snap dá a sensação de encaixe que a palavra sozinha não dá.
06 · cta e ponte · 0:45 a 0:55counter + progress bar
Crie uma animação de 5 segundos, horizontal 16:9, meu design system. Um contador numérico grande centralizado na tela, regressivo: '3' aparece no início (fade + scale), permanece cerca de 1 segundo, transiciona pro '2' com crossfade rápido, depois pro '1', cada número com o mesmo tempo de exibição. Simultaneamente, abaixo do número, uma barra de progresso horizontal fina se preenche da esquerda pra direita de forma constante ao longo dos 5 segundos, sincronizada pra chegar a 100% exatamente quando o contador chega no '1'. No instante final (segundo 4,5 a 5), o número dá lugar ao logo do canal centralizado, com fade in.
por quêContador regressivo segura a pessoa até o fim do bloco, porque ninguém sai no meio de uma contagem. A barra sincronizada reforça que tem um fim chegando.
07 · fecho · 0:55 a 1:00zoom blur transition
Crie uma animação de transição de 5 segundos, horizontal 16:9, meu design system, pensada pra servir de corte entre dois blocos de vídeo. A tela começa neutra (cor de fundo da marca). No segundo 1, um leve zoom in começa a acelerar progressivamente, acompanhado de motion blur crescente na direção do zoom, como se a câmera estivesse sendo puxada rapidamente pra dentro da tela. No pico do movimento (por volta do segundo 3), a tela fica momentaneamente na cor de destaque da marca (flash rápido de 2 a 3 frames). Em seguida, o blur e o zoom desaceleram suavemente até estabilizar de volta na composição neutra, finalizando no segundo 5 pronto pra receber o próximo corte.
por quêEsse não ilustra nada, ele separa assunto. O flash no pico é onde você corta, e o retorno à composição neutra já entrega a tela limpa pro próximo bloco.
notas de produção
Quatro coisas que poupam retrabalho
nota 01
Uma animação por vez
O Claude Design não processa um documento inteiro de prompts de uma só vez. Cole um, espere gerar, revise, e só então vá pro próximo.
nota 02
Ajuste, não reescreva
Se sair diferente do esperado, peça a mudança específica: "deixe o zoom mais lento", "troque a cor de destaque". Reescrever do zero perde tudo que já estava bom.
nota 03
Exporte em MP4
No botão de compartilhar, escolha vídeo e o formato que você precisa. Pra YouTube, 1920 por 1080. O arquivo cai na sua pasta de downloads pronto pra edição.
nota 04
Ritmo de corte
Bloco novo a cada 8 a 10 segundos de fala, com meio segundo de respiro entre a fala e a virada de cena. Mais rápido que isso cansa.
o que vigiar
Seis cuidados rápidos
!Só funciona nos planos pagos. No plano gratuito a função de animação nem aparece. Se você não vê a opção, é isso.
!O Design fica no menu de baixo dentro do Claude. A animação é a primeira escolha depois de entrar.
!Ele não anima a sua imagem de referência. Ele recria a ideia dela em código. Nunca vai sair idêntico ao print, e isso é característica, não defeito.
!Cada bloco tem um nome. Aparece embaixo do player. Chame pelo nome pra mudar só aquele pedaço em vez da animação inteira.
!Sem pedir, ele enche de texto. Se a animação virar quase uma legenda do que você fala, peça texto mínimo e mais ícone.
!Deixe espaço pra você. Se for aparecer por cima, diga qual parte da tela precisa ficar livre, senão ele ocupa tudo.
próximos passos
Você tem os prompts. Agora é fazer a primeira.
Não tente refazer o vídeo inteiro de primeira. Configure a sua identidade visual, escolha um dos sete e gere. Em meia hora você já sabe se isso serve pro seu fluxo.