Communitygithub.com

whatif-reel-maker

Cria um reel científico de 60 segundos no formato vertical, no estilo 'E se…', com cena 3D em Three.js, narração, legendas e efeitos sonoros a partir de uma ideia de uma linha para o @the.whatif.studio.

O que é whatif-reel-maker?

Este skill automatiza a produção completa de vídeos curtos de divulgação científica no estilo 'What if…' (E se…), voltados para o perfil @the.whatif.studio no Instagram. Dada uma única linha de ideia (ex.: "E se a Lua desaparecesse por 5 segundos?"), o skill gera um vídeo final `final.mp4` (1080×1920, 30 fps, 60 s) com cena 3D low-poly em Three.js, narração gerada por TTS (voz `am_michael`, `af_heart` ou `bm_george`), legendas sincronizadas, efeitos sonoros e um arquivo `caption.txt` para legenda do Instagram. O fluxo inclui verificação da física (com cálculos e pesquisa web), roteiro estruturado em beats de 60 segundos, geração de áudio, cena 3D determinística (sem aleatoriedade), renderização em camadas (placa 3D + sobreposição de texto) para edição ágil, mixagem de som com ducking automático e composição final via ffmpeg. O skill suporta Node 18+, Python 3.10+ e ffmpeg, e todos os arquivos de motor reutilizáveis são fornecidos na pasta `engine/`. A saída inclui também um arquivo de legenda com hashtags prontas para publicação.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add gitbasitmalik/viral-3d-videos

Perguntar na sua IA favorita

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

Documentação

Criador de Reels 'E se…'

O usuário fornece UMA linha (ex.: "e se a Lua desaparecesse por 5 segundos?"). Você faz todo o resto e entrega final.mp4 (1080×1920, 30 fps, 60 s, narrado, legendado, com efeitos sonoros) mais caption.txt para o Instagram. Não faça perguntas a menos que a ideia esteja confusa. Escolha padrões sensatos e informe quais foram.

O estilo padrão é um cenário 3D low-poly de um local real construído em código (Three.js). Possui um HUD de contagem regressiva no canto superior esquerdo, legendas em itálico serifado, uma seção "raio-x" com contorno branco sobre fundo preto, um plano geral (planeta/espaço/micro), uma escalada das consequências e um cartão final com botão de seguir. Handle: @the.whatif.studio.

0. Configuração única (verificar, instalar apenas o que faltar)

Requer Node 18+, Python 3.10+ e ffmpeg no PATH (winget install ffmpeg / brew install ffmpeg).

Diretório raiz: ~/whatif/ (criar se não existir). Os arquivos de motor compartilhados ficam na raiz, e cada vídeo em videos/<slug>/.

mkdir -p ~/whatif/models ~/whatif/videos && cd ~/whatif
npm init -y && npm i [email protected] playwright @fontsource/cormorant-garamond @fontsource/ibm-plex-mono
npx playwright install chromium
pip install kokoro-onnx soundfile scipy numpy
curl -L -o models/kokoro-v1.0.onnx https://github.com/thewh1teagle/kokoro-onnx/releases/download/model-files-v1.0/kokoro-v1.0.onnx
curl -L -o models/voices-v1.0.bin https://github.com/thewh1teagle/kokoro-onnx/releases/download/model-files-v1.0/voices-v1.0.bin

Em seguida, copie os arquivos do motor da pasta engine/ deste skill para a raiz se eles não existirem (veja seção 9). No Windows use python em vez de python3.

1. Física primeiro (mais importante)

Os comentaristas vão verificar a ciência. Antes de escrever qualquer coisa:

  • Descubra o que REALMENTE acontece. Escreva o raciocínio e cada número em videos/<slug>/physics.md, e calcule os números com um rápido script Python.
  • Busque a reviravolta contraintuitiva (ex.: gravidade desligada: nada parece acontecer a princípio, porque a rocha, a água e o ar comprimidos se expandem e esse empurrão parece gravidade). A reviravolta é o gancho.
  • Verifique as afirmações principais com pesquisa na web quando disponível. Se algo for incerto, suavize o texto ("por minutos", "quilômetros") e nunca invente números precisos.

2. Roteiro (videos/<slug>/script.json)

Siga este modelo de batidas de 60 s (desloque os tempos se a história precisar):

