Vídeo do seu produto, feito com código

Instale a skill

Clona o repositório, liga a skill no Claude Code e no Codex e instala o navegador do render.

git clone https://github.com/inematds/video-codigo ~/projetos/video-codigo
bash ~/projetos/video-codigo/instalar.sh  # ✓ skill em ~/.claude/skills/video-codigo

Teste a instalação renderizando o exemplo pronto (não precisa de voz nem de GPU; leva cerca de 1 minuto):

cd ~/projetos/video-codigo/exemplos/lancamento && node ../../scripts/render-video.mjs --project . --output teste.mp4 --audio audio/lancamento/mezcla.wav --overwrite

Peça o vídeo

Diga o assunto e, se tiver, onde está o material. O agente faz as três perguntas que faltarem. Para narrar com a sua voz, diga onde está a gravação .wav.

/video-codigo faz um vídeo de 40 s do meu app, lê a pasta ~/projetos/meu-app, narrado com a voz de ~/minha-voz.wav, estilo INEMA

Sem voz? O relógio é a música

Sem narração você não precisa de roteiro nem de GPU. O mais simples é pedir ao agente ("só com música, 20 s") — ele escreve as cenas. Para partir do exemplo de lançamento à mão, saiba o que mudar no <script> do index.html:

• window.videoSpec = {… duration: 21} — a duração do vídeo em segundos; use a mesma da música.
• SEG — a lista das etapas: a e b são os segundos em que cada etapa entra e sai, rot e sub são o título e a linha de baixo.
• S — onde fica e que tamanho tem a forma amarela em cada segundo (t), que é o que liga uma etapa à outra.
• function conteudo — o desenho dentro da forma em cada etapa (módulos, página, play, terminal, conversa). Troque pelos do seu produto.

cp -r $K/exemplos/lancamento/{index.html,motion.mjs,inema} $P/
python3 $K/scripts/mezcla.py --projeto $P --id meuapp --duracao 21 --musica energica --lufs -14  # mesma duração do videoSpec

Depois vá ao passo 7 (prova) e ao 8 (render, com --audio $P/audio/meuapp/mezcla.wav).

Roteiro com uma frase por instante

Arquivo $P/roteiro.json. Cada frase tem um id: é nele que a imagem se prende. Em voz, o caminho da sua gravação. O dicionario troca o que aparece na tela pelo que a voz deve ler.

{"id": "meuapp", "pausa": 0.28, "voz": "/home/voce/minha-voz.wav",
 "dicionario": [["16:9", "dezesseis por nove"]],
 "blocos": [{"id": "abertura", "frases": [
   {"id": "hook", "texto": "Este vídeo não tem câmera."},
   {"id": "codigo", "texto": "Cada quadro foi escrito em código."}]}]}

Gere a voz com o tempo de cada palavra

Roda no seu computador. Sai $P/voz/meuapp/voz.wav e $P/voz/meuapp/tiempos.js (o tempo de cada palavra); frase abaixo de 80% de semelhança é refeita sozinha. Cada frase é ouvida pelo Whisper: se não bate com o texto (ou um número sai trocado), é gerada de novo, até --tentativas vezes. O relatório fica em $P/voz/meuapp/checagem.md, com o que o Whisper ouviu — leia as frases marcadas com ⚠.

python3 $K/scripts/voz.py --projeto $P $P/roteiro.json  # ex.: meuapp: 41.9 s · 12 frases · 107 palavras

Música por baixo

Música original sintetizada (energica, 120 batidas por minuto; tranquila, 84; ou --pista com a sua música), 24 dB abaixo da voz enquanto se fala. --lufs -14 deixa o volume final no nível que YouTube e Instagram usam (assim a plataforma não abaixa nem estoura o som). Sem voz, passe --duracao em segundos. A música se prende aos cortes das cenas: cada troca de cena cai num tempo forte, na troca de acorde, sem pulo de volume. No fim o script confere isso, a voz na frente e a ausência de whoosh, e grava trilha.json.

