AntlersSam/saas-launch-video-kit

Instalação de plugins: Antes de comandos de configuração ou atualização, siga as regras de execução de plugins quando este skill estiver dentro de um plugin HyperFrames. Instalações independentes mantêm as instruções de atualização abaixo.

HyperFrames Core

Armadilhas para agentes (leia primeiro):

• Centralize com flex/inset, não com transform: translate(-50%,-50%) do CSS em um nó que você então anima com GSAP x/y. Lint: gsap_css_transform_conflict. Use fromTo ou xPercent/yPercent.
• Não adicione um tl.set(..., {visibility:"hidden"}) para saída de cena. O runtime já oculta os clips temporizados. Transparências em nós internos (ou opacity em .clip) são suficientes. Finalizações abruptas de legendas seguem regras diferentes.
• window.__timelines["id"] deve corresponder ao data-composition-id raiz.
• Após render, leia a segunda linha do resumo: beginframe vs screenshot, modo GPU, temporizações de estágio. screenshot + software gpu no Linux é o caminho lento.

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 é gerenciada pelo framework.

Este skill é o contrato técnico — como construir um projeto HyperFrames. O corpo abaixo é o guia de construção; detalhes por tópico estão em references/ (índice abaixo), leia sob demanda. Documentos de processo (brief, storyboard, revisão, produção, despacho, frame-worker) estão em /hyperframes → references/. Outras preocupações estão nos skills de domínio irmãos — hyperframes-animation, hyperframes-creative, media-use, hyperframes-cli, hyperframes-registry. O mapa de capacidades em /hyperframes diz o que cada um cobre.

Referências

Arquivo	Leia para…
references/minimal-composition.md	começar pelo menor esqueleto de composição renderizável
references/composition-patterns.md	escolher entre monolítico vs modular; estruturar um index.html modular; escolher um arquétipo de sub-composição
references/data-attributes.md	consultar qualquer data-* (raiz / clip / hospedeiro de sub-comp / aliases legados); usar class="clip"
references/tracks-and-clips.md	entender o que data-track-index controla (e não controla), z-index, temporizar um clip em relação a outro; listar cada faixa e clip com npx hyperframes timeline
references/creator-editing-recipes.md	copiar receitas verdadeiras de corte/aparar/reordenar/re-temporizar/congelar/câmera/máscara/crossfade/áudio e seus limites
references/sub-compositions.md	conectar uma sub-composição (atributos do hospedeiro, <template>, variáveis por instância) e animar dentro dela
references/variables-and-media.md	declarar variáveis; colocar <video>/<audio>, definir volume, aparar
references/determinism-rules.md	construir uma linha do tempo buscável; proibições de determinismo; layout / ajuste de texto
references/full-screen-motion.md	criar movimento em tela cheia com fundos compartilhados
references/tailwind.md	trabalhar em um projeto Tailwind v4 (init --tailwind; o contrato de runtime difere do v3 do Studio)

Para especificidades do runtime de animação (API GSAP, Lottie, Three.js, etc.) vá para hyperframes-animation → adapters/<runtime>.md.

Construindo uma composição

Duas formas raiz (não intercambiáveis)

• Independente (index.html de nível superior): a <div data-composition-id="…"> raiz fica diretamente em <body>, sem invólucro <template>. Envolver uma raiz independente esconde todo o conteúdo e o lint rejeita (standalone_composition_wrapped_in_template, erro).
• Sub-composição (carregada via data-composition-src): envolva a raiz em <template>. Esta é a forma a ser escrita: o carregador também aceita um documento completo simples e usa seu <body> como fallback, mas a forma com template é a que os exemplos e ferramentas assumem.

⚠ Regra de transporte: para uma sub-composição com template, o montador descarta o próprio <head> <style>/<script> do arquivo (packages/core/src/compiler/compositionAssembly.ts, a porta hasTemplate), então coloque <style>/<script> dentro do template. <link> é içado de qualquer forma. ⚠ Convenção de id do hospedeiro: dê ao slot hospedeiro, ao template interno, e à chave window.__timelines["<id>"] o mesmo id. Um id local diferente é suportado (o montador usa o primeiro nó raiz do arquivo como fallback), mas a incompatibilidade é silenciosa, então mantenha-os iguais a menos que você tenha um motivo para não fazer isso.

Forma do arquivo, conexão do hospedeiro, e a lista de verificação pré-renderização → references/sub-compositions.md.

A raiz deve ser dimensionada (bug de layout silencioso)

A raiz independente define width/height: 100%. O tamanho do canvas é data-width/data-height. O runtime aplica esses pixels à raiz da composição. Não codifique 1920px/1080px em #root. Esqueleto → references/minimal-composition.md.

Uma linha do tempo pausada

Cada composição registra exatamente uma gsap.timeline({ paused: true }) em window.__timelines["<id>"] (chave = data-composition-id raiz). Construí-la dentro de um callback assíncrono (document.fonts.ready) é suportado; o importante é que você registre apenas após a construção ser concluída. A duração da renderização é o data-duration raiz, não o comprimento da linha do tempo: uma linha do tempo que ultrapassa é cortada, e uma que termina antes mantém seu último quadro. Omita o data-duration raiz e o comprimento é inferido (linha do tempo, janela de mídia ou adaptador). Você não precisa de window.__timelines = window.__timelines || {}: o runtime cria o registro antes de seus scripts inline serem executados, e o lint não exige mais isso. Não aninhe manualmente sub-linhas do tempo no hospedeiro; o runtime aninha automaticamente as linhas do tempo filhas registradas. Contrato completo (incluindo runtimes não-GSAP) → references/determinism-rules.md + hyperframes-animation/adapters/.

