Communitygithub.com

nzl153/paint-video-skill

Crie curtas de animação desenhados à mão com código: aquarela, nanquim, giz de cera, sombras chinesas, lutas em estilo tinta, e mais. Use p5.js, canvas 2D, SVG, WebGL; renderize com Chrome headless e componha MP4 com ffmpeg.

O que é paint-video-skill?

Esta skill capacita agentes de IA (como Claude Code) a produzirem curtas-metragens animados inteiramente por código, sem qualquer imagem gerada por IA. Ela oferece dez estilos de animação distintos — incluindo aquarela, nanquim, giz de cera, sombras chinesas, lutas em tinta, gravura, tinta fluida, areia, rabiscos de caderno e montagem de ponto comum — cada um com seu próprio motor de renderização e conjunto de APIs. O fluxo de trabalho principal trata cada quadro como uma função pura do tempo t, permitindo renderização paralela com Chrome headless e composição final com ffmpeg. A skill fornece guias detalhados, armadilhas conhecidas e um ciclo de verificação rigoroso para garantir qualidade de animação. Ela também cobre criação de trilha sonora com Tone.js + samples de instrumentos reais, dublagem com edge-tts e legendas. Os repositórios de suporte (paint-video-skill, ClaudeAnimationBase) contêm modelos, exemplos e ferramentas. A skill é ideal para criar MV, aberturas, vídeos explicativos e qualquer conteúdo animado curto onde o controle artístico e a consistência são críticos.

Funciona com✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/nzl153/paint-video-skill/tree/HEAD/paint-video

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Curta de Animação Desenhado à Mão

O fluxo completo: cada quadro é uma função pura de t (segundos), pintada com pincéis (linhas nanquim, aquarela, hachuras). Chrome headless renderiza os quadros em paralelo como imagens, e ffmpeg os compõe em MP4. As exceções são fluido e areia: a imagem tem estado de simulação entre quadros, só renderizando sequencialmente. Nenhuma imagem na cena é gerada por IA; tudo é desenhado por código.

Oito motores:

EstiloMotorOnde começar
Aquarela, nanquim (hachuras podem dar sensação de gravura)p5.js + p5.brush, velocidade varia muito com a complexidade da câmeraClaudeAnimationBase (MIT)
Giz de cera, livro ilustrado, história em quadrinhosCanvas 2D puro, 10–50ms por quadrocrayon-kit/ deste repositório, veja crayon.md
Sombras chinesas, silhueta, teatro de sombrasCanvas 2D puro, 2–10ms por quadro, gongos e tambores sintetizados por códigopiying-kit/ deste repositório, veja piying.md
Lutas em tinta (estilo Montanha Wu)Canvas 2D puro, 20–100ms por quadroinkfight-kit/ deste repositório, veja wushan.md
Vídeo explicativo (diagramas, legendas, narração)Canvas 2D puro, 60–130ms por quadro, efeitos sonoros sintetizados, narração com edge-ttsexplainer-kit/ deste repositório, veja explainer.md
Série de gravuras (serigrafia, água-forte, cianotipia, pontilhismo, etc.)SVG, ~1s por quadro, renderização paralela em múltiplas vias; trilha sonora com Tone.js + samples reaisprints-kit/ deste repositório, veja prints.md, music.md
Tinta fluida (impulsionada por notas musicais, abstrata)WebGL2 fluido estável, ~65ms por quadro, apenas renderização sequencialfluid-kit/ deste repositório, veja fluid.md
Areia (caixa de luz com transparência, uma imagem se transforma na próxima)WebGL2 campo de altura, ~90ms por quadro+, apenas renderização sequencialsand-kit/ deste repositório, veja sand.md
Rabiscos de caderno (caneta esferográfica, lápis de cor, papel fotografado)Canvas 2D puro, página inteira pré-renderizada como textura, 2–10ms por quadrodoodle-kit/ deste repositório, veja doodle.md
Montagem de ponto comum (estilos se sucedem)Node + @napi-rs/canaxa diretamente, sem navegadormontage-kit/ deste repositório, veja montage.md

Obra de referência: PDoomVideo, um MV de dois minutos e meio gerado por Claude no Claude Code. Esse repositório não tem licença; só para estudo, não para publicar código. ClaudeAnimationBase é a base MIT organizada posteriormente pelo mesmo autor.

