Animação em JavaScript (cada quadro desenhado em código)

O que Animação em JavaScript (cada quadro desenhado em código) faz?

Crie curtas-metragens animados onde cada pixel é computado: sem imagens, sem fontes para carregar, sem bibliotecas. Um único arquivo HTML contém toda a peça; um navegador headless a percorre quadro a quadro para gerar um MP4.

Modelo

Construído e testado com Claude Opus 5.5; a qualidade do desenho depende muito do modelo. A autoverificação abaixo precisa de entrada de imagem: se o modelo atual não consegue ver imagens, avise o usuário e considere a verificação visual como não realizada. Outros modelos não foram testados; se o resultado parecer rudimentar, diga que um modelo mais forte provavelmente ajudará, em vez de afirmar que é o melhor possível.

Fluxo padrão: não pare para perguntar

Execute direto. Escolha padrões sensíveis e mencione alternativas na entrega. Pergunte antes de começar apenas se não houver nenhum assunto (ex.: "faça uma animação", nada mais).

1. Leia o briefing. Inferir a forma (história, explicador, poema, loop, página interativa), duração (padrão 15-20 s; mais longa apenas quando o assunto não pode ser contado nesse tempo) e proporção (padrão 1920x1080) a partir do que o usuário disse. O texto na tela deve estar no idioma em que o usuário escreveu o briefing; torne-o bilíngue apenas se ele pedir ou se o público claramente for. references/forms.md tem uma estrutura curta para cada forma.
2. Planeje o visual e o som a partir do assunto e do público, com suas próprias palavras: o que é o filme, como ele parece e soa, e por que isso se encaixa neste assunto e neste público. Não há lista a preencher; references/techniques.md tem ingredientes, e os valores iniciais são placeholders, não um estilo padrão. Nunca reutilize o visual ou o som de uma peça anterior por padrão: dois assuntos diferentes não devem parecer ou soar iguais. Se o usuário apontar para uma peça de outra pessoa ("como aquela viral"), pegue emprestado suas técnicas, nunca seus personagens, histórias ou composições.
3. Grade de batidas, storyboard e bloqueio, como dados (references/storyboard.md). Primeiro o tempo e as seções; depois uma lista de planos com um ritmo que se encaixe na forma (tabela de ritmo em references/storyboard.md; cada plano com enquadramento, movimento de câmera, ação, a batida em que cai, seu som, sua transição); depois o bloqueio (para uma história ou explicador, as trilhas de um mundo contínuo). Estes vão para a página como BPM, SECTIONS, SHOTS, EVENTS: as cenas, a câmera e a trilha sonora os leem, então imagem e som se alinham por construção. Para uma história ou explicador, verifique a lógica: cada batida causada pela anterior, a metáfora visível na imagem.
4. Construa a partir de templates/starter.html. Ele já é orientado por storyboard: um mundo desenhado em coordenadas mundiais, withCamera por plano, claim() para cada pedaço de texto e cada objeto-chave. Substitua a paleta placeholder e o mundo de demonstração. Mantenha o contrato: draw(frame) é uma função pura do número do quadro. Use rng(seed) / hash2(), nunca Math.random ou Date.
5. Autoverifique, depois renderize (próxima seção). Corrija e verifique novamente até estar limpo.
6. Entregue: o MP4 e o HTML (ele reproduz ao vivo em um navegador; clicar inicia o som). Depois, em uma ou duas linhas, ofereça o que pode mudar: outro visual, música IA em vez de sintetizada, duração diferente.

Para música, use o skill soundtrack (padrão: sintetizada na página com Web Audio, sem chave necessária).

Autoverificação (o agente faz isso; o usuário nunca vê)

node scripts/render.mjs piece.html sheet.jpg --sheet 1        # um quadro por segundo, pulando cortes
node scripts/render.mjs piece.html shot --stills 90,300,610   # momentos específicos
node scripts/render.mjs piece.html piece.mp4                  # renderização completa (+ trilha sonora se a página tiver uma)
node scripts/asset-audit.mjs piece.html                       # prova zero-assets: sai com código 1 se algo for carregado ou embutido
node scripts/layout-check.mjs piece.html                      # texto colidindo com texto, ou sobrepondo um objeto reivindicado
node ../soundtrack/scripts/sync-check.mjs piece.mp4 --cues-file piece.cues.json   # cortes na batida, sem sustos

Depois duas passadas a olho, ambas em references/qc.md:

