HyperFrames - framework open source voltado para agentes de IA para criar vídeos com HTML

• Cria vídeos e renderiza em MP4 usando apenas HTML + CSS + GSAP, de forma semelhante ao Remotion
• Sem React nem DSL proprietário: um arquivo HTML puro já é a própria composição de vídeo, e o index.html é reproduzido diretamente, sem etapa de build
• Otimizado para fluxos de trabalho em que agentes de codificação com IA, como Claude Code e Codex, escrevem HTML diretamente
  • Com npx skills add heygen-com/hyperframes, é possível ensinar ao agente os padrões do framework
  • No Claude Code, pode ser chamado diretamente com os comandos de barra /hyperframes, /hyperframes-cli e /gsap
  • Também há plugin para OpenAI Codex e plugin para Cursor separados
• Como usar
  • Descreva o que você quer: "Using /hyperframes, create a 10-second product intro with a fade-in title, a background video, and background music"
  • Transformar conteúdo existente em vídeo:
    • "Take a look at this GitHub repo https://github.com/heygen-com/hyperframes and explain its uses and architecture to me using /hyperframes."
    • "Summarize the attached PDF into a 45-second pitch video using /hyperframes."
    • "Turn this CSV into an animated bar chart race using /hyperframes."
  • Formato específico: "Make a 9:16 TikTok-style hook video about [topic] using /hyperframes, with bouncy captions synced to a TTS narration."
  • Iteração — use o agente como se fosse um editor de vídeo:
    • "Make the title 2x bigger, swap to dark mode, and add a fade-out at the end."
    • "Add a lower third at 0:03 with my name and title."
• Como começar manualmente

  npx hyperframes init my-video  
  cd my-video  
  npx hyperframes preview      # preview in browser (live reload)  
  npx hyperframes render       # render to MP4  
  

  • Como hyperframes init instala essa skill automaticamente, depois disso ela pode ser usada a qualquer momento
• Com o padrão Frame Adapter, é possível conectar livremente o runtime de animação desejado, como GSAP, Lottie, CSS e Three.js
• A renderização determinística (Deterministic), que garante mesma entrada = mesma saída, é adequada para pipelines de automação
• Fornece um catálogo com mais de 50 blocos e componentes prontos (transições com shader, overlays sociais, gráficos de dados etc.), instaláveis com npx hyperframes add <nome-do-bloco>

  npx hyperframes add flash-through-white   # shader transition  
  npx hyperframes add instagram-follow      # social overlay  
  npx hyperframes add data-chart            # animated chart  
  

• O comando hyperframes capture <url> oferece um pipeline completo para capturar um site e convertê-lo em vídeo
• Em comparação com o Remotion, as principais diferenças são o artefato de trabalho (HTML vs React) e a licença
  • HyperFrames: Apache 2.0 (certificada pela OSI) — totalmente liberado para uso comercial, sem custo por renderização, limite de assentos ou restrição por tamanho da empresa
  • Remotion: licença personalizada source-available — empresas com mais de 3 pessoas precisam de licença corporativa paga
  • O HyperFrames reproduz o index.html diretamente sem etapa de build; o Remotion precisa de bundler
  • Animações baseadas no clock de bibliotecas como GSAP, Anime.js e Motion One são seekable e mantêm precisão por frame no HyperFrames, enquanto no Remotion são reproduzidas em wall-clock durante a renderização
  • O Remotion já tem renderização distribuída com Lambda pronta para produção; o HyperFrames atualmente suporta apenas renderização em máquina única
• Estrutura dos pacotes: CLI, core (tipos, parser, linter), engine (captura com Puppeteer + FFmpeg), producer (renderização completa), studio (editor no navegador), player (web component), shader-transitions
• Licença Apache 2.0, baseado em TypeScript

[xguru]

Inspirado no Remotion, é uma ferramenta quase igual, mas que remove o React e cria tudo diretamente em HTML.
Por enquanto, como somos uma empresa pequena, usamos o Remotion normalmente.
Como o Remotion é gratuito apenas para até 3 pessoas, parece que empresas assim podem usar este HyperFrames.