Ambiente

  • Esta skill vem do repositório paint-video-skill. Os diretórios crayon-kit/, piying-kit/, inkfight-kit/, explainer-kit/, prints-kit/, fluid-kit/, sand-kit/, doodle-kit/, montage-kit/, examples/, tools/ estão todos nesse repositório, não no diretório da skill; se não encontrar localmente, pergunte ao usuário onde o repositório foi clonado, ou clone novamente.
  • Node 22.12+, Chrome ou Chromium (se não encontrar, passe --chrome=<caminho> para render.mjs ou defina CHROME_PATH), ffmpeg no PATH.
  • Ferramenta de legendas requer Python 3, numpy e Pillow.
  • npm install baixará e executará código de terceiros; pergunte ao usuário antes de instalar. Ao iniciar um novo projeto, copie o diretório de modelo já instalado, incluindo node_modules, para não precisar reinstalar.

Passos para Iniciar (Aquarela / Nanquim)

  1. Copie a base para o novo diretório do projeto, excluindo out, docs, .git. No Windows, use robocopy <base> <novo_dir> /E /XD out docs .git /XJ; código de saída 1 indica sucesso.
  2. Leia primeiro o ANIMATION_GUIDE.md no novo diretório. Lá estão as regras completas e a API: paint(), inkLine(), câmera, transições, todos os parâmetros de clawd(). Não repito aqui.
  3. Escreva primeiro um STORYBOARD.md e mostre ao usuário antes de codificar. Siga o formato do guia: resumo de uma frase, mundo e paleta, motivo central, arco emocional, cronograma de "pontos de leitura" quadro a quadro. Antes de escrever, leia directing.md (manual de direção: planos, eixo, ponto de corte, ritmo, composição, atuação); escreva a tabela de planos no formato dele e verifique com a lista de verificação no final.
  4. Edite src/config.js com duração e bpm. Crie as cenas como novos arquivos src/scenes/<nome>.js, encapsulados em IIFE, finalizando com shots([...]). Em studio.html, substitua a linha demo.js por ele.
  5. Faça um plano de cada vez; após cada um, use o ciclo de verificação abaixo.
  6. Gere o vídeo: node render.mjs --clip --out=out/video.mp4. Para durações longas, use --frames --workers=4 para renderizar em paralelo e depois --encode para compor.

O diretório examples/brush/ deste repositório tem duas cenas completas e funcionais: stars.js ("Coletando Estrelas", 14.5s, bpm 90) e ink.js ("Assinatura", nanquim, 16.8s, bpm 80). Coloque-as em src/scenes/, substitua demo.js em studio.html e ajuste config.js com duração e bpm entre parênteses. Use apenas como referência de escrita; não copie a história.

Dois patches aplicados à base (em render.mjs: dois parâmetros ffmpeg e um parâmetro Chrome):

  • Saída para tv range padrão: substitua '-pix_fmt', 'yuv420p' por '-vf', 'scale=out_range=tv,format=yuv420p', '-color_range', 'tv'. Caso contrário, alguns players exibem tudo preto.
  • Em notebooks Windows com placa dupla, adicione --force_high_performance_gpu; caso contrário, o Chrome cai na GPU integrada e fica lento. crayon-kit/render.mjs já inclui esses dois patches.

Regras Mais Importantes

Aplicáveis a todos os estilos

Os pontos onde modelos de IA mais erram em animação:

  • Quadro é função pura de t: quadros podem ser renderizados fora de ordem e em paralelo. Portanto, sem estado entre quadros, sem Math.random(); valores aleatórios vêm do tempo e do ID do elemento.
  • 2D puro, sem projeção 3D: profundidade é indicada por oclusão, tamanho e temperatura de cor.
  • Sem texto: nada de etiquetas, letreiros ou balões de diálogo com texto. Expresse tudo visualmente, com emojis (!, ?, gotas de suor, lâmpada). Legendas de MV são exceção: faça uma camada separada, conforme seção de legendas em mv-workflow.md.
  • Cada plano conta uma coisa; deixe o espectador ver uma coisa de cada vez, primeiro a causa, depois a reação.
  • Senso de tempo é o que mais erra: o espectador vê apenas uma vez. Reserve tempo para cada "ponto de leitura" ser encontrado, compreendido e pausado. Rápido é ação; lento é significado. A primeira versão quase sempre é rápida demais.
  • Toda junção precisa de transição: incluindo início e fim; não comece ou termine abruptamente. A transição deve ter relação com a história; não use sempre o mesmo tipo. Exceção: cenas de luta; os cortes são diretos no meio da ação, sem transições decorativas (veja wushan.md).
  • Personagens grandes: em 1080p, um plano médio ocupa cerca de 1/3 a 1/2 da altura da tela; close-up de rosto deve ocupar mais da metade; menos de 1/10 é só para planos de estabelecimento distantes. O significado dos parâmetros de tamanho varia entre motores; não misture valores.

