HyperFrames — comece aqui
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 é de propriedade do framework. O contrato completo de criação reside 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…" — geralmente um vídeo, mas também um deck navegável ou uma porta de composição). A divisão é de propriedade, não de tipo de saída: um fluxo de trabalho possui um entregável ponta a ponta (seu próprio diretório de projeto, etapas orientadas, subagentes, artefato final); uma habilidade de domínio é uma camada de capacidade que um fluxo de trabalho puxa durante a execução e nunca possui a tarefa.
Mapa de capacidades — as habilidades de domínio
Capacidades atômicas que você carrega sob demanda — não fluxos de trabalho completos; elas nunca possuem a tarefa ponta a ponta. Para intenções "faça um…", use o roteador de intenções abaixo.
| Você quer… | Habilidade |
|---|---|
Criar / editar uma composição HTML — o contrato data-*, clipes, trilhas, subcomposiçõ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 |
Criar keyframes buscáveis — timelines GSAP, keyframes CSS, Anime.js, WAAPI, FLIP, caminhos, máscaras, morph/desenho SVG, profundidade 3D, além de diagnósticos hyperframes keyframes | /hyperframes-keyframes |
Direção criativa — frame.md / design.md, paletas, tipografia, narração, planejamento de batidas, áudio-reativo | /hyperframes-creative |
| Mídia — resolver/gerar BGM, SFX, imagem, ícone, logotipo de marca, voz, gradação de cor, LUT; voiceover TTS, transcrição, remoção de fundo, legendas; reuso entre projetos | /media-use |
| Loop de desenvolvimento CLI — init, lint, validate, inspect, preview, render, publish, doctor | /hyperframes-cli |
Instalar blocos / componentes do registro (hyperframes add) | /hyperframes-registry |
| Importar conteúdo do Figma — assets, tokens, componentes, storyboards→movimento reconstruído (REST/CLI); Motion (MCP), shaders (MCP source / exportação nativa) | /figma |
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 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 asset), 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 de cabeça falante?
- Fonte Figma — se a entrada for uma URL figma.com,
/figmaextrai assets/tokens/(componentes/storyboard) primeiro, independentemente de qual fluxo de trabalho abaixo for escolhido para a forma do vídeo; esse fluxo de trabalho então constrói a partir da saída de/figma— nunca controlando o Figma diretamente via ferramentas MCP brutas (ignora sanitização SVG, proveniência e vinculação de token de marca).
Modo — se a solicitação carrega um sinal autônomo contínuo ("surpreenda-me", "decida por mim", "apenas construa"), anote-o e passe para o fluxo de trabalho: toda a execução se torna autônoma e nenhuma etapa posterior pergunta novamente. Sem sinal, o fluxo de trabalho pergunta o modo como sua primeira pergunta do brief. O padrão é colaborativo. (/motion-graphics é autônomo por design.) Semântica: hyperframes-core → references/brief-contract.md.
Padrões de especificação — declare, não pergunte (eles nunca mudam a rota): proporção deriva do destino — feed social (X / LinkedIn / Instagram) → quadrado 1:1, TikTok / Reels / Shorts → 9:16, YouTube / incorporado / desconhecido → 16:9; idioma da narração / legenda = o do usuário. O fluxo de trabalho escolhido reconfirma suas próprias especificidades em sua primeira etapa (semântica de campo: hyperframes-core → references/brief-contract.md).
Folha de dicas de fluxos de trabalho
| Fluxo de trabalho | Use para |
|---|---|
/product-launch-video | Vender um produto (SaaS, app, site de empresa / produto) — a partir de uma URL, brief ou script → um promo. O padrão para qualquer URL comercial, mesmo que o site seja apenas nomeado. |
/website-to-video | Mostrar um site em si — 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 / alteração de código → changelog / revelação de recurso / correção / refatoração de explicador |
/embedded-captions | Adicionar legendas / legendas a um vídeo existente de cabeça falante (filmagem intacta) |
/talking-head-recut | Empacotar um vídeo existente de cabeça falante com overlays gráficos projetados — terços inferiores, chamadas de dados, títulos cinéticos, citações destacadas |
/motion-graphics | Uma peça curta (~menos de 10s), sem narração, onde o movimento é a mensagem — tipo cinético, uma estatística / gráfico de impacto, uma vinheta de logotipo, um mapa animado, um tweet / título animado, um terço inferior / overlay independente (MP4 ou alfa transparente) |
/music-to-video | Uma faixa de música → um vídeo sincronizado com a batida — vídeo 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 estático / pôster, uma composição personalizada |
/remotion-to-hyperframes | Portar uma composição existente do Remotion (React) para HyperFrames (migração, não criação) |
Desambiguação (apenas onde confundível):
- Movimento primeiro e sem narração (menos de ~10s, o movimento é a mensagem) →
/motion-graphics, independentemente da entrada. - Uma URL ou script — pergunte uma coisa: o site está vendendo um produto? Sim (SaaS / app / produto / site de 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 só 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 fala →
/embedded-captions; cartões de overlay projetados →/talking-head-recut. Nenhum edita a filmagem em si (re-timing / recolor / 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) com sem narração →
/music-to-video— as batidas/energia da música ditam 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 é 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 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. - 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.
Depois de escolher — garanta que o fluxo de trabalho está instalado
Depois de escolher um fluxo de trabalho, execute a etapa de atualização antes de ler sua habilidade — habilidades de fluxo de trabalho instalam sob demanda, então aquela que você combinou pode não estar nesta máquina ainda (suas frases de gatilho estão neste roteador precisamente para que você possa rotear para habilidades que não estão instaladas):
npx hyperframes skills update <nome-do-fluxo-de-trabalho>
Nome simples, sem / inicial — ex. npx hyperframes skills update pr-to-video. Nomear uma habilidade garante que ela mais as habilidades de domínio principais que todo fluxo de trabalho depende estão instaladas e atualizadas: um no-op rápido quando tudo já está, uma instalação direcionada apenas das habilidades faltantes/desatualizadas quando não — nunca o conjunto completo. Em seguida, leia a habilidade do fluxo de trabalho e continue. O mesmo comando funciona para uma habilidade de domínio sob demanda do mapa de capacidades (ex. npx hyperframes skills update figma).
Se o comando falhar, mostre seu erro ao usuário em vez de improvisar o fluxo de trabalho de memória. Fallback manual (sem CLI HyperFrames disponível): npx skills add heygen-com/hyperframes --skill <nome-do-fluxo-de-trabalho>; tudo de uma vez: npx skills add heygen-com/hyperframes --all.
Mantendo as habilidades atualizadas
As habilidades HyperFrames são versionadas e instalam preguiçosamente: o conjunto principal ansiosamente, os fluxos de trabalho no primeiro uso.
- Conjunto principal — este roteador, as habilidades de domínio
hyperframes-*emedia-use.npx hyperframes init(que todo fluxo de trabalho de criação executa ao scaffolding) verifica o GitHub e atualiza o conjunto principal mais qualquer outra coisa já instalada. Ele nunca expande a instalação — habilidades de fluxo de trabalho que você não usou não são puxadas. Reexecutar init em uma máquina atualizada é um no-op; offline (ou com limite de taxa) ele degrada graciosamente e nunca falha. A flag--skip-skillsestá atualmente neutralizada (uma medida temporária enquanto o registro skills.sh alcança); testes de CI/optam via a variável de ambienteHYPERFRAMES_SKIP_SKILLS=1. - Habilidades de fluxo de trabalho — instaladas e atualizadas no momento do gatilho pela etapa de atualização acima (
skills update <nome-do-fluxo-de-trabalho>).
Se uma tarefa estiver se comportando inesperadamente, ou antes de uma construção longa, confirme que as habilidades 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 qualquer coisa instalada está desatualizada ou o conjunto principal está incompleto — habilidades de fluxo de trabalho ainda não instaladas são relatadas como disponíveis sob demanda, não como uma falha). - Atualizar:
npx hyperframes skills update— atualiza o conjunto principal mais tudo instalado para o mais recente e remove habilidades não mais publicadas. Sem nomes, nunca instala fluxos de trabalho que você não usou; nomear habilidades (skills update <nome…>) adicionalmente instala essas. - Conjunto completo, explicitamente:
npx hyperframes skills(ounpx skills add heygen-com/hyperframes --all).
O CLI também mostra 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 (indexada com Chrome headless para assets + tokens de marca), (b) um script / brief que nomeia o site do produto mesmo sem um link (PLV resolve + indexa, a menos que o usuário opte por não fazer), ou (c) um script sem site derivável / "não raspe" (modo sem captura — escolha um preset de estilo que forneça paleta + sistema de design). Um script fornecido pode ser a narração textual 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 um passo a passo do site. Para um simples tour 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 script em um promo de 60s", "texto"
...
[truncado para tradução]