🎥 Produção

11 regras do CLAUDE.md que definem como uma composição Hyperframes deve ser estruturada para renderizar corretamente.

Quebrar qualquer uma delas faz o render falhar ou sair com bug visual. São o equivalente ao "tem que ter Doctype" no HTML.

data-composition-id, class="clip", data-start, data-track-index, window.__timelines, templates com data-composition-src.

Objeto global onde cada composição registra uma GSAP timeline pausada. A chave deve bater exatamente com data-composition-id.

É como o framework sabe quando cada animação dispara. Nomenclatura errada = composição não aparece.

gsap.timeline({paused:true}), IIFE, data-composition-id match, tl.duration().

Três atributos que definem quando um clip aparece, quanto dura e em qual track. Suportam referências relativas: data-start="intro + 2".

São o coração do timing. Clips no mesmo track-index não podem se sobrepor — use tracks diferentes ou ajuste timing.

Timing absoluto, timing relativo, overlap prevention, track management.

Usar <template> com data-composition-src para carregar outro arquivo HTML como sub-composição dentro da composição principal.

Permite modularização real. Timelines das sub-comps se linkam automaticamente ao parent — nunca chame masterTL.add(child).

Template tag, data-composition-src, auto-link, modularidade, reuso entre projetos.

Tags <video> e <audio> não usam class="clip". <video> deve ser muted; áudio vai em <audio> irmão para o mixer.

Adicionar class="clip" em <video> quebra o elemento. Animar width/height no <video> congela frames — wrap num <div>.

Video muted, audio sibling, data-has-audio, wrapper div para animação, sem .play/.pause manual.

Puxar frames-chave do render draft com FFmpeg e abrir no visualizador. Um frame por cena no seu momento-herói.

Lint não pega rostos cortados, texto desalinhado ou cenas que caíram na palavra errada. Verificação visual é obrigatória antes de entregar.

ffmpeg -ss, frames hero, ler o PNG (não só listar nomes), pré-deploy gate.

Estrutura padrão de 7 slides: Título → Problema → Why Now → O que fazemos → Tração → Time → Próximos passos.

VCs e clientes estão acostumados. Quebrar a estrutura sem motivo forte vira fricção cognitiva.

Deck structure, título hook, problema concreto, why now (momentum), what we do (1 frase), tração, time, ask.

Proporção de tela: 16:9 para deck projetado/YouTube/LinkedIn, 9:16 para TikTok/Reels/Shorts. Claude Design default é 1920x1080.

Escolher a errada faz o output ficar com faixas pretas ou elementos cortados. Decisão upstream economiza retrabalho.

16:9 horizontal, 9:16 vertical, 1:1 quadrado, safe zones, element scaling.

Primeiros 2s do vídeo precisam segurar o scroll do usuário. Pode ser uma pergunta forte, um flash visual, um movimento inesperado.

Em feeds social (TikTok/LinkedIn), 85% das visualizações param antes de 3s. Sem hook forte seu vídeo morre mesmo sendo bom depois.

Scroll-stop, attention hook, pattern interrupt, open loop, 2-second rule.

Elemento visual (shape, cor, tipografia) que aparece idêntico em slide 1 do deck e cena 1 do vídeo, criando coerência.

Quem vê deck + vídeo em sequência percebe intenção de design. É o que diferencia campanha de peças soltas.

Visual consistency, cross-media motif, brand thread, integrated campaign.

Skill que captura uma URL (sua landing page, por exemplo) e gera uma composição Hyperframes de vídeo a partir dela.

Atalho poderoso para criar sizzle/promo a partir de peça estática que já existe. Herda as decisões visuais automaticamente.

7-step capture-to-video, screenshot pipeline, DOM-to-timeline, auto-sync visual.

Vídeo curto (10-20s) condensando produto/serviço em um relance. Ideal para header de site, stories ou intro de pitch.

Sizzle reel é uma das peças mais pedidas. Curto, difícil, exige disciplina máxima do MOTION_PHILOSOPHY.

Sizzle format, 10-20s, tight cuts, hook forte, CTA implícito.

1080x1920 é o formato nativo de TikTok/Reels/Shorts. Exige layout empilhado (safe zones superior/inferior), texto curto.

Cortes de landscape para vertical ficam feios. Compor direto em 9:16 é disciplina diferente e exige pensar scroll-stop no topo.

1080x1920, safe zones, stacked layout, top/bottom UI fatias de TikTok/Reels.

Dois modos de face: full-screen (rosto ocupa a tela inteira) e bottom-half (rosto na metade de baixo, motion graphics na de cima).

Alternar entre os dois modos com intenção cria ritmo visual. Sempre full-screen fica monótono; sempre bottom-half fica distante.

Face full-screen, face bottom-half, choreography, transition between modes.

Cada cena de motion graphics entra e sai em sincronia exata com beats da fala ou da música.

Motion que cola em áudio tem sensação de "profissional". Motion fora do beat vira ruído visual.

Beat detection, word-level timestamps, motion entry/exit, cola sync.

Legendas onde cada palavra acende no timing exato em que é falada. Gerado a partir de transcrição word-level.

80% do consumo em feed é com áudio mudo. Sem legenda você perde 80% da audiência. Karaoke força atenção.

npx hyperframes transcribe, word timestamps, karaoke highlight, readability.

Kokoro-82M é um modelo TTS embarcado na CLI Hyperframes. Gera voz sintética localmente, sem API paga.

Para narração de vídeos educativos ou promos rápidos, TTS local economiza $ e permite iteração infinita.

npx hyperframes tts, Kokoro-82M, voice am_adam, on-device, wav output.

Skill com 10 regras de qualidade para shorts verticais: face choreography, beat sync, karaoke captions, scroll-stop, etc.

Foi escrita a partir do may-shorts-19 (o short mais polido do kit). É checklist profissional testado em produção.

Playbook, 10 rules, face choreography, beat sync, karaoke, scroll-stop, CTA, outro hold.