z1fex/3d-cartoon-animation

Animação 3D Cartoon

Versão 1.0.1 (edição pública) · método e aparência aprovados pelo proprietário na rodada 1 ("Como a gravidade foi descoberta", v3, 26 de outubro de 2026). 1.0.1 permite que as ferramentas rodem em qualquer computador; os filmes são renderizados da mesma forma que na versão 1.0.0.

"O proprietário" nestes arquivos é a pessoa para quem os filmes são feitos: quem solicita o filme e o aprova.

Storyboard primeiro (regra do proprietário, 27 de outubro de 2026). Todo filme, e toda nova versão, começa como um storyboard no framework do proprietário. Nada é narrado, construído em detalhes ou renderizado até que ele aprove (skill 4).

Este pacote é uma forma completa e reutilizável de fazer um tipo de vídeo: um curto, rápido e acolhedor explicador em 3D cartoon. Funciona para qualquer tópico. O exemplo trabalhado é sobre gravidade, mas nada no método depende disso: os skills dizem como encontrar o gancho, escalar os personagens, construir os lugares, transformar cada número em um objeto, cronometrar cada gesto com a voz, projetar o som e verificar cada quadro, seja qual for o próximo tópico.

Como é um vídeo finalizado

• Formato: 1080×1920, 30 fps, 30–60 s. Uma cláusula de narração = um plano (uma nova imagem a cada 1,1–1,5 s). A última linha se conecta ao primeiro quadro.
• História: um gancho nos primeiros 2 s que abre uma pergunta; uma recompensa antecipada; riscos contados para "você"; escalada; um novo gancho aos dois terços; uma reviravolta mostrada como uma imagem literal; um final em loop.
• Aparência: sombreamento cartoon suave, contornos a tinta, luzes práticas quentes, luz de borda, profundidade de campo, brilho e granulação. Rostos com tons de pele; cores da marca (Rouge Noir, Blue Coral, Cognac, White Sand, Anthracite) em roupas, adereços e cenários. Coisas reais parecem reais (a Terra é azul e verde).
• Personagens: cabeça redonda, corpo de feijão, membros de palito, mãos de luva; rostos pintados sem sincronia labial; os rostos mudam através de uma piscada pouco antes da palavra estressada; as pausas são completamente imóveis.
• Câmera: sempre em movimento, rastejando entre movimentos, acelerando em dissoluções de 6 quadros na primeira palavra de cada frase.
• Fatos são objetos: todo número falado aterrissa em seu quadro como um contador, calendário, fita métrica, medidor ou placa iluminada.
• Texto: uma pergunta-tópico no topo durante os primeiros 2–3 s ("Como foi descoberta a gravidade?"), e legendas editoriais fixas a 70% da altura (TUDO sobre você sabe).
• Som: uma voz (ElevenLabs), um fundo musical original 18 LU abaixo dela, um som foley suave em cada ação visível e um acento em cada batida da história, masterizado para −14 LUFS.

O pipeline (cada etapa é um skill)

#	Etapa	Skill	Saída
1	Transformar o tópico em uma ideia de filme	topic-to-film	ângulo, gancho, elenco, lugares, lista de números, visão geral
2	Escrever o roteiro	script-and-retention	script.md com fontes
3	Gravar a voz e cronometrar cada palavra	voiceover-and-timing	vo/voice-final.wav, vo/words-final.json
4	Storyboard de cada plano; o proprietário aprova	storyboard-and-shot-plan	storyboard.md, imagens do storyboard, quadro do proprietário (storyboard/<v>/<Title> - storyboard <n>.png e .html)
5	Definir a aparência	look-lighting-and-brand	predefinição de luz, paleta, lente por plano
6	Construir o elenco	characters-and-faces	rigs, roupas, trocas de rosto
7	Atuar cada cláusula	motion-and-acting	poses chave, gags, física
8	Mover a câmera	camera-and-transitions	um movimento orbital por plano
9	Tornar os números físicos	facts-as-objects	um dispositivo por número
10	Construir e decorar os lugares	sets-and-props	lugares do kit, decorados
11	Escrever o texto na tela	captions-and-title-hook	legendas fixas, pergunta-título
12	Projetar o som	sound-design-and-mix	lista de cues, mix, stems
13	Renderizar e verificar cada quadro	render-and-quality-checks	o MP4, o registro de QA
14	Revisar com o proprietário e aprender	review-rounds-and-learning	feedback, próxima versão, atualização do pacote

Siga as etapas nesta ordem. As etapas 4–11 acontecem todas dentro de um arquivo por filme (film.mjs), então na prática você planeja o storyboard, depois constrói plano por plano, renderizando imagens à medida que avança.

Inegociáveis

