skill-motion: filmes animados com código
Um filme deste tipo é um arquivo JavaScript que desenha cada segundo em um <canvas> (seek(t)), uma
banda sonora (banda.mp3: vozes + música + efeitos) e um MP4 renderizado dos dois. Fica pronto em cerca de duas horas de
trabalho, custa alguns centavos do ElevenLabs, pode ser corrigido quadro a quadro e roda ao vivo dentro de uma
apresentação sem internet.
Dois modos. Histórias (personagens, cartoon ou suave, para emocionar) e comercial (produto real, ritmo, promessa, para que
queiram comprar). Antes de mais nada, decida qual: se disserem "marketeiro", "comercial", "pro", "demo" ou "para mostrar ao
cliente", leia references/promo.md e use assets/motor-promo.js.
| Pedido | Motor | Leia |
|---|---|---|
| Aniversário, família, convite, história com personagens | motor-base.js (cartoon) ou motor-suave.js | guion.md, chispa.md |
| Comercial, demo de web ou app, vídeo para um comprador, Reels | motor-promo.js + filmar_web.py | promo.md |
| Marca ou lançamento com look técnico, câmera de documentário | motor-tech.js | motor-visual.md seção 9 |
| Mapas que se inclinam, câmera que voa sem web real | motor-3d.js | chispa.md |
| Explicar números ou mecanismos: cotas, etiquetas, leituras, planta técnica | motor-acotaciones.js (junto a qualquer motor) | motor-visual.md seção 12 |
| Tomada de câmera que orbita ou percorre uma cena 3D | Orbita3D ao final de motor-3d.js | motor-visual.md seção 13 |
O que a faz funcionar não é a técnica, mas três hábitos: tudo que diz é verdade, escuta-se com Deepgram em vez de supor e olha-se com folhas de quadros antes de renderizar. Claude não vê o vídeo nem o ouve enquanto roda; esses dois controles são seus olhos e ouvidos.
O que precisa
Node 18 ou superior, Python 3, ffmpeg e Chrome. Para voz e música, uma conta ElevenLabs (ELEVENLABS_API_KEY). Para "ouvir"
o resultado, uma conta Deepgram (DEEPGRAM_API_KEY, opcional). Veja INSTALAR.md.
Onde está cada coisa
| Preciso de | Arquivo |
|---|---|
| A chispa: lista de controle para sair "uau" e não apenas "bom" (leia antes do roteiro) | references/chispa.md |
| Conceito, estilos testados, frases, elenco de vozes, folha de tempos | references/guion.md |
| Vozes, música, efeitos, mixagem, ouvir com Deepgram | references/sonido.md |
| O motor de desenho, personagens e poses, estilo cartoon, regras de composição | references/motor-visual.md |
| Render, versão leve, apresentação, publicar, git | references/entrega.md |
| Ponto de partida do .js: estilo cartoon ou estilo suave | assets/motor-base.js (cartoon), assets/motor-suave.js (suave, com personagens que envelhecem) |
| Página para ver e folha de quadros | assets/pelicula.html, assets/hoja.html |
| Filme dentro de uma apresentação (lâmina + controlador) e construtor | assets/pelicula-en-presentacion.html, assets/construir.py |
| Scripts | scripts/ (chaves, vozes, música, narração, efeitos, mixagem, Deepgram, render, leve) |
| Efeitos sonoros CC0 incluídos | sfx/ (créditos em sfx/LICENSES.md) |
| 3D falso em canvas (mapas que se inclinam, câmera que voa, chão de neon) | assets/motor-3d.js |
| Estilo "tech e pro" para marcas e lançamentos: câmera de documentário (HUD), moldura de foco, alertas, escaneamento, cartões de interface, painel, chão de grade | assets/motor-tech.js e references/motor-visual.md seção 9 |
| Comercial pro, demo de produto, formatos 16:9, 9:16 e 1:1 | references/promo.md, assets/motor-promo.js |
| Filmar uma web real quadro a quadro com GPU | assets/filmar_web.py |
| Brief do cliente e storyboard fixo com intervalos de quadros (antes de desenhar um comercial) | assets/brief-cliente.md, assets/storyboard-plantilla.md, references/promo.md |
Cursor em arco com clique, teclado, entradas com bounce, offset, deriva e empurrão de câmera. Toda viagem do ponteiro em um comercial vai em arco com pausa antes do clique (cursorPro); movimento reto é proibido | motor-promo.js (cursorPro, cursor, tecleo, entra, escalonar, deriva, empuje), references/motor-visual.md seção 11 |
| Zonas seguras, interface em vetor, lista "Revisar antes de renderizar" e banco de polimentos | references/promo.md |
Números do roteiro em um bloco DATOS para revisões de uma linha; render sem áudio | references/entrega.md seção 11 |
Anotações do roteiro ([VISUAL], pausas), cada número na tela com sua palavra | references/guion.md seção 8 |
| Vocabulário de tomadas com proporções e o congelamento do tempo | references/chispa.md |
| Medir BPM e reordenar a música por compassos | scripts/pulso.py, scripts/cortar_musica.py, references/sonido.md seção 13 |
| Trecho de teste, montagem por partes e áudio novo sem re-renderizar | references/entrega.md seção 8 |
| Corrigir um filme já entregue porque o produto mudou | references/entrega.md seção 10 |
| Saudação com a voz da pessoa e convite com flyer | references/sonido.md seção 9, references/entrega.md seção 7 |
O processo
Siga os passos em ordem; cada um tem seu controle antes de passar ao próximo.
0. Vale a pena um vídeo agora? Se o filme for dizer números de um negócio (lucro, preço, clientes, prazos), antes
de escrever o roteiro deve existir uma fonte declarada oficial desses números. Se houver dois modelos que dão números
diferentes, ou o número está sendo discutido, não se faz o vídeo: diz-se à pessoa e propõe-se mostrar a planilha
aberta e conversar. Um vídeo custa duas horas e deixa fixo um número na cabeça de quem o vê. Detalhes em
references/guion.md seção 9.
1. Conceito (com a pessoa). Decida o modo (acima). Primeiro references/chispa.md: formato com regras que se
quebram, um giro, as pessoas pelo nome, um personagem que volta e um momento "uau". Para quem, o que deve sentir,
quanto dura, onde será exibido. Proponha três conceitos, cada um em duas ou três frases e com uma prévia em texto, e
o tom (os estilos testados estão em references/guion.md). Se a pessoa deu uma ideia, siga-a à risca: cada
elemento do seu pedido é uma cena.
2. Verificar o que será afirmado. Cada coisa que o filme diz sobre o produto busca-se em seu código. O que não
está, não se diz; o que está mas desligado, diz-se e avisa-se à pessoa. Vale igual para um negócio ou um projeto
que ainda não existe: cada número é anotado em GUION.md com sua fonte e como fato, suposição ou proposta, e as
palavras que comprometem ("garantia", "já existe", "em segundos", "cumpre a lei", um preço) só vão se estiverem
decididas e escritas em algum lugar (references/guion.md seção 9).
3. Roteiro. GUION.md na pasta do filme: pedido textual da pessoa, vozes, música, uma tabela com
segundo, quem fala, a frase e o que se vê. Frases curtas, uma por faixa, português neutro, sem travessão longo.
4. Vozes. source scripts/llaves.sh e scripts/voces.py frases.json. Ouça-as com Deepgram; refaça as que
saíram ruins com --solo. Se a narração for uma nota de voz da pessoa, não há frases: references/sonido.md
seções 9 e 10.
5. Tempos. scripts/armar_narracion.py <inicios> --total <s>: deixe ar entre frases e lacunas onde a imagem
conta sozinha. Com Deepgram extraia palabras.json (segundo de cada palavra) para sincronizar.
6. Música. Plano por seções que seguem as cenas (scripts/musica.py); meça pulso e volume com
scripts/pulso.py. Se as seções caíram em outro lugar, reordene com scripts/cortar_musica.py.
7. Mixagem. Efeitos da biblioteca CC0 incluída (sfx/) e sintetizados (scripts/efectos_sinteticos.py),
scripts/mezclar.py efectos.json a -16 LUFS. Controle: oir_con_deepgram.py --comparar entre a narração sozinha e
a banda: nenhuma palavra se perde. Se perder, abaixe o efeito que soa naquele segundo ou abra uma lacuna na
música.
8. Desenho. Em comercial, primeiro brief e storyboard fixo (assets/brief-cliente.md), e filme o produto
(references/promo.md). Copie o motor do estilo (assets/motor-base.js cartoon, assets/motor-suave.js suave ou
assets/motor-promo.js comercial) como meu-filme/filme.js, mude o nome global, escreva uma função por
cena seguindo a folha de tempos. Página pelicula.html e hoja.html a partir de assets/ (mude o nome do .js e
do global; adicione fontes se usar outras). Personagens genéricos, nunca a pessoa real.
9. Folhas de quadros. source scripts/preparar_render.sh e node $R/render.mjs pelicula.html fotos.png --stills ...
com 9 instantes por folha, o filme inteiro. Olhe-as, corrija o que estiver tapado, cortado, pequeno, montado ou ilegível
(lista de erros típicos em references/motor-visual.md) e volte a olhar. Em comercial, SEGURAS=1 desenha as zonas
seguras e promo.md traz a lista "Revisar antes de renderizar".
10. Render. node $R/render.mjs pelicula.html <caminho>.mp4 30 1 6 em segundo plano; copie o MP4 para a pasta do
filme; scripts/liviano.sh para enviá-lo por mensagem. Olhe um quadro do leve. Se a mudança de estilo for
grande, refaça primeiro um trecho e renderize apenas esse trecho para que a pessoa o veja em movimento
(references/entrega.md seção 8). Se só mudou o áudio, não renderize: una a nova banda ao vídeo mudo.
10.b Ler o vídeo. scripts/revisar_texto.sh <caminho>.mp4 "palavra1|palavra2": OCR a 1 quadro por segundo sobre o
MP4 final, com cada palavra retirada do produto (requer tesseract). O texto de um botão fica salvo em arquivos do
filme: se mudou o vocabulário do produto, pede-se e filma-se novamente (references/entrega.md seção 10).
11. Entregar. MP4 com resumo cena por cena, o que foi verificado e o que a pessoa decide. Um flyer sai do mesmo
filme (references/entrega.md seções 6 e 7). Se for para uma apresentação: lâmina data-peli, controlador, fontes,
construir.py e teste no navegador.
12. Salvar. GUION, .js, páginas, áudio mp3 e json no git (wav e mp4 fora); seção no LEEME da pasta.
Regras inegociáveis
- Verdade: nada inventado sobre o produto nem sobre pessoas reais. O delicado (quedas, saúde) vai sóbrio e com letra pequena honesta.
- Chaves: lêem-se de variáveis de ambiente com
llaves.she nunca se imprimem nem se escrevem em arquivos. - Não copiar obras: pode-se pedir o tom de um filme famoso ("como Up", "trailer de super-heróis"), nunca seus personagens, cenas, música ou nomes.
- Puro de tempo:
seek(t)sem estado, semMath.random()(userng), sem setTimeout. Se um quadro depende do anterior, o render sai diferente do que se vê ao vivo. - Um vídeo fixa um número: sem fonte oficial dos números não há vídeo. Cada filme leva seu estado (rascunho,
aprovado, quem o viu e qual versão) no
LEEMEda pasta, e se for refeito depois de um terceiro tê-lo visto, avisa-se à pessoa qual número mudou (references/entrega.mdseção 12). - Medir, não supor: "soa bem" e "parece bem" só depois do Deepgram e das folhas de quadros.
Tempos de referência (filme de um minuto)
Roteiro e vozes 20 min; tempos, música e mixagem 20 min; desenho 40 a 60 min; folhas de quadros e correções 20 min; render e leve 5 min; apresentação e publicação 15 min. As correções visuais são normais: cada filme tem entre 5 e 10. Um comercial de 97 s filmado da web: 48 s de render, 3 min com desfoque de movimento. Se um ajuste chegar após o render, renderize novamente.
Se o app fechar no meio do caminho
O que importa já está na pasta do filme (áudio, .js, GUION) e o renderizador se rearma sozinho com
preparar_render.sh em ~/.cache/skill-motion-render. Anote em que passo você estava antes de cada tarefa longa.