alifmahmudashik/shorts-studio-skill

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

Exemplo comprovado: A Ponte que Caiu por Uma Canção. É um curta original de 67 s sobre a ponte de Broughton de 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 particular. Nunca faça upload, publique ou os envie.
• Nunca copie os roteiros, personagens ou planos deles. 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:

• Legendas: ATIVADAS por padrão para Shorts. Uma palavra de cada vez, centralizada, negrito, contorno escuro, dentro da área segura, temporizadas conforme words.json (veja 'Legendas'). Só desligue se o usuário disser. Sem outros rótulos na tela.
• Apenas inglês.
• Voz: um tom constante (sarcástico: o narrador nunca reage, os personagens reagem).
• Piadas são fatos reais pesquisados.
• Mixagem padrão: música +3 dB, SFX -6 dB, voz inalterada.
• Exportação final 2K vertical: 1440x2560, --scale 1.3333.
• Opus max verifica cada etapa.
• Salvar a cada passo.
• "Apenas faça" assim que o roteiro for aprovado.

Pipeline

1. Tópico e fatos. Escolha uma história surpreendente verdadeira com causa e efeito físicos (deve ser visual), mais uma analogia cotidiana simples que a explique.
   • Escreva os fatos com suas fontes no topo do SCRIPT.md.
2. Roteiro (~3,7 palavras/s, 35-70 s). Para curtas de fatos use 'Formato de história viral' e 'Torne isso engraçado' abaixo; a fórmula do ritmo da ponte é a alternativa para histórias de desastres:
   • Gancho: o fato absurdo em uma linha ("Setenta e quatro soldados derrubaram uma ponte de ferro só por atravessá-la.").
   • Cenário: ano, lugar, orgulho.
   • Ação: escalada em três ou quatro batidas, cada uma um pouco maior.
   • Estalo: o momento em que quebra.
   • Linha dupla sarcástica: "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 de retorno: o final.
   • Nunca descreva na tela o que o espectador já vê.
3. Voz. Grave ou gere voice.wav, depois faça suas temporizações de palavra words.json (qualquer conversão de fala em texto com tempos de palavra).
   • Coloque-os na pasta do projeto, por exemplo, ~/bridge-short/voice/.
   • Corrija manualmente as temporizações das palavras. Tudo é temporizado conforme words.json, e as legendas também são extraídas dele.
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/dourada, 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 de flip-shake.
   • DOF/dofAt: desfoque de lente por batida.
   • FOREGROUND: adereços de enquadramento próximos.
   • Cada reação visual ocorre 0-3 quadros antes de sua palavra.
   • Encadeie os sujeitos de cada frase em um fluxo contínuo (flow.ts, veja 'Fluxo contínuo'), dê a cada movimento um nome e a cada parada um tamanho de enquadramento (veja 'Variedade de câmera' e 'Enquadramento').
   • Dê a cada lugar seu próprio preset de luz (veja 'Iluminação para cada lugar').
5. Mundo.
   • lights.ts: LUZES mais o LOOK céu/rio/nuvem paleta por luz.
   • shade.ts: sombreamento de dois tons e untone().
   • build.ts: cidade, casas e props do kit Kenney CC0, recoloridos, com eliminação de 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 Canvas2D Pen, tela de design 600x1000, solas em y = 975, cabeças de feijão, membros de palito, contorno de largura variável cor ameixa, biblioteca de expressões faciais.
   • cast.ts: painéis voltados para a câmera, multidões, cartões de efeito, piscadas, ciclos de caminhada. Todos os painéis vão na camada NOINK.
   • cardshade.ts: cartões iluminados pela luz da cena, sem emissivo.
7. Pós-produção (Bridge.tsx + ink.ts + lensblur.ts + grade.ts).
   • Ordem do compositor: tinta → pré-lente → lente principal → bloom → mapeamento de tom NEUTRO → grade (MSAA 4).
   • Cada parâmetro de pixel escala com a altura de 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 sintetizado mais uma trilha sonora original com volume reduzido sob a voz.
   • Saída: mix.wav (48 kHz, comprimento exato), stems e cues.md.
   • Trave as constantes de tempo da imagem antes de criar o som. Qualquer alteração posterior no tempo significa reexecutar o som.
9. Verificações de aparência. 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-os para um verificador Opus max: 1-3 imagens, um veredito de ≤200 palavras.
   • Execute a verificação de enquadramento (templates/bridge/framing.ts) para cada cena e faça uma folha de contato com um still por cena (primeiro, meio e último quadro). Veja 'Portão de qualidade'.
10. Renderização final.
    • npx remotion render src/index.ts <Comp> out/<nome>/video.mp4 --codec h264 --crf 16 --scale 1.3333
    • Mux 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 em busca de quadros pretos, brancos, congelados e pop, além de volume e folhas.
    • Corrija qualquer problema encontrado e, em seguida, execute uma auditoria Opus profunda.
