LangamentoDeProduto

Lançamento de Produto

Como usar este guia. É uma receita, não um conjunto de regras: cada formato, duração, ritmo e fórmula abaixo são padrões, e o que o usuário pedir tem prioridade. Não comece com perguntas: use os padrões, construa e mencione os padrões escolhidos em uma linha ao compartilhar a primeira renderização (pergunte apenas se faltar algo essencial, como as próprias filmagens). A primeira renderização é a proposta, então não há plano a aprovar primeiro. Storyboards apenas quando o usuário pedir para ver os enquadramentos antes. Os arquivos de planejamento que o método menciona (BRIEF.md, PLAN.md e similares) são suas próprias anotações de trabalho: escreva-os quando ajudarem, nunca como uma etapa para o usuário.

Um produto entra; um vídeo de lançamento polido sai. O tipo que você vê no X quando uma equipe SaaS publica: um gancho que nomeia a dor, o nome do produto caindo em uma batida, três funcionalidades mostradas na interface real, prova e um cartão final limpo. Guiado por música, geralmente sem narração, 20–60 s.

Construção de referência: demo de lançamento do Notion de Moritz (46 s, 16:9, sem narração, 120 BPM). Nove quadros: gancho de ferramentas espalhadas no escuro, logotipo e manchete giratória na batida, o vídeo principal real em uma janela flutuante, três quadros de funcionalidades (captura, pergunta, agentes) construídos a partir da UI real do Notion, um rolo de casos de uso, um mural de logotipos com estatísticas e uma composição de CTA. Seu plano está em references/example-notion.md. Iguale esse nível.

O método é fixo; a ferramenta não é. Se o projeto já tiver uma ferramenta de vídeo, use-a. Se não, inicie um projeto Hyperframes (npx hyperframes init) e copie template/hyperframes/ como a composição inicial.

<playbook> abaixo significa esta pasta (o caminho local que get_playbook retornou).

O que entra, o que sai

• Entrada: o que está sendo lançado (URL, o próprio aplicativo, capturas de tela, gravações, um briefing ou roteiro colado), para quem é, onde será publicado. Opcional: arquivos de marca, roteiro de narração, faixa musical.
• Saída: um mp4 de 20–60 s (16:9 por padrão, 9:16 ou 1:1 mediante solicitação) com UI real do produto, texto cinético, música e efeitos sonoros em uma grade de batidas, revisado e aprovado no FrameJam.

Padrões (a solicitação do usuário substitui qualquer um deles)

Descubra estes a partir da solicitação e dos arquivos. Onde nada for dito, use o padrão e continue; pergunte apenas se faltar algo essencial.

• A promessa em uma linha. O que o espectador deve lembrar. Todo o resto é evidência para isso.
• Duração e formato: feed do X 30–45 s 16:9 (padrão); hero de landing page 30–45 s 16:9, primeiro sem som; Reels 9:16 ≤ 30 s.
• Som: apenas música (padrão, toca sem som no autoplay, então o texto carrega a história) ou narração + música.
• Fonte da UI real: o aplicativo em execução (grave-o), o site (capture screenshots e seu vídeo hero) ou arquivos que o usuário fornecer. Se não houver nada real para mostrar, diga; não invente uma interface.
• Estilo: Use o estilo escolhido para este vídeo, se houver (de wait_for_pick, ou get_preset quando o usuário nomear um). Se o usuário escolheu um estilo FrameJam, ele define toda a aparência (paleta, tipo, sensação de movimento, transições). Sem estilo: derive a aparência da própria marca do produto (cores, fontes, superfícies de UI).
• Fatos: estatísticas, logotipos de clientes e afirmações apenas do site do produto ou do usuário. Números inventados não.
• Música: o script gratuito incluído (scripts/launch_bed.py) por padrão, uma faixa que o usuário possui ou uma faixa de biblioteca licenciada. Serviços de música gerada são pagos; pare e pergunte antes de usar um.

Projeto existente feito com outra ferramenta: permaneça nessa ferramenta. O método (grade de batidas, storyboard, UI real em janelas, revelações ritmadas, verificação, loop FrameJam) e os scripts (launch_bed.py, sheet.sh) funcionam com qualquer ferramenta.

Quando nada for dito: apenas música, 16:9, ~40 s, a aparência da marca. Nomeie os padrões que usou ao compartilhar a primeira renderização.

