TIPS 56 · VIDEO

Este vídeo foi montado pelo Claude

Vídeos feitos de código com Remotion e Claude Code: as skills oficiais, o fluxo do guião ao ficheiro final, a verificação dos fotogramas e como fechar tudo numa skill que arranca com um comando.

O que é e porque importa

Montar à mão 45 segundos de vídeo vertical são horas: cortes, legendas palavra a palavra, tempos. E se mudas uma frase do guião, refazes metade do trabalho.

O Remotion muda o jogo: é uma biblioteca que faz vídeos com React. Cada vídeo é um projeto React, cada cena é um componente, ou seja, um pedaço de código que diz o que está no ecrã em cada fotograma. Como é código, o Claude Code sabe escrevê-lo, mudá-lo e exportá-lo. Mudas uma frase, voltas a gerar, e o vídeo muda.

Os nossos vídeos fazemo-los assim, com uma skill nossa: escrevo-lhe a ideia e ela faz o guião, as vozes, as legendas, as cenas, a exportação, e depois verifica os fotogramas um a um. Este guia é para quem tem de publicar vídeos e não tem tempo, ou vontade, de aprender a montar.

1. O projeto e as skills oficiais

Precisas de Node.js e do Claude Code. O Remotion tem uma página própria para o Claude Code, e estes são os comandos dela, por ordem:

Os comandos
npx create-video --yes --blank my-video
cd my-video
npx remotion skills add
npm run dev

O primeiro cria um projeto vazio, o terceiro instala as skills do Remotion para agentes, o último abre o Remotion Studio: a pré-visualização do vídeo no browser. Depois, num segundo terminal, na mesma pasta, arrancas o claude. As skills também se instalam com npx skills add remotion-dev/skills. Cada uma chama-se com a barra:

  • /remotion-best-practices: contém todas as outras. Se não sabes qual usar, usa esta.
  • /remotion-create: um projeto ou uma composição nova (uma composição é um vídeo, com medidas, fotogramas por segundo e duração).
  • /remotion-markup: animações, paginação, textos, fontes, áudio e tempos.
  • /remotion-captions: as legendas.
  • /remotion-render: exporta um vídeo ou um único fotograma.
  • /remotion-upgrade: atualiza o Remotion e as skills instaladas.

2. Do guião ao ficheiro final

  1. O guião. Frases curtas, uma coisa por frase. Para nós, 45-55 segundos são cerca de 120 palavras.
  2. As vozes: ElevenLabs ou OmniVoice. Um ficheiro de áudio por cada fala: assim cada cena dura exatamente o mesmo que a sua frase, e se mudares uma só voltas a gerar essa.
  3. As legendas nas palavras. Transcreve-se o áudio com os tempos de cada palavra. O Remotion também o faz localmente, de graça, com Whisper.cpp (o pacote @remotion/install-whisper-cpp), e com createTikTokStyleCaptions() agrupa as palavras em páginas como nas redes sociais.
  4. As cenas. Um componente por cena, postas em fila com os tempos tirados do áudio, nunca escritos à mão. As medidas são definidas pela composição: para um vídeo vertical, 1080×1920.
  5. A exportação, com npx remotion render. Depois a verificação, que merece uma secção só para ela.
A mensagem
Cria um vídeo vertical de 45 segundos a partir deste guião: [guião]. Usa Remotion, 1080×1920, uma cena por frase, vozes com [ElevenLabs ou OmniVoice], um ficheiro de áudio por fala, legendas nas palavras. Tira os tempos do áudio, não os escrevas à mão. Antes de exportar, mostra-me a lista das cenas com início e fim.

3. A verificação dos fotogramas

É a parte que faz a diferença, e é a que eu à mão nunca faria. O Claude não vê um vídeo como tu, mas as imagens sim. Por isso exporta fotogramas parados nos momentos que contam, um com npx remotion still, vários de uma vez com npx remotion render e a opção --frames, e põe-nos numa folha de contactos: uma página com todos os fotogramas em grelha. Depois olha para ela e procura:

  • textos que saem das margens ou ficam por baixo dos botões da rede social;
  • uma legenda que não corresponde à palavra dita nesse momento;
  • um fotograma vazio ou preto mesmo no corte;
  • um elemento que aparece antes do tempo, ou um ecrã que não mostra o que a voz diz.
A mensagem
Verifica cada corte numa folha de contactos: exporta um fotograma mesmo antes e outro mesmo depois de cada corte, mais um a meio de cada legenda, põe-nos numa grelha com o número do fotograma por baixo e olha para ela. Encontra-me textos cortados, legendas erradas, fotogramas vazios. Corrige, volta a exportar e refaz a folha até estar limpa. Depois diz-me o que corrigiste.

