DigitalRavagers/Experiment

HyperFrames — leia isto primeiro

Comece aqui para qualquer tarefa HyperFrames — especialmente quando não houver um agente de configuração de projeto (CLAUDE.md / AGENTS.md / .cursorrules). Mapa de capacidade + roteador de vídeo abaixo.

Mapa de capacidade — qual habilidade para qual intenção

Você quer…	Vá para
Fazer um vídeo (a partir de uma URL, briefing, tópico, PR do GitHub, filmagem existente ou um único elemento para animar)	o roteador de vídeo abaixo (§ Roteamento de vídeo)
Criar uma apresentação de slides / apresentação / pitch deck — slides discretos, fragmentos, ramificações, pontos de acesso	/slideshow
Criar / editar uma composição HTML — o contrato data-*, clipes, faixas, subcomposições, variáveis	/hyperframes-core
Animar — regras de movimento atômicas, blueprints de cena, transições, adaptadores de runtime (GSAP / Lottie / Three.js / Anime.js / CSS / WAAPI / TypeGPU)	/hyperframes-animation
Direção criativa — design.md, paletas, tipografia, narração, planejamento de batidas, audio-reativo	/hyperframes-creative
Pré-processamento de mídia — narração TTS, música de fundo, transcrição, remoção de fundo, legendas	/hyperframes-media
Loop de desenvolvimento CLI — init, lint, validate, inspect, preview, render, publish, doctor	/hyperframes-cli
Instalar blocos / componentes do registro (hyperframes add)	/hyperframes-registry

O contrato de autoria de composição (cada elemento cronometrado precisa de data-start / data-duration / data-track-index; elementos cronometrados precisam de class="clip"; as linhas do tempo GSAP são pausadas e registradas em window.__timelines; apenas lógica determinística — sem Date.now() / Math.random() / rede) não está duplicado aqui — ele vive em /hyperframes-core. Leia isso antes de escrever HTML de composição.

O que o HyperFrames não pode fazer — verifique isto primeiro

O HyperFrames cria uma composição HTML e a renderiza para MP4 a partir de código. Esse modelo tem limites rígidos. Uma solicitação que ultrapasse um deles não é uma escolha de roteamento — está fora do escopo, portanto recuse (ou aponte para a ferramenta correta) em vez de tentar um fluxo de trabalho. Estes decorrem da arquitetura, não de uma solicitação específica:

• A renderização é determinística e autocontida. Cada valor, ativo e texto é incorporado no momento da autoria; a renderização não faz chamada de rede nem busca de dados ao vivo / em tempo de renderização (regra central: sem Date.now() / Math.random() / rede). "Atualizar os números ao vivo no momento da renderização" está fora — busque os dados uma vez no momento da autoria e incorpore-os, ou recuse.
• O vídeo existente é sobreposto, nunca editado. O HyperFrames compõe quadros sobre um clipe de origem — /embedded-captions adiciona uma camada de legenda, /graphic-overlays adiciona cartões gráficos projetados (terços inferiores, destaques de dados, títulos) — e o clipe é reproduzido inalterado por baixo, mas nenhum deles pós-processa o fluxo de vídeo codificado. Alterar a filmagem em si (sua temporização, cor, enquadramento, ordem ou áudio) é edição estilo NLE e está fora do escopo.
• A importação do Remotion é unidirecional. /remotion-to-hyperframes traduz a fonte do framework Remotion em HyperFrames. Não há reverso (HyperFrames → Remotion, ou → qualquer outro framework — fora do escopo), e uma fonte React / animação web que não seja Remotion não tem fonte Remotion para traduzir — recrie-a via /general-video.
• Não pode produzir entradas que não possui. Sem gravação de tela / sessão, sem captura de câmera, sem geração de avatar IA com fala / sincronia labial. Se a filmagem ou ativo ainda não existir, o HyperFrames não pode conjurá-lo — peça ao usuário para fornecê-lo (ou use a ferramenta de captura correta) primeiro.

Todo o resto — um vídeo a partir de uma URL, briefing, tópico, PR, filmagem para anotar ou um único elemento para animar — está no escopo; roteie abaixo.

---

Roteamento de vídeo

Esta seção conhece APENAS fluxos de trabalho de nível superior. Ela não carrega fases internas de fluxo de trabalho, habilidades de domínio (hyperframes-* — veja o mapa de capacidade acima) ou referências técnicas.

Tabela de decisão

