Communitygithub.com

Th3warhawk/cartoon-audio-short

Cria um curta de animação vertical no estilo cartoon. Oferece 10 ideias, escreve o roteiro e transforma a narração do usuário em um MP4 finalizado com música e efeitos sonoros a 50% do volume da voz. Use para qualquer pedido de curta animado ou história em vídeo.

O que é cartoon-audio-short?

Esta skill permite que um agente de IA crie curtas-metragens animados completos, de estilo cartoon vertical (1080x1920, 30 fps), a partir de uma ideia, roteiro ou narração fornecida pelo usuário. Ela é projetada para uso com agentes de codificação como Claude Code, Cursor ou Codex, oferecendo um pipeline automatizado de 4 estágios: ideação (10 sugestões de vídeo), escrita de roteiro, sincronização de voz e construção de vídeo (modelagem 3D, animação, iluminação, som e renderização). O fluxo de trabalho é altamente detalhado, com especificações técnicas precisas para níveis de áudio (música e SFX a 50% do volume da voz), estilo visual (personagens 2D card em um mundo 3D), animação de câmera e motion graphics. A skill usa um kit de código local (`kit/`) com mecanismos Three.js e ferramentas Python, garantindo que o agente possa executar cada etapa sem depender de serviços online. É ideal para criadores de conteúdo, desenvolvedores que desejam prototipar animações rapidamente ou qualquer pessoa que queira transformar uma história em um vídeo animado polido sem edição manual.

Funciona com✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Th3warhawk/Claude3d_Short_Skill/tree/HEAD

Perguntar na sua IA favorita

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

Documentação

Curta cartoon: ideia → roteiro → narração → MP4 finalizado

O visual: personagens cartoon 2D de cabeça de feijão ("cartas" desenhadas em tela com contornos de ameixa) em um mundo 3D colorido com contornos de tinta preta, texturas pintadas, profundidade de campo e câmeras deslizantes. A saída é 1080x1920, 30 fps, exatamente com a duração da narração. A voz do usuário permanece inalterada. O fundo musical e os SFX são sintetizados e ficam em 50% do nível da voz. Comprovado em "O Soldado Que Nunca Partiu" (19,7 s, 8 planos).

Regras

  • Histórias, personagens e planos são sempre originais. Nunca recrie o vídeo de outro criador plano por plano. Ofereça uma abordagem original sobre a mesma ideia.
  • Sem pessoas reais, vivas ou nomeadas como personagens, e sem mascotes de marcas ou logotipos.
  • Sem legendas, a menos que o usuário peça. Texto diegético (uma mensagem esculpida, uma placa) é permitido, e deve ser legível (não espelhado).
  • Nunca edite ou re-temporize a voz. A imagem é sincronizada com ela, e cada reação visual ocorre 0-3 quadros antes de sua palavra.
  • Níveis de áudio: o fundo musical fica a 50% do nível da voz (−6 dB, RMS com porta). SFX ficam a 50% ou um pouco menos, com picos limitados para que nenhum impacto se sobressaia à narração. Sempre misture com mix.py, nunca manualmente. Não use ducking ou compressão que altere essa proporção; apenas um ganho linear mais um limitador de pico é aplicado à mixagem inteira.
  • Mantenha o usuário informado com uma lista de tarefas. Envie uma folha de contato de stills antes da renderização longa.

Estágio 1: Recepção (sempre primeiro)

Se um arquivo de áudio já estiver anexado, vá para o Estágio 4. Se um roteiro também foi fornecido, use-o para a temporização. Caso contrário, faça uma AskUserQuestion (ou texto simples se essa ferramenta estiver ausente): "De onde você está partindo?"

  • Narração pronta: peça para enviá-la, junto com o texto do roteiro se tiver (o roteiro torna a temporização exata). Vá para o Estágio 4 quando chegar.
  • Tenho um roteiro, preciso da narração: ajuste o roteiro conforme o Estágio 3, se necessário, devolva-o com dicas de gravação, peça o upload e vá para o Estágio 4.
  • Preciso de ideias de vídeo e um roteiro: vá para o Estágio 2. Pergunte também a duração desejada, se o usuário não a informou. O padrão é 20-30 s; 45-60 s é permitido.

Estágio 2: 10 ideias de vídeo

Dê exatamente 10 ideias em uma resposta, numeradas, e peça ao usuário para responder com um número (ou "mais"). Cada ideia deve ter:

  • Título (5-8 palavras, que desperte curiosidade, ex.: "O Soldado Que Nunca Partiu").
  • Frase de gancho: a primeira frase falada, um paradoxo apresentado como fato ("Um homem vendeu a Torre Eiffel. Duas vezes.").
  • A reviravolta em uma linha (a ironia final que encerra o vídeo).
  • Por que anima bem: os 2-3 grandes momentos visuais (um desabamento, uma revelação, uma perseguição).
  • Verdade ou lenda: diga claramente se é história documentada, relato contestado ou folclore.

