Blog

Como Transformar o Código Claude em um Diretor de Vídeo com Remotion

Ashley Innocent

Ashley Innocent

23 janeiro 2026

Como Transformar o Código Claude em um Diretor de Vídeo com Remotion

A Remotion acaba de lançar as Agent Skills, e isso muda tudo para a criação de vídeos com IA.

npx skills add remotion-dev/skills

É isso. Um comando, e o Claude Code se torna um especialista em criação de vídeo que entende o framework de vídeo baseado em React do Remotion por dentro e por fora.

O Que São as Remotion Agent Skills?

Agent Skills são "manuais de instrução" que ensinam agentes de IA como o Claude Code a usar corretamente ferramentas e frameworks específicos. As skills oficiais do Remotion dão ao Claude conhecimento profundo de:

Sem as skills, o Claude pode gerar código Remotion com bugs ou incorreto. Com as skills, ele escreve componentes de vídeo com qualidade de produção na primeira tentativa.

💡
Quer construir uma API de geração de vídeo? Este tutorial também aborda a criação de endpoints REST para renderização de vídeo sob demanda. Use o Apidog para projetar, testar e documentar suas APIs de geração de vídeo com testes automatizados e colaboração em tempo real.
button

O Que Você Vai Construir

Neste tutorial, você irá:

TL;DR

# 1. Crie um projeto Remotion
npx create-video@latest my-video && cd my-video

# 2. Instale as Agent Skills (o passo chave!)
npx skills add remotion-dev/skills

# 3. Inicie o Claude Code e descreva seu vídeo
claude

# 4. Renderize
npx remotion render <composition-name> out/video.mp4

Esse é todo o fluxo de trabalho. As Agent Skills ensinam o Claude a escrever código Remotion adequado, para que você possa focar em descrever o que você quer em vez de depurar componentes React.

Pré-requisitos

Antes de começar, certifique-se de ter:

RequisitoVersãoComando de Verificação
Node.js18+node --version
npm ou yarnMais recentenpm --version
Claude CodeMais recenteclaude --version
Editor de CódigoVS Code recomendado-

Você também deve ter:

Passo 1: Instale o Remotion e Crie Seu Projeto

Primeiro, crie um novo projeto Remotion usando a CLI oficial.

1.1 Abra seu terminal e execute:

npx create-video@latest my-first-video

1.2 Quando solicitado, selecione estas opções:

? Qual nome você gostaria de dar ao seu projeto? my-first-video
? Escolha um template: blank
? Usar TypeScript? Sim
? Instalar dependências? Sim

1.3 Navegue até seu projeto:

cd my-first-video

1.4 Verifique a instalação:

npm run dev

Isso abre o Remotion Studio em seu navegador em http://localhost:3000. Você deve ver uma tela em branco com uma linha do tempo na parte inferior.

Resultado esperado: Uma janela do navegador com a interface do Remotion Studio.

Passo 2: Instale as Remotion Agent Skills

É aqui que a mágica acontece. Um único comando dá ao Claude Code conhecimento de nível especialista em Remotion.

2.1 Em seu diretório de projeto, execute:

npx skills add remotion-dev/skills

Quando você vir Added skill: remotion exibido, a instalação foi bem-sucedida.

2.2 O que acabou de acontecer?

O comando adicionou uma skill em .claude/skills/remotion/ em seu projeto. Esta pasta contém SKILL.md — o manual de instruções que ensina o Claude a escrever código Remotion adequado.

2.3 Verifique a instalação:

Verifique se o arquivo da skill existe:

ls .claude/skills/remotion/

Saída esperada:

SKILL.md

2.4 A estrutura do seu projeto agora se parece com:

my-first-video/
├── .claude/
│   └── skills/
│       └── remotion/
│           └── SKILL.md      # O "cérebro" que ensina Remotion ao Claude
├── src/
│   ├── Root.tsx
│   ├── Composition.tsx
│   └── index.ts
├── public/
├── remotion.config.ts
├── package.json
└── tsconfig.json

Dica profissional: Se a skill não estiver sendo reconhecida, execute npx skills add remotion-dev/skills novamente ou reinicie o Claude Code.

Passo 3: Crie Seu Primeiro Vídeo com Claude Code

Agora vamos usar o Claude Code para gerar um vídeo completo. Abra seu terminal no diretório do projeto.

3.1 Inicie o Claude Code:

claude

3.2 Descreva seu vídeo:

Digite este prompt para o Claude Code:

Create a 5-second intro video for a tech company called "DevFlow".

