O que HyperFrames — comece aqui faz?
Esta habilidade é um roteador local para o framework de vídeo baseado em HTML HyperFrames,
espelhado a partir de heygen-com/hyperframes.
As habilidades de domínio espelhadas vivem como subdiretórios desta pasta e são carregadas
sob demanda por nome. Com base na intenção do usuário, leia o SKILL.md da sub-habilidade
correspondente antes de executar.
Os guias de agente autorizados do upstream estão espelhados ao lado deste roteador
como UPSTREAM-CLAUDE.md (catálogo completo de habilidades, instalação, manutenção) e
UPSTREAM-AGENTS.md (lista de workflows) — consulte-os para as descrições canônicas das
habilidades upstream e o workflow npx skills add / npx hyperframes.
O HyperFrames renderiza vídeo a partir de HTML — uma composição é um arquivo HTML cujo
DOM declara temporização com atributos data-*, cuja runtime de animação é buscável,
e cuja reprodução de mídia é controlada pelo framework. O contrato completo de autoria
vive em hyperframes-core/; leia-o antes de escrever HTML de composição.
Índice de Sub-habilidades
| Sub-habilidade | Diretório | Use Quando |
|---|---|---|
| Contrato de composição | hyperframes-core/ | Criar/editar uma composição HTML — temporização data-*, clipes, trilhas, subcomposições, variáveis. Leia antes de escrever HTML de composição. |
| Loop de desenvolvimento CLI | hyperframes-cli/ | Executar npx hyperframes init, add, lint, check, snapshot, preview, render, publish, doctor, renderização em nuvem/lambda, ou resolver problemas do ambiente de build/render. |
| Animação | hyperframes-animation/ | Regras de movimento atômico, blueprints de cena multifásicas, transições de cena, técnicas de design de movimento e os adaptadores de runtime (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU). |
| Keyframes | hyperframes-keyframes/ | Keyframes 2D/3D seguros para busca, timelines GSAP, keyframes CSS, Anime.js, WAAPI, FLIP, paths, máscaras, morph/draw SVG, texto, profundidade 3D, além dos diagnósticos hyperframes keyframes. |
| Direção criativa | hyperframes-creative/ | Direção criativa não relacionada a animação: frame.md/design.md, paletas, tipografia, narração, planejamento de batidas, áudio-reativo. |
| Mídia | media-use/ | Resolver/gerar BGM, SFX, imagem, ícone, logotipo de marca, voz, gradação de cor, LUT; narração TTS, transcrição, remoção de fundo, legendas; reutilização entre projetos. |
| Blocos de registro | hyperframes-registry/ | Instalar e conectar blocos/componentes do registro (hyperframes add). |
| Importação Figma | figma/ | Importar conteúdo do Figma — assets, tokens, componentes, storyboards → movimento reconstruído. |
Workflows (entregáveis de ponta a ponta)
| Workflow | Diretório | Use Quando |
|---|---|---|
| Vídeo geral | general-video/ | Workflow padrão para criar/editar qualquer composição personalizada em qualquer duração/formato — peças mais longas/multicena, reels de marca e sizzle. |
| Motion graphics | motion-graphics/ | Motion graphic curto e focado em design onde o movimento É a mensagem — tipografia cinética, contagem de estatísticas, gráfico/dataviz impactante, vinheta de logotipo, lower-third. |
| Slideshow / deck | slideshow/ | Apresentação, pitch deck ou deck interativo com slides discretos, revelações de fragmentos, ramificação, navegação por hotspots. |
| Lançamento de produto | product-launch-video/ | Transformar uma URL de produto/marketing, roteiro colado ou briefing em um vídeo de lançamento/promoção de produto. |
| PR para vídeo | pr-to-video/ | Transformar um PR do GitHub (URL, owner/repo#N ou "este PR") em um vídeo explicativo de mudança de código. |
| Música para vídeo | music-to-video/ | Transformar uma faixa musical em um vídeo sincronizado com a batida — lyric video, slideshow ou visualização cinética. |
| Explicador sem rosto | faceless-explainer/ | Transformar texto arbitrário (artigo, notas, tópico, briefing) em um vídeo explicador sem rosto com visuais inventados. |
| Legendas incorporadas | embedded-captions/ | Adicionar legendas projetadas a um vídeo de pessoa falando — identidades visuais por trás de mecanismos de coluna/incorporados. |
| Reedição de pessoa falando | talking-head-recut/ | Empacotar um vídeo existente de pessoa falando/entrevista/podcast com cartões gráficos de sobreposição temporizados — títulos, lower-thirds, dados destacados, citações. |
| Port do Remotion | remotion-to-hyperframes/ | Portar uma composição existente do Remotion (React) para HTML do HyperFrames. Use SOMENTE quando houver um pedido explícito para portar/ converter/migrar uma fonte Remotion. |
Regras de Roteamento
- Para qualquer solicitação "faça-me um vídeo / animação / motion graphic", escolha um
workflow da segunda tabela acima. Se nenhum se encaixar, recorra a
general-video. - O workflow escolhido puxa habilidades de domínio (primeira tabela) em meio ao processo — elas nunca assumem a tarefa de ponta a ponta sozinhas.
- Contrato de autoria primeiro: antes de escrever HTML de composição, leia
hyperframes-core/. - Tudo é executado através de
npx hyperframesa menos que as instruções do projeto especifiquem um wrapper local — obedeça exatamente ao wrapper local. Requer Node.js >= 22 e FFmpeg.
Sincronização
Estas habilidades são espelhadas a partir do upstream. Para verificar ou puxar atualizações:
bash hyperframes/scripts/sync-hyperframes.sh --check # dry-run
bash hyperframes/scripts/sync-hyperframes.sh # sincronização com backup
Consulte SYNC.md para a fonte upstream, último commit sincronizado e estratégia de sincronização.