Pegadinhas do lint da primeira passagem (falha garantida na primeira construção)

Regras que o lint realmente captura, mas apenas após o fato. Escreva-as corretamente da primeira vez:

• Nunca emparelhe um transform CSS inicial com um tween GSAP na mesma propriedade — o valor CSS e o início do tween entram em conflito e o lint rejeita com gsap_css_transform_conflict. Defina o estado inicial dentro do tween com gsap.fromTo(el, { x: -40 }, { x: 0 }) em vez de um CSS transform: translateX(-40px).
• Nunca coloque crossorigin em <video>/<audio>. O lint rejeita incondicionalmente com media_crossorigin_breaks_preview (erro), incluindo para leitura de canvas/WebGL/WebAudio. Não há supressão.
• Nunca dê a um <video data-start> um ancestral que também carregue data-start. O lint rejeita com video_nested_in_timed_element (erro). Temporize o invólucro ou o vídeo, não ambos.
• Cada <audio> precisa de um id. O lint rejeita com media_missing_id, e um <audio> sem id nunca é captado pelo mixer, então a renderização fica silenciosa.
• Nunca anime um .clip com autoAlpha ou visibility — o lint rejeita com gsap_animates_clip_element. Anime um filho.
• Uma font-family CSS nomeada precisa de um @font-face no arquivo para um arquivo local enviado, ou o lint dispara font_family_without_font_face.
• O #root de uma sub-composição usa width/height: 100% (ou inset: 0), não 1920px/1080px codificado. O tamanho do canvas é data-width/data-height.

Um erro de lint também desativa as auditorias de layout e contraste: check então relata 0 amostra(s) e 0/0 verificações de texto, o que parece um arquivo limpo, mas significa que nada foi executado. Limpe os erros de lint antes de confiar nesses números.

Regras inegociáveis (bugs silenciosos que portões automatizados podem perder)

Expostas aqui; justificativa completa na referência vinculada. Não viole:

• Sem relógios em tempo de renderização / Math.random sem semente / rede / estado de entrada; sem repeat: -1 (use um número finito). → determinism-rules.md
• Nunca anime display, visibility ou autoAlpha em um elemento .clip. O framework é dono da visibilidade do clip, e o lint rejeita (gsap_animates_clip_element). Anime um filho. → determinism-rules.md
• Sem <br> em texto de corpo; elementos transformados devem ser em nível de bloco + dimensionados; elementos decorativos absolutos pulsantes precisam de folga de pico. → determinism-rules.md
• <video>/<audio> são encontrados por uma consulta plana do documento, então o framework os busca e decodifica em qualquer profundidade de aninhamento (incluindo dentro de um <template> ou invólucro de sub-comp). Um limite rígido: o lint erra se um <video data-start> estiver dentro de outro elemento simples que também possui data-start, e a falha é real (quadros de origem errados, então o clip desaparece no meio do slot), então coloque a temporização no invólucro ou no vídeo, nunca em ambos. Hospedeiros de sub-composição são isentos: mídia dentro de uma sub-composição renderiza corretamente. A outra ressalva são as linhas do tempo, não o posicionamento: uma linha do tempo de sub-comp não pode animar elementos raiz do hospedeiro. → variables-and-media.md
• Mantenha cada id único em toda a página montada (prefixe ids de sub-comp com o id da composição, #<id>-hero) para que seu próprio CSS #id e chamadas getElementById resolvam. A injeção de quadro não depende mais disso: o compilador carimba um data-hf-render-id único no documento em cada video[src]/audio[src]/img[src]. Mídia que usa filhos <source> em vez de um atributo src não é carimbada, então ids únicos ainda importam lá. → composition-patterns.md
• Um preenchimento em tela cheia na raiz da composição é aceitável em uma renderização normal. Ele é descartado apenas no caminho de composto em camadas (conteúdo HDR, ou uma composição usando transições de shader), onde o motor força cada raiz de composição transparente para que a camada abaixo apareça. Se sua composição usa transições de shader ou mídia HDR, coloque o preenchimento em um filho de sangria total (position:absolute; inset:0). → composition-patterns.md

Editando composições existentes

• Leia os arquivos primeiro. Preserve temporização, faixas, IDs, variáveis, caminhos de mídia não relacionados.
• Para saber o que está na linha do tempo de um projeto (faixas, clips, inícios, fins, o que toca), execute npx hyperframes timeline [--json] em vez de ler index.html e cada arquivo de sub-composição.
• Corresponda IDs de composição e chaves de linha do tempo existentes.
• Adicionar um clip: defina seu data-start/data-duration intencionalmente em relação aos clips ao redor. data-track-index é uma faixa de exibição do Studio, não uma restrição de temporização, portanto não precisa estar livre.
• Um clip que termina após o data-duration raiz é cortado: estenda o data-duration raiz até o final do clip na mesma edição (lint avisa clip_ends_past_root_duration).
• data-hidden em qualquer elemento de composição o oculta TANTO na pré-visualização QUANTO na renderização, substituindo sua janela de tempo; é não destrutivo/reversível e alternado pelo ícone de olho da linha do tempo do Studio.
• Adicionar uma sub-composição: verifique seu data-composition-id interno antes de conectar o hospedeiro.

Validação

Use hyperframes-cli para detalhes de comando

• npx hyperframes check passa (0 descobertas em lint, runtime, layout, movimento e contraste)
• Projetos com sub-composições: npx hyperframes snapshot --at <midpoints> e inspecione cada quadro
• npx hyperframes preview --background para revisão (o usuário pode editar qualquer coisa na linha do tempo do Studio, e o servidor sobrevive ao comando invocador)
• npx hyperframes render apenas após o usuário aprovar