Requirements:
- Resolution: 1920x1080
- Frame rate: 30fps
- Background: Dark gradient from #1a1a2e to #16213e
- Animation sequence:
  1. Logo text "DevFlow" fades in from opacity 0 to 1 (frames 0-30)
  2. Logo scales up slightly with a bounce effect (frames 15-45)
  3. Tagline "Build faster. Ship smarter." fades in below (frames 45-90)
  4. Everything holds for the remaining frames

Use modern, clean typography with the Inter font family.

3.3 Claude Code gera os arquivos:

Claude Code criará ou modificará estes arquivos:

src/Root.tsx - Definição da Composição:

import React from 'react';
import { Composition } from 'remotion';
import { DevFlowIntro } from './DevFlowIntro';

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

src/DevFlowIntro.tsx - Componente principal do vídeo:

import React from 'react';
import {
  AbsoluteFill,
  useCurrentFrame,
  interpolate,
  spring,
  useVideoConfig,
} from 'remotion';

export const DevFlowIntro: React.FC = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  // Logo fade in (frames 0-30)
  const logoOpacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: 'clamp',
  });

  // Logo bounce scale (frames 15-45)
  const logoScale = spring({
    frame: frame - 15,
    fps,
    from: 1,
    to: 1.1,
    config: {
      damping: 10,
      stiffness: 100,
    },
  });

  // Tagline fade in (frames 45-90)
  const taglineOpacity = interpolate(frame, [45, 90], [0, 1], {
    extrapolateLeft: 'clamp',
    extrapolateRight: 'clamp',
  });

  return (
    <AbsoluteFill
      style={{
        background: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 100%)',
        justifyContent: 'center',
        alignItems: 'center',
        fontFamily: 'Inter, sans-serif',
      }}
    >
      <div style={{ textAlign: 'center' }}>
        <h1
          style={{
            fontSize: 120,
            fontWeight: 700,
            color: 'white',
            margin: 0,
            opacity: logoOpacity,
            transform: `scale(${frame >= 15 ? logoScale : 1})`,
          }}
        >
          DevFlow
        </h1>

        <p
          style={{
            fontSize: 36,
            color: 'rgba(255, 255, 255, 0.8)',
            marginTop: 24,
            opacity: taglineOpacity,
            fontWeight: 400,
          }}
        >
          Build faster. Ship smarter.
        </p>
      </div>
    </AbsoluteFill>
  );
};

3.4 Visualize seu vídeo:

Se o Remotion Studio não estiver rodando, inicie-o:

npm run dev

Selecione "devflow-intro" no dropdown de composição. Use a linha do tempo para navegar pelo seu vídeo e visualizar as animações.

Resultado esperado: Seu vídeo de introdução sendo reproduzido com as animações de logo e tagline que aparecem gradualmente.

Passo 4: Refine Seu Vídeo com Prompts de Acompanhamento

O poder do Claude Code é o refinamento iterativo. Vamos melhorar nosso vídeo.

4.1 Adicione um efeito de fundo de partículas e mude o esquema de cores

Add a subtle animated particle background with small white dots
that slowly float upward. Keep it minimal - about 20-30 particles,
very low opacity (0.1-0.2), and slow movement.
Change the gradient to a blue-purple theme:
- Start color: #0f0c29
- Mid color: #302b63
- End color: #24243e
Make it a 3-stop gradient.

4.3 Adicione uma sugestão de efeito sonoro (opcional):

Add a marker comment where a "whoosh" sound effect should play
when the logo bounces. I'll add the audio later.

Cada vez que você dá feedback, o Claude Code modifica o código relevante e você pode visualizar as mudanças imediatamente no Remotion Studio.

Passo 5: Adicione Conteúdo Dinâmico com Props

Torne seu vídeo reutilizável aceitando props dinâmicas. Isso permite gerar vários vídeos com conteúdo diferente.

5.1 Peça ao Claude Code para adicionar props:

Refactor the video to accept these props:
- companyName (string) - replaces "DevFlow"
- tagline (string) - replaces the tagline text
- primaryColor (string) - main gradient color
- secondaryColor (string) - secondary gradient color

Also add Zod schema validation for type safety.

5.2 Claude Code gera o esquema:

src/DevFlowIntro.tsx (atualizado):

import { z } from 'zod';

export const introSchema = z.object({
  companyName: z.string().default('DevFlow'),
  tagline: z.string().default('Build faster. Ship smarter.'),
  primaryColor: z.string().default('#0f0c29'),
  secondaryColor: z.string().default('#24243e'),
});

