@diogodoy
PTENES
Talk now

Guia · Kit de motion

O Claude escreve código. Agora dirige o motion.

20 repositórios open source que ensinam o Claude Code a fazer motion graphics de verdade: 10 skills, 4 motores e 6 complementos. Aqui está o passo a passo para instalar o seu kit.

Eu não sou o autor dessas ferramentas. São projetos open source de outros autores. Eu testei, separei por categoria e deixei a lista pronta, com uma linha fiel ao README de cada um.

Skills
instaladas
Motor
renderizando
MP4 9:16
pronto
After Effects
dispensado

O que é

Motion em código, não em timeline.

Em vez de arrastar keyframes num editor, você descreve o vídeo e o Claude escreve cada frame em código (React, HTML ou JS). As skills dão a ele o ofício: easing, timing, tipografia e um loop de revisão de frames. Os motores renderizam o resultado em MP4. Os complementos trazem princípios, catálogos e bibliotecas de animação.

O ofício

Skills · 10

Regras de motion, pipelines de Reel, filme de lançamento a partir de uma URL, edição que corta silêncio.

O render

Motores · 4

Remotion (React), HyperFrames (HTML seekável), GSAP (timelines) e as skills oficiais do Remotion.

A base

Complementos · 6

Princípios de motion, catálogo curado de skills, Motion.dev e o player Lottie.

Requisitos

O que a sua máquina precisa ter.

Básico

Claude Code
instalado e logado (npm i -g @anthropic-ai/claude-code)
Node.js
18 ou mais recente (22 recomendado)
Git
qualquer versão recente
Sistema
macOS, Linux ou Windows com WSL

Para renderizar

Chrome
o Remotion e o HyperFrames baixam o próprio navegador headless
FFmpeg
só para as skills HTML + Playwright (brew install ffmpeg no Mac)
Disco
2 a 3 GB livres para navegador e dependências
Memória
8 GB de RAM dão conta de um Reel de 1 minuto

Nenhuma ferramenta da lista exige After Effects. O Remotion é gratuito para pessoas e empresas pequenas; empresas maiores precisam de licença própria (veja o repositório). As demais são MIT ou licenças abertas equivalentes; confira cada README antes de uso comercial.

Passo a passo

Da pasta vazia ao Reel renderizado.

  1. 01

    Abra o Claude Code numa pasta de projeto

    Pode ser uma pasta nova. O Claude trabalha dentro dela e guarda ali as skills instaladas.

    Terminal
    mkdir meu-reel && cd meu-reel
claude
  2. 02

    Instale as skills da lista

    O instalador skills baixa a skill para .agents/skills/ e cria o atalho que o Claude Code lê. Comece pelas skills oficiais do Remotion e por uma skill de motion; os cards abaixo têm o comando de cada uma.

    Terminal
    npx skills add remotion-dev/skills
npx skills add whaleyxbt/claude-motion
npx skills add AbubakrChan/product-launch-motion
  3. 03

    Escolha o motor

    Remotion quando você quer React e um projeto que vive no tempo. HyperFrames quando quer HTML puro renderizado em MP4. GSAP entra nas timelines dos dois.

    Remotion
    # cria o projeto e abre o preview
npx create-video@latest --yes --blank meu-reel-remotion
cd meu-reel-remotion && npm start
    HyperFrames
    # instala a skill e o CLI de render
npx skills add heygen-com/hyperframes
  4. 04

    Descreva o vídeo que você quer

    Formato, duração, o que acontece em cada cena, tom e call to action. Quanto mais concreto, melhor o primeiro corte.

    Prompt
    Faz um Reel 9:16, 30 s, em Remotion, apresentando o produto X.
Hook com tipografia cinética, 3 benefícios em cards, CTA no fim.
Fundo escuro, uma cor de destaque, SFX nos cortes. Renderiza o MP4.
  5. 05

    Revise pelos frames, não pelo “parece bom”

    Peça um contact sheet (um frame de cada cena) e corrija o que estiver cortado, ilegível ou fora do tempo. As skills de motion já fazem esse loop: render, inspecionar, corrigir.

    Prompt
    Renderiza 8 frames espalhados pelo vídeo e me mostra numa grade.
