make-video

O que make-video faz?

Crie um filme narrado a partir de um prompt. Cada quadro é uma função pura do tempo t, desenhada em um canvas (@napi-rs/canvas) e codificada com ffmpeg. A voz é gerada localmente com Kokoro. A música é sintetizada em Python. Cada imagem é temporizada à palavra na voz que a nomeia.

O fluxo é fixo: prompt → storyboard (voz real, música real, um quadro real por cena) → o usuário itera sobre o storyboard → renderização completa. Não renderize o filme completo antes de o usuário aprovar o storyboard. Amostre quadros reais a cada etapa e corrija o que você vê antes de mostrá-lo.

<skill> abaixo significa a pasta que contém este SKILL.md.

Requisitos

node 20+, ffmpeg, uv (executa os scripts Python e instala suas dependências), e python3. ./make.sh setup verifica a presença deles. O modelo Kokoro (~115 MB) é baixado uma vez, na primeira execução de voz, para ~/.cache/make-video/models. As fontes não são fornecidas: veja references/fonts.md.

1. Entenda o filme (a partir do prompt)

Leia sobre o que é o filme antes de escrever uma linha: o PR, o repositório, os documentos, o aplicativo, o anúncio. Encontre as coisas reais que o filme pode mostrar: telas reais, código real, saída real. Decida estas, e pergunte ao usuário apenas sobre o que você não consegue descobrir sozinho:

• Tipo e duração. Introdução ou anúncio de funcionalidade: 30–75 s, 6–10 cenas, telas reais do aplicativo. Explicativo: 2–6 min, capítulos com cartões de título, diagramas e código. Regra prática: 2,5 palavras de voz por segundo.
• Público e a única coisa que eles devem saber ou fazer no final.
• Estilo visual. A paleta ink (preto quase puro, acento vermelho) ou navy (azul escuro, céu e âmbar) em theme.mjs, ou as próprias cores e fontes do produto.
• Estilo musical. pop (alegre, animado) ou chip (chiptune suave), ou none.

2. Crie o projeto

<skill>/scripts/new-project.sh ~/Developer/<topic>-video <topic>-video

Isso copia <skill>/template (um filme de amostra funcional de 30 s) e executa npm install. Obtenha as fontes (references/fonts.md). O projeto é autocontido. Edite estes arquivos:

Arquivo	O que é
video.json	O roteiro: cenas, falas, dicas, temporização, música, o resumo para o storyboard
scenes/*.mjs	Uma função de desenho por id de cena
theme.mjs	Paleta, fontes, fundo
music.py	A partitura (acordes, hooks, instrumentos), quando os padrões não se adequam
shots/plan.mjs	Capturas de tela reais do aplicativo a serem feitas, quando o filme mostra um aplicativo

Não edite timeline.json. timeline.py o gera.

3. Escreva o roteiro (video.json)

Leia references/script.md primeiro. Em resumo: uma ideia por cena, frases curtas e simples, comece com um hook e termine com o que fazer em seguida. Uma linha é uma string, ou {"text", "say"} quando a legenda e a forma falada diferem ("video.json" é dito "video dot jason"). Uma dica nomeia a palavra em que uma imagem aparece: {"label": "badge", "at": "badge", "sound": "chime"}. Coloque uma dica em cada chegada importante. Preencha brief (lede, abordagem, perguntas em aberto); o storyboard o mostra.

4. Desenhe as cenas (scenes/*.mjs)

Leia references/drawing.md (a API de cena, helpers, regras de layout e movimento). Cada cena recebe (ctx, t, S). Coloque cada chegada em S.cue(label) ou S.w('word'), e faça cada elemento sair por S.tout. Use material real:

• Telas de aplicativo: capture a UI real com shots/capture.mjs e mostre-a com screens.mjs (câmera, cursor, anéis). Veja references/screens.md.
• Código: code.mjs lê o arquivo real por número de linha, para que uma citação não possa estar errada.
• Saída do programa: execute o programa real e desenhe sua saída real. Não desenhe saída que você não tenha visto.

Amostre enquanto desenha. Após cada cena, execute ./make.sh scene <id> e veja out/sheet.jpg antes de ir para a próxima cena. Para cada movimento ou transição complicada, execute ./make.sh clip A B e assista out/clip.mp4. references/review.md tem a lista de verificação.

5. O storyboard: o usuário itera aqui

./make.sh storyboard

Isso executa voz → timeline → música → mix de áudio → um quadro por cena → storyboard.html: uma página autocontida com o mix real de voz e música, um quadro de cada cena, o roteiro com cada palavra de dica marcada, os timecodes e o resumo. Tocar destaca a cena e linha atuais.

Antes de mostrá-lo, veja cada quadro em out/board/ e corrija o que estiver errado. Em seguida, entregue ao usuário a página. Se seu ambiente puder publicar uma página HTML ou um artefato, publique storyboard.html e compartilhe o link. Caso contrário, forneça o caminho do arquivo para abrir no navegador.

Em seguida, itere com o usuário. Cada mudança é pequena e rápida: edite uma linha em video.json (apenas as linhas alteradas são ditas novamente), mova uma dica, mude a energia de uma cena, reestilize, redesenhe uma cena. Então execute ./make.sh storyboard novamente. Mantenha as perguntas em aberto do resumo atualizadas. Permaneça neste ciclo até que o usuário aprove o storyboard.

6. A renderização completa

Somente após o usuário aprovar:

./make.sh film            # ou: ./make.sh film --blur 4   (borrão de movimento, ~4x mais lento)

Isso escreve out/<name>.mp4 (1920×1080, 60 fps, AAC, loudness −16 LUFS), out/<name>.srt, e out/<name>.vtt. Em seguida, verifique a saída real, não o código (veja references/review.md, "Verificação final"): extraia quadros do MP4 codificado, confirme a duração e os streams, e ouça o mix nos pontos que mudaram. Execute python3 storyboard.py --final para fazer a página do storyboard conter o filme finalizado. Entregue o MP4, as legendas e o storyboard. Se o filme for um anúncio, ofereça um post curto para acompanhá-lo, escrito a partir do mesmo roteiro.

Comandos

Comando	Faz
./make.sh storyboard	Voz, timeline, música, mix, quadros do board, storyboard.html
./make.sh scene ID [0.3,0.6,0.9]	Still em frações de uma cena, mais out/sheet.jpg
./make.sh samples [24]	Still espalhados por todo o filme, mais out/sheet.jpg
./make.sh stills 3,20.5	Still em segundos exatos, mais out/sheet.jpg
./make.sh clip A B	out/clip.mp4: segundos A a B do filme real, com som
./make.sh voice / music / timeline	Apenas uma etapa
./make.sh film [--blur N]	A renderização e mix completos
uv run tts.py --voices	Lista as vozes do Kokoro

Referências

• references/script.md: como escrever a narração, e todo o video.json
• references/drawing.md: a API de cena, os helpers lib.mjs, layout, movimento, padrões de cena
• references/screens.md: captura de telas reais de aplicativos e movimento de câmera sobre elas
• references/audio.md: vozes, estilos musicais, sons de dica, o mix, áudio extra
• references/review.md: como amostrar, a lista de verificação de polimento, a verificação final
• references/fonts.md: onde obter fontes