O Claude Code cria vídeos do Remotion a partir de um prompt em linguagem simples, desde que a skill esteja instalada e o prompt seja escrito como uma lista de planos. Veja os comandos de instalação, três exemplos de prompt, código React para copiar, um fluxo de trabalho com footage, soluções para erros de renderização e os custos da licença.
Digitar um parágrafo e receber de volta um MP4 renderizado parece truque até você ver acontecer. Com a skill do Remotion no Claude Code, você descreve uma cena em linguagem simples, o agente escreve componentes React e o Remotion transforma cada quadro em um arquivo de vídeo de verdade. Nada de linha do tempo para arrastar. Nenhuma janela de exportação escondendo a única configuração de que você precisa. Este artigo mostra a instalação, os prompts que funcionam, código para copiar e as armadilhas que consomem uma tarde inteira.
Se você administra um SaaS que precisa de um vídeo de lançamento, uma equipe de dados que quer gráficos animados ou um criador solo cansado de editar a mesma vinheta de novo, criar vídeos com código oferece algo que um editor de linha do tempo nunca vai oferecer: um vídeo que é um arquivo de texto simples, que você pode versionar, revisar e renderizar de novo em um minuto.
O Remotion é um framework que renderiza vídeo a partir de código React. Você escreve componentes, o Remotion os reproduz quadro a quadro em um navegador headless, captura cada quadro e une o resultado em MP4, WebM, GIF ou uma imagem estática. Tudo o que uma página web consegue desenhar, como SVG, layouts em CSS, gráficos, fontes web e canvas, vira material de vídeo.
A documentação do Remotion resume a ideia central em uma linha: um vídeo é uma função de imagens ao longo do tempo. Seu componente lê o número do quadro atual e devolve como esse quadro deve ser. Mude um valor de quadro para quadro e você tem uma animação.
Cada composição precisa de quatro números:
O primeiro quadro é 0 e o último quadro é durationInFrames - 1. Um clipe de 5 segundos a 30 fps tem 150 quadros. Essa conta importa depois, porque é a primeira coisa que um prompt vago erra.
O Claude Code já escreve React sólido. O que ele não conhece de fábrica são as regras internas do Remotion. A animação precisa ser controlada por useCurrentFrame(), porque transições em CSS não renderizam de forma determinística. Mídia local deve ser carregada com staticFile(). Clipes de vídeo devem usar <OffthreadVideo>, e não uma tag <video> comum. Se você errar uma dessas, a prévia parece boa enquanto a renderização final quebra.
A skill é um conjunto de instruções que o agente carrega quando detecta uma tarefa de vídeo. Ela abrange as melhores práticas do Remotion, a criação de projetos e composições, a abertura do Studio, a renderização e extras como legendas e atualizações de pacotes. O agente para de adivinhar e passa a seguir as convenções do framework.
💡 A skill é orientação, não um renderizador. Seu projeto, sua instalação do Node.js e o próprio Remotion continuam produzindo o vídeo. A skill só impede que o agente escreva código que brigue com o framework.
Você precisa de Node.js, de um terminal e do Claude Code, que exige um plano pago da Anthropic ou créditos de API. Todo o resto é instalado pelo npm.
npx create-video --yes --blank my-video
cd my-video
npm install
A flag --blank gera um projeto mínimo em vez de um demo, então o agente não tem nada para desembaraçar antes de começar.
Dentro da pasta do projeto:
npx remotion skills add
Existem duas alternativas. O pacote de skills é instalado com npx skills add remotion-dev/skills, e o plugin oficial do Claude Code é instalado com estes dois comandos:
claude plugin marketplace add remotion-dev/claude-code-plugin
claude plugin install remotion@remotion
Abra dois terminais na pasta do projeto. Deixe a prévia rodando no primeiro e inicie o agente no segundo:
# terminal 1
npm run dev
# terminal 2
claude
O Studio abre uma prévia no navegador que recarrega toda vez que o agente salva um arquivo. Inicie uma nova sessão do Claude Code depois de instalar, senão a skill pode não carregar. A skill aparece como comandos de barra: /remotion-create, /remotion-studio, /remotion-render, /remotion-docs e /remotion-best-practices, sendo que este último engloba todos os outros quando você não sabe qual se aplica.
Prompts vagos geram vídeos genéricos. Os prompts que funcionam se parecem com a lista de planos de um diretor: duração, dimensões, taxa de quadros, ordem das cenas com tempo, texto exato, caminhos de arquivos, cores, fontes, estilo de movimento e uma lista curta do que evitar.
| Ingrediente | Versão fraca | Versão forte |
|---|---|---|
| Duração | "um vídeo curto" | "15 segundos a 30 fps" |
| Tamanho | "formato para redes sociais" | "1080 por 1920, vertical" |
| Cenas | "abertura e demo" | "título de 2s, demo de 8s, chamada para ação de 5s" |
| Texto | "um título" | "Notas, finalmente rápidas" |
| Movimento | "animações legais" | "entradas com mola contida, sem quique" |
| Limites | nada | "sem música de banco, uma família de fontes" |
Diga o que evitar. "Sem gradientes, sem emoji, no máximo duas cores" evita mais retrabalho do que qualquer instrução positiva.
Este prompt foi modelado no que aparece no passo a passo da Tella:
/remotion-create
Create a 15-second, 1920x1080, 30 fps launch video for a note-taking app.
Three scenes: a 2-second title card, an 8-second product demo section,
and a 5-second call to action. Dark background, large readable type,
restrained spring animations. One file per scene under src/scenes,
all text passed in as props.
O que volta é previsível: três componentes de cena, uma composição raiz de 450 quadros e um objeto defaultProps com o texto. Visualize no Studio e depois ajuste com pedidos curtos, como "faça o título entrar 10 quadros depois" ou "deixe a mola da chamada para ação mais lenta".
Vídeos de dados são onde o código vence um editor de linha do tempo, porque os números são a entrada real, e não barras desenhadas à mão.
Read data/sales.json and build a 10-second, 1920x1080 bar chart at 30 fps.
Bars grow from zero with a spring, staggered by 4 frames each.
Show the value above each bar once it stops moving. Hold the final state
for 1 second. White background, one accent color, no gridlines.
Troque o arquivo JSON e renderize de novo, e você terá o vídeo do relatório do próximo mês. O escalonamento é uma ideia de uma linha para o agente: o atraso é o índice da barra vezes quatro quadros.
A skill inclui orientações sobre legendas, então um prompt como este funciona bem: "Adicione legendas palavra por palavra em public/clips/interview.mp4 usando captions.json. Destaque a palavra ativa em amarelo e mantenha as legendas dentro do terço inferior." Dê ao agente tempos reais de palavras em um arquivo, em vez de pedir que ele invente esses tempos. Tempos inventados saem de sincronia em poucos segundos.
Mesmo quando o agente escreve tudo, você deve conseguir ler o código. Três padrões aparecem em quase todo projeto.
import {AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig} from 'remotion';
export const TitleCard: React.FC<{title: string}> = ({title}) => {
const frame = useCurrentFrame();
const {fps} = useVideoConfig();
const enter = spring({frame, fps, config: {damping: 200}});
const opacity = interpolate(frame, [0, 15], [0, 1], {extrapolateRight: 'clamp'});
return (
<AbsoluteFill style={{backgroundColor: '#0f172a', justifyContent: 'center', alignItems: 'center'}}>
<h1 style={{color: 'white', fontSize: 96, opacity, marginTop: (1 - enter) * 60}}>
{title}
</h1>
</AbsoluteFill>
);
};
Um damping de 200 dá uma entrada suave, sem quique. interpolate mapeia os quadros 0 a 15 para a opacidade de 0 a 1, e extrapolateRight: 'clamp' impede que o valor passe de 1 depois.
import {AbsoluteFill, Sequence} from 'remotion';
export const LaunchVideo: React.FC = () => (
<AbsoluteFill>
<Sequence from={0} durationInFrames={60}>
<TitleCard title="Notes, finally fast" />
</Sequence>
<Sequence from={60} durationInFrames={240}>
<ProductDemo />
</Sequence>
<Sequence from={300} durationInFrames={150}>
<CallToAction />
</Sequence>
</AbsoluteFill>
);
Dentro de um Sequence, useCurrentFrame() recomeça do zero, então cada cena pode ser escrita e testada sozinha. A 30 fps, esses blocos duram 2, 8 e 5 segundos, o que soma os 450 quadros do prompt de lançamento.
import {Composition} from 'remotion';
import {TitleCard} from './TitleCard';
export const Root: React.FC = () => (
<Composition
id="TitleCard"
component={TitleCard}
durationInFrames={90}
fps={30}
width={1920}
height={1080}
defaultProps={{title: 'Hello from code'}}
/>
);
Agora substitua o texto no momento da renderização e percorra uma lista:
for name in "Spring sale" "Black Friday" "New arrivals"; do
npx remotion render src/index.ts TitleCard "out/${name// /-}.mp4" --props="{\"title\":\"$name\"}"
done
Três vídeos a partir de um único componente, sem abrir nenhum editor.
💡 Diga ao agente logo no início: "Toda string, cor e número vai para as props." Não custa nada e deixa as variantes em lote, os testes A/B e as traduções muito mais simples depois.
O Remotion anima o que você fornece: texto, formas, gráficos, imagens e clipes. Para um footage com aparência real ou um storyboard mais preciso, você traz material de fora. O PicassoIA cobre as duas pontas, com uma página do Claude Sonnet 5 para rascunhar especificações de cena e código, e uma página do Seedance 2.0 para gerar clipes.
high quando precisar de contagens exatas de quadros em muitas cenas, e low para reescritas rápidas. Deixe o max tokens no padrão de 8192 para especificações longas./remotion-create.O modelo também aceita uma imagem, então uma captura de tela da interface do seu produto pode alimentar o storyboard diretamente.
16:9 para 1920x1080, ou 9:16 para vertical.720p.public/clips/ dentro do seu projeto do Remotion.Para manter um visual de marca consistente, envie uma imagem fixa como primeiro quadro. O Seedance 2.0 a trata como a imagem de abertura do clipe.
💡 Gere um plano por clipe e monte-os juntos no Remotion. Clipes curtos com um movimento de câmera claro superam um único clipe longo com cinco ideias.
import {AbsoluteFill, OffthreadVideo, staticFile} from 'remotion';
export const HarborShot: React.FC = () => (
<AbsoluteFill>
<OffthreadVideo src={staticFile('clips/harbor.mp4')} />
</AbsoluteFill>
);
Depois, sobreponha texto, terços inferiores e legendas ao footage com React normal. Para acabamento fora do Remotion, estas páginas se encaixam no fluxo de trabalho:
| Tarefa | Página |
|---|---|
| Narração a partir de um roteiro | Speech 2.8 HD |
| Cortar um clipe no tamanho exato | Trim Video |
| Unir as cenas renderizadas | Video Merge |
| Trocar ou misturar uma trilha sonora | Video Audio Merge |
| Incorporar legendas em uma renderização | Autocaption |
O Studio serve para iterar, e a linha de comando serve para gerar o resultado final. Estes são os comandos que você mais vai usar:
| Objetivo | Comando |
|---|---|
| Prévia ao vivo | npm run dev |
| Renderizar um MP4 | npx remotion render src/index.ts LaunchVideo out/launch.mp4 |
| Exportar uma imagem estática | npx remotion still src/index.ts LaunchVideo out/frame.png --frame=60 |
| Substituir props | --props='{"title":"Hello"}' |
| Reduzir o uso de memória | --concurrency=2 |
Você também pode digitar /remotion-render e deixar o agente executar a renderização para você. Quando algo quebrar, estas são as cinco falhas que você vai encontrar primeiro:
npm install primeiro e depois verifique o terminal em busca de conflito de versão do Node.js ou de porta.Sequence.Quando o agente continua chutando, /remotion-docs entrega a ele a documentação oficial para conferir.
A licença do Remotion decide se isso é gratuito para você. Segundo a página de licenças do projeto, ele é gratuito para pessoas físicas, organizações com fins lucrativos de até 3 funcionários, organizações sem fins lucrativos e quem está apenas avaliando. Empresas maiores precisam de uma licença empresarial. No momento em que este texto foi escrito, o Remotion lista estes planos:
| Plano | Para quem serve | Preço |
|---|---|---|
| Free | Pessoas físicas, até 3 funcionários, organizações sem fins lucrativos | $0 |
| Creators | 4+ pessoas fazendo vídeos manualmente | $25 por assento por mês |
| Automators | Aplicativos que renderizam automaticamente | $0,01 por renderização, mínimo mensal de $100 |
| Enterprise | Termos personalizados e suporte | A partir de $500 por mês |
Confira a página de preços atual antes de publicar, já que os termos mudam. Outros custos são o uso do Claude Code, o tempo de renderização na sua própria máquina e os créditos para qualquer footage de IA.
As limitações também são reais. Este fluxo de trabalho brilha em motion graphics, vídeos explicativos, vídeos de dados, legendas e variantes com template. Ele é pouco indicado para edição multicâmera de filmagens reais, em que o footage filmado ou gerado deve carregar a imagem e o Remotion deve apenas adicionar a camada gráfica. E o agente não é determinístico: duas execuções do mesmo prompt geram dois layouts diferentes, então sempre confira no Studio antes de renderizar.
Comece pequeno. Crie o projeto, adicione a skill e peça um cartão de título de cinco segundos com o seu próprio texto. Quando ele renderizar, expanda: adicione uma cena, passe o texto como props e depois percorra uma lista para gerar dez variantes.
Então traga material de fora. Gere um fundo em loop com o Seedance 2.0, grave um roteiro com o Speech 2.8 HD e deixe o Remotion montar tudo com o tempo exato. Prefere imagens estáticas? Crie suas próprias imagens e a arte das cenas no PicassoIA pela lista completa de modelos e coloque-as em public/ como fundos para suas composições. Experimente, quebre coisas e renderize de novo. Um vídeo que vive em código custa um minuto para corrigir, então teste a versão que você nunca tentaria em uma linha do tempo.
Escolha seu idioma