Confere texto cortado, legibilidade no celular e zona segura do Reels.
  6. 06

    Exporte no formato das redes

    1080×1920, 30 fps, H.264, yuv420p, áudio AAC 48 kHz e faststart. A skill reel-export do pack do Charlie Hills faz a checagem com ffprobe.

    Terminal
    npx remotion render MeuReel out/reel.mp4 --codec h264 --crf 18

O pulo do gato do vídeo: com o Product Launch Motion instalado, cole a URL do seu site e peça um filme de lançamento. A v2 é music-first (springs, cursor que conduz a ação, SFX no beat, 60 fps). A versão com narração fica em legacy/: npx skills add AbubakrChan/product-launch-motion/legacy.

Skills · 10

Ensinam o Claude Code a dirigir motion.

Regras de timing, loops de revisão de frames, pipelines prontos.

  • 01whaleyxbt/claude-motion

    claude-motion

    Toolkit de motion design para agentes: gosto e regras com número (easing, spring, tipografia), loop de revisão por contact sheet de frames, motor de som em Python e um segundo pipeline que renderiza simulações web (HTML) frame a frame em vídeo 60 fps.

    Instalar
    npx skills add whaleyxbt/claude-motion
    Ver no GitHub
  • 02howseen-ai/claude-motion-design

    claude-motion-design

    Skill para vídeos de motion em código puro (HTML + Playwright + ffmpeg), sem After Effects e sem licença Remotion. Tem um modo remake.

    Instalar
    npx skills add howseen-ai/claude-motion-design
    Ver no GitHub
  • 03charlie947/motion-graphics-skills

    motion-graphics-skills

    Pack de skills para motion de lançamento em código (brief, launch video, explainer, chart, reel-export etc.). O README atual lista 15 skills.

    Instalar
    npx skills add charlie947/motion-graphics-skills
    Ver no GitHub
  • 04haidrrrry/claude-remotion-skill

    claude-remotion-skill

    Skill que ensina o Claude a criar e editar motion graphics com Remotion: springs, legendas sincronizadas, som e o loop render → inspecionar frames → corrigir.

    Instalar
    npx skills add haidrrrry/claude-remotion-skill
    Ver no GitHub
  • 05t3knobox/klik-anim-skill-creation

    klik-anim-skill-creation

    Três skills para motion com Remotion: klik-anim (leis de animação no plano), klik-cam (câmera) e klik-remotion-method (pipeline de ponta a ponta).

    Instalar
    npx skills add t3knobox/klik-anim-skill-creation
    Ver no GitHub
  • 06Sunwood-ai-labs/hyperframes-motion-reel-skill

    hyperframes-motion-reel-skill

    Skill de showreel no HyperFrames (HTML + GSAP + SVG/Canvas), cortado no beat (padrão 120 BPM / 60 fps) até o MP4.

    Instalar
    npx skills add Sunwood-ai-labs/hyperframes-motion-reel-skill
    Ver no GitHub
  • 07AbubakrChan/product-launch-motion

    Product Launch Motion

    Skill de filme de lançamento a partir da URL do site. A v2 (atual) é music-first: HTML, springs, cursor que conduz a ação, SFX no beat, 60 fps com motion blur. A versão com narração (v1: VO + GSAP + HyperFrames) está na pasta legacy/ e instala à parte: npx skills add AbubakrChan/product-launch-motion/legacy.

    Instalar
    npx skills add AbubakrChan/product-launch-motion
    Ver no GitHub
  • 08cth9191/animate

    animate

    Animação procedimental em um único arquivo, com 7 estilos prontos (cut paper, riso, math, pixel etc.) ou um look batido a partir de referências; música no beat; screenshots reais do produto; vários formatos a partir da mesma peça.

    Instalar
    npx skills add cth9191/animate
    Ver no GitHub
  • 09iart-ai/motion-design-skills

    motion-design-skills

    Fundamentos e motores como skills instaláveis: timing, tipografia, cor, composição, After Effects, Remotion, logo e backgrounds.

    Instalar
    npx skills add iart-ai/motion-design-skills
    Ver no GitHub
  • 10nateherkai/herk-edit-kit

    Herk Edit Kit

    De Nate Herk (antes se chamava HyperFrames Student Kit). Edita vídeos, Reels e Shorts com Codex ou Claude Code: 15 skills, cortes a partir da transcrição (silêncio, erros), storytelling, 406 cards de motion e templates HyperFrames.

    Instalar
    npx skills add nateherkai/herk-edit-kit
    Ver no GitHub

