Recurso gratuito · Opus 5.5
O prompt do Opus 5.5 que faz motion design em código.
Zero After Effects: cada quadro deste vídeo é código. Aqui está o prompt exato, um briefing completo, um prompt por etapa para gerar um MP4 de verdade, e o que costuma dar errado na primeira renderização.
O vídeo do post. Renderizado quadro a quadro a partir de uma página web, montado na música pelo modelo.
Por Raphaël Aubry, fundador da Howseen AI · Publicado em 1º de outubro de 2026, atualizado em 5 de outubro de 2026
1 · O prompt exato
A frase do post, para copiar e colar no Claude
make a dynamic 15-second motion graphics video that shows what an incredible motion designer you are, like it's your showreel for a résumé. go all out.
Com honestidade: isso é só um ponto de partida. A primeira renderização costuma ser boa, mas é o ciclo seguinte (as etapas e os ajustes logo abaixo) que transforma isso em um vídeo que você pode publicar.
2 · A versão que funciona melhor
O briefing completo
Mesma ideia, mas com as regras que evitam a maioria das renderizações ruins: um motor quadro a quadro, um mapa dos pontos fortes da música e 4 imagens de controle antes da renderização completa.
You are a senior motion designer. Build a 15-second motion graphics video in code: one HTML file, 1920x1080, 60 fps. Rules for the engine: - Every frame is a pure function of time: window.seek(t) renders frame t. No CSS transitions, no setTimeout, no Math.random (use a seeded hash). - Nothing moves linearly: springs and ease-in-out curves only. Nothing stays still for more than 1 second. - One camera: a single transform on a container, zoom interpolated smoothly. Never zoom in and out back to back. - Every scene has one idea readable in 1 second. Big type, few words. Before the full video: 1. Write a beat map: pick a tempo (e.g. 120 BPM), start every scene on a beat, put the biggest visual moment on the music drop. 2. Render 4 stills at key moments, show them to me, fix what looks weak. 3. Only then write the full seek(t) timeline. Show what a great motion designer can do: kinetic typography, morphing shapes, particles forming a word, a 3D element, a transition that carries one object into the next scene.
3 · Transformar em um MP4 de verdade
Um prompt por etapa
1.Codifique cada quadro como uma função do tempo
É isso que permite exportar quadro a quadro, sem travamentos, mesmo se o seu computador for lento.
Rewrite the animation so every frame is a pure function of time: expose window.seek(t) that renders the exact frame at time t, with no CSS transitions, timers or random values. Set window.ready = true once fonts and images are loaded.
2.Exporte para um MP4 de verdade, sem software de edição
O Playwright abre a página, captura cada quadro, e o ffmpeg os monta.
Write a Python script that serves this HTML locally, opens it with Playwright (1920x1080), calls window.seek(t) for every frame at 60 fps, saves each frame as PNG, then encodes them with ffmpeg into an H.264 MP4 (yuv420p, crf 18, +faststart).
3.Sincronize a edição com a música
Pegue uma música livre de direitos (o Mixkit oferece algumas) e deixe o modelo encontrar o tempo e o drop.
Here is the music file. Analyse it: BPM, first beat, and the time of the drop (look at the low-frequency energy, don't trust an automatic beat grid). Then retime every scene so each cut lands on a beat and the biggest visual moment lands exactly on the drop. Mux the music into the MP4, loudness-normalised to -14 LUFS.
4 · Os ajustes
Quando a primeira renderização fica mediana
show me a contact sheet of 12 frames and critique it like an art director
every scene must have one single idea, readable in 1 second
add motion blur and bounces, nothing should move linearly
5 · O que dá errado na primeira renderização
Os 5 erros clássicos, e a correção
✕Texto centralizado, degradê de fundo, tudo surge com fade
A correção: Esse é o resultado padrão. Peça uma cena de verdade para cada ideia: um objeto que se transforma, uma tipografia que se move, uma câmera que viaja.
✕Movimentos lineares, com cara de “PowerPoint”
A correção: Exija molas e curvas ease-in-out em tudo. Nada deve começar ou parar de forma brusca.
✕Palavras que se sobrepõem
A correção: O modelo mede a largura do texto antes da fonte carregar. Peça para ele aguardar document.fonts.ready antes de qualquer medição.
✕Quadros que pulam na exportação
A correção: Uma animação em tempo real não exporta de forma limpa. Tudo precisa passar por window.seek(t) (etapa 1).
✕Uma edição que não encaixa na música
A correção: Nunca confie em uma grade de tempo automática: faça o modelo encontrar o drop nos graves e então sincronizar a cena principal com ele (etapa 3).
Bônus · Todo o pipeline, open source
O skill completo no GitHub
Tudo o que eu uso para meus vídeos é de acesso livre, sob licença MIT:
- o motor imagem por imagem e os scripts de renderização (Playwright + ffmpeg)
- a análise da música para encontrar o tempo e o drop, e a inserção dos efeitos sonoros
- o loop de autocrítica: o modelo olha para as próprias imagens e corrige
- o modo "remake": recriar qualquer vídeo de lançamento para a sua marca, imagem por imagem
Referências
A documentação das ferramentas usadas
O pipeline se baseia em três tecnologias padrão da web, documentadas por seus criadores. Se uma renderização travar, é quase sempre aí que está a resposta.
- Captura imagem por imagem de uma página: Playwright, Screenshots.
- Montagem das imagens em MP4 H.264: documentação do ffmpeg.
- Esperar que as fontes carreguem antes de medir o texto (o erro clássico das palavras que se sobrepõem): MDN, FontFaceSet.ready.
Perguntas frequentes
Perguntas frequentes
Respostas curtas para as dúvidas mais básicas sobre o método. Todos os detalhes estão nas etapas acima e no repositório GitHub, de acesso livre.
Preciso de After Effects ou de um software de edição?+
Não. Cada imagem é código dentro de uma página web. O Playwright abre a página e captura cada imagem, depois o ffmpeg as monta em um MP4.
Que prompt devo dar ao Opus 5.5?+
A frase do post já é suficiente para uma primeira renderização. O brief completo (seção 2) traz resultados melhores: motor imagem por imagem, mapa dos pontos altos da música e 4 imagens de controle antes da renderização completa.
Por que cada imagem precisa ser uma função do tempo?+
Para exportar imagem por imagem sem travamentos, mesmo se o computador estiver lento: window.seek(t) desenha exatamente a imagem t, sem transições CSS, timers ou valores aleatórios.
O pipeline é gratuito?+
Sim. O skill completo está no GitHub sob licença MIT: motor de renderização, análise da música, loop de autocrítica e modo remake.
Para ir mais longe
O que a Howseen publica sobre IA e visibilidade
A Howseen mede como ChatGPT, Gemini, Perplexity e Google AI falam sobre as marcas. Essas páginas estão em inglês, e todas se baseiam em dados ou fontes verificáveis.
- GEO content benchmark: 565 posts no X, Instagram e TikTok classificados por formato.
- What is GEO?: o guia da Generative Engine Optimization.
- How AI chooses brands: por que uma IA cita uma marca e não outra.
- Who AI engines cite: 5.331 respostas de IA e suas fontes.
- Howseen MCP: consulte seus dados da Howseen a partir do Claude.
- A comunidade GEO: Slack gratuito, prompts e playbooks.
Aliás, quem fez isso?
Você está construindo uma marca ou um SaaS?
Cada vez mais clientes perguntam ao ChatGPT, Gemini ou Perplexity o que comprar, e saem de lá com as 2 ou 3 marcas citadas. A Howseen mostra se é a sua marca que eles recomendam, quem aparece no seu lugar e o que publicar para aparecer também.
Receber o relatório gratuito →Gratuito, sem cartão de crédito: 3 perguntas de compradores feitas ao ChatGPT, em cerca de 2 minutos.