type IntroProps = z.infer<typeof introSchema>;

export const DevFlowIntro: React.FC<IntroProps> = ({
  companyName,
  tagline,
  primaryColor,
  secondaryColor,
}) => {
  // ... component uses these props
};

src/Root.tsx (atualizado):

import { Composition } from 'remotion';
import { DevFlowIntro, introSchema } from './DevFlowIntro';

export const RemotionRoot: React.FC = () => {
  return (
    <>
      <Composition
        id="company-intro"
        component={DevFlowIntro}
        durationInFrames={150}
        fps={30}
        width={1920}
        height={1080}
        schema={introSchema}
        defaultProps={{
          companyName: 'DevFlow',
          tagline: 'Build faster. Ship smarter.',
          primaryColor: '#0f0c29',
          secondaryColor: '#24243e',
        }}
      />
    </>
  );
};

5.3 Teste com diferentes props no Remotion Studio:

No Remotion Studio, clique no painel Props e modifique os valores:

{
  "companyName": "Apidog",
  "tagline": "Design. Debug. Test. Document.",
  "primaryColor": "#1e3a5f",
  "secondaryColor": "#0d1b2a"
}

A pré-visualização é atualizada em tempo real.

Passo 6: Crie um Vídeo com Múltiplas Cenas

Vamos construir um vídeo mais complexo com múltiplas cenas.

6.1 Prompt para o Claude Code:

Create a 30-second product demo video with these scenes:

Scene 1 (0-5 seconds): Logo intro animation
Scene 2 (5-12 seconds): Feature showcase with 3 icons appearing one by one
  - Icon 1: Rocket (Speed)
  - Icon 2: Shield (Security)
  - Icon 3: Chart (Analytics)
  Each icon should slide in from the left with a fade

Scene 3 (12-22 seconds): Mockup of the product dashboard
  - Show a simple UI mockup
  - Highlight different sections sequentially

Scene 4 (22-30 seconds): Call to action
  - "Start your free trial"
  - Website URL fades in

Use the <Sequence> component to organize scenes.
Total duration: 900 frames at 30fps.

6.2 Claude Code gera a estrutura da cena:

import { Sequence, AbsoluteFill } from 'remotion';
import { LogoIntro } from './scenes/LogoIntro';
import { FeatureShowcase } from './scenes/FeatureShowcase';
import { DashboardMockup } from './scenes/DashboardMockup';
import { CallToAction } from './scenes/CallToAction';

export const ProductDemo: React.FC = () => {
  return (
    <AbsoluteFill style={{ backgroundColor: '#0a0a0a' }}>
      {/* Scene 1: Logo Intro (frames 0-150) */}
      <Sequence from={0} durationInFrames={150}>
        <LogoIntro />
      </Sequence>

      {/* Scene 2: Feature Showcase (frames 150-360) */}
      <Sequence from={150} durationInFrames={210}>
        <FeatureShowcase />
      </Sequence>

      {/* Scene 3: Dashboard Mockup (frames 360-660) */}
      <Sequence from={360} durationInFrames={300}>
        <DashboardMockup />
      </Sequence>

      {/* Scene 4: Call to Action (frames 660-900) */}
      <Sequence from={660} durationInFrames={240}>
        <CallToAction />
      </Sequence>
    </AbsoluteFill>
  );
};

6.3 Claude Code cria componentes de cena individuais:

src/scenes/FeatureShowcase.tsx:

import { useCurrentFrame, interpolate, AbsoluteFill } from 'remotion';

const features = [
  { icon: '🚀', label: 'Speed', delay: 0 },
  { icon: '🛡️', label: 'Security', delay: 30 },
  { icon: '📊', label: 'Analytics', delay: 60 },
];

