HyperFrames — comece aqui
O HyperFrames renderiza vídeo a partir de HTML — uma composição é um arquivo HTML cujo DOM declara temporização com atributos data-*, cujo runtime de animação é buscável e cuja reprodução de mídia é gerenciada pelo framework. O contrato completo de autoria está em /hyperframes-core; leia-o antes de escrever HTML de composição.
Abaixo: um mapa de capacidades (as skills de domínio, carregadas sob demanda) e o roteador de intenções (escolha um workflow para qualquer solicitação "faça um vídeo para mim").
Mapa de capacidades — as skills de domínio
Capacidades atômicas que você carrega sob demanda — não workflows completos de vídeo. Para "faça um vídeo para mim", use o roteador de intenções abaixo.
| Você deseja… | Skill |
|---|---|
Criar / editar uma composição HTML — o contrato data-*, clipes, trilhas, sub-composições, variáveis | /hyperframes-core |
| Animar — movimento atômico, blueprints de cena, transições, adaptadores de runtime (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU) | /hyperframes-animation |
Direção criativa — frame.md / design.md, paletas, tipografia, narração, planejamento de batidas, áudio-reativo | /hyperframes-creative |
| Mídia — voz TTS, música de fundo, transcrição, remoção de fundo, legendas | /hyperframes-media |
Resolução de mídia — encontrar + congelar BGM, SFX, imagens, ícones do catálogo HeyGen em .media/ com rastreamento de manifesto | /media-use |
| Loop de desenvolvimento CLI — init, lint, validar, inspecionar, pré-visualizar, renderizar, publicar, diagnosticar | /hyperframes-cli |
Instalar blocos / componentes do registro (hyperframes add) | /hyperframes-registry |
Roteamento de intenções — escolha um workflow
Esta seção conhece apenas os workflows de alto nível; ela não carrega suas referências internas ou as skills de domínio acima.
Antes de rotear — confirme a entrada, não a especificação
O roteamento precisa saber sobre o que é o vídeo — sua entrada e assunto. Se isso não estiver especificado ("faça um vídeo sobre nossa coisa" sem URL, produto, tópico ou ativo), pergunte antes de entrar em qualquer workflow — comprometer-se com um workflow É a decisão de roteamento. No máximo duas perguntas:
- Entrada — um produto (URL / resumo), um site geral, um PR do GitHub, um tópico para explicar ou um vídeo existente com alguém falando?
Padrões da especificação — informe, não pergunte (eles nunca mudam a rota): proporção 16:9 (use 9:16 apenas para um destino vertical nomeado — TikTok / Reels / Shorts); idioma da narração / legenda = o do usuário. O workflow escolhido reconfirma suas próprias especificações em seu primeiro passo.
Ficha de referência de workflows
| Workflow | Use para |
|---|---|
/product-launch-video | Vender um produto (SaaS, app, site da empresa / produto) — a partir de uma URL, resumo ou roteiro → um promo. O padrão para qualquer URL comercial, mesmo que o site seja apenas nomeado. |
/website-to-video | Mostrar um site — um tour / showcase construído a partir das próprias capturas de tela do site. Para sites não comerciais (portfólio, blog, docs, pessoal, evento), ou quando o usuário quer um tour, não um promo. |
/faceless-explainer | Explicar um tópico / conceito a partir de texto — sem produto, sem URL; cada visual é inventado pelo LLM |
/pr-to-video | Um PR do GitHub / mudança de código → changelog / revelação de funcionalidade / correção / explicador de refatoração |
/embedded-captions | Adicionar legendas / subtítulos a um vídeo existente com alguém falando (filmagem inalterada) |
/talking-head-recut | Empacotar um vídeo existente com alguém falando com sobreposições gráficas projetadas — terços inferiores, chamadas de dados, títulos cinéticos, citações de destaque |
/motion-graphics | Um curto gráfico em movimento sem narração, liderado pelo design — tipo cinético, um destaque de estatística / gráfico, uma vinheta de logotipo, uma sobreposição de terço inferior |
/music-to-video | Uma faixa de música → um vídeo sincronizado com batidas — videoclipe lírico, slideshow ou promo cinético; a música dita o ritmo (imagens / vídeos opcionais do usuário cortados na grade de batidas) |
/slideshow | Uma apresentação / pitch deck / deck interativo — slides discretos, fragmentos, ramificações, hotspots; a saída é um deck navegável, não um vídeo renderizado |
/general-video | Qualquer outra coisa — peças mais longas ou com múltiplas cenas, um loop / pôster estático, uma composição personalizada |
/remotion-to-hyperframes | Portar uma composição Remotion (React) existente para HyperFrames (migração, não criação) |
Desambiguação (apenas onde confuso):
- Foco em movimento e sem narração (menos de ~10s, o movimento é a mensagem) →
/motion-graphics, independentemente da entrada. - Uma URL ou roteiro — pergunte uma coisa: o site está vendendo um produto? Sim (SaaS / app / produto / site da empresa) →
/product-launch-video— um promo, e o padrão para qualquer URL comercial, mesmo que o site seja apenas nomeado. Não, ou o usuário apenas quer o site mostrado como está (portfólio / blog / docs / pessoal / evento) →/website-to-video— um tour. Um link de PR do GitHub →/pr-to-video; um conceito sem produto ou site →/faceless-explainer. - Filmagem existente — legendas simples de palavras faladas →
/embedded-captions; cartões de sobreposição projetados →/talking-head-recut. Nenhum edita a filmagem em si (re-temporização / recolorir / reenquadrar / reordenar / áudio é edição NLE — fora do escopo). - Uma faixa de música é a entrada (um arquivo de áudio, ou um vídeo para extrair áudio) sem narração →
/music-to-video— as batidas/energia da música ditam o ritmo. (Peças narradas permanecem com o workflow correspondente à entrada acima;/motion-graphicsé para movimento curto sem narração que não seja impulsionado por música.) - Uma apresentação / pitch deck / deck interativo (slides discretos, navegação, modo apresentador) →
/slideshow— a saída é um deck navegável, não um vídeo renderizado. Uma solicitação explícita "slideshow" prossegue diretamente; um gatilho adjacente ("deck / slides / apresentação / converter esta página") faz com que/slideshowconfirme se é um slideshow antes de criar, e mude para o workflow não-slideshow apropriado se não for. - A duração é um guia, não uma barreira — a intenção escolhe o workflow; vá para
/general-videoapenas quando a peça for claramente maior que ~3 min, ou for um formato estático / loop / personalizado.
Se o workflow correspondente não estiver instalado
Depois de escolher um workflow, verifique se ele está realmente disponível para você. Se a skill do workflow correspondente não estiver instalada, não recorra a palpites — diga ao usuário para instalá-la primeiro:
- Apenas este workflow:
npx skills add heygen-com/hyperframes --skill <nome-do-workflow>(ex.:--skill pr-to-video— nome simples, sem a/inicial). - Todos os workflows de uma vez:
npx skills add heygen-com/hyperframes --all(core + cada workflow, pula o seletor).
Depois que ele executar, releia a skill do workflow e continue.
Mantendo as skills atualizadas
As skills do HyperFrames são versionadas. npx hyperframes init verifica as skills instaladas em relação às mais recentes no GitHub e instala/atualiza o conjunto completo sempre que algo estiver desatualizado ou ausente — portanto, um projeto recém-inicializado sempre tem o conjunto mais recente e completo (e reexecutar init em um projeto atualizado não faz nada). A verificação é uma rápida ida e volta ao GitHub; offline (ou com limite de taxa) ela recorre à instalação após um pequeno timeout, então init nunca falha totalmente devido a um problema de rede. Os workflows de criação usam init para scaffolding, então iniciar um novo projeto sempre executa esta verificação e puxa nossas skills mais recentes do GitHub quando estão desatualizadas. A flag --skip-skills está atualmente desativada (uma medida temporária enquanto o registro skills.sh se atualiza): passá-la não pula mais a verificação, então todo init verifica o GitHub. CI/testes podem optar por não participar através da variável de ambiente HYPERFRAMES_SKIP_SKILLS=1.
Se uma tarefa estiver se comportando inesperadamente, ou antes de uma compilação longa, confirme se as skills instaladas estão atualizadas:
- Verificar:
npx hyperframes skills check(adicione--jsonpara uma resposta legível por máquina; sai com código diferente de zero quando algo está desatualizado ou ausente). - Atualizar:
npx hyperframes skills update— puxa o conjunto completo para o mais recente, instalando qualquer um ainda não presente (igual à etapa de instalação do init).
O CLI também exibe um lembrete de uma linha quando uma execução de render / lint / validate detecta skills desatualizadas.
Detalhes dos workflows
/product-launch-video
- Entrada: Um produto sendo comercializado — (a) uma URL do produto (acessada com Chrome headless para ativos + tokens de marca), (b) um roteiro / resumo que nomeia o site do produto mesmo sem um link (PLV resolve + acessa, a menos que o usuário opte por não fazer isso), ou (c) um roteiro sem um site derivável / "não raspe" (modo sem captura — escolha um preset de estilo que forneça paleta + sistema de design). Um roteiro fornecido pode ser a narração literal ou reestruturado por cena — PLV pergunta.
- Saída: um promo de lançamento de produto / SaaS como uma composição HyperFrames → MP4 (ponto ideal 30–90s) — o valor do produto é o assunto, não uma demonstração do site. Para um tour simples do site, use
/website-to-video. - Gatilhos: "vídeo de lançamento para X", "promo para nosso site", "explique meu SaaS em um minuto", "transforme meu roteiro em um promo de 60s", "vídeo de lançamento só com texto, não raspe".
/website-to-video
- Entrada: Um site / URL cujo objetivo é mostrar o próprio site, não vender um produto. Melhor para sites não comerciais (portfólio, blog, docs, pessoal, evento), ou quando o usuário explicitamente quer um tour de um site como está. Capturado com Chrome headless para capturas de tela reais + marca