Kingly-Agency/deadzone

HyperFrames

O HTML é a fonte da verdade para o vídeo. Uma composição é um arquivo HTML com atributos data-* para temporização, uma timeline GSAP para animação e CSS para aparência. O motor HyperFrames captura a página quadro a quadro e codifica para MP4/WebM com FFmpeg.

Complemento ao manim-video: Use manim-video para explicadores matemáticos/geométricos (equações, estilo 3B1B). Use hyperframes para motion graphics, vídeos com narração e legendas, tours de produto, sobreposições para redes sociais, transições com shaders e qualquer coisa orientada por vídeo/áudio reais.

Quando Usar

• O usuário pede um vídeo renderizado a partir de texto, um roteiro ou um site
• Cartões de título animados, terços inferiores ou introduções tipográficas
• Vídeo com narração legendada (TTS + legendas sincronizadas com a forma de onda)
• Visuais reativos a áudio (sincronia com batida, barras de espectro, brilho pulsante)
• Transições entre cenas (crossfade, cortina, warp com shader, flash-through-white)
• Sobreposições para redes sociais (estilo Instagram/TikTok/YouTube)
• Pipeline de site para vídeo (capturar uma URL, produzir um promo)
• Qualquer animação HTML/CSS/JS que precise ser renderizada deterministicamente em um arquivo de vídeo

Não use esta skill para:

• Animação pura de matemática/equações (→ manim-video)
• Geração de imagens ou memes (→ meme-generation, modelos de imagem)
• Videoconferência ou transmissão ao vivo

Referência Rápida

npx hyperframes init meu-video               # criar um projeto
cd meu-video
npx hyperframes lint                        # validar antes do preview/render
npx hyperframes preview                     # preview no navegador com live-reload (porta 3002)
npx hyperframes render --output final.mp4   # renderizar para MP4
npx hyperframes doctor                      # diagnosticar problemas de ambiente

Flags de renderização: --quality draft|standard|high · --fps 24|30|60 · --format mp4|webm · --docker (reproduzível) · --strict.

Referência completa da CLI: references/cli.md.

Configuração (única)

bash "$(dirname "$(find ~/.hermes/skills -path '*/hyperframes/SKILL.md' 2>/dev/null | head -1)")/scripts/setup.sh"

O script:

1. Verifica se Node.js >= 22 e FFmpeg estão instalados (exibe instruções de correção se não estiverem).
2. Instala a CLI hyperframes globalmente (npm install -g hyperframes@>=0.4.2).
3. Pré-armazena em cache o chrome-headless-shell via Puppeteer — necessário para renderização de melhor qualidade através do caminho de captura HeadlessExperimental.beginFrame do Chrome.
4. Executa npx hyperframes doctor e relata o resultado.

Consulte references/troubleshooting.md se a configuração falhar.

Procedimento

1. Planeje antes de escrever o HTML

Antes de tocar no código, articule em alto nível:

• O quê — arco narrativo, momentos-chave, batidas emocionais
• Estrutura — composições, trilhas (vídeo/áudio/sobreposições), durações
• Identidade visual — cores, fontes, caráter do movimento (explosivo / cinematográfico / fluido / técnico)
• Hero frame — para cada cena, o momento em que o maior número de elementos está simultaneamente visível. Este é o layout estático que você construirá primeiro.