TempoBatidaVisualHUD
0–8Mundo normal, ganchodolly lento pelo cenário; título 0.2–3.9Contagem regressiva <EVENTO EM 8.00 S→0, subtítulo = local
8.0Evento aconteceondulação + pulso cromático—
8–28Janela do evento, mostrada em câmera lenta (ex.: 5 s reais a 4×)primeira visão normal, depois raio-x<FIM DO EVENTO EM 5.00 S, subtítulo MOSTRADO 4× MAIS LENTO · <estatística ao vivo>
16–24Mecanismo ocultomodo contorno + partículas brilhantesmesma
24–28Plano geralcena separada (planeta/espaço/células), flash branco de entrada e saídamesma
28Retornoflash + explosão <COISA> ESTÁ / DE VOLTA
28–52Consequências escalamtremor, rachaduras, ondas, destroços etc.estatística-chave (ex. 176 KM/H)
~46Golpe final—"E sim. <consequência>."
51.2–52Fade para preto
52–60Cartão finallinha de fato + SIGA PARA MAIS E SE, botão pressionado ~57.3—

Narração: 14–16 linhas, ≤3 palavras por segundo, tom documentário calmo. Linha 1 em 0.3 s é a pergunta título. O cartão final tem duas linhas: uma frase de um fato (~52.7) e "Siga para mais e se's." (~56.6). As legendas são versões abreviadas das linhas de narração (≤2 linhas, <br> entre elas).

{
 "handle": "@the.whatif.studio",
 "voice": "am_michael",
 "title": "E se a gravidade desaparecesse<br>por 5 segundos?",
 "titleEnd": 3.9,
 "endTitle": "E se a gravidade desaparecesse por 5 segundos?",
 "endFact": "Você nunca sente a gravidade. Você sente o chão empurrando de volta.",
 "duration": 60, "endStart": 52, "press": 57.3,
 "narration": [[0.3, "E se a gravidade desaparecesse... por cinco segundos?"], [4.1, "Neste exato momento, a gravidade está puxando cada átomo deste parque."]],
 "captions": [[4.1, 7.9, "Neste exato momento, a gravidade está puxando<br>cada átomo deste parque."]]
}

3. Voz primeiro, depois ajustar o tempo

Execute python3 gen.py <slug>. Ele escreve videos/<slug>/audio/lNN.wav e durs.json e imprime a duração de cada linha. Se uma linha sobrepuser a próxima linha ou uma mudança de batida, encurte o texto ou mova-o e execute novamente. Em seguida, defina cada legenda como [start, start + duration + 0.35, text]. Vozes: am_michael (masculino padrão), af_heart (melhor feminina), bm_george (masculino britânico).

4. Construir a cena (videos/<slug>/scene.js)

Escreva uma nova cena para cada vídeo. Ela deve exportar build(h), update(t, h) e hud(t) (modelo na seção 9). Regras:

  • Determinística: use apenas h.rnd()/h.R(a,b) (com semente) no momento da construção. Tudo em update é função pura de t. Nunca use Math.random, Date ou performance.now.
  • Câmera lenta via tempo do mundo: w = t<8 ? t : t<28 ? 8+(t-8)/4 : 13+(t-28). Anime pessoas, água e nuvens com w.
  • Visual: primitivos low-poly com flatShading. Modele um lugar real de forma livre (píer, parque, rua, praia). Caixas para prédios (textura de janela em canvas), pessoas de caixa+esfera em cores variadas, árvores instanciadas, postes pretos com globos brancos. Adicione um shader de céu gradiente, nuvens sprite, THREE.Fog para profundidade e um sol DirectionalLight com sombras (câmera de sombra ±45) + HemisphereLight.
  • Câmera: FOV vertical ~58, altura dos olhos 1.7–2.2 m, dolly lento e inclinações suaves. Nas consequências, adicione tremor a partir de senoides somadas.
  • Fase raio-x: retorne outline: 0→1 (fade em ~0.6 s). Enquanto estiver ativo, troque os mapas dos prédios para null e esconda nuvens (evita bordas ruidosas). Opcionalmente retorne overScene: uma cena Points aditiva (depthTest false) para rastros/partículas.
  • Plano geral: construa uma segunda cena + câmera e retorne-as como scene/camera para 24–28.
  • FX retornados de update: flash (0–1 branco), chroma, ripple + rp (raio do anel), fade (0→1 em 51.2–52).
  • Desempenho: mantenha chamadas de draw abaixo de ~400 (instanciamento) e evite muitos sprites transparentes grandes perto da câmera, pois esse overdraw é muito lento.
  • Mantenha o texto fora dos 20% inferiores e da borda direita (UI do Instagram). As legendas ficam em y≈1240.

5. Pré-visualizar, depois corrigir

