🎬 Composição & Render

A janela persistente #appwin fica na bg-layer com data-layout-ignore: borda, raio, sombra grande, barra de título com 3 pontinhos e uma pílula de URL mono (cadeado + window.urlLabel). Os screenshots ficam dentro dela em (WIN_L, SHOT_T).

A moldura mantém o look premium e disfarça que o conteúdo é um print estático — sem ela, parece um screenshot solto.

#appwin persistente; data-layout-ignore; barra + pílula de URL; shot dentro da janela.

Um único elemento #cursor (seta SVG) animado na timeline principal — não por cena — desliza continuamente. O hotspot fica na ponta em ~(6,3), então o tween usa x = alvoX - 6, y = alvoY - 3 para a ponta cair no centro da bbox. Movimento duration:.7, ease:"power3.inOut".

Mirar a bounding box real (não o olho) com easing curvo é o que faz o cursor parecer profissional em vez de robótico.

Cursor global; hotspot na ponta; bbox real; power3.inOut.

No instante do clique (~start + 1.15s), o cursor faz scale:.82 em yoyo (pulse) e um #ripple (círculo âmbar) expande e some, posicionado no centro do alvo.

O feedback visual de clique comunica a ação ao espectador — sem ele, o cursor parece só passar por cima do botão.

pulse scale .82 yoyo; #ripple âmbar; timing ~start+1.15s.

O destaque .hlbox é um retângulo só com box-shadow (anel âmbar + glow) na bbox mapeada com ~6px de folga, entrando com back.out. No passo zoom:true, o <img> faz scale 1 → 1.12 com transformOrigin no centro do alvo.

Foca o olhar no controle ativo sem cobrir nada e dá um push-in cinematográfico no momento do "tcharam" (o resultado).

.hlbox box-shadow; back.out; zoom:true; transformOrigin no alvo.

A paleta fixa: fundo #0D1321, painel #1D2D44, borda #3E5C76, texto #F0EBD8, acento âmbar #FFC300 e código verde-água #2EC4B6. O âmbar é o ÚNICO destaque dominante — o ripple, o glow e a moldura usam ele.

Manter um só acento e fundo idêntico em todas as cenas dá a identidade premium consistente do canal.

6 cores fixas; âmbar único; fundo constante; verde-água só em valores.

Sora 700–800 para títulos, Inter para corpo/legendas, JetBrains Mono para a pílula de URL e valores. As três vêm como .woff2 locais (subset latin cobre PT-BR) em assets/fonts/ — o build-demo.mjs injeta o fonts.css.

O render é determinístico e offline — fonte via CDN cairia em fallback e quebraria o visual.

Sora/Inter/JetBrains; woff2 local; sem CDN; subset latin.

Ritmo recomendado: LEAD 0.5s (cena aparece antes da voz), TAIL 0.7s, FADE 0.4s entre cenas. O cursor chega ao alvo ~0.7s antes da explicação principal; o clique cai perto de start+1.15s.

Esse ritmo é o que faz a animação parecer reagir à narração — entender os parâmetros permite ajustar o vídeo sem dessincronizar.

LEAD 0.5s; TAIL 0.7s; FADE 0.4s; cursor antes da fala.

Kokoro é um TTS que roda 100% na máquina (pip install kokoro-onnx soundfile), voz pf_dora em PT-BR, com --speed 0.98. A primeira execução baixa ~340MB do modelo. Nenhuma chave de API.

Narração gratuita e offline mantém a skill auto-contida; a voz é boa, sem atuação — por isso o usuário valida a locução depois.

Kokoro local; pf_dora; speed 0.98; sem API.

O narration-template.sh lê steps[].narration e ctaNarration do steps.json, escreve assets/txt/sN.txt (1 por passo + CTA) e chama o TTS para gerar assets/audio/sN.wav.

O steps.json é a fonte das falas — gerar os textos dele evita divergência entre o que está escrito e o que é falado.

steps[].narration; sN.txt → sN.wav; CTA como último.

O build-demo.mjs roda ffprobe em cada sN.wav e monta o array AUDIO[] com as durações reais. Não existe array de tempos digitado à mão.

Timing é fonte única: medir o áudio real elimina o risco de o vídeo e a voz discordarem.

ffprobe; AUDIO[] derivado; timing fonte única.

