Cartoon 3D Story Short (three.js + Remotion)

Curta-metragem de história em estilo cartoon 3D (three.js + Remotion)

Exemplo comprovado: The Bridge That Fell for a Song. É um curta original de 67 segundos sobre a ponte de Broughton em 1831 e 74 soldados marchando em passo.

• Código: src/videos/bridge/ do seu projeto Remotion (composição BridgeShort, 1080x1920, 30 fps).
• Roteiro, voz e som: ~/bridge-short/.
• Pesquisa de estilo: references/.

A referência de estilo é um canal estudado em particular (references/: STYLE_BIBLE.md, reports/*.md, frames/).

• Esses vídeos são material de estudo privado. Nunca faça upload, publique ou envie-os.
• Nunca copie seus roteiros, personagens ou cenas. A história, personagens e voz são sempre NOSSOS.
• Nunca diga o nome do canal em uma narração ou descrição.

Regras do usuário que se aplicam:

• Sem legendas ou rótulos no vídeo.
• Apenas inglês.
• Voz: um tom constante.
• Piadas são fatos reais pesquisados.
• Mix padrão: música +3 dB, SFX -6 dB, voz inalterada.
• Exportação final 2K vertical: 1440x2560, --scale 1.3333.
• Um verificador Opus max verifica cada etapa.
• Salvar após cada passo.
• "Apenas faça" assim que o roteiro for aprovado.

Pipeline

1. Tópico e fatos. Escolha uma história real surpreendente com uma causa e efeito físico (deve ser visual), mais uma analogia cotidiana simples que a explique.
   • Escreva os fatos com sua fonte no topo de SCRIPT.md.
2. Roteiro (~3,7 palavras/s, 55-70 s). Fórmula de batidas do curta da ponte:
   • Gancho: o fato absurdo em uma linha ("Setenta e quatro soldados derrubaram uma ponte de ferro apenas caminhando sobre ela.").
   • Cenário: ano, lugar, orgulho.
   • Ação: escalada ao longo de três ou quatro batidas, cada uma um pouco maior.
   • Estalo: o momento em que quebra.
   • Linha dupla de humor seco: "Felizmente... / Infelizmente...".
   • Explicação: uma ideia de física através de uma analogia cotidiana (a criança no balanço).
   • Consequência: a regra que criou.
   • Reviravolta final com retorno: o final.
   • Nunca descreva na tela o que o espectador já vê.
3. Voz. Grave ou gere voice.wav, depois faça seus timings de palavras words.json (qualquer serviço de fala para texto com tempos de palavras).
   • Coloque-os na pasta do projeto, ex.: ~/bridge-short/voice/.
   • Corrija manualmente os timings das palavras. Tudo é cronometrado pelo words.json.
4. Plano de cenas em story.ts: copie templates/bridge/ (o código fonte final da ponte, mesmo que src/videos/bridge/ do seu projeto Remotion) para src/videos/<nome>/, registre uma nova composição ao lado de BridgeShort em src/Root.tsx, e renomeie-a.
   • SHOTS: id, quadros a/b, luz dia/dourado, modo multidão, tau tempo da história.
   • XFADE: crossfades em mudanças de lugar/tempo.
   • FLASH_AT: um flash branco após o gancho.
   • CAMS: chaves por cena {f, dur?, cut?, s: f => {pos, look, fov, roll}}.
   • KICKS: impactos com flip e vibração.
   • DOF/dofAt: desfoque de lente por batida.
   • FOREGROUND: adereços de enquadramento próximo.
   • Toda reação visual chega 0-3 quadros antes de sua palavra.
5. Mundo.
   • lights.ts: LIGHTS mais a paleta LOOK de céu/rio/nuvem por luz.
   • shade.ts: sombreamento de dois tons e untone().
   • build.ts: cidade, casas e adereços do kit Kenney CC0, recoloridos, com remoção por linha de visão de qualquer coisa bloqueando uma câmera.
   • paint.ts: texturas pintadas em HD Canvas2D com costuras pintadas como tons escuros.
   • world.ts: shader de céu, névoa = cor do horizonte, rio, pose por quadro, sol congelado por cena e relativo à câmera.
6. Personagens.
   • toon.ts: a API de desenho Pen do Canvas2D, tela de design 600x1000, solas em y = 975, cabeças de feijão, membros de palito, contorno de largura variável ameixa, biblioteca de expressões.
   • cast.ts: painéis voltados para a câmera, multidões, cartões de efeitos, piscadas, ciclos de andar. Todos os painéis vão na camada NOINK.
   • cardshade.ts: cartões iluminados pela luz da cena, sem emissão.
7. Pós (Bridge.tsx + ink.ts + lensblur.ts + grade.ts).
   • Ordem do compositor: ink → lens pre → lens main → bloom → mapeamento de tom NEUTRO → grade (MSAA 4).
   • Todo parâmetro de pixel escala com altura da saída / 1920.
8. Som (~/bridge-short/audio/: timeline.py, sfx_gen.py, sfx.py, music.py, instruments.py, dsp.py, mix.py).
   • Tabela de eventos → SFX sintetizados mais uma trilha sonora original com ducking sob a voz.
   • Saída: mix.wav (48 kHz, duração exata), stems e cues.md.
   • Trave as constantes de tempo da imagem antes de fazer o som. Qualquer mudança posterior de timing significa re-executar o som.
9. Verificações visuais. Execute node scripts/bridge-stills.mjs out/<nome>/x_ 100,400 0.5.
   • Defina BRIDGE_ENTRY=src/sandboxes/<n>/index.tsx para renderizar uma cópia sandbox.
   • Faça comparações lado a lado com quadros de referência usando python scripts/sbs_sheet.py out.jpg --ours ... --ref ....
   • Envie para um verificador Opus max: 1-3 imagens, um veredito de ≤200 palavras.
10. Renderização final.
    • npx remotion render src/index.ts <Comp> out/<nome>/video.mp4 --codec h264 --crf 16 --scale 1.3333
    • Multiplexe com -map 0:v:0 -map 1:a:0 (Remotion escreve uma trilha de áudio silenciosa).
    • QA: python scripts/short_qa.py final.mp4 out/<nome>/qa shots.json verifica cada quadro para quadros pretos, brancos, congelados e pops, além de volume e folhas de estilo.
    • Corrija tudo que encontrar, depois execute uma auditoria Opus profunda.
11. Entrega. Envie para o usuário o mp4 final, atualize a memória, escreva notas.

Valores finais de aparência (ponte após 4 rodadas de verificação; todos em templates/bridge/)

Inicie todo novo curta a partir de templates/bridge/ (copie para src/videos/<nome>/): a aparência vive nesses valores, a história vive em story.ts / layout build.ts / papéis cast.ts. Pontuações Opus max no final: cor dia 7, dourado 5-6, iluminação 5-6, tinta 6, texturas 5-6, personagens 7, profundidade 6-7, composição 6-7 (de 5/3/4/5/4/7/4/6 no início).

• Predefinições de luz (lights.ts, sol relativo à câmera e congelado por cena):
  • dia: az 75 / el 48, iluminado [1.58,1.5,1.33], sombra [.30,.29,.36], lift [.05,.06,.11] (tom frio APENAS na sombra), céu topo #3e7fd2 → horizonte #b8d0ec, névoa = horizonte, 25→300 m, uSat 1.08, ~15% névoa azul após 60 m.
  • dourado: az 6 / el 7 (sol baixo contraluz), chave em direção a #FFB36B ×1.5, sombra violeta-azul (fachada ≈ #444380), céu #ffc47c → #8a6f8a, névoa pêssego apenas após 50 m, disco solar #ffcf9e + bloom, gotas de contato + sombras reais de cartões.
• Albedos (paint.ts/build.ts): casas em tijolo opaco / creme / ocre / terracota com plinto, cornija, soleiras, capuzes, degrau da porta, chaminé + vaso, alturas 7 / 8,4 / 9,8 m; pedra cinza quente/bege (saturação −35% do "conto de fadas"); deck de madeira ocre C* ~51-58 com costuras quase pretas; ferro escuro e dessaturado. Nunca limão, nunca faces iluminadas em lavanda.
• Tinta (ink.ts): #030303, 5,1 px perto (6 m) → 3,3 px longe (90 m) em 1080x1920, vincos ×0.8 a partir de 35°, saltos de profundidade a partir de 1%, matiz de névoa 0,3 apenas longe; cartões de personagens na camada NOINK (eles carregam sua própria tinta ameixa).
• Lente (lensblur.ts + dofAt em story.ts): cInf px em 1080: gancho/rio CU 15-16, close-ups 12-14, MS 10-12, parque 7, balanço dourado 5, planos abertos/aéreos 0. Foco nos olhos da fileira da frente.
• Pós (Bridge.tsx): ink → lens pre → lens main → bloom (thr 1,0, int .5, 6 níveis, raio .6) → mapeamento de tom NEUTRO → grade; MSAA 4. O grão de filme existe mas está DESLIGADO (a referência não mede grão; ele quadruplica o tamanho do arquivo).
• Personagens (toon.ts/cast.ts/cardshade.ts): cabeças de feijão a/l .94, tinta ameixa #241726, olhos separados por .26 W, sem blush, 14 expressões; adultos 3,5 alturas de cabeça; balanço ao andar 5%, inclinação 1-7°, passos plantados 0,8 m; piscadas 0,5-2,3 s; sombra de contato apertada ~.5 sob os pés + cauda na direção do sol durante o dia; borda dourada apenas interna (nunca uma cópia externa deslocada).
• Câmera (story.ts): cortes em grandes saltos, deslizes smootherstep 18-40 q, cada parada se arrasta (sem parada estática ≥4 q), chutes com virada decaindo por 7 q em impactos, rotações de 4-4,6°, adereços de primeiro plano (FOREGROUND) em ~1/3 das cenas.

Alvos de aparência (medidos a partir da referência; veja references/reports/)

• Tinta:
  • Linhas do mundo: cerca de 3 px a 1080 de largura, quase preto #0b0a0c, quase constante com a distância. Apenas silhuetas, saltos de profundidade e vincos normais. Sem linha em junções de parede/chão ou no horizonte. Cartões de personagens nunca são contornados pela tinta do mundo.
  • Tinta do personagem: ameixa escura #201628-#2f1d28, mais grossa no lado inferior/sombreado.
• Cor:
  • Luminância mediana do dia ~.57. Não tinta p5 ~.23 (sem pretos esmagados). Croma iluminado C* p90 ~55. Topo do céu do dia ~#5e93d9, horizonte 1,28x mais brilhante.
  • Dourado: horizonte pêssego #ffd08a, sombras violeta-azul (nunca marrom), sol contraluz.
• Profundidade:
  • DOF em cerca de 1/3 do tempo de tela (CU, MS, inserts), cInf 10-16 px a 1080, foco nos olhos. Planos de estabelecimento e abertos permanecem nítidos.
  • Névoa = cor do horizonte, 25→420 m dia, 20→360 m dourado.
  • Bloom apenas em emissivos HDR: limiar 1.0.
• Câmera:
  • Cortes secos em grandes saltos. Todo o resto é um deslize smootherstep de 18-40 q, pico ≤ 25 px/q a 720p.
  • Cada parada empurra 0,15-0,35%/q, com 0,6%/q em palavras de impacto.
  • Rotações de 4-5°.
  • Sem flutuação de câmera na mão. Vibrações de impacto invertem o sinal a cada quadro e decaem por 7 q.
• Personagens:
  • Cerca de 3,5 alturas de cabeça, pernas 1,4 AC.
  • Membros de palito cerca de 0,055 da largura da cabeça, mãos com pontos de tinta.
  • Cabeça de feijão (a/l ~0,93, queixo mais estreito, coroa mais pontuda).
  • Sem blush ou destaques nos olhos. Faces com brilho ~.93.
  • Balanço ao andar 3-7%, inclinação 1-7°, pés plantados.
  • Piscadas a cada 0,5-2,3 s, durando 4 q.

Loop de correspondência de aparência (como a aparência da ponte foi alcançada; reutilize para qualquer passagem "faça parecer com X")

1. Meça a referência primeiro. Um agente de análise por tópico (movimento, profundidade, texturas, personagens, iluminação, contornos, gradação), cada um escrevendo números, não adjetivos, em references/reports/<topic>.md. Briefing compartilhado: compare/CONTEXT.md. Relatórios são a fonte da verdade para todos os agentes depois.
2. Sandboxes, um proprietário por arquivo. Copie a pasta do projeto para src/videos/<nome>_{cam,world,mat,char,post} com entradas src/sandboxes/<n>/index.tsx (mesmo index.tsx do principal, apenas o caminho de importação alterado). Propriedade usada para a ponte:
   • cam: story.ts (chaves de câmera, cortes, chutes, tabela DOF, adereços de primeiro plano)
   • world: world.ts, lights.ts, shade.ts, grade.ts (sol, céu, névoa, rio, cor, gradação)
   • mat: paint.ts, build.ts (texturas pintadas, construções, adereços)
   • char: toon.ts, cast.ts, cardshade.ts (desenho de personagens, pose, iluminação de cartões, cartões de efeitos)
   • post: ink.ts, Bridge.tsx, lensblur.ts (passagem de contorno, compositor, desfoque de lente, bloom) Agentes editam apenas seus próprios arquivos em sua própria sandbox e renderizam stills com BRIDGE_ENTRY=src/sandboxes/<n>/index.tsx node scripts/bridge-stills.mjs out/<nome>/<n>/x_ <frames> 0.5.
3. Mesclar com python scripts/bridge_merge.py [cam,world,mat,char,post] (faz backup do principal para backup/bridge_<time>/, copia apenas arquivos de propriedade). Então npx tsc --noEmit (filtre para a pasta do projeto), então ressincronize cada sandbox do principal (cp -f src/videos/<nome>/* src/videos/<nome>_<n>/) antes da próxima rodada.
4. Verificar com um novo agente Opus max: folhas lado a lado (python scripts/sbs_sheet.py out.jpg --ours a b --ref r1 r2), pontue cada área de 0 a 10 (cor dia / dourado, iluminação, tinta, texturas, personagens, profundidade, composição) mais uma lista numerada de correções com números de quadro. Mapeie cada correção para o proprietário do arquivo e retome o agente desse proprietário com SendMessage (mantém seu contexto). Pontuações da ponte: rodada 1 5/3/4/5/4/7/4/6 → rodada 2 5/4/5/6/4/7/6/6 → rodada 3 veja notas.
5. Contratos entre proprietários vivem em constantes exportadas (ex.: camada NOINK de ink.ts, dofAt/FOREGROUND de story.ts, LIGHTS/LOOK de lights.ts). Mudar um contrato significa informar cada proprietário que o lê.

Pegadinhas

• Os materiais do kit de natureza Kenney são verde-azulados: recolorir pelo nome do material em build.ts.
• Câmeras terminam dentro de casas: o removedor por linha de visão em build.ts/world.ts remove qualquer coisa que bloqueie qualquer raio de câmera.
• Tinta na mesma passagem de efeito mesclada que DOF é sobrescrita. A tinta deve ser sua própria passagem antes do desfoque.
• Parâmetros de pós de tamanho de pixel devem escalar com a resolução: stills estão a 0.5, o final a 1.333. R3F força dpr a ≥ 1, então stills --scale 0.5 ainda renderizam um buffer de 1080x1920.
• Disco: todo pacote Remotion copia public/ (~1.3 GB) para a pasta temporária\remotion-webpack-bundle-* e nunca o exclui. 60+ GB encheram a unidade do sistema durante as passagens da ponte e uma renderização morreu com ENOSPC. Sempre renderize com export TEMP='<unidade grande>/remotion-tmp' TMP='<unidade grande>/remotion-tmp' (bridge-stills.mjs define isso sozinho) e peça ao usuário antes de excluir pastas de pacotes antigas na pasta temporária compartilhada (o modo automático bloqueia a limpeza). <unidade grande>/remotion-tmp também enche (~500 pastas / 110 GB após as 4 rodadas da ponte): quando um projeto termina e nada está renderizando, exclua suas pastas remotion-webpack-bundle-* e puppeteer_dev_chrome_profile-* lá.
• Em strings JS escreva "<unidade grande>/remotion-tmp", nunca "<unidade grande>\remotion-tmp" (\r se torna um retorno de carro).
• Remotion escreve uma trilha de áudio silenciosa: multiplexe com -map 0:v:0 -map 1:a:0.
• Sub-agentes não podem escrever arquivos de relatório neste ambiente: peça-lhes uma mensagem final de ≤150 palavras e salve você mesmo em out/<nome>/<n>/REPORT.md.
• Arquivos .ts de rascunho dentro de out/ quebram tsc: nomeie-os como .txt.
• Renderizações 2K rodam a ~4 fps (≈10 min para 67 s). Stills a 0.5 levam 3-8 s cada após um pacote de ~40 s.
• Grão de filme a 2.5% fez o arquivo 2K ter 910 MB em vez de ~250 MB e se transformará em borrão no YouTube; a referência não tem nenhum. Mantenha-o desligado.

Armadilhas de legibilidade que o verificador pegou (verifique cada novo adereço/cena para estas)

• Um balanço desenhado como uma corda que desaparece atrás da criança parece um ENFORCADO. Sempre duas cordas para uma prancha larga com a criança entre elas (swingKid em toon.ts), e uma estrutura cujas pernas limpam o arco (estrutura em A em cada extremidade).
• Adereços ou detritos a menos de ~2 m de uma lente se tornam grandes manchas cortadas na borda do quadro. Quando uma câmera se move, verifique novamente cada adereço perto de sua nova posição (as câmeras do rio se moveram para os chapéus flutuantes).
• Um arbusto em primeiro plano cortado pela borda do quadro parece uma "bola verde"; um adereço de primeiro plano deve ser reconhecível ou removido.
• Bandeiras: vermelha + estrela/diamante amarela parece com a do Vietnã. Use uma bandeira correta para o período (cruz de São Jorge para Inglaterra 1831).
• Dor: ...

... [truncado para tradução]