motion-graphics-promo

O que motion-graphics-promo faz?

Animações de qualidade After Effects, criadas como composições HTML/GSAP e renderizadas deterministicamente com HyperFrames. Você obtém código-fonte editável, fidelidade exata à tela nativa e uma renderização reproduzível – algo que um projeto manual no After Effects não oferece a um agente.

Estudo de referência: Higgsfield AI, "AI Created Every Motion Graphic in This Video" (YouTube W3-RIZ-Ps64, 11:33, Set 2026), inspecionado em 720p com folhas de contato, mais o ritmo de um overview oficial de produto SaaS de 4 minutos. Use-os apenas para gramática e ritmo. Nunca reutilize os pixels, músicas, vozes, logotipos ou UI deles.

1. Briefing antes do movimento (trave a história primeiro)

O tutorial gasta seus primeiros minutos transformando um briefing em escolhas de assets e um storyboard antes de qualquer coisa se mover. Faça o mesmo, em cinco linhas:

1. Público e momento: quem está assistindo, em qual plataforma, som ligado ou desligado.
2. Um produto, dois trabalhos, um próximo passo: o espectador deve lembrar exatamente disso.
3. Inventário de provas: screenshots reais e gravações de tela que você realmente possui, com fonte e data de construção. Qualquer coisa que não estiver nesta lista não pode aparecer na tela.
4. Paleta e tipografia: a identidade da própria marca. Pegue emprestado o nível de contraste da referência (tipo condensado em negrito sobre campos saturados), não suas cores exatas.
5. Proporção: projete vertical (1080x1920) como sua própria composição; não corte paisagem.

2. Gramática de movimento

Batida	Regra	Por quê
Entrada (0-3 s)	Energética: um rótulo cai, gira, quica e assenta uma vez; ou um dispositivo cai com peso.	Atrai a parada da rolagem sem esconder o produto.
Transição	Uma transição principal por tarefa. Um telefone desliza ou inclina entre campos de cor, ou a navegação passa para a próxima tela real.	O movimento deve explicar o agrupamento ou a movimentação entre estados reais do produto.
Assentamento	Spring curto (GSAP back.out(1.4) ou elastic.out(1, 0.6), 0.4-0.7 s). O dispositivo assenta antes da tela precisar ser lida.	Peso físico é percebido como premium; oscilação durante a leitura é percebida como ruído.
Pausa para prova	Pelo menos 2-3 s de tela estável e legível após cada transição.	Telas precisam de mais tempo de leitura do que rótulos decorativos.
Acentos	Tipografia com máscara/revelação por clip, acentos de cor retangulares, colagem ou transições de campos de cor. Use com moderação.	Esse é o "visual After Effects"; o uso excessivo vira um template.

Padrões de tempo: 60 fps; entradas 0.5-0.9 s; escalonamento de rótulos 60-90 ms; nunca anime texto que o espectador deve ler enquanto o lê.

3. O cronograma da promo de 32 segundos

Tempo	Propósito	Regra de evidência
0-4.4 s	Problema reconhecível do usuário, uma linha concisa sobre B-roll licenciado ou um campo de cor ousado.	Nenhum depoimento ou identidade de cliente inventados.
4.4-13.3 s	Sequência de tela real para o primeiro trabalho, com continuidade de navegação.	Caminho real suportado; sem cliques falsos ou UI sintética.
13.3-22.2 s	Um segundo trabalho complementar com um resultado visível que a gravação comprova.	Selecione a partir de filmagens verificadas; não importe alegações de concorrentes.
22.2-26.7 s	Retorno ao payoff e à identidade do produto.	Formule como propósito ou convite, não como tempo não medido ou economia de receita.
26.7-32 s	CTA único com URL e disponibilidade verdadeira; lançamento musical.	Corresponda ao destino ativo e ao status de lançamento exato. Mantenha o crédito musical.

Para vídeos de estágio de consideração mais longos, siga a estrutura de overview oficial: contexto humano primeiro, depois um workflow por capítulo, retorno às pessoas entre as ferramentas, encerramento com a marca.

4. Construa (HyperFrames + GSAP)

1. Estruture uma composição HyperFrames (veja a skill hyperframes-best-practices para CLI, lint e pegadinhas de renderização). Fixe a versão do HyperFrames e uma build local do GSAP 3 no projeto; não carregue runtimes de animação de um CDN no momento da renderização.
2. Moldura do dispositivo: uma casca de grafite dimensional (luz suave no topo, destaque de chanfro de 1-2 px, sombra de contato) segurando um screenshot real ou um <video> mudo de uma gravação de tela. Anime a casca com translate3d/rotate, mantenha o conteúdo da tela na vertical e sem escala depois de assentado.
3. Tipografia cinética: divida o título em palavras; gsap.from(words, {yPercent: 110, rotate: 4, stagger: 0.07, ease: "back.out(1.6)"}) dentro de uma máscara overflow: hidden. Um título por batida.
4. Transição de campo de cor: retângulos de sangria total limpam (tween clip-path: inset()) entre as batidas; o campo que entra carrega a próxima posição do dispositivo.
5. Linha do tempo: uma gsap.timeline({paused: true}) principal com rótulos por batida ("problem", "job1", "job2", "payoff", "cta"), para que o HyperFrames possa buscar qualquer quadro deterministicamente.
6. Música: apenas faixa licenciada (ex. CC BY com crédito). Registre URL de origem, licença, linha de crédito e hash do arquivo em audio-provenance.json; edite para um final composto na batida do CTA.
7. Renderize na resolução/fps alvo; H.264 + AAC estéreo para redes sociais.