export const FeatureShowcase: React.FC = () => {
  const frame = useCurrentFrame();

  return (
    <AbsoluteFill
      style={{
        justifyContent: 'center',
        alignItems: 'center',
        gap: 80,
        flexDirection: 'row',
      }}
    >
      {features.map((feature, index) => {
        const slideIn = interpolate(
          frame - feature.delay,
          [0, 30],
          [-100, 0],
          { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' }
        );
        const opacity = interpolate(
          frame - feature.delay,
          [0, 30],
          [0, 1],
          { extrapolateRight: 'clamp', extrapolateLeft: 'clamp' }
        );

        return (
          <div
            key={index}
            style={{
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              transform: `translateX(${slideIn}px)`,
              opacity,
            }}
          >
            <span style={{ fontSize: 80 }}>{feature.icon}</span>
            <span style={{ fontSize: 24, color: 'white', marginTop: 16 }}>
              {feature.label}
            </span>
          </div>
        );
      })}
    </AbsoluteFill>
  );
};

Passo 7: Adicione Áudio ao Seu Vídeo

7.1 Adicione uma trilha sonora de fundo:

Coloque seu arquivo de áudio na pasta public:

public/
└── audio/
    └── background-music.mp3

7.2 Peça ao Claude Code para integrar o áudio:

Add background music from public/audio/background-music.mp3
- Fade in over the first 30 frames
- Fade out over the last 30 frames
- Set volume to 0.5

7.3 Claude Code adiciona o componente de Áudio:

import { Audio, interpolate, useCurrentFrame, useVideoConfig } from 'remotion';
import { staticFile } from 'remotion';

export const ProductDemo: React.FC = () => {
  const frame = useCurrentFrame();
  const { durationInFrames } = useVideoConfig();

  // Audio fade in/out
  const volume = interpolate(
    frame,
    [0, 30, durationInFrames - 30, durationInFrames],
    [0, 0.5, 0.5, 0],
    { extrapolateLeft: 'clamp', extrapolateRight: 'clamp' }
  );

  return (
    <AbsoluteFill>
      <Audio src={staticFile('audio/background-music.mp3')} volume={volume} />
      {/* ... rest of scenes */}
    </AbsoluteFill>
  );
};

Passo 8: Renderize Seu Vídeo

Agora vamos exportar seu vídeo para um arquivo.

8.1 Renderize pela linha de comando:

# Renderizar para MP4 (recomendado para a maioria dos usos)
npx remotion render company-intro out/company-intro.mp4

# Renderizar com props personalizadas
npx remotion render company-intro out/apidog-intro.mp4 \
  --props='{"companyName":"Apidog","tagline":"Design. Debug. Test. Document."}'

8.2 Opções de renderização:

# Alta qualidade (mais lento)
npx remotion render company-intro out/video.mp4 --crf=18

# Baixa qualidade (mais rápido, arquivo menor)
npx remotion render company-intro out/video.mp4 --crf=28

# Renderizar como GIF
npx remotion render company-intro out/video.gif --codec=gif

# Renderizar como WebM
npx remotion render company-intro out/video.webm --codec=vp8

# Renderizar faixa de frames específica
npx remotion render company-intro out/preview.mp4 --frames=0-90

8.3 Progresso da renderização:

Você verá uma saída como:

ℹ Rendering frames 0-150
████████████████████████████████████████ 100% | 150/150 frames
✓ Rendered 150 frames in 12.3s (12.2 fps)
✓ Encoded video in 3.2s
✓ Video saved to out/company-intro.mp4

Resultado esperado: Um arquivo de vídeo renderizado em seu diretório out/.

Passo 9: Escale com Remotion Lambda (Opcional)

Para renderizar vídeos em escala (centenas ou milhares), use Remotion Lambda.

9.1 Instale as dependências do Lambda:

npm install @remotion/lambda

9.2 Configure as credenciais AWS:

# Configure as credenciais AWS
aws configure

# Crie a role do Remotion Lambda
npx remotion lambda policies role

9.3 Implante sua função Lambda:

# Implante a função de renderização
npx remotion lambda functions deploy

# Implante seu site de vídeo
npx remotion lambda sites create src/index.ts --site-name=my-videos

9.4 Renderize via Lambda:

npx remotion lambda render \
  --function-name=remotion-render \
  --serve-url=https://your-bucket.s3.amazonaws.com/sites/my-videos \
  --composition=company-intro \
  --props='{"companyName":"ClientCo"}'

9.5 Renderização programática:

import { renderMediaOnLambda } from '@remotion/lambda/client';

const result = await renderMediaOnLambda({
  region: 'us-east-1',
  functionName: 'remotion-render',
  composition: 'company-intro',
  serveUrl: 'https://your-bucket.s3.amazonaws.com/sites/my-videos',
  codec: 'h264',
  inputProps: {
    companyName: 'Apidog',
    tagline: 'Design. Debug. Test. Document.',
  },
});

console.log('Video URL:', result.url);

Passo 10: Crie uma API de Geração de Vídeo

Crie um endpoint de API que gera vídeos sob demanda.

10.1 Peça ao Claude Code para criar um servidor Express:

Create an Express.js API server with these endpoints:

POST /api/videos/generate
- Accepts: template, props, format
- Triggers a Remotion Lambda render
- Returns: jobId, status

GET /api/videos/status/:jobId
- Returns render progress and download URL when complete

Include proper error handling and Zod validation.

10.2 Claude Code gera o servidor:

server/index.ts:

import express from 'express';
import { renderMediaOnLambda, getRenderProgress } from '@remotion/lambda/client';
import { z } from 'zod';

const app = express();
app.use(express.json());

const generateSchema = z.object({
  template: z.enum(['company-intro', 'product-demo']),
  props: z.record(z.unknown()),
  format: z.enum(['mp4', 'webm', 'gif']).default('mp4'),
});

app.post('/api/videos/generate', async (req, res) => {
  try {
    const { template, props, format } = generateSchema.parse(req.body);

    const { renderId, bucketName } = await renderMediaOnLambda({
      region: 'us-east-1',
      functionName: 'remotion-render',
      composition: template,
      serveUrl: process.env.REMOTION_SITE_URL!,
      codec: format === 'gif' ? 'gif' : 'h264',
      inputProps: props,
    });

    res.json({
      jobId: renderId,
      bucketName,
      status: 'processing',
    });
  } catch (error) {
    res.status(400).json({ error: (error as Error).message });
  }
});

app.get('/api/videos/status/:jobId', async (req, res) => {
  const { jobId } = req.params;
  const { bucketName } = req.query;

  const progress = await getRenderProgress({
    renderId: jobId,
    bucketName: bucketName as string,
    region: 'us-east-1',
    functionName: 'remotion-render',
  });

  res.json({
    status: progress.done ? 'completed' : 'processing',
    progress: progress.overallProgress,
    downloadUrl: progress.outputFile,
  });
});

app.listen(3001, () => {
  console.log('Video API running on http://localhost:3001');
});

10.3 Teste sua API com Apidog:

Use o Apidog para testar seus endpoints de geração de vídeo:

  1. Crie uma nova requisição para POST /api/videos/generate
  2. Defina o corpo:
{
  "template": "company-intro",
  "props": {
    "companyName": "TestCorp",
    "tagline": "Testing made easy"
  },
  "format": "mp4"
}
  1. Envie e verifique se a resposta contém um jobId
  2. Monitore o endpoint de status até que status: "completed"

Os recursos de teste automatizado do Apidog ajudam você a validar se seu pipeline de geração de vídeo funciona de forma confiável.

Exemplo Completo: Gerador de Vídeos de Marketing

Aqui está um exemplo completo que você pode usar como template.

Prompt para o Claude Code:

Create a complete marketing video generator with these features:

1. Template: "social-promo"
   - Duration: 15 seconds (450 frames at 30fps)
   - Resolution: 1080x1080 (Instagram square)

2. Scenes:
   - Hook text (0-3s): Big bold text that grabs attention
   - Product image (3-9s): Display a product with Ken Burns effect
   - Features list (9-12s): 3 bullet points appearing sequentially
   - CTA (12-15s): "Shop Now" with pulsing animation

3. Props:
   - hookText: string
   - productImageUrl: string
   - features: string[] (array of 3 items)
   - ctaText: string
   - brandColor: string

4. Include audio ducking for when text appears

Generate all files needed for this to work.

Claude Code irá gerar um template de vídeo completo, pronto para produção, que você pode personalizar e renderizar em escala.

Solução de Problemas Comuns

Problema: "Cannot find module 'remotion'"

# Solução: Reinstale as dependências
rm -rf node_modules
npm install

Problema: Fontes não carregando

// Adicione a importação da fonte ao seu componente
import { loadFont } from '@remotion/google-fonts/Inter';

const { fontFamily } = loadFont();

// Use nos estilos
style={{ fontFamily }}

Problema: Vídeo renderiza preto

Problema: Claude Code não reconhece as Remotion skills

# Reinstale a skill
npx skills add remotion-dev/skills

# Verifique se .claude/skills/remotion/SKILL.md existe
ls .claude/skills/remotion/

# Reinicie o Claude Code

Problema: Erros de incompatibilidade de versão

# Verifique e atualize as versões do Remotion
npx remotion versions

# Isso geralmente corrige problemas de compatibilidade

Construindo APIs de geração de vídeo? Experimente o Apidog gratuitamente para projetar, testar e documentar seus endpoints. Valide esquemas de requisição, automatize cenários de teste e garanta que seu pipeline de vídeo lida com casos extremos de forma elegante.

button

Pratique o design de API no Apidog

Descubra uma forma mais fácil de construir e usar APIs

Cadastre-se gratuitamenteBaixar