1. Storyboard primeiro. O proprietário aprova o quadro (skill 4) antes de a voz ser gravada, os planos serem construídos em detalhes ou qualquer coisa ser renderizada.
2. Copie a técnica, nunca o conteúdo. Cada personagem, cenário, placa, piada e nome de marca inventado são nossos. Figuras históricas reais são desenhadas como nossos próprios personagens cartoon; nunca desenhe um personagem protegido por direitos autorais.
3. Gancho primeiro. Os primeiros 2 segundos devem abrir uma pergunta; a pergunta-título nomeia o tópico.
4. Cada número se torna um objeto, aterrissando na palavra falada. Nunca uma sobreposição de texto simples.
5. Gestos aterrissam 4 quadros antes de sua palavra; os rostos mudam 2 quadros antes, através de uma piscada.
6. Cada ação visível tem um som; nenhum som sem uma ação.
7. Cada quadro é verificado (verificação automática de enquadramento e varredura de pulos, depois a olho) antes de o proprietário vê-lo.
8. Fatos são referenciados. Quando as fontes discordam, atenue em palavras simples.
9. A marca do proprietário: rostos com tons de pele, as cinco cores da marca mais o Vermelho da Marca, e as fontes incluídas: TeX Gyre Heros Bold + Instrument Serif Italic para legendas, Titan One para rótulos (ou Helvetica Bold licenciada + Editorial New Italic se o proprietário as adicionar; diga quais). Tudo em brand/.

Início rápido para um novo tópico

1. Copie templates/new-film/ para examples/<slug-do-topico>/.
2. Preencha a planilha de novo tópico (skill 1) e escreva o roteiro (skill 2) em SCRIPT no film.mjs.
3. Construa os planos com temporização provisória e renderize imagens do storyboard: node recipe/tools/render.mjs examples/<slug>/film.mjs <outDir> --stills shots --qa
4. Storyboard primeiro.
   • Copie templates/storyboard.json para examples/<slug>/storyboard/v1/storyboard-1.json, com um painel por plano e sua imagem.
   • Desenhe o quadro: node recipe/tools/storyboard-board.mjs examples/<slug>/storyboard/v1/storyboard-1.json.
   • Entregue o quadro ao proprietário e revise-o (storyboard-2, …) até que ele aprove.
   • Então grave a voz: ELEVENLABS_API_KEY=… node recipe/tools/voiceover.mjs examples/<slug> (após escrever vo/text.txt).
5. Re-temporize para as palavras reais (automático), renderize o vídeo, depois o som: node recipe/tools/render.mjs examples/<slug>/film.mjs <out> --video --name silent.mp4 python -I recipe/tools/sound.py examples/<slug> <out>/silent.mp4 <out>/shots.json "<out>/<Title>.mp4"
6. Verifique: relatório de enquadramento, node recipe/tools/jump-scan.mjs <video> <out>/shots.json, python -I recipe/tools/sfx-levels.py <out> <out>/cue-sheet.txt, depois cada quadro a olho (skill 13).

Onde as coisas estão

Caminho	O que
skills/	os 14 skills das etapas
recipe/engine/	o renderizador: core.mjs (aparência, pós-produção, legendas, composição, verificações), faces.mjs, character.mjs, props.mjs, props2.mjs, kit.mjs (lugares e predefinições de luz neutros ao tópico), places.mjs / places2.mjs (os lugares decorados do exemplo), index.html, vendor/three.js (three.js r186, MIT), fonts/
recipe/tools/	storyboard-board.mjs (o quadro de storyboard do proprietário, como PNG e página HTML clicável), render.mjs, voiceover.mjs, sound.py, jump-scan.mjs, sfx-levels.py, paths.mjs (onde FFmpeg, Chrome e Playwright são encontrados)
templates/	new-film/film.mjs (um iniciador neutro ao tópico que roda com temporização provisória) e as planilhas
examples/how-gravity-was-found/	o filme aprovado: fonte, voz, vídeo final, storyboard, folha de cues, stems, versões anteriores
references/	o estudo de referência, a direção do proprietário, a API do motor, o catálogo de glitches, histórico de feedback, notas do motor
brand/	as cores e fontes do filme aprovado: palette.json, palette.css, style-sheet.png (desenhado por recipe/tools/style-sheet.mjs)
evaluation/	lista de verificação de entrega, critérios de aceitação, limites conhecidos
preview/	style-card.json: o nome do estilo, aparência e formato em um cartão, apontando para o pôster, filme e storyboard do exemplo

Configurando em uma nova máquina

As ferramentas precisam de:

• Node 22+;
• FFmpeg 6+ com ffprobe, no PATH;
• Python 3.10+ com NumPy;
• uma placa gráfica que o Chrome possa usar para WebGL2.

Na pasta do pacote, execute npm install, npx playwright install chromium e pip install -r requirements.txt; o README tem os passos completos. Se o FFmpeg estiver em outro lugar, defina CARTOON_FFMPEG. Para usar outro Chrome, defina CARTOON_CHROME (veja recipe/tools/paths.mjs).

Os filmes devem ficar dentro da pasta do pacote (examples/<slug>/), porque o renderizador serve o pacote para o navegador. A voz precisa de uma chave de API ElevenLabs com permissão de texto-para-fala, passada como ELEVENLABS_API_KEY para o comando único e nunca escrita em um arquivo.