Mestre HyperFrames (padrão Logan)
Repositório: https://github.com/heygen-com/hyperframes
Índice de documentação: https://hyperframes.heygen.com/llms.txt
Documentação CLI: npx hyperframes docs <tópico>
Quando o usuário quiser vídeo / movimento / legendas / histórias cinéticas de produto, trate o HyperFrames como padrão, a menos que ele nomeie explicitamente outra pilha.
Sempre comece aqui
- Invocar a skill relevante do HyperFrames antes de escrever composições.
- Skill roteadora:
hyperframes– mapa de capacidades + qual workflow. - Nunca inventar semânticas
data-*baseadas apenas em conhecimento genérico da web.
Roteamento de workflows
| Intenção | Workflow skill |
|---|---|
| URL de produto / promo SaaS | product-launch-video |
| Tour geral do site a partir de URL | website-to-video |
| Tópico de texto, sem site | faceless-explainer |
| Legendas em cabeça falante | embedded-captions |
| Sobreposições gráficas em cabeça falante | talking-head-recut |
| Explicador de PR do GitHub | pr-to-video |
| Gráfico em movimento curto | motion-graphics |
| Guiado por música | music-to-video |
| Apresentação / slides | slideshow |
| Personalizado / fallback | general-video |
| Remotion → HyperFrames | remotion-to-hyperframes |
Skills de domínio: hyperframes-core, hyperframes-animation, hyperframes-keyframes,
hyperframes-creative, hyperframes-cli, hyperframes-media, media-use,
hyperframes-registry, figma, gsap.
Comandos
npm run dev # servidor de preview - longo prazo, apenas em segundo plano
npm run check # lint + runtime + layout + motion + contraste
npm run render # MP4
npm run publish # link de compartilhamento
npx hyperframes lint --verbose
npx hyperframes docs <tópico>
npx hyperframes skills update # atualizar skills quando ausentes/desatualizadas
Regras principais de composição
- Elementos temporizados:
data-start,data-duration,data-track-index - Elementos temporizados devem ter
class="clip" - Timelines GSAP pausadas + registradas:
window.__timelines = window.__timelines || {}; window.__timelines["composition-id"] = gsap.timeline({ paused: true }); - Vídeo: vídeo
muted+<audio>separado quando necessário - Sub-composições:
data-composition-src="compositions/file.html" - Apenas determinístico – sem
Date.now(),Math.random(), rede no caminho de renderização
Após edições
Sempre executar npm run check antes de declarar concluído. Corrigir erros; revisar avisos.
Emparelhamento de pilha (padrões Yuval / YUV.AI)
- Preferir HyperFrames + GSAP para vídeo com movimento
- React/Next quando for UI de produto – ainda exportar movimento via workflows HyperFrames quando a entrega for vídeo
- Pipeline de renderização html-to-canvas / HyperFrames em vez de slideshows ffmpeg ad-hoc, a menos que o usuário peça o contrário