🎯 O que é o HyperFrames
HyperFrames é um framework open-source que transforma páginas HTML animadas em arquivos MP4, frame a frame, com precisão total. Repositório oficial: heygen-com/hyperframes no GitHub.
HyperFrames trata o navegador como uma câmera de cinema. Cada frame do vídeo é uma captura exata do DOM no instante t — sem codec de tela, sem perda de antialiasing, sem flickering.
O resultado é um MP4 com qualidade de renderização de browser: fontes perfeitas, SVG vetorial, sombras e gradientes sem degradação.
- ✓ Framework open-source (MIT), grátis para sempre
- ✓ Roda 100% local: sem conta, sem chave de API
- ✓ Saída determinística: mesmo HTML → mesmo MP4
- ✓ Integra com qualquer lib JS: GSAP, Three.js, D3
- ✗ Não é gravador de tela (não captura apps externos)
- ✗ Não é editor de vídeo não-linear (sem timeline GUI)
- ✗ Não depende de serviço em nuvem
- ✗ Não usa IA generativa para imagens ou vozes
npx hyperframes.🔄 HTML → MP4
Como uma página HTML animada com GSAP se torna um vídeo MP4 renderizado quadro a quadro — o coração do HyperFrames.
Um arquivo index.html define cada cena com HTML/CSS. As animações são codificadas em GSAP dentro de uma função anim() que recebe t (tempo em segundos).
Para cada frame, o HyperFrames chama anim(t) no browser, aguarda o DOM estabilizar, e dispara uma screenshot PNG de alta resolução. A 30 fps, são 30 screenshots por segundo de vídeo.
Os PNGs são passados ao FFmpeg, que os encoda em H.264 com o áudio WAV gerado pelo Kokoro TTS — produzindo o MP4 final com narração sincronizada.
O vídeo resultante fica em renders/nome-16x9.mp4 ou renders/nome-9x16.mp4, pronto para upload no YouTube ou Shorts.
Gravação de tela captura em tempo real — se o CPU estiver lento, o vídeo fica quebrado. O HyperFrames controla o tempo virtualmente: nenhum frame é perdido independentemente da velocidade da máquina.
🔊 TTS local com Kokoro
Narração PT-BR gerada 100% na sua máquina, com a voz pf_dora, sem chave de API e sem depender de espeak-ng. Kokoro cuida da fonética do português.
A maioria dos motores TTS open-source usa espeak-ng para fonemizar — e espeak-ng é notoriamente ruim em português. Kokoro tem seu próprio fonemizador PT-BR, produzindo voz mais natural sem deps externas.
- ✓ Escreva o texto como se fosse fala (expanda siglas)
- ✓ Use
--speed 0.98para voz mais natural - ✓ Meça cada WAV com ffprobe antes de montar
- ✓ Arquivos de texto em
assets/txt/sN.txt
- ✗ Não instale espeak-ng — Kokoro não usa e conflita
- ✗ Não use velocidade acima de 1.05 (voz metálica)
- ✗ Não esqueça de baixar o modelo na 1ª execução (~340 MB)
- ✗ Não coloque siglas em maiúsculas sem expandir (ex: "GSAP" → "ji-sap")
Além de pf_dora (feminina, padrão recomendado), há pm_alex e pm_santa. A primeira execução baixa ~340 MB do modelo Kokoro automaticamente.
💻 Tudo local, sem API
O HyperFrames roda inteiramente na máquina do usuário — sem nuvem, sem custo por render, sem enviar conteúdo para servidores externos.
Ferramentas SaaS de vídeo (Synthesia, HeyGen, Pictory) cobram por minuto renderizado e seus slides/roteiros são processados em servidores de terceiros. Com HyperFrames: custo zero por render e nenhum conteúdo sai da sua máquina.
| Aspecto | HyperFrames | SaaS (Synthesia etc.) |
|---|---|---|
| Custo por vídeo | R$ 0,00 | Plano mensal obrigatório |
| Privacidade do conteúdo | 100% local | Sobe para servidores |
| Personalização visual | HTML/CSS ilimitado | Templates fixos |
| Chave de API | Não precisa | Obrigatória |
Se você produz cursos com conteúdo sensível, código interno ou metodologias próprias, manter tudo local é essencial. Cada render acontece sem conexão obrigatória com a internet.
📐 Dois formatos: 16:9 e 9:16
Do mesmo projeto HTML, o HyperFrames gera YouTube (1920×1080) e Shorts/Reels (1080×1920) com um único flag de linha de comando.
O gerador build-index.mjs aceita o flag --vertical. Quando passado, reescreve o index.html em 1080×1920 e o HyperFrames renderiza o MP4 vertical — sem duplicar código de cena.
node build-index.mjs (sem flag)node build-index.mjs --verticalUse --quality draft primeiro para conferir frames individuais rapidamente. Só depois rode --quality high para o MP4 final — economiza tempo nas iterações.
🧭 Quando usar o HyperFrames
Vídeos explicativos, tutoriais técnicos, onboarding de produto — qualquer situação onde você quer controle total sobre o visual e custo zero por render.
- ✓ Criar vídeos explicativos de código ou conceitos técnicos
- ✓ Produzir tutoriais step-by-step com animações precisas
- ✓ Montar onboarding de produto com design de marca própria
- ✓ Precisar de 16:9 E 9:16 do mesmo conteúdo
- ✓ Querer custo zero mesmo em produção de alto volume
- ✗ Precisar capturar interações reais de aplicativos
- ✗ O vídeo exige câmera de talking head (avatar realista)
- ✗ Edição não-linear complexa (Adobe Premiere / DaVinci)
- ✗ Sem Node.js disponível no ambiente
Slides animados com código, diagramas e narração local. Mesma qualidade toda vez, sem variação de plataforma.
Vídeos de boas-vindas e feature tours com design dark premium da marca — sem depender de designers ou SaaS.
Teaser de produto em 9:16 para Reels e 16:9 para YouTube — gerados do mesmo HTML em minutos.
Se você consegue descrever o vídeo como "slides com animações + narração", o HyperFrames é a ferramenta certa. Se precisa de câmera ao vivo ou captura de app, use screencast.
📋 Resumo do Módulo 2.1
- ✓ HyperFrames é open-source, local, MIT — sem custo por render
- ✓ Stack: Chrome headless captura frames + FFmpeg encoda MP4
- ✓ HTML + GSAP → função
anim(t)→ frames → MP4 - ✓ TTS Kokoro:
pf_dora --speed 0.98, sem espeak-ng, sem chave - ✓ 16:9 (1920×1080) e 9:16 (1080×1920) do mesmo projeto
- ✓ Ideal para explicativos, tutoriais e onboarding com design próprio
npx hyperframes init.