O tipo de ENTRADA (intenção) é o eixo principal; a duração da SAÍDA é apenas um teto, não um portão. Para uma entrada correspondente, os fluxos de trabalho especializados lidam com qualquer coisa até ~3 min — qual fluxo de trabalho você entra é decidido pela intenção (o tipo de entrada e, para texto, o assunto), não pela duração. A duração importa apenas no extremo superior: uma peça genuinamente mais longa (um tutorial de 3-5 min, um mergulho profundo de 5 min+) é um registro diferente e roteia para /general-video. Dentro da faixa ≤~3 min, um terceiro eixo divide os dois fluxos de trabalho alimentados por texto — o assunto: um produto sendo comercializado vs um tópico sendo explicado (veja a regra de desambiguação na etapa 3 abaixo).

Duração / Entrada	Lançamento de produto (URL / briefing / script)	Site geral / URL	PR do GitHub / alteração de código	Tópico / artigo / notas (sem produto, sem URL)	Vídeo existente (talking-head) †
≤ ~3 min	/product-launch-video	/website-to-video	/pr-to-video	/faceless-explainer	/embedded-captions · /graphic-overlays †
Tutorial 3-5 min	/general-video	/general-video	/general-video	/general-video	/embedded-captions · /graphic-overlays †
Mergulho profundo 5min+	/general-video	/general-video	/general-video	/general-video	/embedded-captions · /graphic-overlays †
Estático / loop	/general-video	/general-video	/general-video	/general-video	/general-video

Cobertura atual: a faixa ≤ ~3 min tem fluxos de trabalho dedicados para entradas product-launch / general-website / GitHub-PR / topic (uma URL divide-se por tipo depois intenção — veja a etapa 3), e a coluna vídeo existente é coberta em qualquer duração — por /embedded-captions (legendas / legendas ocultas) ou /graphic-overlays (sobreposições gráficas projetadas), divididos por intenção (veja a etapa 2). Todas as outras células são /general-video — o fluxo geral de autoria de composição HTML (agnóstico a entrada e duração): tudo mais longo que ~3 min (as linhas de 3-5 min / 5 min+ ) e todo formato estático / loop. O roteador nunca termina em beco sem saída para um vídeo criável; a única resposta "geral / nenhum" real é uma solicitação fora do próprio HyperFrames (por exemplo, edição estilo NLE de um arquivo de vídeo finalizado — re-temporização, recolorimento, reenquadramento, reordenação, áudio).

† Filmagem existente divide-se por intenção, não por duração. Legendas / legendas ocultas → /embedded-captions; sobreposições gráficas projetadas / empacotamento — terços inferiores, destaques de dados, cartões intitulados, citações em destaque — → /graphic-overlays. Ambos sobrepõem o clipe, que é reproduzido inalterado por baixo; nenhum edita a filmagem em si.

Atalho de gênero (precede a tabela). Um motion graphic curto (~menos de 10s), sem narração, focado em design — tipo cinético, um gráfico de estatística / número, um logotipo sting, um terço inferior / sobreposição, ou um tweet / título / destaque de página capturada animado — roteia para /motion-graphics independentemente da entrada. É um gênero de SAÍDA, não um tipo de entrada, portanto tem precedência sobre a tabela de tipo de entrada acima quando o pedido é claramente motion-first sem narração (veja a etapa 2). Um tratamento mais longo ou narrado roteia por tipo de entrada, ou /general-video.

Migrando uma composição existente (caso especial)

A tabela acima é para criar um vídeo a partir de uma entrada. Um fluxo de trabalho fica fora dela: se o usuário pedir explicitamente para portar / converter / migrar uma composição Remotion (React) existente para HyperFrames → /remotion-to-hyperframes. Isso é tradução de fonte, não criação a partir de entrada, portanto não tem célula ENTRADA × DURAÇÃO. Roteie aqui SOMENTE em linguagem explícita de migração ("port my Remotion project", "convert this Remotion comp", "rewrite this as HyperFrames") — uma menção passageira ao Remotion não é um gatilho; use a tabela de criação ou /hyperframes-core como padrão.

Procedimento de roteamento

1. Determine o tipo de ENTRADA + duração alvo. O roteamento precisa saber sobre o que é o vídeo — seu assunto e entrada. Se o assunto em si não for especificado (por exemplo, "faça um vídeo sobre nossa coisa" sem URL, produto nomeado, tópico ou ativo para trabalhar), ou o tipo de entrada for desconhecido, pergunte antes de entrar em qualquer fluxo de trabalho — esclareça primeiro; não invoque um fluxo de trabalho e depois pergunte, pois comprometer-se com um fluxo de trabalho é a própria decisão de roteamento. Faça no máximo 2 perguntas esclarecedoras:
   • "Qual é a sua entrada — um produto (URL ou briefing), um site geral / URL, um PR do GitHub / alteração de código, um tópico ou artigo para explicar, ou um vídeo existente de talking-head para legendar?"
   • "Duração alvo — cerca de 3 minutos ou menos, ou mais longa (um tutorial de 3-5 min / mergulho profundo de 5min+)?"
   • Padrões de especificação — declare, não pergunte (estes NÃO afetam a rota, portanto nunca bloqueie o roteamento neles): proporção 16:9 (o mecanismo também suporta 9:16 vertical — mude apenas se o usuário nomear um destino vertical como TikTok / Reels / Shorts); idioma da narração / legenda = o do usuário. Confirme apenas se o usuário contestar; o fluxo de trabalho escolhido reconfirma suas próprias especificidades em sua Etapa 0.
