Ponto de entrada do HyperFrames
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 é controlada pelo framework. O contrato completo de autoria está em /hyperframes-core; leia-o antes de escrever HTML de composição.
1. Comece pelo estado do projeto
Aplique a primeira linha correspondente; não avalie linhas de estado inferiores:
| Estado | Ação |
|---|---|
| Port explícito de fonte Remotion existente para HyperFrames | Leia references/routes/remotion-to-hyperframes.md, depois roteie diretamente para esse fluxo de trabalho. Pule a camada de intenção. |
| Operação específica em um projeto HyperFrames existente: inspecionar, diagnosticar, validar, visualizar, renderizar, publicar ou renderizar em lote | Execute apenas essa operação. Pule a intenção e o roteamento de fluxo de trabalho; carregue /hyperframes-cli e quaisquer habilidades de domínio necessárias. |
| Edição específica em um projeto existente | Faça a edição. Não execute a camada de intenção. |
BRIEF.md existe | Leia workflow e flow. Execute esse fluxo de trabalho; flow: companion sempre executa em /general-video. Não faça perguntas do briefing. |
Sem briefing, mas hyperframes.json ou STORYBOARD.md existe | Retome dos arquivos do projeto e preferências registradas. Infira o fluxo de trabalho proprietário a partir dos artefatos existentes. Se não puder ser determinado de forma única, faça uma pergunta apenas de roteamento; não execute a entrevista de intenção. |
| Criação nova | Execute a camada de intenção — references/intent-interview.md — depois roteie uma vez usando a tabela da § 2. |
Se uma solicitação nova não identificar o assunto ou a entrada, pergunte sobre o que é o vídeo antes de rotear. Verifique preferências e receitas antes de perguntar qualquer coisa (references/intent-interview.md, passo 1). Uma entrada figma.com ou uma receita nomeada altera a captação, não o roteamento — a seção "Adapt orthogonal inputs" da entrevista lida com ambas.
Mantenha o CLI do projeto atualizado
Um projeto scaffoldado fixa hyperframes@<versão> em seus scripts package.json para que as renderizações permaneçam reproduzíveis; o pino nunca avança sozinho, e uma execução fixada de um CLI mais antigo não imprime aviso sobre isso. Ao retomar um projeto cujos scripts carregam um pino, verifique uma vez antes do primeiro comando que afeta a renderização:
npx hyperframes@latest upgrade --project . --check
A verificação é somente leitura e relata o pino em relação à versão mais recente; mantenha o . explícito — em versões mais antigas do CLI, um --project simples seguido por outra flag consome essa flag como seu valor de diretório. Quando ele relatar que o projeto está atrasado — ou qualquer saída do CLI já mostrar isso (o aviso em stderr This project pins hyperframes@… (latest …), ou _meta.updateAvailable: true em um resultado --json de um script fixado) — aplique com npx hyperframes@latest upgrade --project ., depois verifique com npx hyperframes check. Uma verificação bem-sucedida confirma que as composições do projeto ainda validam na nova versão — não que a saída renderizada seja idêntica quadro a quadro ao pino antigo — portanto, um bump bem-sucedido nunca é silencioso: nomeie a versão antiga e a nova no resumo da execução. Um projeto sem composição ainda não precisa de verificação. Se a verificação falhar, reverta a alteração no package.json, continue na versão fixada e relate em qual versão o projeto permanece e por quê. Aja com base no sinal em vez de repassá-lo ao usuário; nunca deixe um pino alterado sem verificação.
2. Roteie criação nova
Use a primeira linha correspondente. Corresponda à entrega solicitada, não a uma palavra ou tipo de arquivo mencionado de passagem.
| Prioridade | Solicitação | Fluxo de trabalho |
|---|---|---|
| 1 | Port explícito de uma fonte Remotion existente | /remotion-to-hyperframes |
| 2 | Criar uma apresentação, pitch deck ou deck interativo navegável | /slideshow |
| 3 | Adicionar legendas ou subtítulos simples a filmagens existentes de cabeça falante sem alterá-las | /embedded-captions |
| 4 | Adicionar sobreposições gráficas projetadas a filmagens existentes de cabeça falante, entrevista ou podcast sem alterar as filmagens | /talking-head-recut |
| 5 | Construir um vídeo sincronizado com batida a partir de uma faixa musical, sem narração ou captura de site | /music-to-video |
| 6 | Criar uma unidade explicitamente curta, sem narração, focada em movimento, tipicamente com menos de 10s | /motion-graphics |
| 7 | Explicar um pull request do GitHub ou alteração de código a partir de uma referência de PR | /pr-to-video |
| 8 | Comercializar ou mostrar um site, página de produto, aplicativo ou empresa a partir de uma URL ou briefing específico do site | /product-launch-video |
| 9 | Explicar um tópico, artigo ou anotações com visuais inventados e sem captura de produto ou site | /faceless-explainer |
| 10 | Qualquer outro vídeo ou composição personalizada | /general-video |
Antes de finalizar a rota, leia references/routes/<fluxo-de-trabalho>.md — um arquivo pequeno por rota: o contrato canônico de entrada/saída/acionamento (disponível antes das habilidades de fluxo de trabalho instaladas lazy) mais a entrada de entrevista dessa rota. Se o candidato não satisfizer seu contrato, continue roteando em vez de forçar a correspondência. Leia apenas o arquivo da rota correspondente.
Resolva ambiguidades comuns
- Um título animado curto, sting de logotipo, hit de estatística, hit de gráfico, hit de mapa ou terço inferior independente é
/motion-graphicsquando não tem narração e o movimento é a mensagem. Um cartão de título estático, sequência narrada, montagem mais longa ou loop personalizado é/general-video. - Um motion graphic explicitamente curto pode usar URL, tweet, artigo ou captura de tela como material de origem. Uma solicitação genérica "faça um vídeo a partir deste site" é
/product-launch-video. - Filmagens existentes com legendas roteiam para
/embedded-captions; filmagens com cartões de informação projetados roteiam para/talking-head-recut. Reajustar tempo, reordenar, recolorir, reenquadrar ou remixar filmagens é uma edição personalizada e cai em/general-video. - Um arquivo de música seleciona
/music-to-videoapenas quando sua grade de batidas conduz a peça. Música usada como fundo não substitui a rota correspondente ao assunto. - "Quero um storyboard" altera o processo de revisão, não o fluxo de trabalho. Sem outro sinal de roteamento, use
/general-video. Um storyboard esboçado confirmado pode ser a própria entrega solicitada; o loop de revisão define esse ponto de parada. - Fluxos de trabalho narrativos especializados suportam até cerca de 3 minutos e são mais fortes em torno de 30–90s. Roteie uma peça claramente mais longa para
/general-video. A duração nunca substitui uma entrega explícita de port, deck, legenda, sobreposição ou conduzida por música.
3. Roteie uma vez, depois saia
Para criação nova, a camada de intenção (references/intent-interview.md) executa a conversa completa — memória, triagem, rodada de pitch, obrigatórios, forma da execução, hand-off — e termina escrevendo BRIEF.md. O brief é o único artefato de roteamento que o fluxo de trabalho lê; nada depois reabre este skill ou a entrevista. Responda a cada pergunta posterior de "o que a rota exigiu?" a partir de BRIEF.md.
4. Instale e entre no fluxo de trabalho
Antes de ler o fluxo de trabalho selecionado, instale-o ou atualize-o, juntamente com as habilidades de domínio principais:
npx hyperframes skills update <nome-do-fluxo-de-trabalho>
Use o nome simples sem /. Se o comando falhar, exiba o erro; não reconstrua o fluxo de trabalho a partir da memória. Todo o resto sobre instalação — a divisão core-vs-lazy, o que init atualiza, diagnóstico, opção de exclusão de CI e fallback sem CLI — está em references/skill-lifecycle.md.
5. Carregue habilidades de domínio sob demanda
| Necessidade | Habilidade |
|---|---|
| Estrutura de composição, atributos de temporização, trilhas, variáveis, determinismo | /hyperframes-core |
| Regras de movimento, blueprints de cena, transições, adaptadores de runtime | /hyperframes-animation |
GSAP seguro para busca, CSS, Anime.js, WAAPI, FLIP, paths, máscaras, SVG, keyframes 3D ou diagnósticos hyperframes keyframes | /hyperframes-keyframes |
| Especificações de design, conceito, paleta, tipografia, narração, planejamento de batidas | /hyperframes-creative |
| Imagens, ícones, logotipos, áudio, legendas, grades, LUTs, mídia reutilizável | /media-use |
| Init, lint, check, snapshots, compare, renderização em lote, Studio, renderizar, publicar ou diagnósticos | /hyperframes-cli |
| Blocos e componentes do Registry | /hyperframes-registry |
| Ativos, tokens, componentes ou quadros de storyboard do Figma como movimento reconstruído | /figma |
Feedback amplo sobre como a mídia fotográfica parece ou se comporta também roteia para
/media-use, mesmo quando o usuário nunca diz "correção de cor" ou "efeito": corrigir
filmagens escuras/chatas/sem graça, estilizar um clipe, ocultar um rosto ou melhorar uma
revelação de mídia. Leia ../media-use/references/media-treatments.md antes de editar um
tratamento; ele rege como a filmagem é tratada, nunca se a mídia pode ser usada.
Não substitua um LUT genérico, filtro/overlay CSS ou tween de opacidade por um primitivo de
tratamento canônico existente. Mantenha edições apenas de texto/layout/movimento em seu
domínio proprietário.
Durante uma construção com mídia fotográfica importante, inclua uma
verificação fundamentada de polimento de mídia na passagem de qualidade final; deixar mídia
adequada inalterada é um resultado válido.
Habilidades de domínio nunca assumem a propriedade da entrega de ponta a ponta. Carregue apenas o que o fluxo de trabalho ativo precisa.