Específico do p5.brush (aquarela / nanquim)

Do ANIMATION_GUIDE.md da base:

  • Valores aleatórios fixos com hash(i), tremulação de linha com jit(). Chame boilSeed(key) no início de cada elemento independente; senão, um objeto em movimento faz tudo o que está atrás tremer junto.
  • Use apenas pincéis: só paint() e inkLine(), nada de rect, ellipse, fill() do p5 nativo; senão parece Flash dos anos 2000.
  • Virar é feito alternando entre vistas-chave pré-desenhadas (turn()).
  • u de clawd(): plano médio 20–28, close-up 40–70, menos de 12 só para planos distantes.

A API, números aleatórios e tamanhos de personagem do motor de giz de cera são outros; veja crayon.md.

Estética Padrão

Quando o usuário não especificar estilo, siga este padrão. É voltado para "papel e tinta": cores quentes de baixa saturação, marcas de artesanato, animação contida. Se o usuário tiver suas próprias instruções de estilo, prevalecem.

Paleta: Sobrescreva a paleta no início do arquivo de cena. A paleta padrão da base é saturada (azul celeste, roxo, rosa):

Object.assign(PAL, {
  paper: '#f7f2e6', cream: '#faf7f0', ink: '#2e2a24',
  clay: '#bb5f3c', clayDk: '#8f4428', clayLt: '#d98a6c',   // cor de barro; o corpo de Clawd usa clay
  sky: '#a9bfc4', sap: '#8a9a6a', ochre: '#c9a25a', teal: '#6f9590',
  rose: '#c98a8a', indigo: '#4a5670', night: '#262a38', violet: '#7d6f8f'
});

Cada filme escolhe 3–5 cores daí; não use todas. As cores devem ter um arco conforme a história avança, por exemplo, começo frio e escuro para final quente e claro.

Textura: A base já inclui textura de papel e grão; mantenha. Hachuras (hatch) são boas para sensação de gravura, mas use apenas em sombras e áreas localizadas; não cubra a tela toda.

Rico não é barato:

  • Pode ser movimentado: muitas coisas em movimento em um mesmo plano é "cena performática".
  • Não pode ser barato: não encha com confetes, estrelas ou faíscas para preencher. Efeitos especiais devem pertencer à história, como estrelas caindo, luz acendendo.
  • Autoverificação: remova este elemento; a cena perde sentido? Se perder só a agitação, remova.
  • Contido não é vazio: espaço em branco deve ter camadas; a cena deve ter ambiente, primeiro, segundo e terceiro planos, textura; não um fundo de papel com dois ou três objetos solitários. O espectador vê uma coisa por vez, mas essa coisa deve estar em um mundo com vida.

Pinceladas devem parecer feitas à mão: Personagens podem usar base plana com linha nanquim conforme o guia, mas a linha não deve ter a mesma espessura o filme inteiro: varie sw em inkLine(pts, sw, colour, brush) conforme distância e importância; para detalhes, use pincéis 'inkfine' ou 'dry'. Fundo e ambiente usam aquarela fill, wash para camadas secas e molhadas. Se tudo for linha preta grossa uniforme com base plana, parece recorte.

Uma restrição invariável: Cada filme define uma invariável que percorre toda a obra, como a mesma posição de enquadramento, a mesma forma, a mesma pose de personagem; transições e montagem giram em torno dela; o final ecoa o início.

Música e ritmo: Tudo na base segue o bpm. Sem trilha sonora, bpm mais lento (80–100), ritmo mais ponderado.

