- Assim como o Remotion, cria vídeos e renderiza em MP4 usando apenas HTML + CSS + GSAP
- Sem React nem DSL proprietária, um arquivo HTML puro é a própria composição do vídeo, e o
index.html é reproduzido diretamente sem etapa de build
- Otimizado para fluxos de trabalho em que agentes de codificação por IA, como Claude Code e Codex, escrevem HTML diretamente
- É possível ensinar os padrões do framework ao agente com
npx skills add heygen-com/hyperframes
- No Claude Code, é possível chamar diretamente com os comandos slash
/hyperframes, /hyperframes-cli, /gsap
- Plugin para OpenAI Codex e plugin para Cursor também são oferecidos separadamente
- 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 — como se o agente 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 a 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 que você quiser, como GSAP, Lottie, CSS e Three.js
- A renderização determinística (Deterministic), que garante a mesma saída para a mesma entrada, é 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.), que podem ser instalados 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
- Suporta um pipeline completo para capturar sites e convertê-los em vídeo com o comando
hyperframes capture <url>
- Em comparação com o Remotion, a principal diferença está no artefato produzido (HTML vs React) e na 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 porte da empresa
- Remotion: licença customizada com código-fonte aberto para consulta (source-available) - empresas com mais de 3 pessoas precisam de licença empresarial paga
- O HyperFrames reproduz diretamente o
index.html sem etapa de build, enquanto o Remotion exige um bundler
- Animações baseadas no clock de bibliotecas como GSAP, Anime.js e Motion One são seekable no HyperFrames e mantêm precisão de quadro, mas 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, por enquanto, oferece 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
1 comentários
Inspirado no Remotion e bem parecido com ele, mas é uma ferramenta 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 só para até 3 pessoas, em uma escala um pouco maior parece que vale usar o HyperFrames.