/remotion

Cria um projeto Remotion completo para vídeos promocionais a partir de descrições de cenas em linguagem natural.

Usage

/remotion $ARGUMENTS

Fluxo de execução

1. Coleta de contexto

Se o argumento não contiver as informações abaixo, pergunte em uma única mensagem:

Formato de cena esperado (aceite variações livres):

Cena 1 (5s): Fundo gradiente azul → logo entra com fade, slogan aparece digitando
Cena 2 (8s): Mockup do produto em 3D girando, texto "Disponível agora" pulsando
Cena 3 (7s): Depoimento em card branco, foto do cliente, estrelas animadas

2. Instalação (execute no diretório do projeto)

# Novo projeto dedicado:
npx create-video@latest meu-video --template blank

# Ou adicionar ao projeto existente:
npm install remotion @remotion/cli react react-dom
npm install -D @types/react @types/react-dom typescript

3. Estrutura de arquivos gerada

src/
  Root.tsx          ← registra todas as compositions
  Video.tsx         ← composição principal (agrupa cenas)
  scenes/
    Scene01.tsx     ← uma cena por arquivo
    Scene02.tsx
    ...
  components/
    AnimatedText.tsx
    FadeIn.tsx
    LogoReveal.tsx
    ...
  assets/           ← imagens/logos referenciados
remotion.config.ts

4. Geração do código

Para cada cena descrita, gere um componente React seguindo estas regras:

Imports padrão Remotion

import { AbsoluteFill, interpolate, spring, useCurrentFrame, useVideoConfig, Sequence, Img, Audio } from 'remotion';

Padrões de animação

Fade In:

const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 20], [0, 1], { extrapolateRight: 'clamp' });

Slide from bottom:

const translateY = interpolate(frame, [0, 25], [60, 0], { extrapolateRight: 'clamp' });

Spring (bounce suave):

const { fps } = useVideoConfig();
const scale = spring({ frame, fps, config: { damping: 12, stiffness: 100 } });

Typing effect:

const chars = Math.floor(interpolate(frame, [0, 40], [0, text.length], { extrapolateRight: 'clamp' }));
// render: text.slice(0, chars)

Gradient background:

<AbsoluteFill style={{ background: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)' }} />

Composição principal (Video.tsx)

import { AbsoluteFill, Sequence } from 'remotion';
import { Scene01 } from './scenes/Scene01';
// ...

const SCENES = [
  { component: Scene01, start: 0,   duration: 150 }, // 5s @ 30fps
  { component: Scene02, start: 150, duration: 240 }, // 8s @ 30fps
];

export const PromoVideo: React.FC = () => (
  <AbsoluteFill>
    {SCENES.map(({ component: Scene, start, duration }, i) => (
      <Sequence key={i} from={start} durationInFrames={duration}>
        <Scene />
      </Sequence>
    ))}
  </AbsoluteFill>
);

Root.tsx

import { Composition } from 'remotion';
import { PromoVideo } from './Video';

const TOTAL_FRAMES = 600; // duração total em frames (fps * segundos)
const FPS = 30;
const WIDTH = 1920;
const HEIGHT = 1080;

export const RemotionRoot: React.FC = () => (
  <Composition
    id="PromoVideo"
    component={PromoVideo}
    durationInFrames={TOTAL_FRAMES}
    fps={FPS}
    width={WIDTH}
    height={HEIGHT}
  />
);

remotion.config.ts

import { Config } from '@remotion/cli/config';
Config.setVideoImageFormat('jpeg');
Config.setOverwriteOutput(true);

package.json scripts a adicionar

"scripts": {
  "preview": "npx remotion studio",
  "render": "npx remotion render PromoVideo out/video.mp4",
  "render:hq": "npx remotion render PromoVideo out/video.mp4 --codec h264 --crf 18"
}

5. Output esperado

1. Todos os arquivos gerados com código completo (sem // TODO)
2. Tabela de cenas com: nome, frames de início, duração em frames e segundos
3. Instruções de execução:

   npm run preview   # abre studio visual em localhost:3000
   npm run render    # gera out/video.mp4

4. Se o usuário tiver assets (logo, foto), instrua onde colocar em src/assets/ e como importar

6. Customizações avançadas (gere se pedido)

• Transição entre cenas: usar interpolate nos primeiros/últimos 15 frames de cada <Sequence> para fade crossover
• Música de fundo: <Audio src={staticFile('bg.mp3')} volume={0.4} />
• Vídeo embutido: <Video src={staticFile('clip.mp4')} /> dentro de um div com clip-path
• Lottie: npm install @remotion/lottie → <Lottie animationData={data} />
• GIF: npm install @remotion/gif → <Gif src="..." />
• Legendas/captions: npm install @remotion/captions

7. Erros comuns — guia de debug

Lembre: Remotion é React puro — qualquer CSS, SVG, HTML e biblioteca React funciona. Pense em cada frame como um render() com frame como prop de tempo.