HyperFrames — comece aqui
O HyperFrames renderiza vídeo a partir de HTML — uma composição é um arquivo HTML cujo DOM declara o tempo com atributos data-*, cujo runtime de animação é buscável e cuja reprodução de mídia é controlada pelo framework.
Esta habilidade é o guia técnico de como usar — é intencionalmente não focada em design. Para receitas de movimento/animação, veja /hyperframes-motion. Para direção de design (paletas, tipografia, predefinições de quadro), veja /hyperframes-design. Abaixo: um mapa de capacidades de cada tópico do HyperFrames, um índice do guia de tópicos do que está nesta habilidade e um roteador de intenções para escolher um fluxo de trabalho.
Mapa de capacidades — as habilidades do HyperFrames
Três habilidades, uma por preocupação. Esta é o guia técnico de como usar. As outras duas cobrem design.
| Você quer… | Habilidade |
|---|---|
| Como usar o HyperFrames — contrato de composição, ciclo de desenvolvimento CLI, instalação de blocos/componentes do registro (esta habilidade) | /hyperframes |
| Movimento/Animação — regras atômicas de movimento, blueprints de cena, transições, adaptadores de runtime (GSAP / Lottie / Three.js) | /hyperframes-motion |
| Design — paletas, tipografia, predefinições de quadro, planejamento de batida, decisões de marca/estilo (sem receitas de animação) | /hyperframes-design |
Guia de tópicos — o que está dentro desta habilidade
O guia técnico de como usar está dividido em três sub-tópicos. Cada um tem seu próprio SKILL.md e pasta references/:
| Sub-tópico | Caminho | Leia para |
|---|---|---|
| Núcleo da composição | core/SKILL.md | O contrato de composição — atributos data-*, clipes, faixas, sub-composições, variáveis, regras de determinismo |
| Ciclo de desenvolvimento CLI | cli/SKILL.md | npx hyperframes init / lint / validate / inspect / preview / render + renderização em nuvem AWS Lambda |
| Adicionar via registro | registry/SKILL.md | hyperframes add <bloco-ou-componente> — locais de instalação, conexão de blocos, conexão de componentes, contribuição de novos itens |
Os detalhes por tópico estão na pasta references/ de cada sub-tópico. Para especificidades do runtime de animação (API GSAP, Lottie, Three.js, etc.) veja /hyperframes-motion → adaptadores/<runtime>.md.
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 nem os guias de tópicos 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 a explicar ou um vídeo existente de pessoa falando?
Padrões de 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 das legendas = o do usuário. O fluxo de trabalho escolhido reconfirma suas próprias especificidades em sua primeira etapa.
Folha de referência de fluxos de trabalho
| Fluxo de trabalho | Use para |
|---|---|
/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 / refatoração explicativa |
/embedded-captions | Adicionar legendas/subtítulos a um vídeo existente de pessoa falando (filmagem inalterada) |
/talking-head-recut | Empacotar um vídeo existente de pessoa falando com overlays gráficos projetados — terço inferior, chamadas de dados, títulos cinéticos, citações em destaque |
/motion-graphics | Um gráfico em movimento curto e focado em design — tipo cinético, uma estatística/gráfico impactante, uma vinheta de logotipo, um overlay de terço inferior |
/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 |
Desambiguação (apenas onde há confusão):
- Foco em movimento (menos de ~10s, o movimento é a mensagem) →
/motion-graphics, independentemente da entrada. - Uma URL ou script — um link de PR do GitHub →
/pr-to-video; explica um conceito sem produto/site →/faceless-explainer. Entrada genuinamente ambígua → faça uma pergunta. - Filmagem existente — legendas simples de fala →
/embedded-captions; cartões de overlay projetados →/talking-head-recut. Nenhum deles edita a filmagem em si (re-timing / recolor / reframe / reorder é edição NLE — fora do escopo). - 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 / converter esta página") faz o/slideshowconfirmar que é um slideshow antes de criar e mudar para o fluxo de trabalho não-slideshow apropriado se não for. - O comprimento é 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 habilidade 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>(ex.:--skill pr-to-video— nome simples, sem/inicial). - Todos os fluxos de trabalho de uma vez:
npx skills add heygen-com/hyperframes --all(núcleo + todos os fluxos de trabalho, pula o seletor).
Após executar, releia a habilidade do fluxo de trabalho e continue.
Detalhes dos fluxos de trabalho
/faceless-explainer
- Entrada: Texto arbitrário — um tópico, artigo ou anotações — sendo explicado, sem produto sendo comercializado e sem site para capturar.
- Saída: explicador sem rosto → MP4, cada visual inventado pelo LLM por cena (tipografia / abstrato / diagrama / visualização de dados); utiliza a predefinição
pin-and-paper. (ponto ideal 30–90s). - Gatilhos: "explicador sem rosto sobre X", "explique como o DNS funciona em um vídeo", "transforme este artigo em um explicador", "explicador a partir de 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 versão a partir de github.com/org/repo/pull/123".
/embedded-captions
- Entrada: Um vídeo existente de pessoa falando (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 (faixa literal no terço inferior + um clímax incorporado atrás do sujeito) ou Cinematográfica (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 pessoa falando / entrevista / podcast (MP4) para empacotar com gráficos na tela — filmagem real. Transcrito localmente (Whisper). O clipe é reproduzido por completo abaixo, inalterado.
- Saída: a mesma filmagem com cartões de overlay gráfico temporizados — títulos cinéticos, terços inferiores, chamadas 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 overlays gráficos / terços inferiores / chamadas de dados à minha palestra", "transforme esta entrevista em uma edição com pacote gráfico".
/motion-graphics
- Entrada: Um gráfico em movimento curto e focado em design onde o movimento é a mensagem — tipicamente abaixo de ~10s. Gêneros: tipografia cinética, uma contagem de estatística/número, um gráfico impactante, uma vinheta de logotipo, um overlay de terço inferior ou uma página/tweet/manchete orientada por busca.
- Saída: um gráfico em movimento curto → MP4 ou um overlay transparente (alpha WebM / MOV) 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", "um overlay de terço inferior transparente".
/slideshow
- Entrada: Uma apresentação / pitch deck / deck interativo para criar — um briefing, um esboço ou uma página existente para converter em slides. Não é uma solicitação de vídeo renderizado; se a intenção for ambígua, a habilidade confirma "você quer isso como um slideshow do HyperFrames?" antes de criar.
- Saída: uma composição executável do HyperFrames + uma ilha JSON que o
SlideshowControllerdo player lê para transformar a linha do tempo GSAP em um deck navegável — slides discretos, revelações de fragmentos, sequências de ramificação, navegação por hotspots, modo apresentador e notas do orador. A entrega é um deck, não um MP4. - Gatilhos: "faça um pitch deck / apresentação / deck de slides", "um deck interativo", "converta esta página em slides", "um slideshow com modo apresentador".
/general-video
- Entrada: Qualquer coisa não listada acima — um briefing criativo, um único elemento para animar, uma edição em uma composição que você está construindo. Agóstico em relação à entrada e duração.
- Saída: uma composição HyperFrames (qualquer duração/formato) através do fluxo original: sistema de design → expansão de prompt → plano → layout-antes-da-animação → construir (delegando às habilidades
hyperframes-*) → validar. - Gatilhos: "faça uma cartela de título", "anime isto", "um vídeo institucional / sizzle reel mais longo", "uma composição com várias cenas", "um loop estático/pôster", qualquer "faça um vídeo" que não se encaixe em nenhuma linha acima.