O que torna uma ideia "perfeita" para este formato:

  • Uma história surpreendente com causa e efeito físicos que possam ser mostrados.
  • Um personagem comum claro, riscos que aumentam, e uma reviravolta na última linha.
  • Um cenário que possa ser construído a partir de formas 3D simples mais cartas cartoon (cidades, pontes, navios, castelos, desertos, laboratórios, palácios).
  • Misture as 10 entre épocas e temas: antigo, medieval, 1800, moderno, ciência, animais, invenções, desastres, leis estranhas, acidentes sortudos.
  • Para qualquer coisa apresentada como verdade, verifique os fatos principais com uma pesquisa na web antes de oferecê-la. Não apresente uma lenda viral como fato. Se o usuário quiser mesmo assim, enquadre como "a lenda diz".
  • Nenhuma pessoa real viva como alvo de piada, nada gráfico e nada político.

Estágio 3: Roteiro (após a escolha)

Escreva apenas a narração (sem indicações de cena no texto falado), dimensionada em cerca de 3,7 palavras/s: 20 s ≈ 75 palavras, 30 s ≈ 110, 60 s ≈ 220. Fórmula:

  1. Gancho (frase 1, sem introdução): o fato absurdo.
  2. Cenário em 1-2 linhas: quando, onde, quem, um detalhe concreto.
  3. Escalada, 2-4 batidas, cada uma maior. Outros duvidam ou zombam. Use uma piada de exagero.
  4. Mistério ou pivô: "Mas quando..." / "Vê," introduz o mecanismo real, geralmente com uma analogia cotidiana.
  5. Reviravolta/pagamento: curto, irônico, e as últimas palavras do vídeo. Use inglês falado simples, contrações, frases de 8-15 palavras e números escritos por extenso. Nunca descreva o que o espectador já vê.

Em seguida, responda com:

  • O roteiro em um bloco copiável, com a contagem de palavras e duração estimada.
  • Um plano visual de um parágrafo (os planos que você animará).
  • Dicas de gravação: uma voz de narrador firme e calorosa; ElevenLabs funciona bem (voz de narrador grave, velocidade cerca de 1,05-1,1, estabilidade cerca de 45-55 %). Mp3 ou wav são adequados. Deixe pausas naturais no final das frases. Exporte sem música.
  • O pedido: "Envie a narração quando estiver pronta e eu farei o vídeo completo." Mantenha o texto final do roteiro. Ele orienta a temporização no Estágio 4, portanto nenhum reconhecimento de fala é necessário. Se o usuário gravou uma versão modificada, peça o texto final.

Estágio 4: Construir o vídeo (após o envio da narração)

Faça tudo daqui em diante sem parar. Pergunte apenas se a temporização não puder ser resolvida.

4.0 Obter o kit

O kit de código vem dentro desta pasta de skill em kit/ (mecanismo, ferramentas, exemplo funcional, além de three.js r160 vendido e a biblioteca toon.ts Pen de github.com/mromidev/claude-animated-shorts, ambos MIT). Localize a pasta com find / -name SKILL.md -path "*cartoon-audio-short*" 2>/dev/null e trate seu kit/ como somente leitura.

Em seguida, execute bash <skill>/kit/tools/setup.sh ~/shorts/<slug>. Ele copia o mecanismo e as ferramentas para o projeto, instala o three.js vendido, remove os tipos de toon.ts com module.stripTypeScriptTypes do Node 22 e vincula o Playwright. Nenhuma rede é necessária. Se os arquivos vendidos estiverem faltando, ele usa npm ou um clone git como fallback.

  • Requisitos: Node 22.6+, Python 3 com numpy + Pillow, ffmpeg e Playwright com Chromium (npm i -g playwright && npx playwright install chromium se faltar).
  • Se os registros de pacotes estiverem bloqueados, o git via GitHub geralmente funciona. Nunca desabilite TLS ou contorne o proxy.
  • Chromium: use o navegador Playwright pré-instalado com --use-angle=swiftshader --enable-unsafe-swiftshader --ignore-gpu-blocklist. Isso fornece WebGL por CPU a cerca de 3-10 s por quadro.

4.1 Temporização

Execute python3 timing.py voice.mp3 script.txt --out work.

  • Com whisper ou faster-whisper instalado, ele usa timestamps de palavras.
  • Caso contrário, alinha frases do roteiro (divididas por pontuação) a segmentos de fala detectados por silêncio, com um DP que combina sílabas à duração e penaliza finais de frase dentro de um segmento e longas pausas dentro de uma frase.
  • Sem ASR e sem roteiro, peça o roteiro. Claude não pode ouvir áudio.
  • Verifique work/phrases.json: pausas devem cair no final das frases. Total de quadros = round(duração × 30).