5. Kit de design para explicadores e anúncios (comprovado em produção)

Este kit foi usado em uma série de explicadores de produto e anúncios verticais de 15 segundos. A primeira versão usava fundos escuros e foi rejeitada como "muito preta". O que funcionou:

• Filmagens reais por trás de cada cena: filmagens licenciadas do contexto real do produto (ex. filmagens de partidas para um app esportivo), graduadas com um gradiente de cor da marca (linear-gradient(180deg, brand 74% → transparent → ink 50%)), mais saturate(1.3) brightness(1.12) no fundo.
• Paleta: uma cor de marca saturada mais um acento de alta energia (ex. violeta #6c4cff + limão #d7ff3c), com céu/coral como adesivos apenas e tinta #16132e para texto no acento.
• Tipografia: maiúsculas condensadas de exibição (Archivo, font-stretch 75-80%, peso 900, 74-96 px em 1080 de largura). A palavra-chave de cada título fica em uma caixa marcadora de acento rotacionada em -2°. Verifique a cobertura de glifos por idioma: Archivo não tem cirílico, então mude para Inter para ru/uk/bg.
• Molduras de dispositivos: molduras de telefone e navegador brancas/prateadas com um palco de perspectiva 3D (perspective: 1800px) mostrando screenshots reais ou gravações de tela reais. Cada tela deve mostrar conteúdo real (pessoas, logotipos e dados), não estados vazios.
• Adesivos caindo: 2-3 rótulos curtos em maiúsculas caem, giram e assentam ao lado do dispositivo (um por batida).
• Transições: uma limpeza angular com cor de acento ou um flash branco de 2 quadros entre as batidas.
• Narração (TTS ou gravada) com música com volume reduzido sob ela, então a mixagem final normalizada para -14 LUFS (ffmpeg -af loudnorm=I=-14:TP=-1.5:LRA=11).
• Captura real de dispositivo (macOS): iPhone Mirroring mais screencapture -v -V <segundos> -R<x,y,w,h> grava um app real. Ative a janela de espelhamento antes de enviar toques. O telefone deve estar bloqueado para o Mirroring conectar.
• Variantes localizadas: mantenha um template com {{placeholders}} e gere uma cópia por idioma com um pequeno script (veja references/vertical-ad-15s.template.html).
• UTM em cada link nas legendas e bios: ?utm_source=<plataforma>&utm_medium=organic&utm_campaign=<slug-do-video>.

Armadilhas de renderização (cada uma quase enviou um vídeo quebrado)

• HyperFrames pode descartar silenciosamente todas as sobreposições durante a renderização quando uma composição tem muitos clipes <video> (6+ fundos, ou fundos mais clipes de telefone). As prévias de snapshot ainda parecem boas. Pré-concatenar os fundos de filmagem em um vídeo, manter a contagem de clipes baixa e sempre inspecionar uma folha de contato do MP4 renderizado antes de agendar.
• fromTo do GSAP com autoAlpha: 1 nas variáveis from mostra elementos no momento da autoria. Use tl.set(el, {autoAlpha: 1}) e então fromTo sem ele.
• Uploads para agendadores de redes sociais às vezes retornam um corpo vazio. Tente novamente e confirme se o tamanho em bytes do arquivo hospedado corresponde antes de agendar.
• Rostos e nomes reais de pessoas na tela (jogadores, clientes) precisam de seu consentimento antes do uso pago ou público. Sinalize se estiver faltando.

6. Verifique o arquivo codificado, não a prévia

• Extraia quadros do MP4 final (ex. ffmpeg -i out.mp4 -vf fps=2 frames/%03d.png) e leia-os: toda tela está legível durante sua pausa? Alguma legenda sobrepõe as zonas seguras da plataforma? O texto aparece no meio da animação quando precisa ser lido?
• Verifique se a decodificação é completa, duração, fps, contagem de quadros, volume e pico; registre o SHA-256 do arquivo final.
• Execute verificações de layout/lint do HyperFrames e uma amostra de contraste nos quadros de legenda.
• Mantenha um manifesto vinculando cada asset de origem (telas com build/data, licença de B-roll, licença musical) ao hash final.

7. Limites

• Apenas UI real. Se um fluxo não puder ser gravado (login trava, recurso não lançado), corte-o; nunca simule.
• Vídeos de referência baixados, folhas de contato e transcrições são materiais de análise privados; nunca os envie junto com o criativo.
• Sem alegações de popularidade, ROI ou economia de tempo, a menos que medidas e com fonte.
• Aprovação criativa não é publicação: agendamento e postagem são etapas separadas e confirmadas.