Fluxo de trabalho

1. Colete o produto real

Reúna o material antes de escrever uma única linha. Detalhes em references/assets.md.

• Aplicativo: grave takes curtos e limpos de cada funcionalidade (uma ação por take, 2880 px de largura ou mais, sem notificações, dados de demonstração realistas). Mantenha os tempos dos eventos (quando o clique ocorre, quando o resultado aparece).
• Site: salve o vídeo hero, screenshots de página inteira e de seções em 2x, o logotipo (SVG), fontes, as manchetes exatas, estatísticas e logotipos de clientes. Usuários do Hyperframes podem executar npx hyperframes capture <url> -o capture.
• Escreva ASSETS.md: uma linha por arquivo com o que mostra, tamanho e, para vídeos, os momentos-chave em segundos.
• Verdade da marca: cores (tinta, tela, um acento), fontes de exibição e corpo, como a UI se parece (raio, sombra, cromo).

2. História e grade de batidas

Leia references/story.md. Depois escreva STORYBOARD.md:

• Escolha um arco (problema → plataforma, loop de demonstração, antes/depois, cascata de funcionalidades). Escreva a promessa em uma linha.
• 6–10 quadros. Cada quadro tem um trabalho: gancho, introdução do produto, funcionalidade, benefício, prova, CTA. Uma funcionalidade é mostrada como uma sequência curta na superfície real (entrada → ação → resultado), não como uma screenshot estática.
• Agentes e assistentes de IA: mostre uma solicitação real de ponta a ponta: é digitada na entrada e enviada, torna-se uma mensagem, as etapas do agente aparecem uma a uma (as anteriores escurecem), o resultado cai como um cartão com fatos exatos e uma verificação, e o quadro segura o resultado antes da composição final. Solicitações e resultados são específicos (nomes, horários, contagens), nunca texto genérico.
• O gancho tem 3–4 s e funciona sem som: a dor ou desejo do espectador em suas próprias palavras, nunca "X é uma plataforma que…".
• Grade de batidas primeiro. Escolha um tempo (110–128 BPM; a 120 BPM uma batida é 0,5 s, um compasso 2 s). Cada quadro começa em um tempo forte e dura compassos inteiros. Marque os drops: geralmente o nome do produto e a seção de prova. Cada revelação em cada quadro cai em uma batida.
• Com narração: escreva SCRIPT.md em sinais curtos (6–20 palavras por quadro) e deixe a narração definir a duração dos quadros; a música ainda segue a grade abaixo.
• Escreva um bloco ## Direção de vídeo uma vez no topo: papéis de paleta, papéis de tipo, como as janelas entram, regras de movimento, quais quadros são quadros escuros de "impacto", o que nunca aparece.

Depois construa; a primeira renderização é a proposta. Se o usuário quiser ver os quadros primeiro, esboce-os e revise-os no FrameJam como um storyboard: open_review com panelsDir (uma imagem por quadro, nomeada 01-gancho.png…), depois wait_for_feedback.

3. Design de enquadramentos

Para cada quadro, escreva uma lista de enquadramentos com código de tempo contra a grade de batidas (references/shots.md): Cena 1 (0,0–0,5s): … com o que está na tela, onde está e como se move. Regras:

• Em t=0 mostre apenas a primeira coisa. Cada outra peça chega na sua batida (ou na sua palavra falada). Nunca despeje o quadro inteiro no primeiro quarto e deixe-o parado.
• A UI real fica em uma janela flutuante do produto (raio da marca, borda fina, sombra suave em camadas) com um assentamento 3D na entrada. Nunca corte texto da UI no meio de uma palavra. Reconstrua apenas o componente que precisa se mover (uma caixa de pesquisa que digita).
• Uma cor de acento por quadro, uma palavra destacada por manchete.
• Termine cada quadro em uma leitura mantida. Quietude supera uma câmera flutuante ou preguiçosa.
• Transições entre quadros: cortes secos na batida por padrão; zoom-through nas mudanças de seção; push-slide para uma sequência de funcionalidades.

4. Música e som

