HyperFrames — comece aqui
O HyperFrames renderiza vídeos a partir de HTML — uma composição é um arquivo HTML cujo DOM declara a 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 criação está em /hyperframes-core; leia-o antes de escrever o HTML da composição.
Abaixo: um mapa de capacidades (as skills de domínio, carregadas sob demanda) e o roteador de intenções (escolha um fluxo de trabalho para qualquer solicitação de "crie um vídeo para mim").
Mapa de capacidades — as skills de domínio
Capacidades atômicas que você carrega sob demanda — não são fluxos de trabalho completos de vídeo. Para "crie um vídeo para mim", use o roteador de intenções abaixo.
| Você quer… | Skill |
|---|---|
Criar / editar uma composição HTML — o contrato data-*, clipes, trilhas, subcomposições, variáveis | /hyperframes-core |
| Animar — movimentos atômicos, 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 — narração por 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, validate, inspect, preview, render, publish, doctor | /hyperframes-cli |
Instalar blocos / componentes do registry (hyperframes add) | /hyperframes-registry |
Roteamento de intenções — escolha um fluxo de trabalho
Esta seção conhece apenas os fluxos de trabalho 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 fluxo de trabalho — comprometer-se com um fluxo de trabalho é a decisão de roteamento. No máximo duas perguntas:
- Entrada — um produto (URL / briefing), um site genérico, um PR do GitHub, um tópico para explicar ou um vídeo existente de um apresentador?
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 fluxo de trabalho escolhido reconfirma suas próprias especificidades em sua primeira etapa.
Folha de dicas dos fluxos de trabalho
| Fluxo de trabalho | Use para |
|---|---|
/product-launch-video | Marketing / lançamento / promoção de um produto — a partir de sua URL, um briefing ou um roteiro (mesmo que o site seja apenas mencionado) |
/website-to-video | Transformar um site genérico em um vídeo — tour pelo site, showcase de portfólio / landing page, clipe social a partir dos visuais do site |
/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 de um apresentador (filmagem inalterada) |
/talking-head-recut | Empacotar um vídeo existente de um apresentador com sobreposições gráficas projetadas — terço inferior, destaques de dados, títulos cinéticos, citações em destaque |
/motion-graphics | Um gráfico em movimento curto, sem narração e focado em 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 a batida — lyric video, 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 várias cenas, um loop estático / pôster, uma composição personalizada |
/remotion-to-hyperframes | Portar uma composição existente do Remotion (React) para o HyperFrames (migração, não criação) |
Desambiguação (apenas onde pode haver confusão):
- Foco em movimento e sem narração (menos de ~10s, o movimento é a mensagem) →
/motion-graphics, independentemente da entrada. - Uma URL ou roteiro — comercializa um produto específico (mesmo apenas nomeando o site) →
/product-launch-video; um site genérico que não é um produto →/website-to-video; um link de PR do GitHub →/pr-to-video; explica um conceito sem produto / site →/faceless-explainer. Se não estiver claro se é produto vs. tópico, ou lançamento vs. site genérico → faça uma pergunta. - Filmagem existente — legendas simples de palavras faladas →
/embedded-captions; cartões de sobreposição projetados →/talking-head-recut. Nenhum deles edita a filmagem em si (reaplicar tempo / 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 o áudio) sem narração →
/music-to-video— as batidas/energia da música ditam o ritmo. (Peças narradas permanecem no fluxo de trabalho correspondente à entrada acima;/motion-graphicsé para movimentos curtos sem narração que não são conduzidos 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 de "slideshow" prossegue diretamente; um gatilho adjacente ("deck / slides / apresentação / converta esta página") faz com que/slideshowconfirme que é um slideshow antes de criar e mude para o fluxo de trabalho não-slideshow apropriado, se não for. - A duração é um guia, não uma barreira — a intenção escolhe o fluxo de trabalho; vá para
/general-videoapenas quando a peça for claramente mais longa que ~3 min, ou for um formato estático / loop / personalizado.
Se o fluxo de trabalho correspondente não estiver instalado
Depois de escolher um fluxo de trabalho, verifique se ele está realmente disponível para você. Se a skill do fluxo de trabalho correspondente não estiver instalada, não recorra a palpites — diga ao usuário para instalá-la primeiro:
- Apenas este fluxo de trabalho:
npx skills add heygen-com/hyperframes --skill <nome-do-fluxo-de-trabalho>(ex.:--skill pr-to-video— nome simples, sem a/inicial). - Todos os fluxos de trabalho de uma vez:
npx skills add heygen-com/hyperframes --all(core + todos os fluxos de trabalho, pula o seletor).
Após executá-lo, releia a skill do fluxo de trabalho 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 faltando — portanto, um projeto recém-inicializado sempre terá o conjunto completo e mais recente (e reexecutar init em um projeto atualizado não faz nada). A verificação é uma ida e volta rápida ao GitHub; offline (ou com limite de taxa), ele recai para instalação após um curto tempo limite, portanto init nunca falha permanentemente em uma instabilidade de rede. Opte por não participar completamente com init --skip-skills.
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 um veredito legível por máquina; sai com código diferente de zero quando algo está desatualizado ou faltando). - Atualizar:
npx hyperframes skills update— puxa o conjunto completo para a versão mais recente, instalando qualquer skill ainda não presente (mesmo passo de instalação do init).
A CLI também exibe um lembrete de uma linha quando uma execução de render / lint / validate detecta skills desatualizadas.
Detalhes dos fluxos de trabalho
/product-launch-video
- Entrada: Um produto sendo comercializado — (a) uma URL do produto (navegada com Chrome headless para ativos + tokens de marca), (b) um roteiro / briefing que nomeia o site do produto mesmo sem um link (PLV resolve + navega, a menos que o usuário opte por não fazer isso), ou (c) um roteiro sem 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 textual ou reestruturado por cena — o PLV pergunta.
- Saída: lançamento de produto / promo SaaS como uma composição HyperFrames → MP4. (ponto ideal 30–90s).
- 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 genérico / URL para transformar em um vídeo — quando o objetivo é um vídeo do site, não um lançamento de produto. Capturado com Chrome headless para screenshots reais + ativos da marca.
- Saída: um tour pelo site / portfólio / showcase de landing page / clipe social construído a partir dos próprios visuais do site → MP4.
- Gatilhos: "transforme este site em um vídeo", "tour pelo site de ", "clipe social da nossa homepage", "eu só tenho uma URL — faça algo".
/faceless-explainer
- Entrada: Texto arbitrário — um tópico, artigo ou notas — sendo explicado, sem nenhum produto sendo comercializado e nenhum site para capturar. (Derivado de
/product-launch-video; sem Chrome headless.) - Saída: explicador sem rosto → MP4, cada visual inventado pelo LLM por cena (tipografia / abstrato / diagrama / visualização de dados); inclui o preset
pin-and-paper. (ponto ideal 30–90s). - Gatilhos: "explicador sem rosto sobre X", "explique como o DNS funciona como um vídeo", "transforme este artigo em um explicador", "explicador a partir das minhas anotações".
/pr-to-video
- Entrada: Um pull request do GitHub — uma URL de PR, uma referência
owner/repo#Nou "este PR" — lido via CLIgh(não um site para raspar). - Saída: explicador de mudança de código (changelog / revelação de funcionalidade / correção / refatoração) → MP4 — destaques de diff, antes/depois, árvore de arquivos + cenas de impacto. ≤ (ponto ideal 30–90s).
- Gatilhos: "faça um vídeo sobre este PR", "transforme o PR #1187 em um vídeo de changelog", "vídeo de notas de lançamento de github.com/org/repo/pull/123".
/embedded-captions
- Entrada: Um vídeo existente de um apresentador (MP4) para legendar — filmagem real, não uma URL ou briefing. Transcrito localmente (Whisper, sem chave de API) e mascarado (RVM) para que o sujeito possa ocultar legendas.
- Saída: a mesma filmagem inalterada, com uma camada de legenda — Padrão (trilha de terço inferior textual + um clímax incorporado atrás do sujeito) ou Cinematográfico (cada legenda composta atrás do sujeito). Qualquer duração.
- Gatilhos: "adicione legendas / subtítulos a este vídeo", "legendas atrás do sujeito", "legendas cinematográficas para meu clipe".
/talking-head-recut
- Entrada: Um vídeo existente de um apresentador / entrevista / podcast (MP4) para empacotar com gráficos na tela — filmagem real. Transcrito localmente (Whisper). O clipe é reproduzido na íntegra abaixo, inalterado.
- Saída: a mesma filmagem com cartões de sobreposição gráfica temporizados — títulos cinéticos, terços inferiores, destaques de dados, citações em destaque, painéis laterais, picture-in-picture — sincronizados com a transcrição. Qualquer duração.
- Gatilhos: "empacote este vídeo", "adicione sobreposições gráficas / terços inferiores / destaques de dados à minha palestra", "transforme esta entrevista em uma edição com pacote gráfico".
/motion-graphics
- Entrada: Um gráfico em movimento curto, focado em design, onde o movimento é a mensagem — tipicamente abaixo de ~10s, sem narração. Gêneros: tipografia cinética, uma contagem de estatística/número, um destaque de gráfico, uma vinheta de logotipo, um terço inferior / sobreposição ou uma página / tweet / manchete orientada por busca.
- Saída: um gráfico em movimento curto → MP4 ou uma sobreposição transparente (WebM / MOV com canal alfa) para um terço inferior / chamada.
- Gatilhos: "uma vinheta de logotipo de 8s", "anime esta estatística", "uma introdução de tipo cinético", "transforme este tweet em um gráfico em movimento", "uma sobreposição transparente de terço inferior".
/music-to-video
- Entrada: Uma faixa de música — um arquivo de áudio ou um vídeo para extrair o áudio — sem narração e sem captura de site. Opcionalmente, imagens / vídeos fornecidos pelo usuário para entrelaçar. A faixa é analisada uma vez em um mapa de batidas / energia determinístico (
audiomap.json) no qual todo o vídeo é construído. - Saída: uma composição HyperFrames sincronizada com a batida → MP4 onde a música dita o ritmo. Tipografia e modelos são o piso (um vídeo completo não precisa de nenhum ativo); qualquer mídia fornecida é cortada na mesma grade de batidas (corte na batida / ken-burns). O gênero — lyric video, slideshow, promo cinético — emerge das escolhas quadro a quadro; o pipeline nunca se ramifica com base nele.
- Gatilhos: "faça um vídeo para esta música", "vídeo sincronizado com a batida a partir desta faixa", "lyric video", "transforme esta música em um vídeo", "visualizador de música / promo cinético para esta batida".
/slideshow
- Entrada: Uma apresentação / pitch deck / deck interativo para criar — um