Skill Remotion Shorts
Você escreve um curto como um arquivo JSON de cenas. O projeto Remotion empacotado organiza as palavras, cronometra cada cena de acordo com a velocidade de leitura, mantém o texto dentro da área que nenhum botão do aplicativo cobre, renderiza uma folha de revisão, uma capa e o MP4, e o usuário pode publicá-lo com o WoopSocial.
Você não escreve código Remotion para cada vídeo. Os modelos são fixos e testados; seu trabalho é o roteiro: o que cada tela diz, em que ordem e com que velocidade.
0. Configuração (uma vez por máquina)
Requer Node 20 ou superior. Verifique com node -v; se estiver faltando, direcione o usuário para https://nodejs.org. O Remotion suporta macOS 15 ou superior, Windows x64 e Linux com glibc 2.35+ (Ubuntu 22.04, Debian 12 ou superior).
node <skill-dir>/scripts/setup.mjs remotion-shorts
Isso copia o projeto para ./remotion-shorts, instala pacotes fixados (cerca de 260 MB) e baixa o navegador headless com o qual o Remotion renderiza (100 a 150 MB). Leva de 1 a 3 minutos na primeira vez. Execute novamente após a atualização do skill: ele atualiza os arquivos de modelo (quaisquer arquivos que o usuário alterou são mantidos como .bak) e nunca toca em seus scripts, assets ou saída.
Licença. O Remotion é gratuito para indivíduos e empresas de até 3 pessoas. Empresas com 4 ou mais pessoas precisam de uma licença corporativa Remotion, e renderizar a partir de scripts conta como automação (remotion.pro/license). Se o usuário estiver renderizando para uma empresa maior, avise-o uma vez, claramente, antes da primeira renderização.
1. Pergunte o que você precisa (uma mensagem, pule o que já é conhecido)
- O material. Um tópico, artigo, URL, anotações, dados, changelog ou lista. Você escreve apenas fatos que pode referenciar. Se o usuário fornecer um tópico sem fonte, encontre uma fonte primária (estatísticas oficiais, documentos, o changelog do próprio produto) e nomeie-a.
- Para quem é e o único takeaway. Um curto diz uma coisa.
- Aparência. Um tema (
ink,paper,volt,ocean,clean) ou suas cores de marca, e um handle para a tela final. - Áudio. Os efeitos sonoros integrados estão ativados por padrão (um hit no gancho, um whoosh em cada corte, um pop nos destaques, ticks nas contagens); eles são feitos para este modelo e são seguros em todos os aplicativos. Música apenas de um arquivo para o qual eles tenham os direitos de uso (veja
references/writing-shorts.mdpara saber por que nenhuma biblioteca gratuita é segura em todos os três aplicativos). - Onde será publicado. TikTok, Reels, Shorts ou todos os três.
2. Escreva o roteiro
Leia references/writing-shorts.md antes do primeiro roteiro de uma sessão. A versão resumida:
- A cena 1 é um gancho que declara o benefício em cerca de 10 palavras ou menos: um número, uma afirmação ou a promessa da lista ("5 ferramentas gratuitas que substituem..."). Ela aparece completamente na tela a partir do quadro 0. Se o gancho tiver um número, coloque-o em
bigpara que seja a primeira coisa que o olho vê. - Uma ideia por cena. Uma cena é uma batida, não um parágrafo. Cenas de estatística carregam um número e o que ele significa. Os itens da lista contam para baixo ou para cima; diga qual no gancho.
- Informação real em cada cena. Um vídeo de texto modelado sem nada de novo é o que o YouTube chama de conteúdo inautêntico e o Instagram chama de não original. Nunca encha.
- Os números são exatos e têm fonte. Coloque a fonte no
footer("Dados: USGS"). Nunca arredonde um número para uma afirmação diferente. - Termine com uma ação ou uma linha que volte ao gancho para que o loop pareça contínuo. Sem "obrigado por assistir".
- Duração: 15 a 45 segundos é o alvo; o renderizador avisa após 59.
Escreva short.json na pasta do projeto. O formato completo, cada tipo de cena e cada opção estão em references/short-json.md. Um roteiro mínimo:
{
"theme": "ink",
"footer": "Dados: USGS",
"handle": "@seuhandle",
"scenes": [
{ "type": "hook", "big": "2,5%", "text": "da água da Terra é doce" },
{ "type": "stat", "value": "96,5", "suffix": "%", "label": "é água salgada nos oceanos" },
{ "type": "stat", "value": "68,7", "suffix": "%", "label": "da água doce é gelo e geleiras", "highlight": "gelo e geleiras" },
{ "type": "end", "text": "Salve isso para o trivia noturno", "highlight": "Salve isso" }
]
}
3. Verifique antes de renderizar o vídeo
cd remotion-shorts
node render.mjs short.json --stills
Em alguns segundos, isso imprime o plano (segundos e tamanho da fonte por cena) e escreve:
out/short/sheet.jpg: o último quadro de cada cena (tudo na tela), com as áreas da zona segura marcadas com uma linha tracejada fina (o texto deve permanecer dentro dela).out/short/cuts.jpg: quadro 0 e os quadros ao redor de cada corte, para verificar o movimento.out/short/cover.jpg: o gancho depois de pousar (faça o upload como capa do Reels).out/short/report.json: tempos, quebras de linha e avisos.
Abra ambas as folhas e olhe para elas. Verifique: cada cena é legível no tamanho de um telefone, cada uma diz uma coisa, os destaques estão nas palavras que importam, algo parece apertado, a ordem está correta e o quadro 0 mostra o gancho inteiro. Corrija o JSON e execute --stills novamente até que você o publicaria.
Os avisos interrompem a renderização do vídeo (código de saída 2): texto muito longo para uma tela, um gancho muito longo, um destaque que não está no texto, uma cena muito rápida para ler, um ritmo fora de 0,85 a 1,25 ou um curto com mais de 59 segundos. Corrija o roteiro; use --force somente quando o usuário viu o aviso e o quer mesmo assim. Alguns problemas são erros que --force não pode substituir, como uma palavra muito larga para a tela em qualquer tamanho: isso colocaria o texto fora da tela.
4. Renderize
node render.mjs short.json
Escreve out/short/short.mp4: 1080x1920, 30 fps, H.264, yuv420p, AAC (uma faixa silenciosa quando não há música), que TikTok, Reels e Shorts aceitam. Um curto de 30 segundos renderiza em cerca de um minuto em um laptop recente. Máquinas com 8 GB de memória renderizam 2 quadros por vez; se uma renderização ainda for morta por falta de memória, execute-a novamente com --concurrency 1.
Antes de mostrá-lo, pegue três quadros e olhe para eles (início, meio, fim), ou reproduza-o se seu cliente permitir. Em seguida, mostre ao usuário a capa, a folha e o caminho do MP4.
Várias contas: nunca publique o mesmo arquivo em várias contas. Faça uma variante por conta (um gancho, tema ou ordem de cena diferente, salvo como seu próprio JSON) para que duas contas não publiquem um conteúdo quase duplicado.
5. Publique (WoopSocial, com confirmação)
Leia references/woopsocial.md. Resumidamente:
social_accounts_listpara encontrar as contas (conecte-as primeiro, se necessário).- Para o TikTok,
social_accounts_get_platform_inputspara a conta: as opções de privacidade e o vídeo mais longo permitido. O usuário escolhe a privacidade; não há padrão. - Upload:
media_uploads_create_sessioncom o tamanho exato em bytes dereport.json, salve a resposta comosession.json, executenode upload.mjs session.json out/short/short.mp4, depoismedia_uploads_complete_sessionaté que fiqueREADY. - Escreva a legenda por plataforma (TikTok e Reels: uma linha que adiciona ao vídeo mais 3 a 5 hashtags específicas; YouTube: um título com menos de 100 caracteres mais uma descrição). Use
contentOverridepara texto por plataforma. posts_validate, depois mostre ao usuário: contas, legenda por plataforma, privacidade, horário agendado com fuso horário, a capa. Aguarde um sim claro. Em seguida,posts_createeposts_get.
Campos de divulgação: isYourBrand: true no TikTok quando o curto promove o produto do próprio usuário; isAiGeneratedContent apenas para imagens, vídeo ou voz de IA realistas (texto cinético não precisa). YouTube madeForKids é uma declaração legal: pergunte, nunca adivinhe.
6. Relate
Mostre: o caminho do MP4, duração, a folha, onde foi publicado (links de posts_get) ou o agendamento, e qualquer coisa que você não pôde fazer. Nunca invente visualizações ou resultados; leia-os mais tarde com social_account_posts_list e relate a data em que foram coletados.
Editando a aparência
- Cores da marca: passe
themecomo um objeto (bg,fg,accent,accentText,font,uppercase). Mantenha o contraste do texto em 7:1 ou melhor; verifique o acento também no fundo. - Fotos ou vídeo atrás das cenas:
imagepor cena oubackgroundpara todo o curto. Eles são escurecidos sob a cor do tema para que o texto permaneça legível. Use arquivos que o usuário possui ou tem licença e credite-os na legenda quando a licença solicitar. - Fontes incluídas: Anton (condensada, maiúscula, alta), Poppins, Inter. Todas OFL.
- Para alterar os próprios modelos, edite
src/Short.tsxe visualize comnpm run studio.
Casos extremos
- Sem fonte para um número: não o use. Diga o que está faltando.
- Texto que não cabe: divida a cena; não reduza a fonte abaixo do mínimo (o renderizador não permitirá).
- Texto RTL ou CJK, ou emoji: as fontes incluídas não os cobrem e podem aparecer como caixas vazias. Diga isso e deixe-os de fora (os emojis podem ir na legenda).
- Usuário quer um som trending: as postagens da API não podem adicionar um. Publique no TikTok com
postMode: MEDIA_UPLOADpara que ele caia na caixa de entrada do TikTok do usuário para finalização no aplicativo. - A renderização falha no Linux com bibliotecas ausentes: instale os pacotes listados em
references/platform-specs.md. - Windows: sempre passe as propriedades no arquivo JSON, nunca inline na linha de comando.
Barra de qualidade
Antes de considerar concluído, deve passar por todos os seguintes:
- O quadro 0 mostra o gancho inteiro (verifique cuts.jpg); cerca de 10 palavras ou menos, declarando o benefício.
- Cada cena diz uma coisa; nenhuma cena com mais de cerca de 14 palavras.
- Cada número corresponde à sua fonte; a fonte está na tela ou na legenda.
- Sem avisos, ou o usuário os viu e escolheu
--force. - Ambas as folhas verificadas: nenhum texto fora da linha tracejada de segurança, destaques nas palavras certas.
- 15 a 59 segundos.
- Uma versão distinta para cada conta.
- O usuário confirmou antes de qualquer coisa ser publicada.