Motores · 4

Renderizam de fato: HTML ou React viram MP4.

  • 11heygen-com/hyperframes

    HyperFrames

    Motor open source: escreve HTML (com animação seekable) e renderiza MP4. Feito para agentes; tem skills e CLI próprios.

    Instalar
    npx skills add heygen-com/hyperframes
    Ver no GitHub
  • 12remotion-dev/remotion

    Remotion

    Motor para fazer vídeos programaticamente com React.

    Instalar
    npx create-video@latest
    Ver no GitHub
  • 13remotion-dev/skills

    Remotion Skills

    Skills oficiais do agente Remotion (best practices, create, markup, render, captions, docs etc.). É o pacote oficial de skills que acompanha o Remotion, não um segundo renderer.

    Instalar
    npx skills add remotion-dev/skills
    Ver no GitHub
  • 14greensock/GSAP

    GSAP

    Biblioteca JavaScript de animação (tweens, timelines) para a web moderna.

    Instalar
    npm install gsap
    Ver no GitHub

Complementos · 6

Princípios, catálogos e bibliotecas de animação que os motores usam.

  • 15frankxai/awesome-motion-design-agent-skills

    awesome-motion-design-agent-skills

    Catálogo curado + 5 skills instaláveis (entre elas motion-director, remotion-video-agent, web-motion-auditor) para agentes, cobrindo GSAP, Motion, Remotion, Lottie, Rive e QA de motion.

    Instalar
    npx skills add frankxai/awesome-motion-design-agent-skills
    Ver no GitHub
  • 16LottieFiles/motion-design-skill

    motion-design-skill (LottieFiles)

    Princípios universais de motion para agentes: timing, easing, coreografia, princípios da Disney adaptados para UI. Não é o player Lottie.

    Instalar
    npx skills add LottieFiles/motion-design-skill
    Ver no GitHub
  • 17Barty-Bart/motion-graphics

    motion-graphics (Barty-Bart)

    Skills de edição/motion para Claude Code, cada uma com um trabalho: B-roll no tempo da fala, separação de objeto, explainers e SFX no beat.

    Instalar
    npx skills add Barty-Bart/motion-graphics
    Ver no GitHub
  • 18199-biotechnologies/motion-dev-animations-skill

    motion-dev-animations-skill

    Skill de animações web com Motion.dev (ex-Framer Motion): springs, scroll, gestos, alvo de 120 fps na interface.

    Instalar
    npx skills add 199-biotechnologies/motion-dev-animations-skill
    Ver no GitHub
  • 19motiondivision/motion

    Motion

    Biblioteca de animação para React, JavaScript e Vue (o sucessor do Framer Motion).

    Instalar
    npm install motion
    Ver no GitHub
  • 20airbnb/lottie-web

    Lottie (lottie-web)

    Player que renderiza na web (e em outras plataformas) animações do After Effects exportadas em JSON via Bodymovin.

    Instalar
    npm install lottie-web
    Ver no GitHub

Quer a lista no direct? Comenta CODE.

Comenta CODE no Reel que eu te mando. Toda semana eu publico sobre IA e segurança digital no Instagram. Se travar em algum passo, me chama por lá.

Seguir @diogodoy

Nesta página

Lista conferida nos READMEs em 13/11/2026. Cada repositório tem autoria e licença próprias. O Herk Edit Kit se chamava HyperFrames Student Kit; o pack remotion-dev/skills é o conjunto oficial de skills que acompanha o Remotion, não um segundo renderizador.