Uma skill do Claude Code que transforma a URL de um site em um vídeo de lançamento de produto a 60 fps, feito em HTML, com efeitos sonoros sincronizados à música e desfoque de movimento.
32247JavaScriptMITAtualizado há 5 dias
kaventro/motion-designer
Uma skill de agente para Claude Code e Codex que transforma a interface real do seu app em vídeos de lançamento curtos, sincronizados com a música e renderizados localmente.
Alternativa open source a:After Effects
- Estrelas
- 105
- Forks
- 7
- Issues abertas
- 1
- Último commit
- há 19 dias
O que é?
motion-designer é uma skill de agente que cria filmes de lançamento, títulos, vídeos explicativos, vídeos de dados e gráficos sincronizados com música a partir de código. Ela recria a interface do seu app em HTML, coloca-a em uma moldura de iPhone ou janela de laptop, sincroniza cada movimento com a batida da música, verifica o resultado quadro a quadro e renderiza o vídeo com headless Chrome e ffmpeg.
Cada filme é uma única página web em que cada quadro é uma função do tempo, então qualquer quadro pode ser renderizado de forma independente e o resultado é preciso até o quadro. A skill inclui scripts para detectar batidas, cortar músicas com precisão de compasso, verificar a qualidade quadro a quadro e gerar narrações com modelos de voz locais ou com o macOS say, reduzindo o volume da música durante a narração.
Ela é instalada como uma skill para Claude Code e Codex e funciona a partir de um prompt curto enviado dentro do repositório do seu app, começando por um plano que você aprova antes de qualquer coisa ser criada.
Recursos principais
- 01Recria a interface real do app em HTML para uso dentro de molduras de dispositivos ou janelas.
- 02Sincroniza os movimentos com as batidas da música, com cortes precisos de compasso.
- 03Verifica os quadros em busca de timers, números aleatórios e erros de loop antes da renderização.
- 04Renderiza vídeos H.264 com headless Chrome e ffmpeg, além de um loop sem áudio e uma imagem de capa.
- 05Adiciona narrações com modelos locais, como Chatterbox ou Kokoro, mixadas a -16 LUFS e com a música reduzida durante a voz.
Casos de uso
- Criar um filme de lançamento de 30 segundos para o site de um app para iOS ou desktop.
- Produzir um anúncio curto em formato de história, com um personagem e uma chamada para cadastro.
- Editar um vídeo promocional para que um momento importante coincida com o drop da faixa.
- Criar vídeos de dados ou explicativos a partir de código, sem usar um editor de vídeo.
Início rápido
- 1
Instale a skill para Claude Code
npx skills add kaventro/motion-designer - 2
Confira quais ferramentas esta máquina tem
bash skills/motion-designer/scripts/doctor.sh - 3
Execute a skill no repositório do seu app
/motion-designer
Antes de usar
- Para renderizar vídeos, é necessário instalar previamente Node 22 ou superior, Chrome, ffmpeg e Python 3.
- A música original opcional (cerca de 11 GB) e os modelos de narração (cerca de 4 GB ou mais) são downloads grandes.
Tópicos
Perguntas frequentes
- O que é motion-designer?
- Uma skill de agente para Claude Code e Codex que transforma a interface real do seu app em vídeos de lançamento curtos, sincronizados com a música e renderizados localmente. motion-designer é uma skill de agente que cria filmes de lançamento, títulos, vídeos explicativos, vídeos de dados e gráficos sincronizados com música a partir de código. Ela recria a interface do seu app em HTML, coloca-a em uma moldura de iPhone ou janela de laptop, sincroniza cada movimento com a batida da música, verifica o resultado quadro a quadro e renderiza o vídeo com headless Chrome e ffmpeg.
- motion-designer é gratuito? Qual é a licença?
- motion-designer é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
- motion-designer ainda é mantido?
- Manutenção ativa. O último commit de motion-designer foi em 1 de out. de 2026.
- Para que posso usar motion-designer?
- Criar um filme de lançamento de 30 segundos para o site de um app para iOS ou desktop. Produzir um anúncio curto em formato de história, com um personagem e uma chamada para cadastro. Editar um vídeo promocional para que um momento importante coincida com o drop da faixa. Criar vídeos de dados ou explicativos a partir de código, sem usar um editor de vídeo.
- Como instalar motion-designer?
- Instale a skill para Claude Code: npx skills add kaventro/motion-designer Confira quais ferramentas esta máquina tem: bash skills/motion-designer/scripts/doctor.sh Execute a skill no repositório do seu app: /motion-designer
- Onde consigo motion-designer?
- O código-fonte e as instruções de instalação estão no GitHub: https://github.com/kaventro/motion-designer
Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.
Projetos relacionados
Uma skill do Claude Code que transforma um prompt em uma animação procedural curta em canvas e a renderiza em MP4 com um navegador headless e ffmpeg.
828120JavaScriptMITAtualizado há 15 dias
Uma skill para Codex e Claude Code que transforma um tema, artigo ou história em um vídeo explicativo narrado e desenhado à mão, com traços feitos um a um e escrita chinesa.
699132JavaScriptMITAtualizado há 21 horas
Transforma um roteiro escrito em um vídeo explicativo ou demonstração de produto narrados, com voz local, sincronização por palavra e renderização em canvas, tudo comandado por um agente de programação.
59838JavaScriptMITAtualizado ontem
Uma skill do Claude Code que cria vídeos de motion design com HTML, Playwright e ffmpeg, sem precisar de licença do After Effects ou do Remotion.
58677PythonMITAtualizado há 16 dias
Uma Agent Skill que transforma um tema em um vídeo explicativo narrado, com locução, legendas embutidas e imagens de capa, renderizando localmente frames HTML em MP4.
17921PythonMITAtualizado há 6 dias