Continuum Walkthrough

O que Continuum Walkthrough faz?

O benchmark é examples/po-desk/walkthrough.html (PO Desk Walkthrough v4.1, 10/10). Jason: "Adoro as animações, efeitos sonoros, etc., e a mecânica de continuidade". Cada nova peça deve superá-lo. Abra o benchmark e copie como ele se move antes de escrever algo novo.

O pipeline (≈ 3–4 h de tempo agente; renderização ≈ 1 h em segundo plano)

#	Etapa	Ferramenta	Portão
1	QA de Intake: faça todas as perguntas em references/intake-qa.md com a ferramenta de perguntas (4 por chamada, opção recomendada primeiro)	AskUserQuestion	Nenhuma compilação antes das respostas estarem prontas
2	Folha de batidas + script: preencha references/beat-sheet.md para esta oferta; uma linha de locução por batida, conversacional	escreva script.json	O usuário aprova a folha de batidas
3	Voz: 2 takes de cada linha	scripts/vo_gen.mjs	Créditos do plano gratuito cabem (veja Voz)
4	Verificar + tempos das palavras	scripts/vo_verify.sh (whisper.cpp)	Cada take escolhido corresponde exatamente à sua linha, palavra por palavra
5	Imagem: copie engine/starter.html, depois construa cena por cena; coloque cada chave T.* no início da palavra que a nomeia	engine/engine.js	Still de cada batida parecem corretos em ambos os formatos
6	Som: escreva uma folha de dicas com um som por evento visível (veja references/sound-map.md)	scripts/mix.py cues.json	−14 LUFS, −1 dBFS, linhas de voz não se sobrepõem
7	Portões	scripts/ghost_audit.mjs para v e h	PASS. Uma FALHA bloqueia a renderização
8	Renderizar, em segundo plano	nohup zsh scripts/render.sh … & disown	Número de quadros = LEN × 60 para ambos os formatos
9	Entregar	4 MP4s: 9×16 e 16×9, cada um com Voz+Música e Voz+SFX	Folha de contato (um still a cada 2 s) verificada visualmente
10	Pontuar: peça uma nota de /10, registre-a, e transforme cada observação em uma linha do razão e um portão	references/lessons.md	—

Configuração: node 20+, ffmpeg, python3 com numpy, npm i playwright-core (ou PW_DIR), Chrome (CHROME=… opcional), whisper-cli + ggml-small.en-q5_1.bin.

A forma da história (não reordenar)

1. Gancho (0–5 s): uma abertura pessoal e casual sobre um iMessage realista do remetente, com foto real e nome: "Ei, isso é aleatório… mas percebi algo no seu negócio que pode ser interessante." Ainda sem logotipo e sem discurso de vendas.
2. O objeto chega (5–10 s): uma pilha de notificações realistas. Uma delas (o documento real) se transforma em uma página completa e crível: timbre, número do pedido, tabela, totais, assinatura.
3. Dor, mostrada (10–18 s): uma pessoa nomeada ("Maria") redigita em cada destino: ERP (logotipo real), CRM (logotipo real), pasta, e-mail. Seu relógio corre e as teclas clicam. O nome de cada destino é DITO na locução.
4. Dor, precificada (18–26 s): taxa × horas × dias úteis, com um contador girando até o custo anual em vermelho. A matemática permanece na tela em letras pequenas. Diga o dinheiro.
5. Virada (26 s): "Aqui está como fica quando isso é resolvido para você." O mesmo objeto volta ao centro. Continuidade é o truque.
6. A solução (28–42 s): uma digitalização lê, campos voam para um cartão, marcas de verificação, uma exceção é sinalizada e explicada ("10× o normal"), depois um toque para corrigir e um toque para aprovar.
7. Prova (42–51 s): é arquivado em todos os 4 lugares com logotipos reais e verificações, depois um recibo com carimbos de data/hora ("1 min 44 s, do e-mail ao arquivamento").
8. CTA (51–53 s): suave e sem pressão: "Vale a pena dar uma olhada? É só responder."
9. Logotipo sozinho (53,8–58 s): a marca sozinha em um palco vazio, desaparecendo. Nada mais na tela.

Regras de continuidade (esta é a aparência)

