10-animation-styles-skill

Estilos de animação

Dez visuais, cada um em um arquivo de código real que o Claude pode apontar para qualquer história. Nada aqui chama um modelo de imagem ou vídeo, então a mesma história renderiza da mesma forma toda vez e não custa nada.

O template vem com um exemplo completo de 22 segundos: Claude voa em um foguete caseiro até a Lua, num estilo diferente a cada batida. Execute-o primeiro para ver cada visual em movimento, depois substitua a história.

Estilos

Arquivo	Estilo	A aparência em uma linha
pixel.js	Pixel art	Desenhado com cerca de 120 pixels de largura e ampliado sem suavização. Paleta pequena, céu pontilhado, HUD de jogo
ps2.js	Estilo PS2	Poucos polígonos, texturas pequenas e enlameadas, névoa, imagem de baixa resolução esticada, HUD de missão
comic.js	Arte de quadrinhos	Linhas grossas de tinta, cores chapadas, pontos Ben-Day, linhas de ação, balões de legenda, um grande BOOM
brick.js	Estilo Lego	Tudo é feito de tijolos de plástico com pinos, sob sol suave
clay.js	Claymation	Formas suaves com marcas de polegar, luz suave, 12 poses por segundo
paper.js	Recorte de papel	Camadas de cartão recortado com pequenas sombras, fibra de papel, 8 poses por segundo
anime.js	Anime retrô	Células dos anos 80: céu gradiente, grande disco solar, linhas de velocidade, um quadro invertido no golpe, granulação de filme
poly.js	3D low poly	Faces planas e luz dura, nada redondo
riso.js	Risografia	Duas tintas em papel off-white, cada uma com seus próprios pontos de meio-tom, impressas ligeiramente desalinhadas
mini.js	Diorama miniatura	Um cenário minúsculo feito à mão sobre uma mesa, papelão e algodão, desfoque tilt-shift

styles.md contém as regras para cada um: o que o faz ser lido como aquele estilo, o que mudar para um novo assunto e o que o quebra. Leia a parte de um estilo antes de escrever sua cena.

Etapas

1. Obter o briefing. Qual é a história ou o aplicativo, vertical (Reels, TikTok) ou horizontal (X, YouTube), e quais estilos? Sem preferência significa 3 a 5 estilos que combinam com as batidas, ou todos os 10 para mostrá-los. Um estilo para o vídeo inteiro também funciona.
2. Escrever a história com copywriter.md. Uma linha por batida. Mostre as linhas ao usuário com o estilo ao lado de cada uma e aguarde uma confirmação.
3. Copiar o template: cp -r ~/.claude/skills/claude-animation-styles/template ~/meu-video && cd ~/meu-video && npm i. Verifique se funciona antes de alterar qualquer coisa: node render.cjs stills 2,6,12 e abra as imagens. Elas mostram a história de exemplo, então exclua stills/ antes de começar a sua.
4. Escrever story.json. format é vertical ou wide. Cada batida tem um style (o nome do arquivo), seconds e sua line. O mesmo estilo pode ser usado para mais de uma batida, e cada uma recebe sua própria cena (veja abaixo).
5. Reescrever a cena em cada arquivo de estilo que estiver usando. Mantenha a aparência, substitua o assunto. Veja "Mudando o assunto" abaixo.
6. Verificar stills após cada estilo: node render.cjs stills 1,3.5,6. Os números são segundos no vídeo inteiro, não dentro da batida, e ele imprime o nome do arquivo de cada imagem. Abra cada uma. O assunto é reconhecível com o som desligado? Ele é lido como aquele estilo? Algo está cortado pelo quadro?
7. Adicionar uma voz, se o usuário quiser: ELEVENLABS_API_KEY=... python3 voice.py [voice_id]. Ele lê as linhas, escreve voice.mp3 e reajusta os tempos das batidas em story.json para corresponder. Sem chave, sem voz, então ajuste os segundos manualmente e adicione música.
8. Renderizar: node render.cjs video --audio voice.mp3, ou apenas node render.cjs video para nenhum som. Ele escreve out/video.mp4. Um vídeo de 20 segundos leva alguns minutos.
9. Ver o vídeo completo antes de entregar: ffmpeg -i out/video.mp4 -vf "fps=1,scale=240:-1,tile=8x4" -frames:v 1 out/sheet.jpg (uma imagem por segundo, então células vazias no final são normais). Você não pode ouvir, então peça ao usuário para verificar o som.

