mvanhorn/clawdbot-skill-remotion-server

Servidor Remotion

Renderize vídeos headless em qualquer servidor Linux usando Remotion v4 (última versão: v4.0.435). Sem necessidade de Mac ou GUI. O Chrome Headless Shell cuida de toda a renderização – funciona em VPS, Raspberry Pi, runners de CI, contêineres Docker, em qualquer lugar onde o Node.js seja executado. FFmpeg já está incluído em cada projeto Remotion – não é necessária instalação separada do FFmpeg.

Configuração (única vez)

Instale as dependências do navegador para o Chrome Headless Shell:

bash {baseDir}/scripts/setup.sh

Isso instala bibliotecas do sistema (libnss3, libatk, libgbm, libcups2, etc.) exigidas pelo Chrome em Linux headless. Suporta Ubuntu 22.04/24.04, Debian e Amazon Linux.

Verificar configuração

Após a configuração, confirme se o Chrome Headless Shell funciona:

npx @remotion/chrome-headless-shell --help

Se falhar, as dependências do sistema estão ausentes. Execute setup.sh novamente ou instale manualmente:

# Ubuntu/Debian
sudo apt install -y libnss3 libatk1.0-0 libatk-bridge2.0-0 libcups2 libgbm1 \
  libpango-1.0-0 libcairo2 libxcomposite1 libxdamage1 libxfixes3 libxrandr2

# Amazon Linux
sudo yum install -y mesa-libgbm libX11 libXrandr libdrm libXdamage libXfixes \
  libxkbcommon dbus-libs libXcomposite alsa-lib nss pango cups-libs at-spi2-core atk

Início Rápido

Criar um projeto

bash {baseDir}/scripts/create.sh meu-video
cd meu-video

Renderizar um vídeo

npx remotion render MyComp out/video.mp4

Visualizar no navegador (modo dev)

npx remotion preview

Abre um servidor de desenvolvimento local onde você pode percorrer a linha do tempo do vídeo, ajustar propriedades e iterar antes de renderizar.

Opções de Renderização (5 maneiras de renderizar)

O Remotion v4 oferece cinco back-ends de renderização. Escolha com base na sua infraestrutura e escala.

1. CLI Local (padrão)

Renderize na máquina onde o Node.js é executado. Melhor para desenvolvimento, CI e implantações de servidor único.

npx remotion render MyComp out/video.mp4

2. Remotion Lambda

Distribua a renderização entre funções AWS Lambda. Renderiza até ~80 minutos de vídeo Full HD. Suporta webhooks para notificações assíncronas e estimativa de custo integrada.

npm install @remotion/lambda

# Implantar função Lambda
npx remotion lambda functions deploy

# Renderizar no Lambda
npx remotion lambda render MyComp

# Estimar custo antes de renderizar
npx remotion lambda still --estimate-price MyComp

Principais recursos:

• Renderização distribuída em várias invocações Lambda
• Callbacks webhook na conclusão da renderização
• Estimativa de custo antes da renderização
• Armazenamento de saída no S3

Veja https://www.remotion.dev/docs/lambda

3. @remotion/vercel (NOVO - Fev 2026)

Renderize dentro de Sandboxes Vercel. Configuração mais simples – sem necessidade de conta AWS.

npm install @remotion/vercel

Implante seu projeto Remotion no Vercel e acione renderizações via API. Melhor para equipes que já estão na Vercel e desejam renderização sem configuração.

Veja https://www.remotion.dev/docs/vercel

4. Cloud Run (alpha)

Renderize no Google Cloud Run. Custos de computação mais baixos que o Lambda para vídeos mais longos.

npm install @remotion/cloudrun
npx remotion cloudrun render MyComp

Veja https://www.remotion.dev/docs/cloudrun

5. Renderização GPU no EC2 (v4.0.248+)

Renderização acelerada por hardware em instâncias GPU EC2. Opção mais rápida para composições complexas com animações pesadas ou conteúdo 3D.