Portão de Identidade Visual (HARD-GATE). Antes de escrever QUALQUER HTML de composição, uma identidade visual deve ser definida. NÃO escreva composições com cores padrão ou genéricas (#333, #3b82f6, Roboto são indícios de que esta etapa foi ignorada). Verifique nesta ordem:

1. DESIGN.md na raiz do projeto? → Use suas cores exatas, fontes, regras de movimento e restrições "What NOT to Do".

2. O usuário nomeou um estilo (ex.: "Swiss Pulse", "dark and techy", "luxury brand")? → Gere um DESIGN.md mínimo com ## Style Prompt, ## Colors (3-5 hex com papéis), ## Typography (1-2 famílias), ## What NOT to Do (3-5 anti-padrões).

3. Nenhum dos acima? → Faça 3 perguntas antes de escrever qualquer HTML:

   • Clima? (explosivo / cinematográfico / fluido / técnico / caótico / acolhedor)
   • Canvas claro ou escuro?
   • Alguma cor de marca, fonte ou referência visual?

   Em seguida, gere um DESIGN.md a partir das respostas. Cada composição deve traçar sua paleta e tipografia de volta ao DESIGN.md ou à direção explícita do usuário.

2. Scaffold

npx hyperframes init meu-video --non-interactive

Templates: blank, warm-grain, play-mode, swiss-grid, vignelli, decision-tree, kinetic-type, product-promo, nyt-graph. Use --example <nome> para escolher um, --video clip.mp4 ou --audio track.mp3 para semear com mídia.

3. Layout antes da animação

Escreva o HTML+CSS estático do hero frame primeiro — sem GSAP ainda. O contêiner .scene-content deve preencher a cena (width:100%; height:100%; padding:Npx) com display:flex + gap. Use padding para empurrar o conteúdo para dentro — nunca use position: absolute; top: Npx em um contêiner de conteúdo (o conteúdo transborda quando mais alto que o espaço restante).

Somente depois que o hero frame parecer correto, adicione entradas gsap.from() (anime para a posição CSS) e saídas gsap.to() (anime a partir dela).

Consulte references/composition.md para o esquema completo de atributos data e regras de composição.

4. Anime com GSAP

Cada composição deve:

• Registrar sua timeline: window.__timelines["<id-da-composição>"] = tl
• Iniciar pausada: gsap.timeline({ paused: true }) — o jogador controla a reprodução
• Usar valores finitos de repeat (nada de repeat: -1 — quebra o motor de captura). Calcular: repeat: Math.ceil(duration / cycleDuration) - 1.
• Ser determinística — sem Math.random(), Date.now() ou lógica de relógio de parede. Use um PRNG com semente se precisar de pseudo-aleatoriedade.
• Construir sincronamente — sem async/await, setTimeout ou Promises ao redor da construção da timeline.

Consulte references/gsap.md para a API principal do GSAP (tweens, eases, stagger, timelines).

5. Transições entre cenas

Composições com várias cenas exigem transições. Regras:

1. Sempre use uma transição entre cenas — sem jump cuts.
2. Sempre use animações de entrada em cada elemento da cena (gsap.from(...)).
3. Nunca use animações de saída exceto na cena final — a transição É a saída.
4. A cena final pode desaparecer (fade out).

Use npx hyperframes add <nome-da-transição> para instalar transições com shader (flash-through-white, liquid-wipe, etc.). Lista completa: npx hyperframes add --list.

6. Áudio, legendas, TTS, reatividade a áudio, destaque

• Áudio: sempre um elemento <audio> separado (vídeo deve ser muted playsinline).
• TTS: npx hyperframes tts "Texto do roteiro" --voice af_nova --output narracao.wav. Liste vozes com --list. A primeira letra do ID da voz codifica o idioma (a/b=Inglês, e=Espanhol, f=Francês, j=Japonês, z=Mandarim, etc.) — a CLI infere automaticamente a localidade do fonemizador; use --lang apenas para sobrescrever. Fonemização não-inglesa requer espeak-ng instalado no sistema.
• Legendas: npx hyperframes transcribe narracao.wav → transcrição em nível de palavra. Escolha o estilo a partir do tom da transcrição (hype / corporate / tutorial / storytelling / social — veja a tabela em references/features.md). Regra de idioma: nunca use modelos whisper .en a menos que o áudio seja confirmado em inglês — .en traduz áudio não-inglês em vez de transcrevê-lo. Cada grupo de legenda DEVE ter um kill forçado com tl.set(el, { opacity: 0, visibility: "hidden" }, group.end) após seu tween de saída — caso contrário, os grupos vazam visíveis para os posteriores.
• Visuais reativos a áudio: pré-extraia bandas de áudio (grave / médio / agudo) e amostre por quadro dentro da timeline com um loop for de tl.call(draw, [], f / fps) — um único tween longo NÃO reage ao áudio. Mapeie grave → scale (pulso), agudo → textShadow/boxShadow (brilho), amplitude geral → opacity/y/backgroundColor. Evite clichês de equalizador — deixe o conteúdo guiar o visual, o áudio direcionar seu comportamento.
• Destaque estilo marcador: efeitos de destaque, círculo, explosão, rabisco, contorno para ênfase de texto são CSS+GSAP determinísticos — veja references/features.md#marker-highlighting. Totalmente buscáveis (seekable), sem filtros SVG animados.
• Transições de cena: toda composição com várias cenas DEVE usar transições (sem jump cuts). Escolha entre primitivas CSS (push slide, blur crossfade, zoom through, staggered blocks) ou transições com shader (flash-through-white, liquid-wipe, cross-warp-morph, chromatic-split, etc.) via npx hyperframes add. Tabelas de clima e energia estão em references/features.md#transitions. Não misture transições CSS e shader na mesma composição.

7. Lint, valide, inspecione, preview, renderize

npx hyperframes lint              # captura falta de data-composition-id, trilhas sobrepostas, timelines não registradas
npx hyperframes validate          # auditoria de contraste WCAG em 5 pontos no tempo
npx hyperframes inspect           # auditoria visual de layout — overflow, elementos fora do quadro, texto ocluído
npx hyperframes preview           # preview ao vivo no navegador
npx hyperframes render --quality draft --output draft.mp4    # iteração rápida
npx hyperframes render --quality high --output final.mp4     # entrega final

hyperframes validate amostra pixels de fundo atrás de cada elemento de texto e avisa sobre taxas de contraste abaixo de 4.5:1 (ou 3:1 para texto grande). hyperframes inspect é o companheiro de layout — executa a página em vários pontos no tempo e sinaliza problemas que um lint estático não pode ver (uma legenda que ultrapassa a área segura apenas aos 4.5s, um cartão que transborda quando seu título é a variante mais longa, um elemento que termina atrás de um shader de transição). Execute inspect especialmente em composições com balões de fala, cartões, legendas ou tipografia apertada.

8. Site para vídeo (se o usuário fornecer uma URL)

Use o fluxo de trabalho de 7 etapas de captura para vídeo em references/website-to-video.md: captura → DESIGN.md → SCRIPT.md → storyboard → composição → render → entrega.

Armadilhas

• HeadlessExperimental.beginFrame' wasn't found — Chromium 147+ removeu este protocolo. Certifique-se de estar usando hyperframes@>=0.4.2 (detecta automaticamente e recai para o modo de captura de tela). Escapada: export PRODUCER_FORCE_SCREENSHOT=true. Veja hyperframes#294 e references/troubleshooting.md.
• Chrome do sistema (não chrome-headless-shell) — renderizações travam por 120s e então expiram. Execute npx puppeteer browsers install chrome-headless-shell (setup.sh faz isso). hyperframes doctor informa qual binário será usado.
• repeat: -1 em qualquer lugar — quebra o motor de captura. Sempre calcule uma contagem finita de repetições.
• gsap.set() em elementos de clipe que entram mais tarde — o elemento não existe no carregamento da página. Use tl.set(selector, vars, timePosition) dentro da timeline, no ou após o data-start do clipe.
• <br> dentro do texto do conteúdo — quebras forçadas não sabem a largura da fonte renderizada, então a quebra natural + <br> causa quebra dupla. Use max-width para deixar o texto quebrar. Exceção: títulos de exibição curtos onde cada palavra está deliberadamente em sua própria linha.
• Animando visibility ou display — GSAP não pode animar estas propriedades. Use autoAlpha (lida com visibilidade e opacidade).
• Chamando video.play() ou audio.play() — o framework é dono da reprodução. Nunca chame estes métodos você mesmo.
• Construindo timelines de forma assíncrona — o motor de captura lê window.__timelines sincronamente após o carregamento da página. Nunca envolva a construção da timeline em async, setTimeout ou uma Promise.
• index.html independente envolto em <template> — esconde todo o conteúdo do navegador. Apenas sub-composições carregadas via data-composition-src usam <template>.
• Usando vídeo para áudio — sempre <video> mudo + <audio> separado.

Verificação

Antes e depois da renderização:

1. Lint + validate + inspect passam: npx hyperframes lint --strict && npx hyperframes validate && npx hyperframes inspect (lint captura problemas estruturais, validate captura contraste, inspect captura problemas de layout visual / overflow — veja troubleshooting.md se aparecerem avisos).
2. Coreografia da animação — para novas composições ou mudanças significativas de animação, execute o mapa de animação. npx hyperframes init copia os scripts da skill para o projeto, então o caminho é local ao projeto:

   node skills/hyperframes/scripts/animation-map.mjs <diretório-da-composição> \
     --out <diretório-da-composição>/.hyperframes/anim-map
   

   Gera um único animation-map.json com resumos por tween, timeline ASCII Gantt, detecção de stagger, zonas mortas (>1s sem animação), ciclos de vida de elementos e flags (offscreen, collision, invisible, paced-fast <0.2s, paced-slow >2s). Escaneie resumos e flags — corrija ou justifique cada um. Pule em pequenas edições.
3. Arquivo existe + não-zero: ls -lh final.mp4.
4. Duração corresponde a data-duration: ffprobe -v error -show_entries format=duration -of default=nw=1:nk=1 final.mp4.
5. Verificação visual: extraia um quadro do meio da composição: ffmpeg -i final.mp4 -ss 00:00:05 -vframes 1 preview.png.
6. Áudio presente se esperado: ffprobe -v error -show_streams -select_streams a -of default=nw=1:nk=1 final.mp4 | head -1.

Se hyperframes render falhar, execute npx hyperframes doctor e anexe sua saída ao relatar.

Referências

• composition.md — atributos data, contrato da timeline, regras inegociáveis, regras de tipografia/ativos
• cli.md — todos os comandos CLI (init, capture, lint, validate, inspect, preview, render, transcribe, tts, doctor, browser, info, upgrade, benchmark)
• gsap.md — API principal do GSAP para HyperFrames (tweens, eases, stagger, timelines, matchMedia)
• features.md — legendas, TTS, reatividade a áudio, destaque com marcador, transições (carregamento sob demanda)
• website-to-video.md — fluxo de trabalho de 7 etapas de captura para vídeo
• troubleshooting.md — correção OpenClaw, variáveis de ambiente, erros comuns de renderização