4. Tudo numa skill, um comando com a ideia

Quando o fluxo funciona, fechas tudo numa skill. Uma skill é uma pasta com um ficheiro SKILL.md lá dentro: as instruções que o Claude Code segue quando escreves /nome-da-skill. Põe-na em ~/.claude/skills/<nome>/SKILL.md para a teres em todos os projetos, ou em .claude/skills/<nome>/SKILL.md para a teres só neste. O que escreves depois do comando chega à skill como $ARGUMENTS. A nossa funciona assim: escrevo o comando e a ideia, ela faz o resto.

O ficheiro
---
name: video
description: Cria um vídeo vertical com Remotion, da ideia ao ficheiro final.
disable-model-invocation: true
argument-hint: [ideia do vídeo]
---

Ideia: $ARGUMENTS

1. Escreve o guião: <duração>, frases curtas. Mostra-mo e espera pela minha autorização.
2. Gera as vozes com <ElevenLabs ou OmniVoice>, um ficheiro por fala.
3. Transcreve o áudio com os tempos de cada palavra e põe as legendas nas palavras.
4. Constrói as cenas seguindo estilo.md.
5. Exporta em 1080×1920.
6. Faz a folha de contactos de cada corte e verifica-a com verificacoes.md. Corrige até estar limpa.
7. Diz-me onde está o ficheiro e o que corrigiste.

disable-model-invocation: true quer dizer que só arranca quando a chamas: um vídeo custa tempo e créditos de voz, melhor não o lançar por engano. O estilo e a lista de verificações ficam em ficheiros à parte, na mesma pasta: o Claude só os lê quando precisa. A documentação recomenda manter o SKILL.md abaixo das 500 linhas.

A mensagem
Transforma o que fizemos hoje numa skill: cria .claude/skills/video/SKILL.md com os passos por ordem, põe o estilo em estilo.md e em verificacoes.md as verificações e os erros que encontrámos. Usa disable-model-invocation: true e a ideia em $ARGUMENTS.

5. A licença do Remotion

O Remotion é gratuito, também para uso comercial, se fores uma pessoa singular, uma empresa com 3 funcionários no máximo ou uma organização sem fins lucrativos, e também para o experimentar antes de o usar para trabalho. Acima de 3 funcionários é precisa a Company License. Não podes revender o Remotion nem uma versão tua modificada. Antes de começar, volta a ler a página da licença, porque as condições podem mudar, e verifica também as condições do serviço que usas para as vozes.

Os erros mais comuns

  • Escrever à mão os tempos das cenas. Mal mudas uma frase, tudo escorrega: os tempos tiram-se da duração do áudio.
  • Ver só o vídeo final. Um erro que dura um fotograma não se vê à velocidade normal: na folha de contactos, sim.
  • Legendas tiradas de uma transcrição por frases. São precisos os tempos de cada palavra, senão o texto chega antes ou depois da voz.
  • Uma skill que arranca sozinha. Sem disable-model-invocation: true, o Claude pode lançá-la quando um pedido se parece com ela.
  • Dar a licença como garantida. Se a empresa passar dos 3 funcionários, é precisa a Company License.

Checklist

  • O projeto Remotion arranca e o Remotion Studio mostra a pré-visualização
  • As skills do Remotion estão instaladas e /remotion-best-practices responde
  • Um ficheiro de áudio por fala, e os tempos das cenas vêm do áudio
  • As legendas seguem as palavras, não as frases
  • A folha de contactos de cada corte está limpa
  • A skill arranca com /nome e a ideia, e só quando eu a chamo
  • Verifiquei que a licença do Remotion cobre a minha empresa

Perguntas frequentes

Tenho de saber React?

Não, o código escreve-o o Claude. Mas saber ler uma cena ajuda: quando alguma coisa não te agrada, podes dizer «sobe o título na cena 3» em vez de «não me convence».

E se mudar uma frase depois de exportar?

Mudas a frase no guião, voltas a gerar só a voz dessa fala, e o Claude refaz os tempos, volta a exportar e verifica outra vez a folha de contactos. É por isso que compensa um ficheiro de áudio por fala.

Só funciona com o Claude Code?

Não. A página do Remotion sobre agentes também refere Codex, Kimi Code e OpenCode, e as skills seguem o padrão aberto Agent Skills. Este guia usa o Claude Code porque é o que eu uso.

← Todos os guias