Configuração do Remotion

O que Configuração do Remotion faz?

Você cria a estrutura de um novo projeto Remotion e o prepara para que o restante do fluxo de trabalho seja "apenas dar um prompt para o Claude". Este é o trabalho de configuração única. Faça isso uma vez por projeto; depois disso, remotion-compose e remotion-render vão direto para o loop criativo.

Execute imediatamente. Se o usuário disser qualquer coisa sobre criar vídeos com Claude — "configurar Remotion", "criar um projeto Remotion", "quero fazer vídeos de produto com Claude", "iniciar um projeto de vídeo" — execute esta skill.

Passo 1 — Verificar as ferramentas

O Remotion renderiza com Chromium headless, então verifique o Node antes de criar o scaffold:

node --version   # precisa ser >= 16; prefira uma versão LTS ativa

Se o Node for anterior à versão 16, pare e avise o usuário para atualizar (nvm: nvm install --lts && nvm use --lts). Confirme também que o npx está disponível (vem com npm 5.2+).

Passo 2 — Criar o scaffold do projeto

npx create-video@latest

Isso é interativo. Recomende o template Blank (Hello World) — é a base mais limpa para vídeos de produto. O CLI pergunta por um diretório de projeto e um gerenciador de pacotes; deixe o usuário escolher, depois cd para a nova pasta e instale:

cd <nome-do-projeto>
npm install

Passo 3 — Instalar as Skills do Agente Remotion

Para que o Claude Code tenha o contexto das skills do Remotion disponível neste repositório:

npx remotion skills add remotion

Isso coloca os arquivos de skill do agente Remotion no projeto. Se o comando não estiver disponível na versão instalada do Remotion, aponte o usuário para um @remotion/cli mais recente e continue — é uma conveniência, não uma dependência obrigatória.

Passo 4 — Estabelecer convenções de pastas

Padronize a estrutura para que as skills posteriores sempre saibam onde cada coisa fica:

src/
  Root.tsx              # registra cada <Composition> (o registro de entrada)
  index.ts              # registerRoot(RemotionRoot)
  compositions/         # um arquivo .tsx por vídeo — remotion-compose escreve aqui
public/
  assets/               # imagens, logotipos, áudio — referenciados via staticFile()

Crie as pastas se o template não as criou:

mkdir -p src/compositions public/assets

src/Root.tsx é o registro. Cada vídeo é uma <Composition> registrada aqui:

// src/Root.tsx
import { Composition } from "remotion";
import { HelloWorld } from "./compositions/HelloWorld";

export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="HelloWorld"
      component={HelloWorld}
      durationInFrames={90}
      fps={30}
      width={1920}
      height={1080}
    />
  );
};

// src/index.ts
import { registerRoot } from "remotion";
import { RemotionRoot } from "./Root";
registerRoot(RemotionRoot);

Padrões sensatos para registrar: 30 fps e 1920x1080 para vídeos de produto em paisagem (1080x1920 para verticais em redes sociais), e durações curtas — 90 quadros a 30 fps são 3 segundos, e a maioria dos vídeos de demonstração de produto fica entre 15 e 60 segundos (450–1800 quadros).

Passo 5 — Carregar uma fonte do Google

O Remotion tem suporte de primeira classe para Google Fonts, para que o texto seja renderizado de forma determinística. Instale e carregue uma vez:

npm install @remotion/google-fonts

// carregue próximo ao topo de um arquivo de composição
import { loadFont } from "@remotion/google-fonts/Inter";
const { fontFamily } = loadFont();
// depois use: <div style={{ fontFamily }}>...</div>

loadFont() bloqueia a renderização até que a fonte esteja pronta, então o texto na tela nunca pisca com uma fonte alternativa sem estilo. Escolha a fonte que combina com a marca — troque Inter por Poppins, Roboto, etc.

Passo 6 — Teste de fumaça da composição

