Projeto Remotion
Quatro cenas editáveis, comandos de prévia e render, dependências fixadas e instruções de uso.
Baixar projeto ZIP ↓VIDEO1 · MATERIAL GRATUITOSua ideia.
Sua ideia.
Seu primeiro vídeo.
Do briefing ao MP4 com Claude Code e Remotion: um projeto para adaptar, prompts para cada etapa e um caminho para conferir o resultado.
Sem cadastro. O material é gratuito; ferramentas e licença têm condições próprias.
Você entrega a ideia e revisa as cenas.
O roteiro orienta o que entra no projeto.
Claude Code ajuda a escrever. Remotion renderiza.
O MP4 é conferido antes da publicação.
01 / UM RESULTADO CONCRETOVeja o exemplo.
Veja o exemplo.
Depois, faça o seu.
Este vídeo acompanha o projeto que você pode baixar. São quatro cenas simples para entender o fluxo antes de acrescentar efeitos, narração ou conteúdo mais longo.
Nova demonstração renderizada com HyperFramesBaixar MP4 de demonstração ↓Demonstração HyperFrames · 24 segundos · Full HD · interface ilustrativa, animação real.
Mais que um prompt.
Um ponto de partida.
Guia em PDF
Preparação, roteiro, revisão, exportação, solução de problemas e fontes oficiais.
Baixar guia PDF ↓10 prompts
Briefing, storyboard, implementação, ajustes, identidade, áudio e diagnóstico.
Baixar prompts TXT ↓Briefing para preencher
Objetivo, público, duração, identidade e cenas organizados antes de começar.
Baixar briefing TXT ↓Skill Diretor VIDEO1
Instruções personalizadas de @vhugoai para orientar as etapas. É separada das Skills oficiais Remotion.
Baixar Skill ZIP ↓Skills oficiais Remotion
Boas práticas mantidas pelo projeto Remotion, para usar no seu agente compatível.
Abrir documentação oficial ↗Faça um teste simples.
Depois, personalize.
Prepare o ambiente
Instale Node.js LTS pelo site oficial. Tenha uma ferramenta de código, como Claude Code, com acesso autorizado à pasta do projeto. A conta e o plano do agente são separados deste material.
Abra o projeto
Baixe e extraia o projeto VIDEO1. Abra um terminal dentro da pasta em que está package.json. Execute npm ci. O arquivo de lock fixa as versões usadas no exemplo.
Veja o primeiro vídeo
Execute npm run studio. O Remotion Studio abre a composição Video1 para você revisar. O exemplo é vertical, tem quatro cenas e 20 segundos, sem áudio.
Defina sua ideia
Preencha o briefing. No Claude Code, abra a mesma pasta e peça que ele leia LEIA-ME.md e src/index.jsx antes de propor alterações.
Revise o storyboard
Peça roteiro por cena, textos e duração. Confira se há informação demais. Aprove o conteúdo antes da implementação para reduzir retrabalho.
Ajuste a animação
Depois da implementação, revise no Studio. Peça ajustes indicando cena, problema e resultado. Mudanças no projeto precisam de novo render para aparecer no MP4.
Gere o MP4
Execute npm run render. O caminho esperado é out/video1.mp4. No primeiro uso, o Remotion pode baixar um navegador; mantenha conexão.
Assista antes de publicar
Abra o arquivo e confira todas as cenas. Verifique proporção, textos, margens, duração e áudio se tiver adicionado. O exemplo inicial não inclui narração.
Claude Code requer uma conta elegível; o plano gratuito do chat Claude não inclui esse acesso. Confira instalação e acesso na documentação oficial.
Comandos do projeto baixado
npm ci npm run studio npm run render
Rode na pasta com package.json. Saída esperada: out/video1.mp4. Comandos não são executados pela página.
Como adicionar as Skills oficiais?
A documentação Remotion apresenta npx skills add remotion-dev/skills. Execute no ambiente escolhido, leia as opções e selecione o agente compatível. Use as instruções atuais da documentação para instalação; a Skill Diretor VIDEO1 é uma orientação extra do kit.
Preencha a ideia.
Leve para o Claude Code.
Este formulário monta o texto no navegador. Não usa uma IA, não cria vídeos e não envia seus dados a um servidor.
Peça a mudança certa,
no momento certo.
Briefing
Quero um vídeo sobre [assunto] para [público]. Objetivo: [ação desejada]. Duração: [segundos]. Formato: [proporção]. Antes de escrever código, faça perguntas apenas sobre informações essenciais que faltam e apresente um briefing resumido.
Roteiro e storyboard
Com este briefing, proponha um roteiro de até quatro cenas. Para cada cena, indique duração, texto na tela, movimento e transição. Não implemente ainda. Evite texto longo e reserve tempo de leitura.
Implementação
Implemente o storyboard aprovado neste projeto Remotion. Preserve as versões instaladas e a composição existente. Use animações baseadas em frames e mantenha margens seguras. Apresente a prévia e informe os arquivos alterados. Não use APIs pagas sem autorização.
Ajuste de uma cena
Na cena [número], altere [problema] para [resultado]. Preserve as outras cenas e explique se a mudança afeta a duração total. Gere a prévia para revisão antes do render final.
Identidade visual
Aplique a paleta [cores], tipografia [fontes disponíveis] e referências [arquivos]. Mantenha contraste e hierarquia. Evite fontes remotas sem necessidade. Não altere o conteúdo aprovado.
Texto legível
Revise o projeto para leitura no celular: tamanho dos textos, margens, contraste e tempo de permanência. Identifique problemas e proponha ajustes antes de implementá-los.
Áudio opcional
Quero adicionar o arquivo de áudio [arquivo local autorizado]. Confira duração e volume, sincronize as cenas e sinalize se faltam direitos de uso. Não gere voz nem contrate serviços externos automaticamente.
Exportação
Confira se a composição funciona e execute o comando de render documentado no projeto. Informe o caminho do MP4 e o resultado do processo. Se falhar, mostre a mensagem e diagnostique a causa; não diga que o arquivo está pronto sem conferir.
Diagnóstico
Este comando [comando] retornou [erro]. Confira package.json, versão do Node, dependências e configuração do Remotion. Proponha uma correção mínima. Não reinstale tudo nem atualize versões sem justificar.
Adaptação de formato
Adapte o projeto aprovado para [1080×1920 / 1080×1080 / 1920×1080]. Reorganize a composição e as margens, preservando o roteiro. Confira a prévia antes de renderizar.
06 / REVISÃOO vídeo funciona
O vídeo funciona
quando você confere.
Uma prévia bonita pode esconder um texto curto demais, uma informação incorreta ou um corte ruim. Use o checklist antes de dar o render por concluído.
0 de 8 itens conferidos
Diagnostique.
Evite recomeçar à toa.
“npm não encontrado”
Instale Node.js LTS pelo site oficial e reabra o terminal. Confira se o comando node --version responde.
“package.json não encontrado”
Abra o terminal na pasta extraída do projeto. Não execute npm ci dentro da pasta src.
O navegador do render não inicia
Confira a conexão e a mensagem do Remotion. O primeiro render pode baixar um navegador. No Windows, o script também verifica o FFmpeg e tenta usar uma instalação disponível no PATH; veja LEIA-ME.md. Informe o erro ao agente antes de mudar configurações.
O texto ficou cortado
Ajuste tamanho, quebra e posição na composição. Confira em proporção de celular e renderize novamente.
O MP4 não tem som
O exemplo do kit é silencioso. Para som, adicione um arquivo autorizado e configure o áudio no projeto.
O render falhou
Copie o comando, a mensagem e as versões do projeto. Use o prompt de diagnóstico. Código implementado não significa MP4 gerado.
O que está incluído.
Guia, prompts, Skill personalizada, projeto de exemplo e vídeo de demonstração. O kit não inclui conta Claude Code, geração de voz, música licenciada, serviços de vídeo externos ou operação automática por esta página.
O projeto foi testado no ambiente descrito no arquivo de verificação. Seu computador pode exigir ajustes. Para uso comercial, confira a licença Remotion e os direitos dos recursos utilizados.
Comece com o exemplo.
Transforme em algo seu.
Abra o projeto, confira a prévia e altere uma cena. Esse primeiro teste ajuda a entender o processo antes de criar um vídeo maior.
Baixar os materiais ↑