Opus 5.5 cria vídeos com código: 5 exemplos incríveis e seus prompts
Entenda a renderização quadro a quadro e a criação de áudio com Opus 5.5 em cinco exemplos: mago em pixel art, interface, história dos jogos, dança e história da AI, com prompts completos.
Opus 5.5 faz vídeos escrevendo código de animação: o código desenha as imagens, organiza cenas e som e depois é renderizado em MP4. Um mago em pixel art, interfaces animadas, a história dos videogames e a composição visual de uma dança podem seguir esse caminho.
O princípio: desenhar cada quadro e montar o vídeo
Pense em um livro de animação desenhado com código. O código define quais elementos existem em cada instante, onde ficam e como mudam. As ferramentas de renderização capturam essas imagens em sequência e as codificam para formar o vídeo.
Na abordagem web quadro a quadro, a página pode oferecer render(t) ou seek(t): você informa um instante e ela desenha o quadro correspondente. A 30fps, por exemplo, o quadro n corresponde a t = n / 30. Playwright abre a página, posiciona o tempo e captura a imagem; FFmpeg combina os quadros e a trilha de áudio em MP4. Remotion e HyperFrames oferecem seus próprios controles de tempo ou de quadros.
O mesmo instante precisa produzir a mesma imagem. Fixe a semente dos efeitos aleatórios, aguarde o carregamento das fontes antes de capturar e evite uma animação que dependa apenas de temporizadores avançando continuamente. Caso contrário, renderizar uma cena isolada novamente pode gerar outro resultado.
O som também pode ser criado com código. Em Python, numpy e scipy calculam as ondas de notas e batidas, sobrepondo-as no tempo para compor música e efeitos. Se a música já existe, identifique as batidas antes de organizar os movimentos. A narração pode vir de um modelo de voz e deve seguir a mesma linha do tempo.
Sete tipos de código para diferentes visuais
| Abordagem | Uso principal |
|---|---|
| JavaScript＋Canvas 2D | Pixels, formas bidimensionais e ilustrações |
| HTML／CSS／SVG | Interfaces, textos e animações de produtos de software |
| Shaders WebGL | Linhas de varredura, granulação, reflexos e partículas |
| Three.js | Objetos tridimensionais, espaços e movimentos de câmera |
| p5.js＋p5.brush | Lápis de cor, aquarela e traços sobre papel |
| HyperFrames／Remotion | Organização da linha do tempo, cenas e renderização completa |
| Manim | Fórmulas, geometria e demonstrações matemáticas |
As abordagens podem ser combinadas: Canvas desenha o jogo, um shader adiciona a textura de uma TV antiga e Three.js leva a uma cena 3D. Quando for importante representar um objeto real com precisão, você pode fornecer um modelo 3D existente.
1. Mago em pixel art: tela pequena e ciclo completo de ação
A animação passa por espera, levantar o cajado e carregar energia, lançar magia e voltar ao repouso. O personagem é desenhado em uma pequena tela de 128×96, ampliada por um fator inteiro. A pose muda cerca de 8–12 vezes por segundo, enquanto faíscas e projéteis se movem a cada quadro, preservando a cadência do pixel art.
O prompt abaixo resume os parâmetros e as restrições de produção deste exemplo e pode ser copiado diretamente.
Crie um HTML autossuficiente com um mago em pixel art lançando uma magia, usando JavaScript nativo e Canvas 2D, sem bibliotecas, imagens ou materiais da internet.
Use uma tela lógica de 128×96, centralizada e ampliada por um fator inteiro. Desative a suavização de imagens e use coordenadas inteiras de pixels. Não use degradês, antialiasing ou sombras borradas. Limite o vídeo a cerca de 24 cores: azul-escuro e roxo no fundo, cores quentes no personagem e poucos destaques luminosos na magia.
Construa um mago de aproximadamente 24×32 com retângulos de pixels, incluindo chapéu curvo, barba, túnica de duas cores e cajado com gema. Transforme cabeça, braços, cajado e barra da túnica em parâmetros controláveis de pose. Execute a 60fps, quantizando as poses em 8–12 mudanças por segundo e mantendo as partículas em movimento contínuo.
A sequência deve ser: balanço em repouso, levantar o cajado e carregar energia, faíscas convergindo para a gema, emissão de um anel e de projéteis e retorno à posição inicial. Adicione tremor de 1–2 pixels ao lançar a magia. Pré-aloque e reutilize as partículas, sem criar novos objetos dentro do loop.
Mantenha lua, poucas estrelas e chão de pedra no fundo. A luz da gema deve destacar o contorno do personagem. Faça o início e o final se conectarem naturalmente e preserve a nitidez dos pixels em qualquer tamanho de janela.
2. Interface em transformação: uma forma, vários componentes
Uma forma em preto e branco vira botão, carregamento, player, controle deslizante e gráfico. O mesmo elemento se transforma continuamente, com cliques e arrastes do cursor conduzindo as ações.
A interface usa HTML／CSS／SVG. Molas calculam os retornos, as batidas da música organizam as ações e quatro subquadros são misturados por quadro para criar desfoque de movimento.
Primeiro, peça que eu forneça 8–12 estados de interface, uma paleta em preto e branco ou com uma única cor de destaque e uma música disponível com cerca de 120 BPM. Liste a relação entre estados e batidas e espere minha confirmação antes de produzir.
Crie uma animação de interface HTML em 1440×1440. Use fundo cinza-claro quente, componentes pretos e brancos e a fonte Geist. Mantenha um único elemento principal durante todo o vídeo, transformando tamanho, cantos arredondados e conteúdo interno, sem trocar componentes por cortes de cena. O cursor precisa realmente clicar ou arrastar.
A 120 BPM, organize 7 compassos: botão→carregamento→marca de conclusão→Dynamic Island→player→barra de progresso→controle de volume→interruptor→abas→gráfico→paleta de comandos→notificação→botão. Associe uma ação a cada batida; o zoom da câmera acompanha o elemento principal.
Calcule todos os estados com seek(t), sem CSS transition, temporizadores ou estado acumulado do quadro anterior. Use molas analíticas. Calcule as duas pontas do indicador com molas separadas para mostrar alongamento. Durante o arraste, a posição do cursor determina o valor; o retorno acontece após soltar.
Analise as batidas da música com Python e alinhe ações e efeitos sonoros a elas. Faça 4 amostras por quadro com Playwright e misture-as no FFmpeg para o desfoque de movimento, com saída a 60fps. Confira quadros estáticos de cada batida antes de renderizar tudo.
Evite explosões de partículas, brilhos, degradês e saltos desnecessários. Controle separadamente a entrada e a saída dos textos antigos e novos para evitar sobreposição. Não aplique will-change a elementos ampliados ou com texto. O final e o início devem se conectar, incluindo posição e velocidade do cursor.
3. História dos videogames: o visual muda com as épocas
Em dois minutos, a história dos videogames reúne pixel art em Canvas, efeitos de TV antiga em WebGL e cenas 3D em Three.js, com música sintetizada em Python. Os primeiros jogos usam pixels e linhas de varredura; depois, o vídeo entra em corredores, castelos e mundos de blocos.
Crie um curta de 120 segundos sobre a história dos videogames, com variações emocionais e a grandiosidade épica de um trailer de documentário.
Formato: 1920×1080, 60fps. Desenhe todas as imagens com código, sem buscar imagens ou vídeos externos. Componha e sintetize a trilha com código, sem samples, materiais de áudio ou instrumentos virtuais. Use o ritmo musical para organizar os cortes.
Ao terminar, combine imagens e música em MP4 e salve no diretório de saída que eu indicar.
4. Dança pop: separar a pessoa dos efeitos visuais
Primeiro, um modelo de vídeo produz uma dança de 15 segundos sobre fundo verde. Depois, Opus remove o verde e adiciona letras grandes, fitas adesivas, tela dividida, mudanças de fundo e texto 3D ao redor da pessoa, fazendo a composição acompanhar a música.
O movimento da pessoa vem do vídeo; cenário e efeitos são feitos com código. Não é necessário redesenhar uma dança complexa por programação. Preserve o material da pessoa e concentre a produção em recorte, camadas e ritmo.
5. História da AI: um protagonista visual ao longo do filme
A história da AI, com três minutos, é feita em Claude Code com Remotion. SVG, Canvas e outros códigos desenham as imagens, um modelo de voz faz a narração e Python sintetiza a trilha.
Um token luminoso conecta o filme: das relações de atenção a modelos de linguagem, multimodalidade, raciocínio e chamadas de ferramentas, cada capítulo segue a mesma ideia visual. Em vídeos longos, o essencial é planejar narrativa e storyboard antes de produzir cada cena.
Com Remotion, produza uma animação de 180 segundos sobre a história da AI, em 1920×1080, a 30fps, totalizando 5400 quadros. Comece pelo mecanismo de atenção de 2017 e avance por modelos de linguagem, multimodalidade, raciocínio, agentes e as questões ainda abertas da AGI. Use a linguagem de um ensaio audiovisual cinematográfico.
Faça o token luminoso “the” percorrer todo o filme. Primeiro, escreva STORYBOARD.md com tempo, imagens, legendas e transições de cada cena. Organize as cenas separadamente e depois integre-as à composition principal.
Siga estes capítulos: 0–15 segundos, uma palavra isolada; 15–35 segundos, conexões de atenção; 35–55 segundos, expansão dos modelos de linguagem; 55–80 segundos, ajuste por instruções e ChatGPT; 80–100 segundos, multimodalidade; 100–125 segundos, raciocínio; 125–150 segundos, ferramentas e agentes; 150–170 segundos, a questão da AGI; nos 10 segundos finais, retorne ao token e ao título.
Use SVG, Canvas, CSS e gráficos procedurais, sem imagens externas ou vídeos prontos. Adote fundo escuro e destaques quentes. Controle movimentos com molas e easing; crie transições a partir das relações gráficas entre cenas vizinhas.
Mantenha os textos de tela curtos, cada trecho visível por pelo menos 2.5 segundos. Anos, nomes e títulos de artigos científicos precisam estar corretos; registre dúvidas em NOTES.md. Ao concluir cada cena, use remotion still para conferir 3–4 quadros e corrija sobreposições e layout antes de continuar.
Reserve um espaço opcional para a trilha public/music.mp3. Sem áudio disponível, uma primeira versão pode ser silenciosa. No final, use remotion render para exportar out/film.mp4 e entregue também a descrição criativa e NOTES.md.
As sete informações mais úteis em um prompt
Você pode usar role para o papel de produção, inputs para os materiais necessários, direction para estilo e efeitos proibidos, structure para cenas e ritmo, build para técnica e exportação, gotchas para erros frequentes e start para definir o que será examinado primeiro e quando confirmar.
Seja específico principalmente sobre o que não quer: letras minúsculas por toda a tela, todos os elementos aparecendo ao mesmo tempo ou títulos grandes centralizados repetidamente sobre fundos em degradê. Veja primeiro storyboard e quadros-chave e, nos trechos em que o movimento importa, alguns segundos de prévia. Só depois da confirmação renderize o vídeo completo.
Antes de entregar, extraia quadros e verifique legibilidade no celular, sobreposições, pausas nos movimentos, composição, batidas e sincronização entre imagem e som. Marque os tempos problemáticos e renderize novamente apenas as partes necessárias. Esses critérios verificáveis ajudam mais nas revisões do que repetir “deixe mais sofisticado”.