11. Entrega. EnvieArquivoUsuário o mp4 final, atualize a memória, escreva notas.

Pré-voo (faça isso primeiro)

• Verifique se templates/bridge/, references/ e scripts/ existem (clone github.com/mromidev/claude-animated-shorts, ou seu fork, ao lado do projeto Remotion se estiverem faltando). Se estiverem faltando, PARE e obtenha-os. Nunca improvise uma aparência three.js genérica sem os templates.
• Faça primeiro um clipe de teste de 15 s (gancho + 2-3 cenas, com legendas e som). Renderize stills, execute o Portão de qualidade, corrija, depois estenda para a história completa. Nunca vá direto para uma renderização completa.

Formato de história viral: "rir de um gênio" (use para curtas de fatos)

Seis batidas, sempre:

1. Ação estranha sem contexto, mostrada em uma imagem (gancho, primeiros 3 s).
2. A risada: os outros personagens zombam do herói.
3. Todos olham para a direita: o tempo passa e o herói parece errado ou inofensivo.
4. A pista: um detalhe que prenuncia a recompensa.
5. A recompensa: o evento que prova que o herói está certo (clímax visual).
6. A ciência: mostre o mecanismo (visão interna/corte/macro) e explique-o em uma frase simples.

• Conte como uma história com um herói, não uma lista de fatos. Escolha uma prática estranha que seja visível em uma imagem e pela qual as pessoas ririam.
• A última linha inicia uma discussão ou um comentário (algo debatível), não um resumo elegante.
• Padrão de título: "Por que X ...", "Como X ...", "O que X realmente significava". Sem spoilers da recompensa no título.
• Ritmo: um novo assunto a cada 2-3 s, alcançado por viagem de câmera (veja 'Fluxo contínuo') em vez de um corte, com um efeito sonoro em quase todos os movimentos ou dissoluções (whoosh, clink, risada da multidão) e música sob a voz.
• Lugares ricos, personagens simples (cabeças redondas, braços de palito): planeje 12-16 lugares distintos e 20+ adereços para um curta de 60 s, e dê a cada lugar seu próprio clima de iluminação.
• Escreva os fatos com fontes primeiro. Anos e números são falados naturalmente ("dezoito e quarenta e sete") e legendados como dígitos.
• Exemplo: templates/SCRIPT_viral_example.md.

Torne isso engraçado (motor de comédia)

A multidão ri do herói; o espectador deve rir também.

• Voz sarcástica, imagens absurdas. O narrador nunca reage; os personagens reagem. A diferença entre os dois é a piada.
• Uma piada a cada 4-6 s, usando pelo menos três tipos por curta: uma piada de linha (eufemismo, "Felizmente... / Infelizmente..."), uma piada visual (expressão de reação, um pequeno detalhe no fundo, um adereço em escala errada) e uma piada sonora (um SFX bobo que cai na reação).
• Regra de três: duas batidas normais, depois a terceira quebra o padrão.
• Piada recorrente: um personagem ou objeto de fundo (um pombo, um homem com um sanduíche) aparece 3-4 vezes e tem uma recompensa perto do fim.
• Planos de reação: a câmera se fixa no rosto (uma parada de fluxo ou um rack focus, não um corte) 3-6 quadros após a palavra de impacto e segura 8-12 quadros. Use a biblioteca de expressões faciais; inclua pelo menos um "não impressionado" e um "choque". Veja 'Reações e batidas de diálogo'.
• Herói confiante, multidão arrogante, autoridades muito sérias: personagens levam coisas triviais mortalmente a sério.
• Exagere a física por apenas uma batida (a recompensa): espremer e esticar, uma nuvem de poeira, um chute de impacto.
• Final de retorno: a última linha torce a primeira linha (o gancho) usando o que aconteceu.
• Piadas permanecem dentro de fatos reais: a parte engraçada é o detalhe verdadeiro. Nunca ataque vítimas reais ou grupos; o alvo é o excesso de confiança e arrogância.

Legendas (legendas palavra por palavra)