1. Conformidade com o storyboard: um still na batida de ação de cada plano, lido contra sua linha (o ator está onde o bloqueio diz, fazendo o que a linha diz?).
2. Passada do diretor: a folha de contato a 2 quadros por segundo (--sheet .5), pontuada quanto ao ritmo em relação à forma, variedade de enquadramentos, quadros mortos, se cada ação tem seu som e se o visual se adequa ao público. Faça pelo menos duas rodadas. Renderize stills dos quadros que você altera em vez de re-renderizar o filme inteiro a cada vez.

Apenas se acionado

Quando	Faça
Um personagem aparece em mais de uma cena	Antes das cenas, renderize o personagem sozinho (expressões + poses) e verifique você mesmo contra references/character.md. Personagens expõem pontos de ancoragem (boca, mãos) para que adereços se liguem a eles.
O usuário forneceu fotos de pessoas reais, animais de estimação ou lugares	Construa o personagem a partir das fotos com o método de extração em references/character.md. As fotos permanecem locais: nunca as carregue ou coloque em algo publicado.
É uma peça com pessoas reais e o usuário está presente	Na entrega (não antes), ofereça o uso de fotos de adereços ou pessoas-chave para torná-la mais pessoal.
Texto ou balão de fala segue um personagem em movimento	Posicione-o com placeFree(w, h, [above, right, left, below]) para que se afaste de qualquer coisa já reivindicada.
O texto na tela não é latino (chinês, japonês...)	Use uma pilha de fontes CJK; verifique se cada glifo renderiza (fontes monoespaçadas trocam glifos ausentes silenciosamente, ex.: ≈ virou =).
A página será publicada como página web	Entregue o HTML; mantenha o loop de pré-visualização ao vivo e o áudio clicar-para-tocar.

Regras que previnem falhas comuns

• Função pura do tempo. Sem estado requestAnimationFrame, sem animações CSS, sem física acumulada: compute cada quadro a partir de t sozinho, ou a renderização e a pré-visualização discordarão.
• Uma linha desenhada à mão ferve, não trepida. Quando um filme define LOOK.wobble, mude a semente de wobble a cada 4 quadros (LOOK.boil: 4), não a cada quadro. Cada quadro lido como ruído; ~7,5 mudanças por segundo lido como desenhado à mão.
• Formas arredondadas para corpos. Construa figuras a partir de elipses e retângulos arredondados. Polígonos brutos com poucos pontos leem como sinais (uma mão pentagonal, um tronco quadrado).
• Escolha o ângulo que faz a pose ser legível. Um corpo longo com membros atarracados de lado lê como uma lagarta; a mesma pose de frente (encurtada) lê como um bebê de barriga para baixo.
• Desenhe de trás para frente, explicitamente. Cabelo de trás, depois corpo, depois pescoço, depois rosto, depois cabelo da frente. A maioria dos bugs de "algo cobre o rosto" é ordem de desenho.
• Acerte os pontos nos cortes e ações. Cada corte e cada ação visível está em EVENTS/CUES; a trilha sonora incide sobre eles (veja soundtrack).
• Texto nunca colide. Reivindique cada caixa de texto e objeto-chave; layout-check deve imprimir CLEAN. Uma legenda sobrepondo a borda de um monitor ou um rosto parece descuidada, e olhos em uma folha de contato perdem isso.

Arquivos

• templates/starter.html: biblioteca de desenho (tinta, ilustração, primitivas planas/esquemáticas, rótulos, papel, camadas filtradas), withCamera, claim/placeFree, e um esqueleto de dois planos orientado por storyboard.
• scripts/render.mjs: MP4 / stills / folha de contato. window.CUES e window.SCORE são opcionais: em uma renderização completa, escreve <out>.cues.json e multiplexa a trilha sonora SCORE (sem SCORE = MP4 silencioso). Precisa de um tamanho de canvas par.
• scripts/asset-audit.mjs: verificação estática + verificação de rede ao vivo para qualquer coisa carregada ou embutida.
• scripts/layout-check.mjs: lê window.LAYOUT ao longo de todo o filme e lista colisões de texto com seus tempos.
• references/storyboard.md: grade de batidas, lista de planos, bloqueio, continuidade e lógica da história.
• references/techniques.md: técnicas de desenho testadas (tinta, impressão em cor-ponto, gravação em linha única, palavras como formas, preenchimentos de marcador, formas de ilustração).
• references/forms.md: notas de estrutura por forma.
• references/character.md: apenas quando houver um personagem.
• references/qc.md: a lista de autoverificação.

Requisitos: Node 18+, ffmpeg, Chrome (ou npx playwright install chromium), e npm i playwright-core na pasta onde você executa os scripts (seu projeto, não a pasta do skill).