• Um objeto persistente (o documento) se move entre layouts com molas track(). Ele nunca é cortado e recriado.
• Cada cena nasce da anterior: uma notificação vira a página, a página encolhe para o lado, as janelas se empilham e a página volta.
• Saídas vão para opacidade 0 e visibility:hidden. Nunca estacione um elemento finalizado com 20–50% como "fundo". Esse fantasma custou à v4 sua silhueta ("há uma silhueta sendo mostrada o tempo todo após 0:18"). ghost_audit.mjs agora reprova qualquer elemento mantido meio-visível por mais de 3 s.
• Apenas molas: step() com z 0.88–1.0 e sem bounce. Use desfoque de entrada/saída no entrar/sair, 60 fps com 8 subquadros e obturador de 180°.
• Na tela: uma ideia de cada vez, tipos grandes, cards iOS sem bordas, off-white quente #F4F2EE, tinta #0E0E0E, um acento por significado (vermelho = custo/problema, verde = concluído).
• Layouts são separados para v (1080×1920) e h (1920×1080). Projete 9:16 primeiro; o telefone é a tela principal.

Checklist de realismo

• iMessage: gramática real de tela de bloqueio (hora, data, notificações empilhadas, "agora"/"há 2m"), foto do remetente + nome, som trítono.
• Documento: proporções de carta, nomes de campos reais, números plausíveis que somam, uma assinatura, rodapé da página.
• Logotipos: SVGs reais (simple-icons, hex exato da marca). Mostre apenas ferramentas que o prospect realmente usa ou com as quais você realmente se integra. Um logotipo implica uma integração.
• Os dados são inventados e rotulados "Dados de exemplo · empresa fictícia". A matemática financeira mostra sua fórmula.

Voz: pergunte primeiro, depois construa

Sempre pergunte qual voz eles querem (pergunta 7 do intake), com as opções abaixo. Recomende ElevenLabs e informe que é gratuito: 10.000 créditos grátis todo mês.

Opção	Custo	Som	Como
ElevenLabs (recomendado)	Grátis: 10.000 créditos por mês ≈ 5 vídeos	Mais humano	scripts/vo_gen.mjs com a chave API deles (elevenlabs.io → Perfil → Chaves API)
A própria voz deles, gravada	Grátis	Mais pessoal	Eles gravam cada linha no celular; salve como vo/raw/<id>-t1.wav e execute vo_verify.sh normalmente
A própria voz deles, clonada	Plano pago ElevenLabs	Como eles, sem gravação	Clone de Voz Instantâneo no ElevenLabs, depois coloque esse ID de voz em script.json
Voz de computador embutida	Grátis, sem conta	Robótica	say -v Samantha -o a01.aiff "…"; use apenas para rascunhos de timing

Detalhes do ElevenLabs:

• Chave: ELEVENLABS_API_KEY ou ELEVENLABS_KEY_FILE. Nunca imprima, cole no chat ou commite. No T3, use request_secret com entrega de arquivo e exclua o arquivo quando terminar.
• Padrão: voz Brian nPczCjzI2devNBz1zQrb, modelo eleven_v4, estabilidade 0.45. Tags de áudio como [casual], [measured], [serious] e [confident] direcionam a leitura.
• Plano gratuito: 10.000 créditos por mês (≈ 10.000 caracteres). Um script de 60 s tem ≈ 900 caracteres, então 2 takes de tudo é ≈ 1.800, cerca de 5 vídeos por mês.
• O plano gratuito não tem licença comercial (termos ElevenLabs). Use para rascunhos e revisão interna. Antes de postar ou enviar algo como marketing, gere os takes finais em um plano pago (Starter é o mais barato).
• Coloque linhas com uma respiração de ≥0,3 s entre elas. Os eventos de imagem se encaixam no início das palavras do whisper, nunca em tempos adivinhados.

Som

Cada evento visível recebe um som audível no alto-falante do telefone: trítono no iMessage, tinidos nas notificações, cliques de teclas na digitação, um pop em cada janela, um impacto de caixa no valor anual, um baixo profundo em "só redigitando", um leito de scanner, ticks nas marcas de verificação, um som de botão em cada toque, um som de sucesso no último arquivamento e um brilho no logotipo. O mapa completo com ganhos está em references/sound-map.md. A música é uma base opcional a −23 LUFS, com redução de volume sob a voz. Sempre entregue também uma versão Voz+SFX, porque áudio em tendência é adicionado no aplicativo.

Problemas comuns de renderização

• As renderizações morrem quando o aplicativo host reinicia. Sempre execute-as com nohup … < /dev/null & disown, e verifique o número de quadros depois. Em 2026-11-09 até isso morreu em uma reinicialização do host; prefira screen -dmS <nome> zsh -c "…".
• Disco: os quadros são transmitidos para o ffmpeg e nunca são gravados no disco. render.sh exclui o intermediário silencioso após a multiplexação.
• Para um SVG ou imagem cujo offsetWidth está errado (por exemplo, uma marca), defina el._w / el._h você mesmo, ou ele renderiza descentralizado.
• Qualquer coisa que deva permanecer nítida sob desfoque de movimento (chips "voadores" rápidos) usa tf (o tempo do quadro) em vez de t.