Requer uma instância EC2 com GPU (ex.: g4dn.xlarge) e drivers apropriados.

Veja https://www.remotion.dev/docs/gpu

Presets de Formato para Redes Sociais

Use estes presets de resolução e proporção ao criar composições. Passe --width e --height para npx remotion render para substituir os padrões da composição.

TikTok / YouTube Shorts / Instagram Reels (9:16 vertical)

npx remotion render ChatDemo out/tiktok.mp4 --width=1080 --height=1920

• Resolução: 1080x1920
• Proporção: 9:16
• FPS recomendado: 30
• Duração máxima: 60s (TikTok), 60s (Shorts), 90s (Reels)

YouTube Padrão (16:9 paisagem)

npx remotion render MyComp out/youtube.mp4 --width=1920 --height=1080

• Resolução: 1920x1080
• Proporção: 16:9
• FPS recomendado: 30 ou 60

Instagram Post (1:1 quadrado)

npx remotion render MyComp out/instagram-post.mp4 --width=1080 --height=1080

• Resolução: 1080x1080
• Proporção: 1:1
• Duração máxima: 60s

Twitter/X Video (16:9 paisagem)

npx remotion render MyComp out/twitter.mp4 --width=1280 --height=720

• Resolução: 1280x720
• Proporção: 16:9
• Tamanho máximo do arquivo: 512MB
• Duração máxima: 140s

Resumo dos presets de formato

Plataforma	Largura	Altura	Proporção	FPS
TikTok	1080	1920	9:16	30
YouTube Shorts	1080	1920	9:16	30
Instagram Reel	1080	1920	9:16	30
Instagram Post	1080	1080	1:1	30
YouTube	1920	1080	16:9	30
Twitter/X	1280	720	16:9	30

Ao criar uma Composition no código, defina width, height e fps diretamente:

<Composition
  id="TikTokPromo"
  component={PromoVideo}
  durationInFrames={30 * 15}
  fps={30}
  width={1080}
  height={1920}
/>

Novos Pacotes (v4.0.429+)

@remotion/sfx (v4.0.429)

Efeitos sonoros integrados para dicas de áudio rápidas:

import { Sfx } from "@remotion/sfx";

// Sons disponíveis: ding, bruh, vineBoom
<Sfx name="ding" />
<Sfx name="bruh" />
<Sfx name="vineBoom" />

@remotion/starburst (v4.0.435)

Componente de forma e animação de explosão estelar:

import { Starburst } from "@remotion/starburst";

<Starburst
  points={12}
  innerRadius={50}
  outerRadius={100}
  fill="yellow"
/>

@remotion/shapes (atualizado v4.0.432)

Primitivas de formas geométricas. Agora inclui forma de seta:

import { Triangle, Star, Pie, Arrow } from "@remotion/shapes";

<Triangle length={100} direction="up" fill="red" />
<Star points={5} innerRadius={30} outerRadius={60} fill="gold" />
<Pie radius={50} progress={0.75} fill="blue" />
<Arrow length={150} direction="right" fill="black" />

@remotion/captions

Legendas animadas para conteúdo de vídeo. Suporta temporização no nível da palavra e múltiplos estilos de animação:

import { Caption } from "@remotion/captions";

<Caption
  text="Olá mundo"
  startFrame={0}
  endFrame={60}
  style="bounce"
/>

@remotion/player

Incorpore vídeos Remotion em aplicativos React sem renderizar para arquivo. Reprodução interativa com controles:

import { Player } from "@remotion/player";

<Player
  component={MyComp}
  durationInFrames={300}
  fps={30}
  compositionWidth={1920}
  compositionHeight={1080}
  controls
/>

Mediabunny (conversão de formato)

Mediabunny é o sucessor de @remotion/media-parser e @remotion/webcodecs. Conversão de formato acelerada por GPU integrada ao Remotion.

Entradas suportadas: MP4, WebM, MOV, MKV, M3U8, TS, AVI, MP3, FLAC, WAV, M4A, AAC Saídas suportadas: MP4, WebM, WAV