Execute node render.js preview <slug> 2,6,10,18,22,26,30,40,47,55. Ele escreve JPEGs em videos/<slug>/prev/. Abra-os e verifique: o local é legível, as legendas estão legíveis, o modo contorno está limpo, o plano geral está bem enquadrado, as consequências parecem dramáticas? Corrija problemas e pré-visualize novamente. Renderize o vídeo completo apenas quando as imagens estáticas estiverem boas.

6. Renderizar as camadas

A cena (placa) e o texto (sobreposição) são renderizados separadamente, para que correções de texto não exijam uma re-renderização 3D.

# placa: dividida em processos (um a cada 2 núcleos de CPU), cada um em sua própria PORT; apenas 0..endStart (o resto é preto)
LAYER=plate PORT=8781 node render.js full <slug> plate1.mp4 0 26
LAYER=plate PORT=8782 node render.js full <slug> plate2.mp4 26 52
LAYER=overlay PORT=8783 node render.js full <slug> overlay.mov 0 60

Execute estes em segundo plano e monitore os logs. Se o WebGL reportar SwiftShader (lento, CPU), tente HEADFUL=1 para usar a GPU real.

7. Som (videos/<slug>/mix.py)

Copie o modelo de mixagem da seção 9 e edite o bloco EVENTOS para corresponder às batidas: ambiente, ticks de contagem, um crescendo antes do evento, boom no evento e no retorno, um shimmer no raio-x, um whoosh no plano geral, um rumor/rachaduras ou outros sons das consequências, o fade final e o pop do botão. Ele posiciona a narração automaticamente e reduz os efeitos sob a voz. Execute-o, depois normalize:

python3 videos/<slug>/mix.py <slug>
ffmpeg -y -i videos/<slug>/mix.wav -af loudnorm=I=-14:TP=-1.5:LRA=11 -ar 48000 videos/<slug>/mix_norm.wav

8. Compor e entregar

cd videos/<slug>
ffmpeg -y -i plate1.mp4 -i plate2.mp4 -f lavfi -t 8 -i "color=black:s=1080x1920:r=30" -i overlay.mov -i mix_norm.wav \
 -filter_complex "[0:v][1:v][2:v]concat=n=3:v=1:a=0,format=yuv420p,setsar=1[b];[b][3:v]overlay=format=auto,format=yuv420p[v]" \
 -map "[v]" -map 4:a -c:v libx264 -preset veryfast -crf 23 -c:a aac -b:a 192k -movflags +faststart -shortest final.mp4

(A duração do clipe preto = duração − endStart.) Extraia 8–10 quadros de final.mp4 e examine-os antes de entregar. Escreva caption.txt: uma linha de gancho, 2–3 frases da física real, "Siga @the.whatif.studio para mais e se's" e 12–15 hashtags (#whatif #physics #science #3danimation …). Informe ao usuário que ele pode adicionar música suave no CapCut com volume 15–20%.

9. Arquivos do motor

O motor reutilizável está na pasta engine/ deste skill. Copie os arquivos de lá — não os redigite. Um motor compartilhado é reutilizado por todos os vídeos; dois arquivos são copiados por vídeo e depois editados.

Motor compartilhado (copiar uma vez para ~/whatif/):

  • engine/index.html → ~/whatif/index.html
  • engine/main.js → ~/whatif/main.js
  • engine/render.js → ~/whatif/render.js
  • engine/gen.py → ~/whatif/gen.py

Por vídeo (copiar para cada novo vídeo, depois editar):

  • engine/scene.template.js → videos/<slug>/scene.js — reescreva a cena para cada vídeo (veja seção 4). Deve exportar build(h), update(t, h), hud(t).
  • engine/mix.py → videos/<slug>/mix.py — edite o bloco EVENTOS para corresponder às batidas (veja seção 7).
# SKILL_DIR = pasta deste skill; execute a partir da raiz do projeto (~/whatif)
cp "$SKILL_DIR"/engine/{index.html,main.js,render.js,gen.py} ~/whatif/
cp "$SKILL_DIR"/engine/scene.template.js videos/<slug>/scene.js
cp "$SKILL_DIR"/engine/mix.py            videos/<slug>/mix.py

Lista de verificação de qualidade antes de entregar

  • Física verificada e números calculados; a reviravolta está clara nos primeiros 15 s.
  • Cada linha de narração se encaixa em sua batida sem sobreposições; as legendas correspondem à narração.
  • Pré-visualizações pareceram boas; o vídeo final foi verificado em 8–10 quadros.
  • O handle mostra @the.whatif.studio; o cartão final funciona e o pressionamento do botão acontece logo após "Siga para mais e se's".
  • Loudness em torno de −14 LUFS; a voz está claramente acima dos efeitos.

Habilidades Relacionadas