O composition-template.mjs (copiado como build-demo.mjs) lê o steps.json (telas + bboxes + captions + narração), mede os WAVs e gera o index.html com moldura, cursor, destaque, zoom e CTA — tudo pronto.

É o coração da render: um único node build-demo.mjs produz o HTML renderizável a partir dos dados da captura.

build-demo.mjs; lê steps.json; gera index.html; não editar à mão.

A partir de AUDIO[], o gerador calcula S[] com start, dur, audioStart e end por cena (somando LEAD/TAIL). A timeline GSAP e os <audio> tracks leem esse mesmo S[] — áudio e animação batidos por construção.

Compartilhar a fonte de tempo entre voz e movimento é o que garante sincronia sem ajuste manual.

S[] derivado de AUDIO[]; start/dur/audioStart; tracks alternados.

Cada passo tem um caption no steps.json que vira uma legenda translúcida no rodapé (Inter 600), aparecendo e saindo junto com a cena, em track alternado em relação às cenas.

Captions tornam o vídeo legível sem som (feeds mudos) e reforçam a fala — escritos uma vez no steps.json.

caption por passo; rodapé translúcido; sincronizado à cena.

A última cena é a CTA: "CONTINUA EM" + AutomationsAI (AutomationsAI creme, .CLUB âmbar com glow) + 🌐 automationsai.net. A narração padrão é "Isso é conteúdo do AutomationsAI ponto CLUB. Acesse: inema ponto club." e já vem pronta no template.

É o ponto de conversão do canal — incluída por padrão, garante que nenhum vídeo saia sem a chamada de marca.

CTA automática; AutomationsAI; ctaNarration; cursor some na CTA.

npx hyperframes init <nome> --example blank --non-interactive cria a pasta do projeto de vídeo com a estrutura base do HyperFrames.

É o ponto de partida de todo render — o projeto fica isolado, e nele você copia os scripts da skill.

init; --example blank; --non-interactive.

Copie para o projeto: capture.mjs, composition-template.mjs (como build-demo.mjs), narration-template.sh e assets/fonts/ — ou rode node fetch-fonts.mjs para baixá-las.

A skill é auto-contida: traz as próprias fontes e house style, sem depender de outro projeto.

capture/build-demo/narration; assets/fonts; fetch-fonts.mjs.

node capture.mjs actions.json abre o app num viewport fixo, executa cada ação, tira 1 screenshot por estado e pega a bounding box real do alvo — saída: assets/shots/*.png + steps.json.

É o elo entre a Trilha 2 (captura) e esta — sem o steps.json, o build-demo não tem o que montar.

actions.json; viewport fixo; bbox real; shots + steps.json.

node build-demo.mjs gera o index.html. Depois npx hyperframes lint (0 erros) e npx hyperframes inspect --samples 14 (0 problemas) validam layout e regras antes de gastar tempo de render.

Lint e inspect pegam fontes via CDN, clips errados e off-canvas sem data-layout-ignore — barato comparado a re-renderizar.

build-demo.mjs; lint 0 erros; inspect --samples 14.

Renderize --quality draft para conferir (extraia 1 frame por passo e mostre ao usuário), depois --quality high --fps 30 --output renders/<nome>-16x9.mp4.

Você não escuta o áudio no render — sempre confira frames com o usuário e peça que ele valide a locução antes do final.

draft → high; --fps 30; conferir frames; usuário valida voz.

As regras de ouro: capturar antes/animar depois (render determinístico, sem site ao vivo); viewport fixo = espaço das coordenadas; animar .scene-inner nunca .clip; decorativos e moldura com data-layout-ignore; fontes locais.

São os erros que mais quebram o render — conhecê-los antes evita horas de depuração no inspect.

capturar antes; viewport fixo; .scene-inner; data-layout-ignore.

Ainda NÃO implementado: 9:16/Shorts (telas de app são landscape, exigiria reenquadre); v3 gravação de tela real (agent-browser record) para apps com muito movimento; polimento de cursor em curva e "digitação" (typewriter) nos campos.

Saber o que é roadmap evita prometer o que a skill ainda não faz — hoje o formato natural é 16:9 com screenshots estáticos animados.

9:16 futuro; v3 record; cursor em curva; typewriter — todos roadmap.