P(doom) Video em 2026: Como um Clipe Musical Nasce do Código

Olá HaWkers, o projeto aberto pdoom-video transforma uma música em um clipe cujas imagens são calculadas a partir do tempo da faixa. Segundo o próprio repositório, a prévia roda no navegador e a exportação usa a mesma lógica para produzir vídeo em 1080p a 60 quadros por segundo, com opção de renderização em 4K. É um exemplo concreto de arte generativa em que o código serve à direção visual, à letra e ao ritmo.

O que você pode aprender com um projeto assim sem copiar sua estética nem sua música? Neste artigo, vamos separar as decisões criativas das técnicas, reproduzir uma versão pequena do princípio central e entender os limites de desempenho e de direitos autorais. O resultado é um método para pensar seu próprio clipe, visualizador musical ou peça interativa.

O que torna esse clipe diferente de um vídeo montado à mão?

Em um editor tradicional, você posiciona elementos em uma linha do tempo e salva o resultado. Aqui, cada quadro é calculado a partir de uma pergunta: o que deve aparecer no instante t da música? A documentação do motor do projeto descreve a cena como uma função determinística do tempo. Ao pedir novamente o mesmo instante, o renderizador deve produzir a mesma composição. Isso permite inspecionar um quadro isolado, voltar para uma palavra específica e exportar sem depender do caminho percorrido pela reprodução.

O projeto usa TypeScript, three.js e uma aplicação web para a prévia. O arquivo da música, os tempos das palavras e as análises de áudio entram como dados; as cenas ficam em módulos separados. Na exportação, um navegador sem interface produz os quadros e o ffmpeg compõe o arquivo final. Essa divisão importa porque o criador consegue revisar composição, movimento e sincronização em etapas. O clipe não aparece pronto de um único comando: a direção visual e as correções continuam sendo trabalho editorial.

Também há uma distinção importante entre vídeo gerado por código e vídeo gerado por um modelo de imagem. O README atribui a construção do projeto a uma colaboração com Claude Code, mas os quadros finais são desenhados pelo renderizador escrito para a obra. A IA participou do processo de criação do software; ela não substitui automaticamente as decisões de enquadramento, ritmo e revisão. O resultado pode ser refeito, examinado e alterado no nível de cada cena.

Música, palavras e tempo são os verdadeiros dados de entrada

A sincronização não começa escolhendo uma transição vistosa. Começa definindo quais eventos da música controlam a imagem. O repositório guarda tempos de letras por palavra, além de batidas, seções, ataques de instrumentos e medidas de intensidade. Sua documentação cita separação de fontes sonoras, alinhamento forçado da letra e conferência com reconhecimento de fala durante a preparação desses dados. Para executar o renderizador com os dados já versionados, não é preciso repetir essa análise.

Essa separação evita um erro comum: codificar a aparição de uma frase em um segundo escolhido apenas pelo ouvido e descobrir, após uma edição, que ela já não coincide com a voz. Quando uma cena se ancora na palavra e outra na batida, a intenção fica explícita. Você pode mover uma cena e ainda verificar qual verso ou evento musical a justifica. O mesmo vale para tipografia de karaokê: cada palavra precisa de início e fim próprios para que o destaque acompanhe a performance, não só a linha inteira.

O autor informa no README que o tempo musical analisado é de aproximadamente 132 batidas por minuto. Esse número pertence à faixa usada pelo projeto; ele não é uma regra para outros clipes. Antes de reutilizar a ideia, obtenha os dados da sua trilha e valide visualmente os pontos de corte. Uma marcação de batida tecnicamente correta pode cair em um lugar ruim para o sentido da letra. Escute, assista, ajuste e compare novamente.

Como experimentar a prévia sem renderizar o vídeo inteiro

O caminho mais curto é abrir a aplicação do próprio projeto. O README lista Bun para instalar dependências e Vite para iniciar a prévia; Chrome e ffmpeg entram no fluxo de exportação. Para quem quer estudar a direção visual, a prévia é suficiente: você pode pausar, andar quadro a quadro e alternar cenas antes de gastar tempo com a codificação final.

# Clone o código aberto e entre na aplicação do clipe.
git clone https://github.com/mexicat/pdoom-video.git
cd pdoom-video/app
bun install
bunx vite

A prévia abre em http://localhost:5173; o parâmetro ?t=23 inicia em um instante específico, conforme a documentação. Barra de espaço pausa, as setas avançam ou retrocedem, e vírgula e ponto permitem examinar quadros. Os atalhos ajudam a responder uma pergunta criativa precisa: o quadro comunica a ideia quando a música chega àquela palavra?