Escreva uma composição trivial para provar que o ambiente renderiza do início ao fim:

// src/compositions/HelloWorld.tsx
import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";
import { loadFont } from "@remotion/google-fonts/Inter";

const { fontFamily } = loadFont();

export const HelloWorld: React.FC = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: "clamp",
  });
  return (
    <AbsoluteFill style={{ backgroundColor: "#0B0B0F", justifyContent: "center", alignItems: "center" }}>
      <h1 style={{ fontFamily, color: "white", fontSize: 90, opacity }}>
        Funciona.
      </h1>
    </AbsoluteFill>
  );
};

Certifique-se de que está registrada em src/Root.tsx (Passo 4), depois renderize:

npx remotion render src/index.ts HelloWorld out/smoke-test.mp4

A primeira renderização baixa o Chromium headless (algumas centenas de MB — espere uma espera única de alguns minutos em uma conexão normal); depois disso, este teste de fumaça de 90 quadros deve renderizar em bem menos de um minuto. Se out/smoke-test.mp4 reproduzir um título com fade-in, o ambiente está bom. Se a renderização falhar, geralmente é: (a) download/permissões do Chromium, (b) a composição não registrada em Root.tsx, ou (c) um problema de versão do Node do Passo 1.

Passo 7 — Iniciar o Remotion Studio para pré-visualização

Para a pré-visualização interativa (navegar pela linha do tempo, recarregamento automático em edições):

npx remotion studio

Isso serve o Studio em http://localhost:3000. O template create-video também configura npm run dev para a mesma coisa. Deixe o Studio rodando enquanto itera — as edições nos arquivos de composição recarregam instantaneamente.

Entregável

O usuário sai com um projeto Remotion funcional: o repositório com a estrutura src/compositions/ + public/assets/ no lugar, as skills do agente Remotion instaladas, uma fonte do Google configurada, uma composição de teste de fumaça registrada, um out/smoke-test.mp4 renderizado que realmente reproduz, e o Remotion Studio rodando para pré-visualização. Nada está "configurado" até que o MP4 do teste de fumaça exista e reproduza.

NÃO FAÇA

• Não pule a verificação do Node e crie o scaffold mesmo assim — um Node abaixo da versão 16 falha no meio da renderização do Chromium com um erro confuso, não no momento da instalação.
• Não declare a configuração concluída sem renderizar o teste de fumaça; um projeto que compila mas nunca produziu um MP4 não provou que o pipeline do Chromium funciona.
• Não coloque composições ou assets em locais aleatórios — as skills posteriores (remotion-compose, remotion-render) dependem de src/compositions/ e public/assets/ existirem.
• Não referencie assets por caminho relativo ou URL; use staticFile() a partir de public/, ou as renderizações funcionarão localmente e quebrarão em outro lugar.
• Não use fontes do sistema ou importadas por CSS para texto na tela — sem loadFont() bloqueando, o texto pode renderizar com uma fonte alternativa na máquina de renderização.
• Não escolha um template cheio de funcionalidades para vídeos de produto; o template Blank evita carregar código de demonstração que o usuário teria que deletar depois.

Nível de qualidade

• node --version é >= 16 e foi verificado antes do scaffold.
• out/smoke-test.mp4 existe e reproduz um título com fade-in.
• As convenções de pastas existem exatamente como especificado, e a composição de teste de fumaça está registrada em src/Root.tsx.
• O texto é renderizado através de @remotion/google-fonts com loadFont(), não uma fonte alternativa do sistema.
• O Remotion Studio é iniciado em localhost:3000 e recarrega automaticamente as edições.

Transição

Assim que o teste de fumaça renderizar e o Studio estiver no ar, avise o usuário que o projeto está pronto e faça a transição: "A configuração está concluída. Descreva o vídeo que você deseja — duração, cenas, cores da marca — e eu escrevo a composição (remotion-compose), depois renderizo e itero (remotion-render)."