2. Escolha pelo tipo de ENTRADA (intenção) primeiro; a duração é apenas um teto, não um portão.
   • Motion graphic curto focado em design (atalho de gênero, precede a tabela de entrada) — o movimento em si é a mensagem: tipo cinético, uma contagem de estatística / número, um gráfico, um logotipo sting, um terço inferior / sobreposição, ou um tweet / título / destaque de página capturada animado; tipicamente menos de ~10s, sem narração / voice-over → /motion-graphics. Isso é um gênero de SAÍDA, não um tipo de entrada — quando o pedido é claramente uma peça motion rápida, sem narração e focada em design, roteie aqui independentemente da entrada. Um tratamento mais longo ou narrado do mesmo material NÃO é isso (roteie por tipo de entrada, ou /general-video).
   • Vídeo existente de talking-head (o usuário tem um clipe e quer algo adicionado sobre ele) → divida por intenção, em qualquer duração (tipo de entrada ganha sobre duração): legendas / legendas ocultas (as palavras faladas como texto legível) → /embedded-captions; sobreposições gráficas projetadas — terços inferiores, destaques de dados, cartões de informação intitulados, citações em destaque, uma edição empacotada com gráficos → /graphic-overlays. (Editar a filmagem em si — re-temporização, recolorimento, reenquadramento, reordenação, áudio — é estilo NLE e está fora do escopo; veja § O que o HyperFrames não pode fazer.)
   • PR do GitHub / alteração de código (um link github.com/<owner>/<repo>/pull/<N>, uma referência owner/repo#N ou "este PR") → /pr-to-video (até ~3 min).
   • Caso contrário (URL de produto / briefing / texto de tópico): a intenção escolhe o fluxo de trabalho via etapa 3, e ele lida com qualquer coisa até ~3 min — um curto promo de 15-30 s e um explicador de ~100 s ambos roteiam por intenção, não por duração. Roteie para /general-video (o fallback agnóstico a duração — veja a etapa 4) apenas quando o alvo for claramente mais longo que ~3 min (um tutorial de 3-5 min, um mergulho profundo de 5min+). Nunca force uma peça genuinamente longa em um fluxo de trabalho de ≤~3 min — a intenção decide dentro da faixa, /general-video cobre o resto.
3. Desambigue as entradas de URL / texto de ≤~3 min (a divisão de intenção). Duas divisões:
   • Tipo de URL + intenção — uma URL não ganha mais automaticamente para PLV; seu tipo depois intenção decide: um link de PR do GitHub (.../pull/<N>, owner/repo#N, "este PR") → /pr-to-video; caso contrário, uma URL de site divide-se por intenção — marketing / lançamento / promoção de um produto ou SaaS específico → /product-launch-video; um site geral → vídeo (tour do site, showcase de portfólio / blog / landing page, um clipe social dos visuais do próprio site, ou apenas "transforme este site em um vídeo") → /website-to-video. Ambos rastreiam com Chrome headless; URLs de PR são lidas via gh. Quando não estiver claro se uma URL de site é um lançamento de produto ou um vídeo de site geral, faça uma pergunta.
   • Produto vs tópico (texto, sem URL) — a questão decisiva é sobre o que é o vídeo, não o formato de entrada:
     • Um produto / empresa / SaaS / app / site específico sendo comercializado, lançado ou promovido → /product-launch-video.
     • Um conceito / tópico / artigo / como-algo-funciona sendo explicado, com nenhum produto e nenhuma URL → /faceless-explainer.
     • Critérios de desempate: redação "Promover / lançar / vender / nosso produto" → PLV. "Explicar / ensinar / como X funciona / o que é X" sem produto → faceless. O estilo padrão para faceless é sempre pin-and-paper.
     • Um site nomeado sem URL colada ainda é PLV. Um script que menciona um produto ou seu site ("nosso site é acme.io", "promova ") roteia para PLV mesmo sem um link clicável — PLV pode pesquisar o site na web e rastreá-lo para ativos de marca (a menos que o usuário opte por não participar, → modo preset sem captura). Não colar a URL não o torna um trabalho faceless / sem captura. A escolha literal-vs-reestruturação para um script fornecido é interna ao PLV e nunca muda a rota.
     • Pistas conflitantes → pergunte, não adivinhe. Se a fonte fornecida é o próprio marketing do produto (sua landing page, um promo b