Para colocar música sob a voz, 14 dB mais baixa que a voz: ffmpeg -i voice.mp3 -i music.mp3 -filter_complex "[1]volume=0.2[m];[0][m]amix=inputs=2:duration=first:normalize=0" audio.wav Meça ambos com -af ebur128 e ajuste o volume, pois as faixas variam muito em intensidade.

Mudando o assunto

Cada arquivo de estilo tem um create que constrói o mundo uma vez, e um render(t, ctx, dur) que desenha qualquer momento, onde t é segundos dentro da batida e dur é a duração da batida. Ele só olha para t, então qualquer quadro pode ser desenhado em qualquer ordem.

Um estilo usado duas vezes. create recebe index (a posição da batida em story.json), line e beat. Salve this.index = index e desenhe uma cena diferente para cada um. Não teste start para isso, porque ele muda sempre que o tempo muda.

Estilos 2D (pixel, comic, paper, anime, riso). O assunto é desenhado através de um pequeno pintor: paint.fill(path, key) e paint.lines(segments, width, key), com cada estilo decidindo o que eles fazem. Em comic, eles adicionam linhas de tinta. Em paper, eles adicionam uma sombra. Em riso, eles aplicam densidade de tinta. lib/common.js tem os assuntos de exemplo, drawClaude e drawRocket. Escreva um drawCat, drawPhone ou drawFounder da mesma forma, usando os mesmos nomes de peça em todos os estilos, e ele pega cada visual de graça. Um novo nome de peça (fur, apron) precisa ser adicionado à paleta daquele estilo, que é PAL em comic, paper e anime e toneA e toneB em riso, ou ele pintará na cor errada sem erro. Pixel art desenha seu próprio sprite, então escreva esse manualmente.

Estilos 3D (ps2, brick, clay, poly, mini). lib/three-claude.js constrói o assunto a partir de formas simples, com um kit decidindo quantos polígonos e qual material. Construa seu assunto da mesma forma: makeCat(kit). O estilo lego é a exceção, já que tudo precisa ser construído a partir de tijolos, então copie seu helper add.

Mantenha o assunto igual em todos os estilos. Mesma silhueta, mesmas duas ou três cores. Isso é o que faz uma mudança de estilo ser lida como a mesma história em vez de um novo clipe. Uma forma simples reconhecível vence um personagem detalhado.

O que faz esses funcionarem

• Mude o estilo em um corte seco. Corte diretamente para o próximo visual. A surpresa disso é a transição.
• Uma coisa grande se movendo no centro. As pessoas precisam entender cada batida em menos de um segundo, geralmente em um telefone com o som desligado.
• Cada batida de 1,5 a 3 segundos. Tempo suficiente para ver o visual, curto o bastante para que fiquem para a próxima.
• Mantenha a história se movendo através do corte. Se o foguete está subindo no final de uma batida, ele ainda está subindo no início da próxima.
• O texto pertence ao estilo. Um HUD nos visuais de jogo, uma caixa de legenda no visual de quadrinhos. Evite legendas sobrepostas.

Se algo der errado

• Puppeteer ou Three.js ausentes: npm i na pasta com render.cjs.
• ffmpeg ausente: brew install ffmpeg em um Mac. Stills funcionam sem ele, o vídeo precisa.
• Quadros 3D pretos ou renderizações muito lentas: a renderização usa a GPU em um Mac e um renderizador por software em outros lugares (render.cjs, a linha gl). A renderização por software funciona e leva muito mais tempo.
• Manchetes na fonte errada: a página carrega Inter Tight e Bangers do Google Fonts, então precisa de internet durante a renderização.
• Uma palavra no estilo comic aparece tarde: a contagem regressiva lê tempos de palavra de voice.json quando há uma voz. Altere as palavras que ele procura em comic.js.

Mantenha para você

Copie os visuais e crie seus próprios assuntos. Não use o logotipo de uma marca, personagens de um jogo ou peças de cenário de uma empresa real na tela, e não copie a cena de outro criador quadro a quadro.