kbohara315/what-if-animation

Animação What If

Uma linha de tópico entra, um episódio finalizado de 15 a 25 segundos sai. Cada quadro é SVG que o Claude escreve (renderizado pelo Remotion); a voz e o som vêm do ElevenLabs. Dois exemplos acompanham em studio/src/episodes/, ambos prontos para renderizar: rewind ("E se você pudesse rebobinar 10 segundos?", o clipe de prova: cenas reproduzidas ao contrário como poder) e copy-paste ("E se você pudesse copiar e colar qualquer coisa?", a primeira execução completa da skill: um novo cenário de cozinha, um esquema para a batida científica, um apagão de suspense). Leia o mais próximo do seu tópico antes de começar.

Arquivo	O que contém
references/formula.md	A fórmula de sete batidas do What If, a forma de 15-25 s, regras do roteiro, escolha de um tópico
references/look.md	O visual medido, ritmo, vocabulário de planos e as listas de verificação de storyboard e movimento
references/kit.md	Os blocos de construção: motor, elenco, cenários, kit de cômodo, luz, IU, visuais e como adicionar cada um
references/sound.md	Como escrever eventos sonoros, prompts, níveis, custos
references/traps.md	Tudo que consumiu tempo nos dois episódios de exemplo
studio/	O projeto Remotion: copie uma vez, então cada episódio vive dentro dele
scripts/	voice, plan, stills, board, sfx, mixcheck, motiongrid, master (Python 3.9+ e Node)

Regras

• Apenas personagens originais. Pip (o herói, visual B) e Mo (seu amigo) são nossos, assim como a irmã, a mãe e o terno no rig. Nunca um herói de um canal, e nada que se assemelhe a um personagem de desenho famoso: verifique cada novo visual na ficha de elenco (o primeiro chapéu do Mo foi descartado por se aproximar de um).
• Histórias originais. A fórmula é compartilhada; o episódio não é de ninguém. Não refaça um título de um canal.
• Nunca afirme que os canais virais são feitos com Claude ou qualquer outra ferramenta. Ninguém disse como são feitos.
• Chaves apenas pelo nome. ELEVENLABS_API_KEY, do ambiente ou de um .env acima do studio. Nunca imprima, cole ou codifique uma chave.
• Reporte os créditos do ElevenLabs de cada execução: os scripts registram em out/<slug>/costs.json e master.py totaliza em report.json. O custo da voz é lido do histórico da conta (exato); clipes de som não aparecem lá, então seu custo vem do contador da conta, que pode atrasar: releia antes de reportar. Diga o número ao entregar o episódio. A execução copy-paste custou 152 créditos (78 para voz, 74 para 12 novos clipes).
• Storyboard antes da animação. Nenhuma renderização de vídeo até que as imagens fixas passem na autoavaliação (etapa 5) e, quando a pessoa estiver no ciclo, ela tenha visto o storyboard.
• Todo fato é real. Um número no roteiro é calculado e referenciado no campo science do episódio primeiro.

Configuração (uma vez por máquina)

Requer Node 18+, ffmpeg e ffprobe no PATH, Python 3.9+ com numpy e Pillow, e uma chave ElevenLabs.

cp -r <skill>/studio ./what-if-studio && cd what-if-studio && npm install

Tudo abaixo é executado a partir dessa pasta do studio; <skill> é a pasta desta skill. Para trabalhar offline ou com sua própria marca visual, coloque uma fonte de exibição em public/fonts/ e defina titleFont em src/studio.config.ts (a face do título padrão, Bricolage Grotesque, e as faces da IU carregam do Google Fonts no momento da renderização). Para atualizar um studio existente para um motor mais novo, copie <skill>/studio/src/engine sobre seu src/engine.

O pipeline

Trabalhe pelas etapas em ordem. Cada uma termina em algo que você examina antes da próxima.

1. Roteiro

Leia references/formula.md. Pesquise no YouTube pela premissa primeiro: se um canal What If já tiver esse episódio exato, mude o poder ou a regra. A partir da linha de tópico, decida a palavra do poder, sua regra, três demonstrações crescentes e a virada (um fato real com um número). Escreva src/episodes/<slug>/episode.json com id (PascalCase, o nome da composição), slug, topic, title (duas linhas), script (uma entrada por batida) e science (cada fato: a alegação, o cálculo, a fonte). 45 a 65 palavras. Leia em voz alta no ritmo: cada linha deve ser uma imagem.

2. Voz

python <skill>/scripts/voice.py <slug>

Uma tomada do ElevenLabs com timestamps de caracteres (a tomada de 356 caracteres do copy-paste custou 78 créditos), depois as pausas cortadas no ritmo do gênero: public/<slug>/voice.wav e src/episodes/<slug>/words.json. Verifique a duração (15-25 s) e os tempos das palavras que imprime. Reajuste as pausas com gaps no episode.json e execute novamente: a tomada fica em cache, então é gratuita. Mude uma palavra e chama a API novamente.

3. Lista de planos

Projete um plano para cada imagem no roteiro (geralmente 9 a 14), variando o tamanho e o ângulo a cada corte (grande plano, inserção, médio, close-up, sobre o ombro, alto, baixo; veja references/look.md). Adicione ao episode.json:

