Kalem: cada cena tem seu próprio lápis
Esta skill é executada a partir da raiz do repositório (claude é aberto na pasta do repositório). Todos os caminhos são relativos à raiz do repositório. Um novo vídeo é criado em projetos/<nome>/.
Vídeos feitos com um único motor se parecem entre si. Esta skill divide o vídeo em cenas, analisa O QUE ACONTECE DENTRO de cada cena e seleciona o motor que a desenha melhor. O motor é um lápis: o mesmo desenho fica diferente com lápis grafite e aquarela.
O que está dentro da cena → qual motor
| Dentro da cena... | Motor | Por quê |
|---|---|---|
| Desenho à mão, linha que se desenha sozinha, esboço, movimento de lápis | Paper.js | Motor que desenha a linha mais suave e natural. Apenas para trabalho com lápis. |
| Personagem, caminhada, levantar o braço, transformação de uma forma em outra | Canvas puro (seu próprio código de desenho) | Controle total sobre movimento e forma. |
| Explosão, luz, brilho, poeira, milhares de pequenas partículas | PixiJS | Reproduz milhares de partículas sem travamentos. |
| Texto na tela, números, contador, cartão informativo, edição de notícias | HyperFrames (HTML + GSAP) | O mais limpo para animação de texto e informações. |
| 3D real: câmera girando, luz, sombra, máquina | Three.js | 3D real no navegador. |
| Fórmula, gráfico, esquema, matemática | Manim (Python) | Ferramenta do 3Blue1Brown. Se não houver LaTeX, escreva com Text. |
Assistentes não desenham cenas; eles ajudam dentro de um motor:
| Tarefa | Assistente |
|---|---|
| Coisas leves caindo, tombando, quicando | Matter.js |
| Coisas pesadas deslizando, empilhando | Rapier |
| Transição de cena para cena (125 transições prontas, virar página = BookFlip) | gl-transitions (comum/transicao.html) |
| Algo chegando na tela como um arco saltitante | Anime.js |
| Confete, estrelas, chuva de emojis | tsParticles |
| Reduzir modelo 3D | glTF-Transform |
| Efeito sonoro travado no quadro (clique, farfalhar, batida) | Tone.js (som/som.html) |
Esta tabela foi criada com o gosto de uma pessoa: 20 ferramentas competiram na mesma cena, foram assistidas e pontuadas. Faça seus próprios experimentos e altere a tabela de acordo com seu próprio olhar.
Fluxo
- Dividir em cenas. Divida o vídeo descrito pelo usuário em 4 a 8 cenas. Para cada cena, escreva uma frase em linguagem cotidiana e selecione o motor, mostre ao usuário como uma tabela: "A cena 1 contém um esboço que se desenha sozinho → deve ser desenhado com Paper.js." Sem compressão técnica (não "número correndo", mas "dentro da cena há um número aumentando"). Uma cena = um motor. Se houver várias tarefas em uma cena, a tarefa principal que domina a tela determina o motor; as tarefas secundárias entram como assistentes.
- Escrever os arquivos comuns.
<projeto>/tempo.json(fps, tamanho, número de quadros de transição, lista de cenas e contagens de quadros) e<projeto>/BRIEF.md(linguagem visual comum, fatos, descrição de cada cena, contrato de entrega). Exemplo:exemplo/maquina-voadora/(se existir). - Produzir as cenas. A textura do papel, as cores e as fontes são definidas uma vez no BRIEF; cada cena as utiliza; o vídeo parecer coeso depende disso.
Cada cena em sua própria pasta:
<projeto>/cenas/<NN-motor>/→executar.sh,video.mp4,controle.png,eventos.json. As cenas são independentes, podem ser produzidas em paralelo (cada cena com um agente diferente). - Controle. Olhe o
controle.pngde cada cena e alguns quadros completos: o texto está vazando? Há quadros vazios? As cores estão na linguagem comum? O primeiro quadro está preenchido? - Montar.
python3 montar.py <projeto> [--transicao BookFlip]→ transições + som →<projeto>/saida.mp4. Se quiser mostrar ao espectador qual motor desenhou cada cena, adicione--etiqueta: no tempo.json, para cada cena adicione"etiqueta": ["Paper.js", "linha de lápis que se desenha sozinha"](terceira linha opcional para assistente), para a primeira transição"etiqueta_transicao". No canto inferior esquerdo de cada cena, um pequeno cartão na cor de papel de caderno é impresso. - Auditoria. Dê a um agente novo apenas as imagens de controle e o BRIEF, pergunte: "Quem assistir vai pensar 'isso não é possível'?" Corrija o que for encontrado e depois explique ao usuário.
Contrato técnico
- O tempo vem do número do quadro. Sem
Math.random, aleatório com semente. Duas execuções devem produzir o mesmo quadro. - Motores de navegador: a página chama
motor(config, quadro, QUADRO)emcomum/controlador.js,quadro(f)retorna um canvas desenhado. Captura:python3 comum/capturar.py <caminho da página> <pasta de quadros> [largura altura], depois ffmpeg para mp4. eventos.json:[{"quadro": 12, "tipo": "linha|clique|batida|queda|farfalhar|brilho|asa|contador", "intensidade": 0-1}]. No mesmo quadro da imagem. O som é gerado a partir daqui, então som e imagem nunca se desviam.- Antes de capturar a página do navegador, teste o JS com
node --check; se houver erro de sintaxe, a página nunca carrega e o capturador para após 60 segundos. - Manim: se existir
.venv-manim/bin/pythonna raiz do repositório, use-o (MANIM_PY); se não houver LaTeX, use Text em vez de MathTex. - Sem drawtext no ffmpeg; o texto é desenhado dentro do motor.
- Letras turcas (Ç Ğ Ş İ Ö Ü) completas; maiúsculas com
toLocaleUpperCase('tr'). - Primeiro quadro preenchido: sem abertura do preto. Últimos ~15 quadros calmos (a transição se sobrepõe aí).
- Sem flashes/brilhos repentinos: o salto de brilho entre quadros permanece pequeno.
- Para vídeo vertical (Reels/Shorts): não coloque elementos significativos nos ~250 px superiores, ~420 px inferiores e ~150 px à direita.
Instalação
./instalar.sh instala os pacotes dos motores (requer Node 20+, Python 3, ffmpeg, Google Chrome; Manim é opcional: pip install manim).