import { convertMedia } from "@remotion/media-converter";

await convertMedia({
  src: "input.mov",
  container: "mp4",
});

Habilidades Remotion (Jan 2026)

Integração com agente de IA para fluxos de trabalho prompt-para-vídeo. O Claude Code pode gerar composições Remotion a partir de descrições em linguagem natural.

"Crie um vídeo de 15 segundos para TikTok com texto animado dizendo 'Novo Recurso'
 que aparece com uma animação spring, depois mostre três marcadores"

O agente gera a composição TSX, a registra e a renderiza – tudo a partir de um único prompt.

Templates

Todos os templates são criados pelo script create.sh. Cada um gera um projeto Remotion completo com TypeScript, TailwindCSS 4.2.0 e os componentes do template.

Chat Demo (mockup de telefone estilo Telegram)

Balões de bate-papo animados aparecendo em sequência dentro de um mockup de telefone. Bom para demonstrações de produtos, showcases de bots, destaques de suporte ao cliente.

bash {baseDir}/scripts/create.sh meu-chat --template chat
cd meu-chat

Edite src/messages.json para personalizar a conversa:

[
  {"text": "Como faço para redefinir minha senha?", "isUser": true},
  {"text": "Vá em Configurações > Conta > Redefinir Senha. Você receberá um e-mail em ~30 segundos.", "isUser": false},
  {"text": "Entendi, obrigado!", "isUser": true}
]

Renderize na resolução do TikTok:

npx remotion render ChatDemo out/chat-tiktok.mp4 --width=1080 --height=1920

Composição padrão: 1080x1920 (vertical), 30fps, duração calculada automaticamente com base na contagem de mensagens.

Title Card (introdução animada)

Título com fade-in e animação spring. Use para introduções de vídeo, cabeçalhos de seção ou cartões de anúncio independentes.

bash {baseDir}/scripts/create.sh minha-intro --template title
cd minha-intro

Personalize editando src/TitleCard.tsx defaultProps:

defaultProps={{ title: "Lançamento do Produto", subtitle: "Chegando em Março de 2026" }}

Renderize na resolução do YouTube:

npx remotion render TitleCard out/title-youtube.mp4 --width=1920 --height=1080

Composição padrão: 1920x1080 (paisagem), 30fps, 3 segundos.

Blank (template inicial)

Tela em branco para criar composições personalizadas do zero.

bash {baseDir}/scripts/create.sh meu-projeto
cd meu-projeto

Mostra um contador de quadros. Substitua src/Composition.tsx pelo seu próprio componente.

Criando Templates Personalizados

Para adicionar um novo template (ex.: promo, code walkthrough, painel de estatísticas, contagem regressiva, depoimento), crie um componente React que use primitivas do Remotion:

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

APIs Remotion essenciais para templates:

• useCurrentFrame() – número do quadro atual para animação
• spring({ frame, fps, config }) – animação com física spring
• interpolate(frame, inputRange, outputRange) – interpolação linear
• <Sequence from={30}> – atrasa o conteúdo filho em N quadros
• <Img src={staticFile("logo.png")} /> – carrega assets estáticos
• <Audio src={staticFile("music.mp3")} /> – adiciona áudio de fundo
• <AbsoluteFill> – contêiner de quadro completo

Registre composições em src/Root.tsx:

import { Composition } from "remotion";
import { PromoVideo } from "./PromoVideo";

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

Geração de Miniaturas

Extraia um único quadro como imagem estática usando o comando still do Remotion:

npx remotion still MyComp out/thumbnail.png

Opções

# Quadro específico (o padrão é o quadro 0)
npx remotion still MyComp out/thumb.png --frame=45

# Saída JPEG
npx remotion still MyComp out/thumb.jpeg --image-format=jpeg

# Qualidade JPEG (0-100)
npx remotion still MyComp out/thumb.jpeg --image-format=jpeg --jpeg-quality=90

# Resolução personalizada
npx rem