4.2 Plano de planos (work/PLAN.md antes do código)

Faça uma linha por plano: quadros, palavras, cenário, luz, movimento de câmera, personagens/poses/expressões, efeitos e dica de SFX.

  • O quadro 0 já é a imagem de gancho.
  • Geralmente um plano por frase. Mescle frases minúsculas no próximo plano.
  • Ilustre cada frase literalmente. Adereços carregam as piadas.
  • Varie os tamanhos de plano: gancho em médio primeiro plano → abertura ampla → plano duplo → close-up no objeto-chave → close-up de reação → movimento de ambiente para o desfecho.
  • Use luz para as batidas: dia para normal, dourado para declínio ou drama, azul noturno para explicação. Uma mudança de tempo recebe um flash branco de 6 quadros.
  • A linha de reviravolta recebe um sting (música para, batida grave, push-in com rotação). O pagamento físico do último plano ocorre na palavra final.

4.3 Mundo (web/main.js)

Mantenha as seções do mecanismo: materiais toon, contorno de tinta, add/tbox, céu, luzes, cartas, alvos de renderização/pós, applyLight, drawActors, swapForNd, renderFrame. Substitua o mundo de exemplo entre // ---------- world ---------- e // ---------- cards ----------, mais as partes da história de worldState().

  • Construa a partir de primitivas com texturas de tela pintadas (paint.js: tábuas, vigas, madeira podre, pedra, musgo/heras, grama, terra, gesso, telhas, mármore, faixas, texto esculpido). Escreva novos pintores no mesmo estilo plano com costuras escuras.
  • Use tbox para densidade de texel constante, um gradiente toon de 2 etapas e névoa = cor do horizonte.
  • Fundo: colinas (esferas semi-enterradas), montanhas (cones + topos de neve), ciprestes/pinheiros, casas distantes, painéis de nuvens pintadas.
  • Peças de cenário (desabamentos, quedas, portas) são grupos pivotados impulsionados pelo progresso 0..1 de worldAt(f), com partes suavizadas e escalonadas.
  • Texto diegético curvo usa UVs planares. Verifique se não está espelhado.

4.4 Elenco (web/roman.js → web/toon.js)

  • romanFront(p, outfitKey, opts) desenha em uma tela de design 600x1000 com solas em y=975. A carta tem 2,25 m de altura, então 1 unidade = 0,00225 m.
  • Adicione roupas a OUTFITS (túnica/capa/armadura/elmo/cabelo/gorro/barba/avental/vestido/toga) e novos adereços de cabeça e acessórios no mesmo estilo.
  • Poses de braço: pendurado, lança, apontar, cima, acenar, quadril, barriga, templo (+redemoinho), levantar, alcançar (+levantar), bochecha, escudo, cruzar, polegar.
  • Expressões: o conjunto FACE de toon.ts mais ronco, teimoso, apertar os olhos. Estenda FACE para mais.
  • Reconstrua após edições com cat web/toonbase.js web/roman.js > web/toon.js. Renderize uma folha de teste de personagem antes de usar novos designs.
  • Painéis giram apenas em guinada, recebem uma bolha de contato e uma sombra testada por alfa, e nunca são contornados pela passagem do mundo.
  • Construa chaves de carta a partir de valores arredondados com q() (para que a tela seja redesenhada apenas em mudanças visíveis).
  • Uma parte destacada (ex.: um elmo levantado) é sua própria carta, alinhada com headCenter(seed): y = DECK + (partY − hc) × 0,00225.

4.5 Movimento: suave e vivo (web/motion.js)

  • Câmeras: camFromKeys(keys, f, {kicks}). Use deslizes smootherstep (18-45 q), easeOut para revelações e chicotadas, e path via pontos (Catmull-Rom) para movimentos curvos. Cada parada se arrasta e nada fica estático por 4+ quadros. Use 3-5° de rotação em drama e tremores de 7 quadros em impactos.
  • Continuidade: prefira movimentos contínuos (recuo de um close-up para o plano amplo, rack de foco, grua através do deck, push em um objeto). Corte seco apenas em mudanças de lugar ou tempo, com um flash.
  • Personagens nunca congelam: aplique idle(f, seed) a cada carta, blinkAt piscadas, e balanços de cabeça em palavras estressadas.
  • Ações: antecipação → back overshoot → spring settle. Um pisão é uma mergulhada de 2 quadros + sopro de poeira + chute. Risos são uma inclinação alternada + balanço.
  • Movimento secundário: ondas de pano de faixa, folhas/poeira/gotas/efeitos Zzz, água fluindo. Algo sempre se move.
  • Andadas: walk() dá distância + fase de passo. Pés plantados, balanço 3-7 %.
  • Lente: DOF em close-ups e médios (cInf 8-14 px), foco nos olhos. Planos abertos são nítidos. Racks levam ~14 q.

