Pular pro conteúdo

Remotion Motion Graphics skill

O Claude monta Reels, aberturas e vídeos de lançamento no Remotion com animação de verdade e confere os quadros antes de entregar.

por haidrrrry

instalações
1.100
estrelas no GitHub
633
No skills.sh desde
junho de 2026
Licença
MIT

Atualizada no GitHub em 12 de agosto de 2026. Dados conferidos em 26 de outubro de 2026, no skills.sh e no GitHub.

O que ela faz

O Remotion transforma código React em vídeo, quadro a quadro. A skill dá ao Claude as regras de motion design que tiram o vídeo da cara genérica de IA: nada de movimento linear, entradas que mexem opacidade, posição e escala juntas, elementos entrando um depois do outro e saídas mais rápidas que as entradas.

Cada cena ganha cinco camadas: fundo com gradiente, imagens e vídeos, texto e gráficos, correção de cor e, por cima, grão e vinheta. Foto parada ganha zoom lento, o que fica mais de dois segundos na tela ganha um leve balanço, e cores, fontes e curvas de animação ficam num arquivo de tema só, que o Claude ajusta pra marca.

Depois de renderizar o MP4, o Claude tira quadros-chave, olha cada um e corrige texto encostando na borda, espaçamento errado, contraste ruim e camada fora de ordem. Também melhora vídeo que já existe: põe legenda sincronizada com a fala, cor, abertura e encerramento por cima da gravação.

Nas palavras de quem fez

Create and edit professional motion graphics videos with Remotion (React-based video). Use this skill EVERY time the user wants to create a video, edit a…

haidrrrry, no SKILL.md

Quando usar

  • Fazer um Reel ou Short vertical pra divulgar um produto
  • Criar uma abertura animada com o logo do cliente
  • Montar vídeo de lançamento com número subindo e texto aparecendo palavra por palavra
  • Pôr legenda, cor e encerramento num vídeo gravado
  • Consertar um vídeo de Remotion que ficou com cara de amador

Depois de instalar, é só pedir assim

  • Faz um Reel de 15 segundos em 1080x1920 anunciando meu curso, com as cores da minha marca e o logo na abertura
  • Pega o video.mp4 da pasta public, põe legenda sincronizada com a fala e uma vinheta de encerramento
  • Esse vídeo do Remotion está com cara de genérico: aplica as regras da skill e renderiza de novo

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

  • Gen Agent Trust HubPassou
  • SocketPassou
  • SnykPassou

Perguntas

Como instalar a Remotion Motion Graphics no Claude Code?

Toca em Levar, aqui nesta página, e deixa seu nome, e-mail e WhatsApp (é uma vez só). Aparece uma frase pronta: cola ela no Claude Code, que ele mesmo instala a Remotion Motion Graphics, e a skill passa a valer na próxima conversa. A mesma frase serve no Codex. Se preferir fazer na mão, o passo a passo está em como instalar skills no Claude Code.

O que a remotion-motion-graphics skill precisa pra funcionar?

De Node.js no computador. O Claude instala o Remotion com npm e, pra renderizar, usa um Chromium que o Remotion baixa sozinho ou um Chrome já instalado. Legenda sincronizada com a fala pede o Whisper pra marcar o tempo de cada palavra, e ele roda no seu computador. Não pede chave de API. O Remotion é grátis pra pessoa física e empresa de até três pessoas; empresa maior paga licença.

Roda no Codex e no Antigravity?

Roda: é um SKILL.md com regras, componentes de exemplo e comandos de terminal, sem nada exclusivo do Claude Code. O agente só precisa rodar comandos e abrir imagens pra conferir os quadros renderizados.

Ela gera imagem ou vídeo com IA?

Não. Ela anima em código o que você entrega (logo, fotos, vídeos gravados, áudio) e desenha fundos, textos e gráficos. Se não tiver efeito sonoro, o Claude gera sons simples por script em vez de entregar o vídeo mudo.

Levar essa skill

1x remotion-motion-graphicsR$ 0,00

TotalR$ 0,00

A skill sai aqui mesmo, na hora. Seus dados eu uso pra falar com você sobre o MazyOS.

Levar precisa do JavaScript ligado. O código da skill está no GitHub: github.com/haidrrrry/claude-remotion-skill

Aprenda a usar