• shots: { "id": "S1", "size": "medium", "set": "kitchen", "key": 14, "note": "o que vemos" } (key é o quadro do relógio do próprio plano que o storyboard mostra)
• edit: { "shot": "S1", "at": "cookie" } por corte, indicado na palavra em que cai (plan.py lista as formas de indicação; reverse, from, to e look para poderes que alteram o relógio de um plano)
• fx: flashes e tremores de um quadro, { "at": "S3+2", "kind": "flash" }

python <skill>/scripts/plan.py <slug>

Ele escreve timeline.json e out/<slug>/shotlist.md e imprime o ritmo. Busque 27+ cortes por minuto na abertura e nenhum plano estático com mais de cerca de 3 s; corrija o que ele sinalizar antes de desenhar qualquer coisa.

4. Storyboard

Leia references/kit.md para os blocos de construção. Escreva src/episodes/<slug>/shots.tsx, um componente por plano, cada um uma função pura de seu relógio t (copie os padrões dos dois exemplos em shots.tsx), e index.tsx (o episódio e seu visual de poder), então adicione o episódio a src/episodes/index.ts. Nesta etapa, cada plano só precisa estar correto em seu quadro key. Quando um tópico precisar de um local que a biblioteca não possui, construa-o com o kit de cômodo e adicione-o a src/engine/sets/ (e à cópia da skill) para que o próximo episódio o tenha, como a execução copy-paste fez com a cozinha e o esquema. Um novo personagem ou figurino: adicione o visual, depois verifique na ficha de elenco (npx remotion still src/index.ts Cast out/cast.png).

npx tsc --noEmit
node <skill>/scripts/stills.mjs <slug>
python <skill>/scripts/board.py <slug>

out/<slug>/storyboard.jpg: uma imagem fixa legendada por plano.

5. Autoavaliação das imagens fixas

Veja o storyboard, depois abra cada imagem fixa em out/<slug>/board/ no tamanho máximo e execute a lista de verificação do storyboard em references/look.md honestamente, plano por plano. Anote o que falha, corrija, re-renderize apenas esses planos (stills.mjs <slug> S3 S7), reconstrua a folha e veja novamente. Repita até passar. Verifique references/traps.md para a falha que você está vendo antes de inventar uma correção. Se a pessoa estiver no ciclo, mostre a ela o storyboard agora e anote seus comentários antes de animar.

6. Animar

Traga cada plano à vida a partir de sua pose-chave: poseAt com antecipação, pausas e overshoot, faceAt para expressões, movimentos de câmera com kf, o visual do poder, os fx. Depois renderize um rascunho e verifique o movimento:

python <skill>/scripts/master.py <slug>
python <skill>/scripts/motiongrid.py <slug> S2 S5
node <skill>/scripts/stills.mjs <slug> --frames 120 240

Leia as grades como um flipbook contra a lista de verificação de movimento em references/look.md; corrija e re-renderize até que faça sentido.

7. Som

Leia references/sound.md. Adicione sound ao episode.json: os clipes (prompt e duração), um evento por ação visível indicado a seu plano, ambientes por localização, a base musical e os níveis. Verifique o que a biblioteca já possui, depois gere:

python <skill>/scripts/sfx.py <slug> --dry
python <skill>/scripts/sfx.py <slug>

Ele imprime os créditos usados e define os volumes das faixas em timeline.json. Depois verifique se cada palavra permanece clara:

python <skill>/scripts/mixcheck.py <slug>

Ele lista os momentos, enquanto uma palavra está sendo falada, em que efeitos ou música ficam a menos de 3 dB da voz. Um golpe que ilustra uma palavra cai na pausa logo após, nunca sobre ela; uma base (um zumbido, um drone) sob uma fala-chave abaixa; se a maior parte da faixa sobrecarregar a voz, diminua sfx_lu. Execute sfx.py e a verificação novamente até que apenas sobreposições deliberadas permaneçam (um boom do título, uma virada).

8. Masterização e entrega

python <skill>/scripts/master.py <slug>

Renderiza, traz a mixagem a -14 LUFS com picos abaixo de -1 dBTP e escreve out/<slug>/report.json (duração, volume, ritmo, créditos). Assista ao arquivo final uma vez com som. Entregue out/<slug>/<slug>-final.mp4 e out/<slug>/storyboard.jpg, com a duração, os créditos do ElevenLabs usados e qualquer coisa que você ainda melhoraria.

Onde um episódio vive

Caminho	O quê
src/episodes/<slug>/episode.json	Tudo que você escreve: roteiro, ciência, planos, edição, fx, som
src/episodes/<slug>/shots.tsx, index.tsx	O desenho: um componente por plano, o visual do poder
src/episodes/<slug>/words.json, timeline.json	Escrito por voice.py e plan.py (sfx.py adiciona os volumes)
public/<slug>/	voice.wav, sfx.wav, music.wav
out/<slug>/	Imagens fixas do storyboard, storyboard.jpg, shotlist.md, grades de movimento, renderizações, costs.json, report.json
library/sfx/	Cada clipe de som gerado, compartilhado por todos os episódios