O que animate faz?
Transforme referências e uma ideia aproximada em um MP4 onde cada quadro é desenhado por código e o som é sintetizado. O usuário traz o bom gosto; você faz a direção. Um briefing básico é suficiente, então tome as decisões criativas você mesmo e pergunte apenas sobre o que mudaria toda a peça.
Tudo fica em animations/<slug>/:
refs/ study/ style.md beats.md piece.html score.json out/<slug>.mp4
Adicione scripts auxiliares ou notas conforme necessário. examples/bee-dance/ na pasta desta skill é um filme completo.
Nos comandos abaixo, $SKILL significa a pasta desta skill. Execute-os a partir do projeto do usuário com $SKILL/.venv/bin/python
se existir, caso contrário python3. Se um pacote estiver faltando, veja a configuração em README.md. Eles precisam de ffmpeg e Chrome.
Escolha o trabalho
| O usuário quer | Trabalho | Como |
|---|---|---|
| "Animar esta imagem" | Mover a arte | Corte a imagem em camadas e mova-as. Leia references/move-an-image.md. Pule os estágios 3-4 do piece.html; a renderização é um script Python. |
| "Pintar isto", "recriar esta cena" | Repintar | Desenhe a cena inteira em piece.html, combinando a referência de perto. |
| Um tópico ou história "neste estilo" | Novo filme | Processo completo abaixo. As referências definem o visual; o assunto é novo. |
Se eles não definirem duração ou formato, use 15 segundos a 1080x1920 para um filme e 5 segundos para uma imagem em movimento.
Código é forte em formas, linhas, gradientes e textura: vetor plano, arte linear, recorte de papel, risografia, aquarela, fundos de anime, pranchas botânicas. É fraco em fotorrealismo e em rostos com atuação. Se uma referência é fotorrealista, diga isso antes de construir e proponha uma versão ilustrada.
Estágio 1: Estude cada referência
O usuário pode lhe dar muitas referências, então dê a cada uma um papel em vez de tirar uma média que vira mingau.
python3 $SKILL/scripts/study.py animations/<slug>/study <arquivos ou pastas...>
Isso fornece, por referência, uma folha de contato, uma paleta e, para vídeos, os cortes e a curva de ritmo. Se apenas parte
de um vídeo importa, adicione seu intervalo em segundos, como em "reel.mp4@0-12", ou imagens de cabeça falante distorcem os resultados.
Em seguida, olhe as folhas você mesmo e recorte onde a textura importa. Números não podem dizer por que algo parece bom.
Escreva style.md:
- O que cada referência nos dá, uma linha cada: textura desta, tipo daquela, ritmo de outra.
- O que não copiaremos: poses, personagens, logotipos, assinaturas, composições exatas. Pegue o estilo, não o trabalho; a exceção é um trabalho de Repintar ou Mover em uma imagem que o usuário pediu para animar.
- Paleta como valores hexadecimais, tipo (
assets/fonts/tem dois para começar, ou copie qualquer fonte aberta), textura, sensação de movimento. - Um dispositivo que amarra a peça: uma lente, uma ondulação, uma linha que nunca se quebra. Filmes sem um parecem um slideshow.
Adicione um pequeno cartão para cada nova referência em animations/library.md, para que suas lições sobrevivam a este projeto. Reutilize
cartões quando o usuário apontar para um estilo que já usou antes, e estenda um apenas quando você aprendeu algo novo.
Portão: você consegue dizer em uma frase como esta peça parece e por que isso serve ao tópico.
Estágio 2: Batidas
Se houver fatos na peça, verifique-os primeiro. Uma afirmação errada desenhada lindamente ainda está errada, e "fatos" populares são frequentemente soltos. Anote qualquer coisa que você suavizou para o relatório final.
Escreva beats.md como uma tabela. Imagem e som são planejados juntos porque essa sincronia é o que faz parecer
caro:
| Tempo | Imagem | Som |
|---|---|---|
| 0-1.5 s | Uma gota laranja cai e se espalha | Gotejar, floração molhada, pad entra |
| 1.5-3 s | Linha do título, detalhes aparecem | Dedilhado por palavra, pequenos tiques |
Portão: algo se move no primeiro meio segundo; a forma é gancho, construção, uma respiração, recompensa; nenhum trecho acima de 2 segundos sem uma nova ideia de imagem; o final segura cerca de 1,5 segundos para que possa ser lido. Deixe a imagem carregar as novas ideias em vez das palavras: cada legenda precisa de cerca de 1,5 segundos na tela, então corte legendas antes de encurtá-las. Mantenha o texto fora dos 12% superiores e 18% inferiores de um quadro vertical.
Estágio 3: Construa a imagem
Copie assets/piece-template.html para piece.html e desenhe nele. O contrato é window.PIECE mais
window.renderFrame(t).
renderFrame(t) deve depender apenas de t, e pode ser assíncrona. Imagens estáticas saltam direto para qualquer tempo, então qualquer coisa lembrada
entre quadros, ou qualquer Math.random() sem semente, quebra isso. Pinte camadas estáticas caras uma vez dentro de window.ready,
a partir de um gerador seedado, depois componha por quadro.
Para mostrar outro filme dentro de uma peça, extraia seus quadros para clips/ como JPEGs numerados, carregue o que precisa com uma
Image dentro de um renderFrame assíncrono, e desenhe no canvas.
Leia references/styles.md antes de desenhar; ele tem receitas funcionais (nuvens cel, folhagem, figuras andando, água,
aquarela, papel) e os arquivos fonte para copiar. Profundidade vem de camadas se movendo em velocidades diferentes, vida
vem de pequeno movimento secundário: balanço, deriva, cintilação, tremulação.
Revise imagens paradas cedo e frequentemente, muito antes de uma renderização completa:
python3 $SKILL/scripts/render.py animations/<slug>/piece.html --stills 0.5 3 7 12
Olhe para elas em tamanho real, compare-as lado a lado com as referências, e corrija o que estiver errado. Espere várias rodadas. A primeira imagem parada é geralmente um rascunho, e este ciclo é de onde vem a qualidade.
python3 $SKILL/scripts/compare.py animations/<slug>/out/compare.jpg <imagens paradas e imagens de referência...>
Portão: uma imagem parada do meio parece ter sido feita com os mesmos materiais das referências: mesmo papel, tinta, linha e cor. O assunto pode ser novo. Versões clip-art da referência não passam.
Estágio 4: Som
Escreva score.json com os mesmos tempos de beats.md. Veja o cabeçalho de scripts/synth.py para os sons
disponíveis: dedilhados, sinos, pads, gotejamentos, tiques, crescendos, whooshes, impactos, kicks e camadas de ruído.
python3 $SKILL/scripts/synth.py animations/<slug>/score.json animations/<slug>/out/score.wav
Fique em um tom. Acerte os hits nos eventos de imagem, não em uma grade. Deixe silêncio real antes da recompensa, porque o contraste é o que faz funcionar. Gere longas sequências de notas com algumas linhas de Python em vez de digitá-las.
Você não pode ouvir, então leia o relatório de nível que synth.py imprime: procure por quedas que você não planejou, e pelo som
característico sendo soterrado pelo resto.
Se a peça for narrada
A narração vem antes da imagem, porque os tempos das palavras definem cada batida. Grave-a com a ferramenta de voz que o usuário tiver, transcreva com tempos de palavra (faster-whisper funciona), depois construa as batidas e legendas a partir desses tempos. Whisper pode começar uma palavra cedo no silêncio antes dela, então verifique a forma de onda antes de cortar uma pausa.
Misture a voz sobre a trilha, depois renderize com o resultado como --audio. A trilha abaixa sob a voz, então a música sobe
nas pausas:
python3 $SKILL/scripts/mix.py animations/<slug>/out/voice.wav animations/<slug>/out/score.wav animations/<slug>/out/mix.wav
Estágio 5: Renderize, verifique, corrija
python3 $SKILL/scripts/render.py animations/<slug>/piece.html --audio animations/<slug>/out/score.wav
python3 $SKILL/scripts/qc.py animations/<slug>/out/<slug>.mp4
render.py escreve out/<slug>.mp4, masterizado para -14 LUFS. Ele imprime o progresso e leva cerca de 1-2 minutos para 15
segundos de uma peça típica; execute em segundo plano se a peça for pesada. Após uma alteração apenas de som, adicione --remux
para trocar o áudio em segundos sem redesenhar.
qc.py sinaliza trechos mortos, falhas de um quadro e volume, e escreve uma folha de contato. Não pode julgar se o
movimento parece bom, então leia a folha também, depois percorra os momentos arriscados quadro a quadro em recortes ampliados:
transições, texto entrando e saindo, onde camadas se sobrepõem, e um ciclo completo de qualquer movimento repetido. Corrija e renderize novamente até
ficar limpo.
Entrega
Relate na linguagem simples do usuário: o que você fez, como cada referência foi usada, o que você verificou e o que não pôde verificar. Você não pode ouvir a trilha ou assistir em velocidade, então diga isso. Adicione:
- Um fato para saber, se você suavizou uma afirmação.
- Ajustes fáceis: 3 ou 4 mudanças específicas que eles poderiam pedir depois.
- Se uma referência pertence a outra pessoa e precisa de reflexão antes do uso comercial.