Repolode
Enviar
Sunwood-ai-labs

Sunwood-ai-labs/hyperframes-motion-reel-skill

Uma skill do Claude Code que transforma um tema curto em um vídeo de motion graphics sincronizado com a batida e renderizado em MP4 com HyperFrames.

Alternativa open source a:After Effects

Ver no GitHubSite
Estrelas
143
Forks
21
Issues abertas
0
Último commit
há 21 dias

O que é?

Este repositório contém uma skill do Claude Code que orienta o agente a atuar como motion designer e creative coder. A partir de um tema curto, imagens opcionais ou uma faixa de voz, ela planeja um universo visual, os textos, um sistema de design e uma timeline batida a batida, e então cria as cenas com HTML, GSAP, SVG e Canvas.

A duração é sincronizada com uma grade de 120 BPM e 60 FPS, em que cada batida equivale a 0,5 segundo ou 30 frames. A trilha de fundo é gerada em WAV usando apenas os recursos nativos do Node.js e segue a mesma tabela de batidas dos elementos visuais. As camadas de Canvas e SVG usam uma função pura render(t), permitindo navegar pela animação de forma determinística.

A skill executa um ciclo de verificação com lint, check, revisão de snapshots e renderização; depois, confere alguns trechos do MP4 final com ffprobe e ffmpeg. É um port de remotion-motion-reel baseado no HyperFrames, licenciado sob Apache-2.0, e no GSAP, que evita a licença comercial do Remotion.

Recursos principais

  • 01Sincronização com uma grade de 120 BPM / 60 FPS, com os cortes definidos por números de batida.
  • 02Trilha sonora gerada em WAV usando apenas recursos nativos do Node.js e sincronizada com a mesma tabela de batidas.
  • 03Animação em duas camadas: uma timeline do GSAP pausada e uma função render(t) navegável para Canvas e SVG.
  • 04Morphs de formas entre cenas em vez de cross-fades.
  • 05Saída determinística com um PRNG inicializado com seed e sem Date.now() ou Math.random().
  • 06Verificação com lint, check, snapshots e ffmpeg antes da entrega.

Casos de uso

  • Criar um showreel curto ou um teaser de motion a partir de um conceito de uma linha.
  • Produzir vídeos de lançamento de produtos nos formatos 16:9, 9:16 ou 1:1.
  • Criar motion graphics guiados por música, com elementos visuais que seguem um BPM definido.
  • Gerar conteúdo de vídeo para uso comercial sem pagar por licenças de bibliotecas de motion.

Início rápido

  1. 1

    Instale a skill clonando o repositório na pasta de skills do Claude Code

    git clone https://github.com/Sunwood-ai-labs/hyperframes-motion-reel-skill ~/.claude/skills/hyperframes-motion-reel
  2. 2

    Verifique se Node.js (LTS atual) com npx, Google Chrome e ffmpeg/ffprobe estão disponíveis no PATH

  3. 3

    Execute a skill no Claude Code com um tema curto

    /hyperframes-motion-reel Neon Tokyo night drive, 20 seconds, BPM 128

Antes de usar

  • Requer Claude Code e skills de domínio do HyperFrames instaladas separadamente.
  • Para renderização e verificação, é necessário ter Google Chrome e ffmpeg/ffprobe no PATH.

Tópicos

#claude-code#motion-graphics#gsap#svg#canvas#video-generation#animation#hyperframes#claude-skill#motion-design

Perguntas frequentes

O que é hyperframes-motion-reel-skill?
Uma skill do Claude Code que transforma um tema curto em um vídeo de motion graphics sincronizado com a batida e renderizado em MP4 com HyperFrames. Este repositório contém uma skill do Claude Code que orienta o agente a atuar como motion designer e creative coder. A partir de um tema curto, imagens opcionais ou uma faixa de voz, ela planeja um universo visual, os textos, um sistema de design e uma timeline batida a batida, e então cria as cenas com HTML, GSAP, SVG e Canvas.
hyperframes-motion-reel-skill é gratuito? Qual é a licença?
hyperframes-motion-reel-skill é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
hyperframes-motion-reel-skill ainda é mantido?
Manutenção ativa. O último commit de hyperframes-motion-reel-skill foi em 29 de set. de 2026.
Para que posso usar hyperframes-motion-reel-skill?
Criar um showreel curto ou um teaser de motion a partir de um conceito de uma linha. Produzir vídeos de lançamento de produtos nos formatos 16:9, 9:16 ou 1:1. Criar motion graphics guiados por música, com elementos visuais que seguem um BPM definido. Gerar conteúdo de vídeo para uso comercial sem pagar por licenças de bibliotecas de motion.
Como instalar hyperframes-motion-reel-skill?
Instale a skill clonando o repositório na pasta de skills do Claude Code: git clone https://github.com/Sunwood-ai-labs/hyperframes-motion-reel-skill ~/.claude/skills/hyperframes-motion-reel Verifique se Node.js (LTS atual) com npx, Google Chrome e ffmpeg/ffprobe estão disponíveis no PATH Execute a skill no Claude Code com um tema curto: /hyperframes-motion-reel Neon Tokyo night drive, 20 seconds, BPM 128
Onde consigo hyperframes-motion-reel-skill?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/Sunwood-ai-labs/hyperframes-motion-reel-skill

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados