Tópico documenta o uso de Remotion com Claude Code no fluxo "Vibe…

INEMA

🤖 Claude Code + VIBE CODE (fluxo real)⌗

A ideia é simples:

Você descreve o vídeo em linguagem natural ➜ Claude gera o código Remotion ➜ Você roda / renderiza

Claude não renderiza o vídeo — ele escreve o código.

---

🧱 Arquitetura mental (bem simples)⌗

IDE / Terminal ↓ Prompt (texto) ↓ Claude Code ↓ Código React (Remotion) ↓ Remotion render → MP4

---

🚀 1. Preparar o projeto (uma vez só)⌗

npx create-video vibe-code-video cd vibe-code-video npm start

Deixa rodando.

---

🧠 2. Prompt certo para o Claude (MUITO IMPORTANTE)⌗

Claude responde melhor quando você pede estrutura + regras.

Prompt base (pode copiar):⌗

```Você é um especialista em Remotion.

Crie um componente React para gerar um vídeo usando Remotion com as regras:

• Duração: 5 segundos
• FPS: 30
• Resolução: 1920x1080
• Fundo escuro
• Texto central animado com fade + slide
• Estilo moderno, tecnológico
• Não use bibliotecas externas
• Use useCurrentFrame e interpolate

Retorne APENAS o código do componente.```

---

🎬 3. Exemplo de resposta do Claude (realista)⌗

```import { AbsoluteFill, interpolate, useCurrentFrame } from "remotion";

export const VibeCodeVideo = () => { const frame = useCurrentFrame();

const opacity = interpolate(frame, [0, 30], [0, 1], { extrapolateRight: "clamp", });

const translateY = interpolate(frame, [0, 30], [40, 0], { extrapolateRight: "clamp", });

return ( translateY(${translateY}px), }} > Criando vídeos com VIBE CODE ); };```

👉 Você cola isso no projeto.

---

🎞️ 4. Registrar a Composition⌗

No index.ts:

```import { Composition } from "remotion"; import { VibeCodeVideo } from "./VibeCodeVideo";

export const RemotionRoot = () => ( );```

---

▶️ 5. Visualizar e ajustar⌗

• Abre no browser
• Vê o vídeo rodando
• Ajusta texto, timing, cores
• Se quiser algo novo → volta no Claude e pede ajuste

Exemplo de ajuste:

“Adicione uma segunda cena com logo entrando da direita nos últimos 2 segundos.”

---

🎞️ 6. Renderizar⌗

npx remotion render src/index.ts VibeCode out/vibe.mp4

---

🔥 O segredo do VIBE CODE⌗

Não é “uma geração só”.

É conversa iterativa:

Prompt → Código → Preview → Ajuste → Render

Claude é:

• 🎨 diretor criativo
• 🧑‍💻 dev React
• 🎬 motion designer

---

🧠 Prompt patterns que funcionam muito bem⌗

🔹 Estrutura⌗

“Crie cenas usando Sequence”

🔹 Ritmo⌗

“Sincronize animação com áudio”

🔹 Branding⌗

“Use cores #0A1AFF e #00E5FF”

🔹 Automação⌗

“Receba props (title, subtitle)”

---

🤖 VIBE CODE + INEMA (nível avançado)⌗

Fluxo ideal:

1. Prompt padrão institucional
2. Claude gera vídeo base
3. Dados dinâmicos (JSON / API)
4. Render automático
5. Upload / publicação

---

📌 Resumo final⌗

✅ Claude escreve o código ✅ Remotion renderiza ✅ Prompt é o “novo editor” ✅ VIBE CODE = criar vídeos conversando

Pode instalar e usar o Remotion direto, sem clonar o repositório. Clonar é só quando você quer mexer no código do framework. Para criar vídeos, o jeito certo é instalar como dependência.

Vou te mostrar os 3 jeitos, do mais simples ao mais avançado 👇

---

✅ OPÇÃO 1 — Criar um projeto Remotion do zero (RECOMENDADO)⌗

Esse é o jeito oficial e mais rápido 🚀

npx create-video meu-video cd meu-video npm start

Isso:

• cria um projeto pronto
• já vem com estrutura
• abre o player no navegador

👉 Nenhum clone necessário.

---

✅ OPÇÃO 2 — Instalar Remotion em um projeto existente⌗

Se você já tem um projeto React / Node:

npm install remotion

ou

pnpm add remotion

Depois você cria:

• um index.ts
• suas Composition
• e usa o CLI para renderizar

---

✅ OPÇÃO 3 — Usar direto via CLI (automação / servidores)⌗

Instalar globalmente:

npm install -g remotion

Ou usar sem instalar:

npx remotion --help

Renderizar direto:

npx remotion render src/index.ts Video out.mp4

Perfeito para:

• pipelines
• servidores
• automações
• IA gerando vídeos

---

🧠 Quando clonar o repositório da INEMA?⌗

Clone somente se você quiser:

✔️ estudar o código do Remotion ✔️ customizar o framework ✔️ manter um fork institucional ✔️ contribuir com o projeto

👉 Para uso normal, não precisa clonar.

---

🔥 Exemplo mínimo SEM CLONE⌗

npx create-video vibe-video cd vibe-video npm start

Depois edita:

export const MyComposition = () => { return <h1>VIBE CODE 🎬🔥</h1>; };

Renderiza:

npx remotion render src/index.ts MyComposition out.mp4

---

📌 Resumo rápido⌗

Situação	Precisa clonar?
Criar vídeos	❌ NÃO
Usar Remotion	❌ NÃO
Automação	❌ NÃO
Modificar o framework	✅ SIM

Como usar e criar vídeos com esse repositório (Remotion / INEMA TDS) de forma prática e direta, do zero até renderizar 🎬⚡

---

🧩 O que você precisa antes⌗

• Node.js (>= 18)
• npm / pnpm / yarn (qualquer um)
• Noções básicas de JavaScript / React (bem básico já resolve)

---

🚀 1. Clonar e instalar o projeto⌗

git clone https://github.com/inematds/remotion.git cd remotion npm install

Depois:

npm start

👉 Isso abre o player do Remotion no navegador, onde você vê o vídeo rodando em tempo real.

---

🎥 2. Como um vídeo funciona no Remotion⌗

No Remotion, um vídeo é um componente React.

Conceito-chave:

• 🎞️ Composition → define o vídeo (tamanho, duração, FPS)
• 🧱 Componentes React → cenas do vídeo
• ⏱️ Frames → controlam animações

---

🧱 3. Criando seu primeiro vídeo⌗

Exemplo simples: HelloVideo.tsx⌗

```import { AbsoluteFill, useCurrentFrame } from "remotion";

export const HelloVideo = () => { const frame = useCurrentFrame();

return ( Criando vídeos com VIBE CODE 🚀 ); };```

---

🎞️ 4. Registrar o vídeo (Composition)⌗

No arquivo principal (ex.: index.ts ou Root.tsx):

```import { Composition } from "remotion"; import { HelloVideo } from "./HelloVideo";

export const RemotionRoot = () => { return ( <> </> ); };```

Agora o vídeo aparece no player 🎉

---

🎼 5. Adicionar áudio, imagens e vídeo⌗

🎵 Áudio⌗

```import { Audio } from "remotion";

🖼️ Imagem⌗

<img src="/logo.png" style={{ width: 400 }} />

🎬 Vídeo⌗

```import { Video } from "remotion";