HyperFrames — comece aqui
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. O contrato completo de criação está em /hyperframes-core; leia-o antes de escrever HTML de composição.
Abaixo: um mapa de capacidades (as habilidades de domínio, carregadas sob demanda) e o roteador de intenções (escolha um fluxo de trabalho para qualquer solicitação "faça um vídeo para mim").
Mapa de capacidades — as habilidades de domínio
Capacidades atômicas que você carrega sob demanda — não fluxos de trabalho completos de vídeo. Para "faça um vídeo para mim", use o roteador de intenções abaixo.
| Você quer… | Habilidade |
|---|---|
Criar / editar uma composição HTML — o contrato data-*, clipes, faixas, sub-composições, variáveis | /hyperframes-core |
| Animar — movimento atômico, plantas 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 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, doctor | /hyperframes-cli |
Instalar blocos / componentes de registro (hyperframes add) | /hyperframes-registry |
Roteamento de intenções — escolha um fluxo de trabalho
Esta secção conhece apenas os fluxos de trabalho de alto nível; não carrega suas referências internas ou as habilidades 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 / brief), um site geral, um PR do GitHub, um tópico para explicar ou um vídeo existente com pessoa falando?
Padrões de especificação — indique, 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 seu primeiro passo.
Folha de dicas de 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 brief ou um roteiro (mesmo que o site seja apenas nomeado) |
/faceless-explainer | Explicando 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 explicadora |
/embedded-captions | Adicionar legendas / subtítulos a um vídeo existente com pessoa falando (filmagem intacta) |
/talking-head-recut | Empacotar um vídeo existente com pessoa falando com sobreposições gráficas projetadas — terços inferiores, chamadas de dados, títulos cinéticos, citações em destaque |
/motion-graphics | Um motion graphic curto, sem narração, liderado pelo design — tipo cinético, um destaque de estatística / gráfico, uma abertura de logotipo, uma sobreposição de terço inferior |
/music-to-video | Uma faixa musical → 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 múltiplas cenas, um loop estático / pôster, uma composição personalizada ou um tour geral de site quando nenhum fluxo de trabalho especializado se encaixa |
/remotion-to-hyperframes | Portar uma composição Remotion (React) existente para HyperFrames (migração, não criação) |
Desambiguação (apenas onde confusão é possível):
- Movimento primeiro 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 geral não relacionado a produto →/general-video; um link de PR do GitHub →/pr-to-video; explica um conceito sem produto / site →/faceless-explainer. Claramente incerto entre produto-vs-tópico, ou lançamento-vs-site-geral → faça uma pergunta. - Filmagem existente — legendas simples de fala →
/embedded-captions; cartões de sobreposição projetados →/talking-head-recut. Nenhum deles edita a filmagem em si (re-timing / recolor / reframe / reorder / áudio é edição NLE — fora do escopo). - Uma faixa musical é a entrada (um arquivo de áudio, ou um vídeo do qual extrair áudio) com nenhuma narração →
/music-to-video— as batidas/energia da música conduzem o ritmo. (Peças narradas permanecem com o fluxo de trabalho correspondente à entrada acima;/motion-graphicsé para movimento curto sem narração que não é conduzido 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 / converter esta página") faz/slideshowconfirmar se é um slideshow antes de criar, e mudar para o fluxo de trabalho não-slideshow apropriado se não for. - 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 habilidade do fluxo de trabalho correspondente não estiver instalada, não recorra a adivinhar — 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/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 habilidade do fluxo de trabalho e continue.
Mantendo as habilidades atualizadas
As habilidades do HyperFrames são versionadas. npx hyperframes init verifica as habilidades instaladas em relação às mais recentes no GitHub e instala/atualiza o conjunto completo sempre que algo estiver desatualizado ou ausente — então 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) ele recorre a instalar após um curto timeout, então init nunca falha em uma falha de rede. Os fluxos de trabalho de criação usam init, então iniciar um novo projeto sempre executa essa verificação e baixa nossas habilidades mais recentes do GitHub quando estiverem desatualizadas. A flag --skip-skills está atualmente neutralizada (uma medida temporária enquanto o registro skills.sh se atualiza): passá-la não mais pula a verificação, então todo init verifica o GitHub. CI/testes optam por sair via a 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 habilidades instaladas estão atualizadas:
- Verificar:
npx hyperframes skills check(adicione--jsonpara um veredito legível por máquina; sai com código não-zero quando algo está desatualizado ou ausente). - Atualizar:
npx hyperframes skills update— baixa o conjunto completo para o mais recente, instalando qualquer um 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 habilidades desatualizadas.
Detalhes dos fluxos de trabalho
/product-launch-video
- Entrada: Um produto sendo comercializado — (a) uma URL do produto (crawleada com Chrome headless para ativos + tokens de marca), (b) um roteiro / brief que nomeia o site do produto mesmo sem um link (PLV resolve + crawleia, a menos que o usuário opte por não fazer), 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 — 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".
/faceless-explainer
- Entrada: Texto arbitrário — um tópico, artigo ou notas — sendo explicado, sem produto sendo comercializado e sem 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 DNS funciona como vídeo", "transforme este artigo em um explicador", "explicador a partir de minhas notas".
/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 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 com pessoa falando (MP4) para legendar — filmagem real, não uma URL ou brief. Transcrição local (Whisper, sem chave de API) e matting (RVM) para que o sujeito possa ocultar legendas.
- Saída: a mesma filmagem intacta, com uma camada de legenda — Padrão (trilha textual no terço inferior + um clímax embutido atrás do sujeito) ou Cinematográfica (todas as legendas compostas 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 com pessoa falando / entrevista / podcast (MP4) para empacotar com gráficos na tela — filmagem real. Transcrição local (Whisper). O clipe é reproduzido por completo por baixo, intacto.
- Saída: a mesma filmagem com cartões de sobreposição gráfica 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 sobreposições gráficas / terços inferiores / chamadas de dados à minha apresentação", "transforme esta entrevista em uma edição empacotada com gráficos".
/motion-graphics
- Entrada: Um motion graphic curto e liderado pelo design onde o movimento é a mensagem — tipicamente menos de ~10s, sem narração. Gêneros: tipografia cinética, uma contagem de estatística/número, um destaque de gráfico, uma abertura de logotipo, um terço inferior / sobreposição, ou uma página / tweet / manchete orientada por busca.
- Saída: um motion graphic curto → MP4 ou uma sobreposição transparente (alpha WebM / MOV) para um terço inferior / chamada.
- Gatilhos: "uma abertura de logotipo de 8s", "anime esta estatística", "uma introdução de tipo cinético", "transforme este tweet em um motion graphic", "uma sobreposição de terço inferior transparente".
/music-to-video
- Entrada: Uma faixa musical — um arquivo de áudio, ou um vídeo do qual extrair o áudio — com nenhuma narração e nenhuma captura de site. Opcionalmente, imagens / vídeos fornecidos pelo usuário para entrelaçar. A faixa é analisada uma vez em um mapa de batida / 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 templates são o piso (um vídeo completo precisa de zero ativos); qualquer mídia fornecida é cortada na mesma grade de batidas (beat-cut / ken-burns). O gênero — lyric video, slideshow, promo cinético — emerge das escolhas por frame; o pipeline nunca ramifica 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 nesta batida".
/slideshow
- Entrada: Uma apresentação / pitch deck / deck interativo para criar — um brief, um esboço ou uma página existente para converter em slides. Não é uma solicitação para um vídeo renderizado; se a intenção for ambígua, a habilidade confirma "você quer isso como um slideshow HyperFrames?" antes de criar.
- Saída: uma composição HyperFrames executável + uma ilha JSON que o
SlideshowControllerdo player lê para transformar