Para uma revisão confiável, escolha três momentos: o começo de uma frase, o ponto de maior energia e a passagem para a próxima cena. Compare tamanho da letra, contraste e legibilidade em cada um. Uma composição pode parecer excelente parada e ficar ilegível quando o movimento entra. A prévia rápida serve para eliminar esse problema antes do render pesado.

Um experimento pequeno com quadros determinísticos

Você não precisa reproduzir a arquitetura inteira do pdoom-video para testar o conceito. Um canvas e uma função que recebe tempo já permitem desenhar um elemento que responde à música. O exemplo abaixo cria uma barra pulsante e mostra uma palavra somente no intervalo escolhido. Os números de tempo são valores de demonstração, não representam a letra nem os tempos do projeto original.

<canvas id="palco" width="960" height="540"></canvas>
<script>
  const canvas = document.querySelector('#palco');
  const ctx = canvas.getContext('2d');

  function quadro(tempo) {
    // A mesma entrada de tempo produz sempre a mesma imagem.
    const pulso = (Math.sin(tempo * 6) + 1) / 2;
    const mostrarPalavra = tempo >= 2 && tempo < 3.2;
    ctx.fillStyle = '#101820';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#f3b54a';
    ctx.fillRect(100, 390, 760 * pulso, 18);
    if (mostrarPalavra) {
      ctx.font = 'bold 72px sans-serif';
      ctx.fillText('CRIE', 100, 270);
    }
  }

  quadro(2.5); // Troque o tempo para inspecionar outro quadro.
</script>

O exemplo é propositalmente simples. Em uma obra real, a largura da barra pode vir da intensidade medida da faixa, e o intervalo da palavra pode ser lido de um arquivo de alinhamento. O princípio, porém, permanece: quadro(t) depende de t e de dados conhecidos, não de quantas vezes a animação já rodou. Isso torna possível voltar a uma cena para revisar um detalhe sem esperar toda a sequência anterior.

Se quiser introduzir partículas ou textura aleatória, use uma semente estável derivada do tempo ou da identidade do elemento. Math.random() em cada render pode dar um resultado diferente ao pedir o mesmo quadro. O guia do projeto recomenda explicitamente aleatoriedade com semente para cenas determinísticas. Essa decisão fica ainda mais importante quando a exportação calcula várias amostras de um mesmo quadro para simular desfoque de movimento.

Da prévia à exportação: por que o custo sobe tanto?

A exportação não equivale a gravar a tela do navegador. O script do repositório pede ao navegador quadros em instantes definidos e passa a sequência para o ffmpeg. No padrão descrito pelo README, o vídeo final sai em 1920 × 1080 pixels, 60 quadros por segundo, com vídeo x264 e áudio AAC. Há um modo de 4K que renderiza as camadas na resolução maior; não é apenas ampliar uma imagem pronta.

# Gere uma versão curta para avaliar movimento e cortes.
cd pdoom-video/app
bun scripts/render.ts video --from 20 --to 25 --out ../out/teste.mp4 --preset veryfast

# Depois da revisão, exporte o clipe completo.
bun scripts/render.ts video --samples auto --shutter 0.2 --out ../out/clipe.mp4

O primeiro comando segue o exemplo de teste curto do guia do motor. O segundo usa o fluxo completo documentado no README. Antes de executá-los, confirme que Chrome e ffmpeg estão disponíveis e que o diretório de saída existe. Um teste curto revela travamentos, cortes abruptos e problemas de tipografia mais cedo que uma renderização completa. Também facilita comparar duas versões de uma cena sem transformar cada ajuste em uma longa espera.

O recurso que mais altera o custo é o desfoque de movimento por amostragem. Em vez de calcular uma imagem única para cada quadro, o renderizador combina imagens de instantes próximos. O README explica que a seleção automática usa mais amostras em movimentos rápidos. Isso melhora a continuidade de um zoom ou deslocamento brusco, mas multiplica o trabalho da GPU. O autor descreve até 324 subquadros em trechos rápidos; é um limite do fluxo documentado, não uma promessa de desempenho para todo computador.

Existe ainda um custo de codificação. Granulação de filme e detalhes finos são difíceis de comprimir, especialmente em 4K. Se o objetivo é publicar na web, compare qualidade visual, tamanho do arquivo e tempo de exportação. Uma versão de revisão pode usar poucas amostras; a versão final só precisa pagar por mais qualidade onde a diferença aparece. Testar um trecho exigente antes do clipe inteiro é uma decisão prática, não um compromisso artístico.