4.6 Verificação visual (antes da renderização completa)

Renderize stills no meio de cada plano, mais as transições e ações-chave: node render.mjs stills/a "5,40,..." e depois python3 sheet.py stills/a stills/sheet_a.jpg. Olhe a folha e corrija estas armadilhas:

  • Moldura vertical estreita: metade da largura horizontal = d·tan(hfov/2), com hfov = 2·atan(tan(vfov/2)·0,5625). A 4 m e fov 40 isso é ±0,8 m, então posicione os personagens em profundidade.
  • Grades ou postes sobre rostos (câmera dentro da grade ou ~2,5 m acima). O caminho da câmera através de casas, telhados ou arbustos. Adereços em primeiro plano a menos de ~2 m. Herói escondido atrás de um pilar.
  • Texto espelhado. Deslocamento de carta de parte destacada na direção errada.
  • Grupos de materiais extrudados: 0 = tampas, 1 = lados+tampa.
  • Tinta faltando: depure a saída apenas de bordas. Raio de tinta ~2,5 px em 1080. O céu conta como profundidade distante, não uma carta. Envie a folha ao usuário com um resumo de uma linha por plano e inicie a renderização completa.

4.7 Som (audio.py → stems → mix.py)

Reescreva a tabela de dicas para a história; os sintetizadores permanecem. audio.py escreve apenas stems (music.wav, sfx.wav).

  • Música: um loop curto de marcha (bumbo/caixa, baixo dedilhado, pad de metais). Para na linha de reviravolta, então um drone grave continua.
  • SFX em eventos (em quadros/30): whooshes em movimentos grandes, thunk em pisões, estrondo+crash em desabamentos, raspagem em metal, ting em revelações, sting na reviravolta, rangidos, estalo, splash, ronco, folhas, ambiência de água.
  • Misture com python3 mix.py voice.mp3 music.wav sfx.wav. Ele define a música exatamente a 50% do RMS com porta da voz (−6 dB) e SFX a 50% com picos limitados a 0,7× o pico da voz. Ele imprime os níveis medidos: confirme que a música mostra −6,0 dB vs voz e SFX está igual ou abaixo disso.
  • Trave a temporização da imagem antes de fazer o som. Qualquer mudança de temporização significa executar novamente audio.py e mix.py.

4.8 Renderizar + finalizar

  • Execute node render.mjs frames "0-<N-1>" com Bash run_in_background, monitorado por um loop Monitor que relata progresso e captura erros ou saída do processo. RESUME=1 continua após uma interrupção. Não execute Python pesado ao mesmo tempo em máquinas pequenas.
  • Execute bash finish.sh "Título". Ele aplica um ganho linear para cerca de −14 LUFS mais um limitador de pico de −1 dBFS, codifica H.264 CRF 17 + AAC, executa QA de congelamento/preto e loudness e escreve out/qa_sheet.jpg. Olhe a folha. Trechos congelados ≥0,4 s ou quadros pretos precisam de correção.
  • Entregue o MP4 com SendUserFile e algumas linhas sobre o que cada plano mostra. Ofereça legendas, ajustes ou a próxima ideia da lista.

Peculiaridades do mecanismo (mantidas no kit; mantenha-as se reconstruir)

  • #include <fog_vertex> / <fog_fragment> vão em suas próprias linhas.
  • A passagem final escreve linearToOutputTexel(...) (alvos de renderização são HalfFloat linear).
  • A passagem de normal+profundidade troca materiais por malha: mundo → normal/profundidade, cartas → máscara testada por alfa (rgb 0, a = profundidade), bolhas/nuvens/céu ocultos, água → normal plana. Névoa e sombras estão desligadas durante ela.
  • A tinta vai apenas no lado próximo de saltos de profundidade. Vincos vêm do produto escalar da normal. Vizinhos de carta são ignorados. A tinta desaparece em ~140-520 m.
  • DOF: 48 amostras com um teste CoC por amostra (sem vazamento de primeiro plano).
  • O sol vem de az/el por predefinição de luz. A câmera de sombra é centrada na ação de cada plano.

Arquitetura (referência para editar o kit)

  • web/index.html carrega main.js (módulo ES) sobre um servidor HTTP local.
  • main.js: renderizador, materiais toon, mundo, cartas (planos de CanvasTexture 1200x2000, origem nas solas), passa cor (amostras RT 4) → normal/profundidade → tinta+gradação (saturação, ganho/lift, ...

... [truncado para tradução]

Habilidades Relacionadas