Aprendizados com Filmes de Teste

"Coletando Estrelas" (examples/brush/stars.js)

Clawd segura um pote vazio para pegar estrelas caindo; a luz das estrelas aquece a noite aos poucos.

  • Desligue emojis manualmente: as expressões excited, proud da base geram automaticamente faíscas spark na cabeça, que são decoração barata. Use emotions(t, [[0, 'excited', { emote: null }], ...]) para desligar. !, ?, coração têm significado e podem ficar.
  • "Aquecer" não significa pintar o céu inteiro de cor quente: misturar o tom noturno diretamente com amarelo-marrom deixa tudo amarronzado e sujo. O céu continua noturno; apenas reduza os tons frios (misture para #4b4356), coloque o calor no degradê do horizonte e nos objetos luminosos.
  • Objetos de cena devem ser reconhecíveis de imediato: o pote de vidro em fundo escuro foi desenhado cinza inicialmente, parecia uma lixeira. Mude para vidro claro mais frio, adicione um destaque para ser identificável.
  • Fechamento de íris deve ser em três etapas: primeiro feche no assunto principal, pause, depois feche completamente. Fechar de uma vez só parece tela preta repentina.
  • Os braços de Clawd são curtos: não alcançam o que está acima da cabeça; levantar parece apoiar na cabeça. Para segurar, desenhe um gesto de abraço.
  • Velocidade real: 14.5s, 348 quadros, 4 processos paralelos ~6 min, ~1s por quadro (RTX 4060 notebook), codificação ffmpeg 10s. Folha de contato 0.1–1.7s por quadro, muito barato; veja várias vezes.

"Emprestando Orvalho" (contraexemplo)

Um caracol carrega orvalho para salvar uma muda ressecada. Todas as regras foram seguidas (sem texto, sem faíscas, paleta correta, personagens consistentes), mas o filme não funcionou:

  • A mudança de estado da história precisa ser exagerada para ser notada de imediato: a muda estava mais ou menos com a mesma aparência do início ao fim; "curvada de sede → erguida após beber" não se distingue; o filme perde causa e efeito. Coloque os quadros dos estados-chave lado a lado; se um leigo não vê diferença, não é suficiente; exagere até ser óbvio.
  • Objetos que impulsionam a trama devem ter pelo menos o tamanho da cabeça do personagem: a gota de orvalho era menor que o olho do caracol, cor clara, ao cair na concha desapareceu. Objeto pequeno? Aproxime a câmera ou adicione brilho, contorno.
  • Se o storyboard escreve movimento, a tela deve realmente se mover: o storyboard dizia que o caracol carregava água até a raiz; na prática, o deslocamento era mínimo, parecendo imagem estática na maior parte do tempo. Confira plano por plano "quem vai de onde para onde".
  • Cena vazia: só uma muda, um caracol, uma folha; veja acima "contido não é vazio".
  • Transição precisa ter motivo: uma faixa verde sem relação com a história varrendo a tela é apenas um corte duro disfarçado.

Autoverificação após escrever: coloque o primeiro e o último quadro de cada plano lado a lado. Se não consegue dizer o que mudou naquele plano, não funciona; volte e amplie o evento.

"Assinatura", nanquim (examples/brush/ink.js)

  • Mudar de estilo é só trocar paleta e método de pintura; a base não precisa ser alterada: o filme inteiro usa três tons de nanquim mais o vermelhão de Clawd. "Um ponto vermelho em meio a mil nanquins" é clássico; Clawd é exatamente esse ponto.
  • Nanquim se espalhando: cada ponto da forma parte do ponto de aplicação e se espalha por distância (bloom()), mais parecido com tinta se espalhando no papel do que "fade-in da forma inteira".
  • Camadas de nanquim: primeiro aplique fundo claro; depois, no topo da montanha, adicione uma camada de nanquim escuro que desvanece para baixo; na base, uma névoa na cor do papel; montanhas distantes se movem mais devagar com paralaxe.
  • O mundo cresce junto com o personagem, pincelada por pincelada: onde ele pisa, ali surgem juncos, rio, pedras; o ato de desenhar é o próprio evento. Isso também garante que os quadros inicial e final de cada plano tenham mudança visível.
  • A restrição de composição também deve considerar o ponto final: para o personagem ver o caminho à frente, ele deve estar no lado oposto ao movimento; ao final, naturalmente estará no canto da tela daquele lado.

Segundo Estilo: Giz de Cera / Livro Ilustrado

Se o usuário quiser algo infantil, ilustrado, giz de cera, história em quadrinhos, ou não quiser mais aquarela, leia crayon.md no mesmo diretório. Este estilo não usa p5.brush; é um motor de giz de cera próprio em canvas 2D (crayon-kit/), uma ordem de grandeza mais rápido que aquarela. Contém: princípios do motor e API, parâmetros de personagem, transformações, como fazer quadrinhos e quebrar painéis, legendas em giz de cera, uso de sonda para evitar que legendas cubram personagens.

Terceiro Estilo: Sombras Chinesas

Se o usuário quiser sombras chinesas, silhueta, teatro de sombras, ou um curta sem música apenas com gongos e tambores, leia piying.md no mesmo diretório. Motor em piying-kit/: cada peça de sombra é esculpida em vácuo e multiplicada sobre a tela translúcida; personagens são fantoches articulados com hastes de controle; pontos de gongo e tambor são sintetizados com numpy. Contém: princípios e API, parâmetros de personagem, ação batendo nos pontos de gongo e tambor, posições de câmera atrás do palco com espelho e contorno de silhueta, sintetizador.

Quarto Estilo: Lutas em Tinta (Estilo Montanha Wu)

Se o usuário quiser lutas, artes marciais, cenas de ação, ou pedir Montanha Wu, tinta colorida, leia wushan.md no mesmo diretório. Motor em inkfight-kit/: personagens desenhados com pincel nanquim, base plana e sombra; ação segue curvas suaves por quadros-chave; pés seguem pontos de contato separadamente; quadros de impacto usam inversão e vermelhão; finalmente, fogo e tinta explodem pela tela. Contém: API do motor e corpo humano, como coreografar uma luta (definir pontos de contato primeiro, depois deduzir posições, usar probe.mjs para números), arranjo de planos, armadilhas.

Quinto Estilo: Vídeo Explicativo

Se o usuário quiser vídeo educativo, explicar uma descoberta ou princípio, leia explainer.md no mesmo diretório. Base é explainer-kit/ ("Usando Luz para Abrir o Cérebro", optogenética, Prêmio Nobel 2026, 3:05). Cada cena um estilo; legendas, capítulos e anotações permitidas; cena, efeitos sonoros e narração compartilham um timeline.js; se a narração for mais longa que a cena, estenda a cena conforme a duração da frase.

Sexto Estilo: Série de Gravuras

Se o usuário quiser textura material, não minimalista plana, ou pedir gravura, serigrafia, água-forte, cianotipia, pontilhismo, leia prints.md no mesmo diretório. Base é prints-kit/ ("Luz Distante", 93s, seis jornadas de uma semente de dente-de-leão). Contém:

  • horizonte e fonte de luz fixos nas seis partes, técnica muda a cada parte;
  • seis técnicas em SVG;
  • uso de números aleatórios fixos para evitar cintilação ao redesenhar quadro a quadro;
  • três elementos para fazer a cena "contar algo": protagonista e companheiro, hora do dia, etiqueta a lápis;
  • cinco métodos de transição;
  • renderização paralela em múltiplas vias (cada via ~2–3GB RAM, padrão 4 vias).

Sétimo Estilo: Tinta Fluida (MV Impulsionado por Notas)

Se o usuário quiser algo que se move o tempo todo, sem história específica, mudando a cada batida musical, leia fluid.md no mesmo diretório. Base é fluid-kit/ ("Uma Gota de Tinta", 91s, clássico + rock). WebGL2 fluido estável; tinta se sobrepõe por absorbância; partitura musical exporta tabela de notas; cada instrumento tem método de pintura fixo (violino é pincel, bumbo é impacto, prato é flor); cada seção é uma "qualidade aquosa"; explosões no clímax alternam entre 7 tipos. Não desenha pessoas; sem planos; quadros só renderizam sequencialmente.

Oitavo Estilo: Areia (Caixa de Luz, uma Imagem se Transforma na Próxima)

Se o usuário quiser contar uma história pequena, sem desenhar pessoas, mas com imagem em constante mudança, sem parecer PPT dinâmico, leia sand.md no mesmo diretório. Base é sand-kit/ ("Ampulheta", 75s, um grão de areia vê um ano, nove imagens conectadas). WebGL campo de altura simula areia: espalhar, deslizar com dedo, empurrar com palma, ângulo de repouso, cortina de areia, alisar, triângulo brilhante, abrir lua; luz de fundo é transmitida em três canais separadamente, partículas finas uma a uma. Regras: luz é protagonista, transição por forma conectada, espaço em branco. Cena definida primeiro, trilha sonora depois, 60 bpm, um pulso = um segundo. Quadros só renderizam sequencialmente.

Nono Estilo: Rabiscos de Caderno (Caneta Esferográfica + Lápis de Cor + Papel Fotografado)

Se o usuário quiser sensação de "papel", "caderno", "rabiscar na aula", com um protagonista que é um desenho que ganha vida, leia doodle.md no mesmo diretório. Base é doodle-kit/ ("Margem", 38s, uma bolinha na margem passeia enquanto a caneta está fora). Linha de caneta falha; lápis de cor é hachura inclinada com grão de papel; página inteira com luz de foto; uma caneta real com sombra ancora a sensação fotográfica. Coisas vivas têm linha trêmula; quando param, voltam ao papel. Plano-sequência; trilha sonora acompanha o movimento. A segunda metade registra experiência de filmar um MV de música inteira com este estilo: sem pessoas, usando duas canetas e um caderno deslizante para representar dois personagens.

Décimo Estilo: Montagem de Ponto Comum (Mesma Forma Cai no Mesmo Ponto)

Se o usuário quiser muitas cenas desconexas cortando rapidamente, com uma parada brusca no final, e cada corte faz a mesma forma cair no mesmo ponto da tela, leia montage.md no mesmo diretório. Base é montage-kit/ ("Uma Mordida", 25.8s): rosquinha cobre a tela; no buraco, um cowboy galopa; a cada batida, o buraco muda de estilo, o anel externo acompanha uma batida depois; 24 estilos se sucedem; no final, uma mordida. Animação contínua usa um esqueleto compartilhado de nível anatômico; cada estilo só desenha. Outra abordagem "um corte, um mundo" também está descrita.

Compor Sua Própria Trilha Sonora

Se não houver música pronta e for preciso compor para o curta, leia music.md no mesmo diretório. Use Tone.js com samples de instrumentos reais, sem timbres sintéticos. Contém: regras de arranjo, como remover artificialidade, armadilhas com samples orquestrais VSCO2 e sua notação de oitava, alinhamento de volume ao trocar fontes, cache local de samples, exportação offline com Chrome headless e normalização dupla de loudness, e como alinhar imagem e música usando "pulsos". Música clássica + rock tem seção adicional: bateria real com múltiplas dinâmicas (DRSKit), guitarra distorcida, exportação por faixas, e mixer Python próprio (equalização, compressão, saturação, reverb convolucional, alinhamento de loudness por seção, limitador).

Ciclo de Verificação (faça para cada plano, não pule)

Só ler código não mostra o efeito da animação; é preciso renderizar e ver:

node render.mjs --sheet=0.1,0.8,1.6,2.4 --cols=4 --w=480 --out=out/check/sheet.jpg        # Folha de contato: primeiro, meio, último quadro de cada plano
node render.mjs --strip=2.1:2.6 --cols=6 --w=320 --out=out/check/strip.jpg               # Quadros consecutivos: virar, pular, transição
node render.mjs --sheet=2.3 --crop=760,420,500,400 --w=500 --out=out/check/face.jpg     # Ampliação local: expressão, mão, ponto de contato

Se ms/frame da folha de contato for 0, a página não está desenhando nada (provavelmente erro de sintaxe no arquivo de cena); verifique [page error] no terminal.

Abra com visualizador de imagens e verifique item por item:

  • O evento é legível? O personagem é grande o suficiente? Distingue-se do fundo?
  • Há quadros com teletransporte ou mutação?
  • Corpo e suporte: sentar, ficar em pé, apoiar em algo; deve haver transição de levantar perna, dobrar joelho, sentar; o corpo não pode deslizar horizontalmente sobre o objeto nem sobrepor-se a ele.
  • Comprimento dos membros constante: ao alcançar algo, o braço não estica; se não alcançar, o personagem se aproxima ou se abaixa.
  • Objetos balançados ou virados não atravessam objetos da cena.
  • A ação tem preparação e acompanhamento? Não é simétrica e simultânea?
  • As junções têm transição?
  • Há texto?
  • As cores estão sujas? (amarelo sobre azul fica verde; brilho use glow())
  • A paleta mantém o tom definido?

Desempenho e Armadilhas Conhecidas (p5.brush)

  • Continuação da renderização depende apenas da existência do arquivo de quadro: ao modificar o código e executar --frames, quadros já existentes são mantidos, gerando vídeo misturado com cenas antigas, sem erro. O render.mjs da base é assim; após alterar código, mova out/frames para outro lugar (não delete) antes de renderizar. O render.mjs do crayon-kit assina os quadros com hash do código; se o código mudar, ele para e pede --force (move frames antigos para out/frames_old_*) ou --keep-frames (se você já moveu manualmente os quadros alterados).
  • Erro de página: render.mjs do crayon-kit falha e sai; o da base apenas imprime [page error] e continua gerando imagens; fique atento.
  • A folha de contato imprime o tempo por quadro; alvo ≤1.5s/quadro. fill de aquarela é o mais caro: use wash para formas grandes; fill com poucos vértices.
  • Com placa de vídeo dedicada, ~1s por quadro. Se ficar visivelmente lento, use node gpu_probe.mjs <caminho_chrome> para ver em qual GPU o Chrome caiu.
  • studio.html carrega a fonte Permanent Marker do Google Fonts; só usada por letter(). Se o filme não tiver texto, remova a linha <link> para não travar se a rede estiver offline.
  • Quando coordenadas NaN aparecem, a mensagem de erro é Failed to construct 'OffscreenCanvas', stack aponta para o código da cena e não para o NaN; verifique cálculos geométricos.
  • Ao ampliar a câmera mais de 2x, linhas longas distantes da origem podem colapsar em um ponto. Divida bordas muito longas com inkLine em segmentos.
  • Ocasionalmente, 5 avisos WebGL: INVALID_OPERATION são inofensivos; outros erros de página são reais.
  • Formas grandes apenas com fill são quase transparentes: montanhas distantes, superfície d'água com milhares de pixels de largura, com apenas fill ficam muito claras. Primeiro aplique wash (washOp: 255, cor mais clara) como base, depois sobreponha fill para degradê e bordas.
  • inkLine com apenas dois pontos não desenha nada, sem erro: linhas retas também precisam de 3+ pontos, de preferência com leve ondulação, mais parecidas com mão. Ondulações, marcas d'água, linhas curtas no chão são mais suscetíveis.
  • Não desenhe a mesma forma em segmentos separados: partes escuras de montanha divididas em segmentos criam costuras verticais nas sobreposições. Desenhe a forma inteira de uma vez; ondulações nas bordas use hash(i).
  • Ao dividir inkLine em segmentos, verifique o número de pontos do último segmento: ao fatiar, o final pode ter apenas 1 ponto, gerando erro spline() requires at least 2 points.

Longa-metragem ou MV

Leia primeiro mv-workflow.md no mesmo diretório: análise musical, tabela de planos impulsionada por fórmula de compasso, biblioteca de componentes, lotes, renderização por partes, reparos locais, correção de cor final, legendas de letra.

Outra abordagem: um agente principal escreve storyboard e instruções de estilo; divide em capítulos para múltiplos subagentes, cada um modifica seu arquivo de capítulo. Se o usuário não pedir, uma pessoa faz tudo do início ao fim, resultando em filme mais coeso.

Para alinhamento de letra com áudio e análise de batida, veja também paint-mv-skills (MIT, chinês).

Entrega

  • Entregável é out/video.mp4, acompanhado de um screenshot da folha de contato.
  • Relate três coisas: duração total, tempo médio por quadro, o que você encontrou e corrigiu na verificação. Partes não revisadas devem ser explicitamente declaradas como não revisadas.

Habilidades Relacionadas