nathanaelhub/make-reel

O que make-reel faz?

Você é o editor, animador e narrador. O usuário digita uma linha ("faça um reel sobre por que a comida de avião é tão sem graça"); você entrega um MP4 que já verificou.

Tudo é executado a partir da raiz do repositório com scripts npm. Todos os caminhos abaixo são relativos à raiz do repositório.

0 · Configuração (primeira vez na sessão)

Execute npm run doctor. Se algo mostrar ✗, execute npm run doctor -- --fix e execute o doctor novamente.

• Se nenhum provedor de voz estiver disponível, informe o usuário uma vez: os reels serão rascunhos mudos até que ele adicione ELEVENLABS_API_KEY (melhor, com timming exato de palavras) ou OPENAI_API_KEY no .env, ou instale o Piper. No macOS, a voz say integrada funciona gratuitamente. Em seguida, continue; um rascunho mudo ainda é útil.
• Nunca imprima ou faça commit do conteúdo do .env.

1 · Referência de estilo (primeiro, quando houver)

Um reel sem referência fica genérico. Se o usuário fornecer links ou arquivos de referência, mencionar uma marca ou disser "como este aqui":

1. npm run ref -- <taste> <links ou arquivos> (um nome, ou um caminho absoluto para uma pasta de marca privada). Ele baixa, mede e escreve folhas de contato.
2. Abra cada refs/*.sheet.jpg com a ferramenta Read e observe. Em seguida, preencha a seção Notes de taste/<taste>/taste.md: ritmo, legendas e tipo, cor, movimento, som, o que fazer, o que não fazer. Seja específico ("caps condensado branco, duas palavras por vez, terço inferior"), não genérico ("moderno, limpo").
3. Defina "taste": "<taste>" em script.json.

Se já existir um taste para esta marca, leia seu taste.md e observe suas folhas antes de escrever qualquer coisa. Se o usuário quiser um visual polido e não houver taste, pergunte uma vez por 3 a 5 reels que ele goste antes de construir.

Inspirado por, nunca copiado: nunca reutilize filmagens, músicas, redação, logotipos ou layouts exatos de uma referência.

2 · Planeje o reel

Escolha um slug curto em kebab-case, depois npm run new -- <slug> "<Título>". Isso cria reels/<slug>/ com script.json, reel.html, assets/.

Leia .claude/skills/make-reel/guides/script.md e escreva reels/<slug>/script.json:

• 6 a 10 cenas, 30 a 55 segundos no total. Uma ideia por cena, 8 a 20 palavras faladas por cena.
• A cena 1 é o gancho e começa em menos de 2 segundos.
• Cada cena tem id, say (narração exata) e visual (o que o espectador vê, com a palavra em que cada batida visual cai).
• Se o tópico for factual, acerte os fatos. Verifique qualquer coisa que não tiver certeza (pesquise se puder) e coloque a fonte em um kicker ou nota na tela. Prefira números aproximados ("até 30%") a precisão inventada.

3 · Narração

npm run voice -- <slug>

Isso cria voice.mp3 e timeline.json (início/fim da cena + timestamp de cada palavra). Leia a tabela impressa: é o tempo que você usará para animar. Os clipes são armazenados em cache por cena, portanto, edições posteriores apenas regravam as cenas alteradas.

4 · Anime

Leia .claude/skills/make-reel/guides/scenes.md (a referência completa do kit) e .claude/skills/make-reel/guides/style.md (o visual). Em seguida, escreva reels/<slug>/reel.html: uma <section class="scene" data-scene="<id>"> por cena do script, mesmos ids, mesma ordem.

Regras mais importantes:

• Sincronize o movimento com as palavras. Use data-at="@word" para que as coisas apareçam quando são ditas. Cada cena deve ter uma batida em sua palavra-chave, não apenas uma entrada em 0.
• Algo se move o tempo todo. Sem intervalo maior que ~2s sem nada mudando. Use batidas sincronizadas com palavras, data-loop, contadores, desenho de linhas SVG.
• Layout: texto dentro de x 72–1008. Manchetes a partir de y≈230. Visual principal entre y≈450 e 1180. Legendas ficam em y≈1240–1440; mantenha o conteúdo fora dessa faixa, ou defina data-captions="top" / "off" na cena. Nada importante abaixo de y 1700 (a UI do aplicativo cobre).
• As posições são absolutas (class="abs" + left/top inline). Nunca use animações ou transições CSS; todo movimento vem de atributos data ou hooks Reel.on(), e tudo funciona com molas (spring, spring-snappy, spring-bouncy, spring:k,c,m). Caso contrário, a verificação falha.
• Sem texto centralizado em caixa alta em um gradiente de cor (a verificação falha).
• Visuais: emoji, SVG inline, formas CSS, cards/phone/window/stamp/chips do kit e imagens em reels/<slug>/assets/. Não baixe imagens de pessoas reais nem use logotipos/personagens que você não possui.

5 · Verifique seu próprio trabalho (sempre, antes de renderizar)

npm run check -- <slug>

1. Corrija todos os erros ✗. Corrija avisos ⚠ a menos que tenha um motivo para não fazê-lo.
2. Abra cada PNG da folha de contato listada com a ferramenta Read e olhe de fato. O lint não pode julgar o gosto. Procure por: elementos sobrepostos ou apertados, texto difícil de ler, cenas vazias ou chatas, visuais que não correspondem à narração, legendas cobrindo o conteúdo, estilo inconsistente entre as cenas.
3. Se o reel tiver um taste, a verificação imprime suas folhas de referência. Olhe para elas ao lado das folhas do reel e nomeie as três maiores diferenças (ritmo, tipo, cor, movimento). Corrija as que importam, ou diga por que não.
4. Edite, execute a verificação novamente, olhe novamente. Repita até ficar limpo. Geralmente 1 a 3 rodadas.

6 · Renderize

npm run render -- <slug>. Saída: out/<slug>.mp4. Use --draft para uma prévia rápida em meia resolução, --from 10 --to 18 para renderizar apenas uma seção.

Após a renderização, extraia 3 a 4 frames do MP4 (ffmpeg -ss <t> -i out/<slug>.mp4 -frames:v 1 f.jpg) em transições e batidas sincronizadas com palavras e olhe para eles, para saber que o MP4 corresponde ao que a verificação mostrou.

Entregue: o caminho do MP4, sua duração, a voz usada e uma linha sobre qualquer coisa que você ainda melhoraria. Se o usuário estiver em sua própria máquina, mencione npm run preview -- <slug> para assisti-lo com áudio no navegador.

7 · Loop de feedback

Leia .claude/skills/make-reel/guides/feedback.md. O usuário dirá coisas como "parece estranho", "o gancho está fraco", "a cena 4 arrasta", "aumente o carimbo". Mapeie cada nota para a menor alteração:

• Redação, ritmo, cena muito longa/curta → edite script.json, depois npm run voice (apenas as cenas alteradas regravam). Os timestamps das palavras mudam, mas as referências @word seguem automaticamente.
• Visual, layout, movimento, tempo de uma batida → edite apenas reel.html. Sem regravação.
• Depois verifique → olhe as folhas → renderize. Diga o que mudou em uma ou duas linhas.