Leia references/music.md. Rota padrão, gratuita: escreva cues.json a partir do storyboard (seções em compassos, drops, e um efeito sonoro para cada batida forte, pop, clique, digitação e entrada de janela), depois uv run <playbook>/scripts/launch_bed.py cues.json --out assets/music/bed.wav (ou python3 com numpy, scipy e soundfile). Os efeitos sonoros vêm da mesma folha de sinais, então se encaixam exatamente nos cortes. Se o usuário trouxer uma faixa: meça seu tempo, corte a grade para ela e comece a faixa em sua seção mais forte, em vez de uma introdução lenta.

5. Construa

Construa quadro a quadro na ferramenta do projeto. Notas sobre Hyperframes (e armadilhas que encontramos) estão em references/hyperframes.md; o iniciador é template/hyperframes/.

• Uma composição por quadro, ou um arquivo com uma camada por quadro para peças curtas. Mantenha tempos locais do quadro.
• Anime com estados iniciais explícitos (seguro para seek), easings longos (power3/expo.out), sem bounce, sem loops infinitos, sem aleatoriedade.
• Vídeos de produto: dê a cada <video> um id; mova um div wrapper para movimentos de câmera, não o elemento de vídeo.
• Com subagentes paralelos disponíveis, atribua a cada um um quadro: seu bloco de storyboard, ## Direção de vídeo, as linhas de ativos que usa e "edite apenas seu arquivo". Caso contrário, construa em ordem você mesmo.

6. Verifique, renderize, revise

• Lint/verifique na ferramenta, depois renderize para um novo arquivo por versão (renders/v1.mp4, v2.mp4…).
• bash <playbook>/scripts/sheet.sh renders/v1.mp4 faz uma folha de contato de 2 fps; leia-a. Olhe para o ponto médio de cada quadro e ambos os lados de cada corte. Verifique: nada carregado no início, nenhum texto cortado ou abaixo da faixa de legenda, nenhum pop nas emendas, o drop cai com o nome, o cartão final segura ≥ 1,5 s.
• ffmpeg -i renders/v1.mp4 -vf freezedetect=n=0.003:d=2 -f null - sinaliza trechos parados; uma pausa é aceitável apenas onde você planejou uma espera.
• Revisão no FrameJam: open_review com videoPath = a renderização (caminho absoluto), abra a URL no navegador integrado, wait_for_feedback. Mapeie cada nota para seu quadro por timestamp, corrija, renderize v2, verifique novamente, depois add_version com uma nota de uma linha e aguarde novamente. Repita até a aprovação.
• Entregue o mp4 final (X: H.264, ≤ 2:20, ≤ 512 MB) com sua duração e a lista de quadros.

Nível de qualidade

• Produto real, com veracidade: cada captura de UI é uma gravação ou screenshot real. Cópias, estatísticas e logotipos vêm das fontes do próprio produto. Logotipos de terceiros apenas onde o produto os mostra (integrações, clientes).
• A promessa chega até o quadro 2. O gancho fala sobre a dor ou desejo do espectador; o nome chega no drop.
• Cada revelação está em uma batida (ou sua palavra falada), e a música, efeitos sonoros e cortes compartilham uma grade.
• Legível de relance: 1–7 palavras por manchete, ≥ 64 px em 1080p, um ponto focal por quadro.
• Movimento premium: assentos suaves, janelas com profundidade, emendas com velocidade combinada; sem bounce, sem flutuação de screensaver, sem formas genéricas de estoque representando o produto.
• Funciona sem som: a história é lida apenas pelo texto e pela UI.
• Assista você mesmo (folha de contato + verificações de corte) antes de cada rodada FrameJam.

Arquivos neste guia

• references/story.md: arcos, papéis de quadro, tipos de gancho, formas de linha comprovadas para cada papel, regras de narração.
• references/shots.md: formas de enquadramento para quadros de lançamento, regras de layout e movimento, emendas, uma lista de enquadramentos elaborada.
• references/assets.md: gravação do aplicativo, captura de um site, lista de ativos, direitos.
• references/music.md: grade de batidas, formato cues.json, uso de sua própria faixa.
• references/hyperframes.md: começando do zero no Hyperframes, janelas de produto, vídeo e áudio, armadilhas.
• references/example-notion.md: o plano da demo de lançamento do Notion, quadro a quadro.
• scripts/launch_bed.py: faixa musical local gratuita e efeitos sonoros a partir de uma folha de sinais.
• scripts/sheet.sh: folha de contato de qualquer renderização.
• template/hyperframes/: uma composição inicial (ajudantes de grade de batidas, janela de produto, linha cinética, chip, cartão de CTA).