• Fonte: words.json (temporizações de palavra da voz, corrigidas manualmente). Qualquer conversão de fala em texto funciona; normalizeWords() em templates/bridge/Captions.tsx aceita {word|text, start|start_time, end|end_time} em segundos ou milissegundos e pula entradas "espaçamento" do ElevenLabs.
• Se o texto da conversão de fala em texto diferir do roteiro (números, nomes, ortografia), substitua o texto pelas palavras do SCRIPT e mantenha os tempos do STT. As legendas mostram a ortografia do roteiro ("1847"), mesmo que a voz diga "dezoito e quarenta e sete".
• Componente: copie templates/bridge/Captions.tsx para src/videos/<nome>/ e renderize <Captions words={WORDS} /> como o ÚLTIMO filho da composição, como uma sobreposição DOM acima da tela three.js, fora do compositor de pós-processamento (sem tinta, desfoque, bloom ou grade no texto).
• Estilo: uma palavra de cada vez, centralizada horizontalmente a cerca de 68% da altura do quadro (abaixo dos rostos, dentro da área segura), sem negrito pesado, preenchimento branco, contorno escuro de 9 px a 1080 de largura, escala pop-in 0,8 → 1,08 → 1 ao longo de 6 quadros, sem caixa de fundo, largura máxima de 86%. Números, nomes e palavras de impacto usam a cor de destaque (highlight). Os tamanhos de pixel escalam com a altura de saída / 1920.
• Nunca cubra um rosto: quando um close-up tiver o rosto na posição da legenda, passe yPercent={(frame) => ...} para movê-lo para aquela cena.
• A legenda aparece 1 quadro antes de sua palavra ser ouvida (lead).
• QA: renderize um still em uma palavra de impacto em cada cena e confirme que a legenda está dentro da área segura e não cobre um rosto.

Enquadramento, área segura e limites de zoom (aplicados)

• Quadro 9:16. Área segura: margem de 6% esquerda/direita, 8% superior, 15% inferior (UI da plataforma e legendas). Tudo que importa (personagens, adereços, balões, placas) está completamente dentro dela, exceto adereços de enquadramento de fundo intencionais.
• A cabeça de um personagem ocupa no máximo 30% da altura do quadro (um gag de reação de um plano pode usar 40%). Prefira planos médios (cintura para cima) e planos gerais de corpo inteiro.
• Nunca corte um personagem nos pés, e nunca corte um balão de fala ou placa. Um adereço de fundo é reconhecível ou desaparece; um adereço cortado não deve cobrir mais de 35% do quadro.
• Sem mais de dois planos do mesmo tamanho seguidos (aberto / médio / close / insert).
• Push-ins em seguras permanecem lentos: 0,15-0,35% por quadro, 0,6% em palavras de impacto. Sem grandes zooms repentinos.
• Verificação automática: checkShot(camera, items) em templates/bridge/framing.ts projeta caixas delimitadoras no espaço da tela e lista cada problema. Execute-o no primeiro, meio e último quadro de cada cena, no bridge-stills, e corrija cenas reprovadas antes de renderizar. Autoteste: npx tsx templates/scripts/framing_selftest.ts.

Iluminação para cada lugar (a ponte só define dia e dourado)

Cada lugar precisa de seu próprio preset de luz em lights.ts: uma direção de luz principal clara, sombreamento de dois tons (quente iluminado, frio sombreado), sombras projetadas e de contato, e um céu ou teto correspondente. Nunca uma sala plana sem luz, e nunca céu ou nuvens visíveis dentro de uma sala.

• Interior (salão, hotel, escritório): um teto ou topo de parede escuro, uma luz principal de uma janela ou lâmpada, luzes práticas quentes (velas, lâmpadas) com bloom, um lado de sombra frio, uma vinheta suave, sombras de piso e parede de cada adereço, feixes de luz ou poeira de janelas.
• Noite: luz principal azul iluminada pela lua (cerca de #5b7fd6), sombra azul-violeta profunda, janelas e lâmpadas quentes iluminadas como contraste, disco lunar ou estrelas.
• Amanhecer / pôr do sol: sol baixo com raios divinos, céu pêssego a rosa, sombra violeta, sombras longas.
• Estes são valores iniciais: ajuste-os em relação a references/frames/ com folhas lado a lado (sbs_sheet.py).
• Sombra de contato sob cada personagem e adereço, mais uma cauda de sombra direcional da luz principal; móveis e adereços projetam sombras em pisos e paredes (sombras de cartão são reais, não borrões, em interiores).
• A profundidade de campo (tabela abaixo) é aplicada consistentemente: close-ups e planos médios nunca estão totalmente nítidos, abertos permanecem nítidos.

Variedade de câmera (sempre em movimento, nunca o mesmo movimento duas vezes seguidas)

• Dentro de um fluxo ou cena, use movimentos nomeados: push-in lento, pull-back revelador, órbita em torno do sujeito, track lateral com paralaxe, grua para cima/baixo, tilt, rack focus de um adereço de fundo para o sujeito, pequeno roll holandês (4-5°).
• Não há dois movimentos consecutivos iguais.
• Coloque adereços de fundo (pilares, corrimãos, móveis) entre a lente e o sujeito em cerca de um terço das cenas, para que o movimento da câmera leia como profundidade.
• Pelo menos dois planos de insert por história: uma macro ou cutaway do mecanismo para as batidas 4-6, mais um ângulo dramático (ângulo baixo do herói ou vista de cima).
• Mantenha os deslizamentos smootherstep existentes (18-40 f), seguras rastejantes e chutes de impacto.

Fluxo contínuo: viaje entre os sujeitos, não corte (a referência...

[truncado para tradução]