remotion-motion-graphics: transforme Logos e textos em animações exportáveis em MP4 com o Remotion

Para quem é indicado

Este Skill destina-se a quem quer manter animações como código: gestores de marca, criadores de vídeos curtos ou desenvolvedores front-end que queiram usar um vídeo de referência mais um Logo para produzir kinetic-typography (tipografia cinética), animações de Logo ou vídeos promocionais de marca, e exportar diretamente em MP4. Segundo a documentação oficial, ele suporta a geração dos formatos 9:16 e 16:9 a partir da mesma base de código.

Não é adequado nos seguintes casos: ambientes sem Node.js 18+ (necessário para o Remotion 4) ou sem ffmpeg / ffprobe no PATH — os scripts de análise e inspeção não funcionarão; na primeira renderização, o Remotion baixa o Chrome automaticamente, e em ambientes com rede restrita essa etapa pode travar. A evidência oficial não informa se há suporte a outros runtimes ou plataformas, nem quais idiomas de interface do agent são suportados — isso permanece desconhecido.

Primeira tentativa em 3 minutos

O caminho principal recomendado é a instalação local via Claude Code:

1. Pré-requisitos: Node.js 18+, com ffmpeg / ffprobe no PATH.
2. No terminal, execute o comando oficial de instalação para copiar o Skill para ~/.claude/skills/:

git clone https://github.com/Boriwatopal/agent-skill-remotion-motion-graphics.git /tmp/rmg && \
cp -R /tmp/rmg/skills/remotion-motion-graphics ~/.claude/skills/ && rm -rf /tmp/rmg

1. No Claude Code, dispare uma tarefa de baixo risco: forneça um vídeo de referência e um Logo (SVG ou site) e peça apenas a análise — faça o agent gerar um beat map a partir dos contact sheets do vídeo de referência, extrair cores, fontes e textos dos materiais da marca, e mapear os paths do Logo para que texto e elementos gráficos possam ser animados separadamente. Nesta fase de análise, não peça ainda a renderização final.

Sinal de sucesso: o agent lê os materiais e entrega o beat map e a extração dos elementos de marca, indicando que o fluxo de trabalho do Skill está ativo. Atente que a fase de renderização executa comandos, escreve arquivos e baixa o Chrome; a evidência não informa se a renderização exige confirmação adicional, portanto combine com o agent o caminho de saída antes das ações. Usuários do claude.ai / Cowork não têm esse caminho: a opção oficial é baixar dist/remotion-motion-graphics.skill e enviá-lo em Settings → Capabilities → Skills — um método secundário para outra plataforma.

Casos de uso

Caso 1: extrair ritmo de um vídeo de referência. Envie ao agent um vídeo curto de um concorrente e o seu Logo, peça a geração do beat map e a extração de cores e fontes e, por fim, siga o fluxo do Skill para produzir animações em código e exportar um MP4 em 9:16. As etapas verificáveis são a leitura dos materiais e o beat map; a renderização e a qualidade final dependem da execução real do agent.

Caso 2: animação de entrada de Logo. Forneça o SVG do Logo e peça que texto e elementos gráficos sejam animados separadamente, criando um vídeo promocional da marca. O Skill mapeia os paths do Logo para animar os elementos individualmente; antes de exportar, siga o fluxo oficial de verificação: tsc sem erros, render de teste em escala 0.3, inspeção dos contact sheets quadro a quadro, render estático dos quadros suspeitos e correção, e só então a renderização final com extração de frames do vídeo pronto como comprovação. O sinal final confirmável é obter o MP4 junto com os frames extraídos como evidência.

Limites de uso

A renderização executa comandos tsc e de renderização do Remotion, escreve arquivos do projeto e, na primeira execução, baixa o Chrome — comportamentos descritos explicitamente na documentação oficial. Os scripts de análise e inspeção do Skill dependem de ffmpeg / ffprobe. A evidência oficial não informa: se a renderização exige confirmação do usuário, quais caminhos específicos são escritos, se funciona offline ou o intervalo de idiomas suportado (não inferir suporte apenas a material em inglês só porque o README está nesse idioma). O Skill produz o MP4 renderizado e o código; a evidência não indica que ele modifica arquivos existentes do usuário — quanto ao impacto no sistema de arquivos, atenha-se ao comportamento real do agent. Os métodos de instalação das duas plataformas são diferentes: no Claude Code é git clone mais cópia do diretório, no claude.ai / Cowork é o upload do arquivo .skill, sem intercambialidade.