IA ajuda a escrever cenas, mas a direção ainda precisa de alguém

O README afirma que conceito, tratamento, análise de áudio, renderizador e cenas foram desenvolvidos em conversa com Claude. Isso torna o projeto interessante também para quem acompanha ferramentas de IA. A contribuição verificável, porém, é o processo aberto: há documentação da linguagem visual, módulos de cena, dados de sincronização e comandos de prévia. Podemos estudar como decisões foram transformadas em artefatos editáveis.

Um fluxo útil para projetos próprios é escrever primeiro uma breve intenção para cada trecho: qual emoção ele deve passar, que palavra recebe destaque e o que deve mudar no ritmo visual. Depois transforme essa intenção em uma cena pequena e peça uma imagem estática do ponto principal. Só avance para animação e exportação quando a composição estiver legível. Uma ferramenta de IA pode sugerir alternativas de código ou tratamento, mas a revisão precisa comparar o resultado com a intenção. O critério não é quantas linhas foram geradas; é se a cena funciona com a música.

Essa prática conversa com nosso artigo sobre animações generativas como encontro entre arte e programação. A linguagem e a ferramenta podem mudar, mas a pergunta criativa é parecida: quais regras produzem uma imagem expressiva e como você sabe que ela merece ficar? No pdoom-video, a resposta depende também do tempo musical e da leitura de cada verso.

Código aberto não libera automaticamente a música

Há uma armadilha fácil ao encontrar um projeto visual em um repositório público: supor que tudo dentro dele pode ser reutilizado do mesmo jeito. O README informa que o código é distribuído sob licença MIT, enquanto fontes mantêm suas próprias licenças e a música e as letras pertencem aos respectivos autores. Isso importa tanto para publicar uma versão modificada quanto para usar trechos em uma demonstração comercial ou em redes sociais.

Se você quer aprender com o projeto, estude a arquitetura e produza cenas com recursos próprios. Se quer reaproveitar áudio, letra, tipografia ou renderizações, verifique a licença específica de cada material e obtenha as permissões necessárias. A autoria de um renderizador e a autoria de uma obra musical são questões diferentes. Mencionar a fonte é uma boa prática editorial, mas crédito sozinho não substitui autorização quando ela é exigida.

Também vale distinguir inspirar-se no método de copiar a identidade visual. A documentação do projeto descreve escolhas de cor, composição e transições pensadas para aquela canção. Para um clipe seu, comece pelos significados e ritmos da sua faixa. Se a primeira decisão for replicar o efeito mais chamativo do exemplo, o resultado corre o risco de parecer uma demonstração técnica sem relação com a música.

O que levar para o próximo projeto criativo

O pdoom-video mostra que um clipe gerado por código pode ser ao mesmo tempo uma obra visual e um sistema reproduzível. A lição central não é uma biblioteca específica: é dar a cada cena uma intenção, vincular eventos visuais a dados de áudio verificáveis e manter a prévia próxima da exportação. Isso permite corrigir uma palavra atrasada, revisar um enquadramento e comparar versões sem perder a obra em uma sequência opaca de passos manuais.

Comece pequeno: escolha um trecho curto de música que você possa usar, marque uma palavra e uma batida, desenhe um quadro determinístico e exporte apenas alguns segundos. Depois observe o vídeo com som e pergunte se o movimento acompanha o sentido da faixa. A próxima evolução pode ser tipografia, profundidade, desfoque ou uma nova cena. O ganho real aparece quando cada recurso resolve um problema expressivo identificável.

Projetos como esse também deixam uma pergunta para o futuro da criação digital: se escrever cenas fica mais rápido com assistência de IA, onde concentramos nossa atenção? Provavelmente na escolha do que mostrar, na avaliação do resultado e na responsabilidade pelo material usado. Essas partes continuam visíveis para quem assiste, mesmo quando o código permanece nos bastidores.

Bora pra cima! 🦅

📚 Quer Acompanhar o Que Vem Por Ai?

Este artigo cobriu a criação de um clipe musical com código, mas o ecossistema muda toda semana e nem tudo vira artigo aqui.

No X eu compartilho o que estou testando, os bastidores dos projetos e as novidades que aparecem antes de virarem post.

Me Segue La

👉 Seguir @jeffbruchado no X

💡 Conteúdo diário sobre desenvolvimento, carreira e as ferramentas que eu realmente uso