python3 $K/scripts/mezcla.py --projeto $P --id meuapp --musica tranquila --lufs -14  # → $P/audio/meuapp/mezcla.wav

Cenas presas à fala

Parta do exemplo narrado: ele já traz o tema, o motor de tempo e o esqueleto que o render usa (videoSpec = tamanho e duração, seek(t) = desenha o instante t, renderReady = avisa quando fontes e imagens carregaram). Troque o texto das cenas e, em todo pal('frase', 'palavra'), ini('frase') e data-in, os id e palavras pelos do seu roteiro. Se sobrar algum do exemplo, o render para e diz qual: Não encontrei «câmera» na frase hook do roteiro.

cp -r $K/exemplos/explicativo-narrado/{index.html,engine.mjs,motion.mjs,declarativo.mjs,inema} $P/
cp $P/voz/meuapp/tiempos.js $P/   # os tempos da sua voz

// no <script> do index.html: cada elemento entra na palavra dita
pop($('.code', c1), t, pal('codigo', 'escrito'));   // entra quando a voz diz "escrito"
pop($('.onda', c1), t, ini('voz'));                 // entra no começo da frase "voz"

Prova antes do render inteiro

Tire quadros soltos nos momentos difíceis, nos dois formatos, e olhe antes de gastar tempo com o vídeo todo. --still é o segundo do vídeo (tem que estar dentro da duração; num roteiro de 5 s, use 2 ou 3).

node $K/scripts/render-video.mjs --project $P --output $P/prova.png --still 2
node $K/scripts/render-video.mjs --project $P --output $P/prova-v.png --still 2 --width 1080 --height 1920

Confira também se todo texto fica o tempo de ser lido (1 s + 0,3 s por palavra, mínimo 1,5 s) e grave os cortes das cenas; depois rode a música de novo para ela se prender a eles.

node $K/scripts/checar-leitura.mjs --project $P --salvar-cortes $P/audio/meuapp/cortes.json  # sai 0 = tudo legível; 1 = algum texto some cedo
python3 $K/scripts/mezcla.py --projeto $P --id meuapp --musica tranquila --lufs -14  # a música agora cai nos cortes

Render e revisão

Um MP4 por formato e uma folha de quadros para conferir o vídeo inteiro de uma vez.

node $K/scripts/render-video.mjs --project $P --output $P/renders/meuapp-16x9.mp4 --audio $P/audio/meuapp/mezcla.wav
node $K/scripts/render-video.mjs --project $P --output $P/renders/meuapp-9x16.mp4 --width 1080 --height 1920 --audio $P/audio/meuapp/mezcla.wav
python3 $K/scripts/inspect-video.py $P/renders/meuapp-9x16.mp4 --output-dir $P/reviews

Modo b-roll: vídeo de pessoa falando

Para aula, depoimento ou avatar: a gravação não é cortada. A partir da transcrição com o tempo de cada palavra, o kit decide frase a frase o que a tela mostra — a pessoa inteira, a pessoa num círculo com o conceito desenhado em traço, ou um gráfico em tela cheia — e monta o projeto pronto para renderizar. Revise $P/plano.md e edite $P/plano.json antes do render.

# transcrição local com o tempo de cada palavra
cd ~/projetos/inemavox && venv/bin/python transcrever_v1.py --in aula.mp4 --outdir $P/transcricao --src pt --words
# plano + molde + quadros + áudio; --rosto = onde está o rosto
python3 $K/scripts/broll-plano.py --fala aula.mp4 --transcricao $P/transcricao/transcript.json --projeto $P --rosto 0.58,0.45,0.38
# depois de editar o plano.json
python3 $K/scripts/broll-plano.py --projeto $P --replanejar
node $K/scripts/checar-leitura.mjs --project $P
node $K/scripts/render-video.mjs --project $P --output $P/renders/aula-broll.mp4 --audio $P/audio/fala.wav