primocode 10.13.0 → 10.14.1

package/lib/estudio/dados/projetos/clube-clube.json

@@ -0,0 +1,108 @@
+{
+  "id": "clube-clube",
+  "titulo": "Uma loja do zero com IA",
+  "categoria": "narrado",
+  "resumo": "Reel tutorial narrado, de 3 min 25 s, em que o autor mostra como fez a loja de tênis Clube dos Sneakers em cerca de nove horas e meia, com IA, em cinco passos: referência, design system, catálogo, páginas e conferência. O vídeo inteiro veste a identidade da loja que ele mostra (Roboto, preto, branco e cinza, o vermelho do selo HOT, ícones Material, cartão de produto, círculos de stories) e troca de cena com o carrossel arrastado da vitrine. São 14 cenas no After Effects, geradas por scripts em Python sobre gravações reais da loja no PC e no celular. Versão: v3.1, que o autor escolheu como base dos vídeos narrados com identidade própria.",
+  "indicado": "criador ou empresa que quer ensinar um processo em passos mostrando o próprio trabalho, como uma loja, um site ou um sistema feito com IA.",
+  "estilo": [
+    "identidade da marca",
+    "tutorial em passos",
+    "legenda viva",
+    "carrossel arrastado",
+    "gravações de tela reais",
+    "relógio e contadores",
+    "cenas claras e escuras."
+  ],
+  "ficha": {
+    "formato": "1080×1920, 30 qps, 9:16",
+    "duracao": "3 min 25 s (204,8 s)",
+    "motor": "ae",
+    "voz": "voz clonada na ElevenLabs (Eleven v4): o gancho em dois trechos e 14 parágrafos, juntados a 1,20×",
+    "musica": "ver o guia de estilo",
+    "fontes": "ver o guia de estilo"
+  },
+  "ferramentas": [
+    "Claude Code",
+    "After Effects",
+    "ElevenLabs"
+  ],
+  "ficha_tecnica": {
+    "Duração": "3 min 25 s (204,8 s)",
+    "Formato": "1080×1920, 30 qps, 9:16",
+    "Voz": "voz clonada na ElevenLabs (Eleven v4): o gancho em dois trechos e 14 parágrafos, juntados a 1,20×",
+    "Ferramenta": "After Effects, com o projeto gerado por scripts em Python (cerca de 1.800 camadas)",
+    "Trilha": "\"Congratulations\" (Post Malone e Quavo), só o instrumental",
+    "Chamadas": "\"comenta CLUBE\" para receber a skill de UI e UX; no fim, o endereço da loja e o pedido de comentário e curtida",
+    "Publicado": "as versões seguintes (v4 a v6) mantêm roteiro, narração e cenas e acrescentam o elemento vivo; segundo o autor, a v6 foi a que foi ao ar"
+  },
+  "etapas": [
+    {
+      "titulo": "O roteiro e a voz",
+      "texto": "**Resumo:** a fala do Reel exatamente como foi enviada à voz clonada (o gancho em dois trechos e 14 parágrafos), como ela foi feita e as 14 cenas por tempo. Gancho: \"Essa loja foi construída em menos de dez horas, cem por cento com IA.\".\n\n## Como a fala foi feita\n\n- **Texto do autor**, escrito para a v3. A revisão só corrigiu defeitos (\"daonde\" → \"de onde\", concordância, pontuação) e manteve o jeito dele de falar.\n\n- **Voz:** ElevenLabs, Eleven v4, um trecho por arquivo (estabilidade 0,52, similaridade 0,73, velocidade 1,05), conferida no faster-whisper e por uma IA que ouve o áudio.\n\n- **Pronúncia:** \"IA\" foi escrito \"IÁ\" e \"UI e UX\", \"iú-ái e iú-éks\". O endereço da loja foi escrito por extenso.\n\n- **Montagem:** o gancho e os 14 parágrafos acelerados a 1,20×, com pausas de 0,25 a 0,55 s entre eles, 5 s só de música depois do parágrafo 13 e 1,6 s depois do último.\n\n- **Na tela**, a legenda escreve normalmente: \"IA\", \"UI e UX\", \"10 horas\", \"9h30\", \"clubedossneakers.com.br\".\n\n## A fala, verbatim (texto enviado à voz)\n\n**Gancho**\n\n- Essa loja foi construída em menos de dez horas, cem por cento com IÁ.\n\n- E eu documentei cada passo do que fiz pra chegar nesse resultado: uma loja profissional, pronta pra ser lançada, em menos de um dia.\n\n**Os cinco passos**\n\n- Passo um: referência. Não adianta querer fazer um projeto de design sem dar pro seu agente as referências de estilo que você gosta, ou que pensou pra ilustrar o visual do seu projeto. No meu caso, eu pesquisei pelo MCP do Mobbin, um site feito pra procurar telas e designs de sites e aplicativos, pra usar como referência na hora de criar o seu.\n\n- Com o MCP conectado, pedi pro meu agente buscar ali referências de lojas, de e-commerce, de cores e das marcas que são referência em calçados, como Nike, Adidas e New Balance, e mandei baixar tudo. Navegando entre as referências que ele baixou, achei o site da Droper, que me agradou bastante.\n\n- Com a referência em mãos, vamos pro passo dois: design system. Pedi pro meu agente copiar o visual inteiro do site, pixel por pixel, pra já ter a base pronta e, a partir dela, personalizar a loja com a minha marca.\n\n- Nesse momento, é importante que você já tenha a sua identidade visual criada, pra que a IÁ não fique inventando marca genérica. Lembra: quanto mais referência e material você tiver, melhor o resultado, e menos coisa você vai precisar mudar depois.\n\n- No meu caso, usei a skill de iú-ái e iú-éks profissional que eu mesmo criei. Com ela, o agente já entende princípios de design, conceitos e os estilos que eu gosto. Se você quiser essa skill pros seus projetos, comenta CLUBE aqui no vídeo, que eu te mando no direct pra você instalar.\n\n- E não fica frustrado se não curtir o design nas primeiras vezes. É super normal. Quanto mais você corrige a sua IÁ com o estilo que você gosta, melhores ficam os resultados. Isso só vem com prática: cria o hábito de usar muito o seu agente de IÁ favorito, pra ele aprender os seus gostos e começar a fazer designs sob medida pra você.\n\n- Passo três: o catálogo. Falei pro meu agente usar um catálogo que eu já tinha, num arquivo CSV. Se você vai fazer uma loja como eu, também precisa ter os seus produtos guardados de um jeito organizado, com título, preço e, principalmente, fotos, pra ele colocar na sua loja.\n\n- Pode ser numa pasta no seu computador, no Google Drive, na sua plataforma de vendas ou num marketplace. O importante é ele ter de onde puxar os produtos.\n\n- Passo quatro: as páginas. Vou deixar um prompt no primeiro comentário fixado. Manda pro seu agente de IÁ, que ele faz todas as páginas que faltam, aquelas que às vezes a gente esquece: as institucionais, contato, trocas e devoluções, política de privacidade, perguntas frequentes. Essas coisas chatas em que você provavelmente nem pensou.\n\n- E relaxa: se ele não souber alguma informação importante, ele te pergunta antes de colocar coisa errada.\n\n- Passo cinco: a conferência. Lembra da skill de iú-ái e iú-éks que eu te falei? Ela tem uma regra que faz o agente sempre conferir o design, com um script de conferência automática. Ele pega todas as páginas e seções que você fez e confere uma por uma: o espaçamento entre os componentes, a hierarquia, as microinterações, as animações, as transições de página e todos os outros princípios que estão na skill.\n\n- E ainda verifica se o site inteiro está responsivo, em todos os tamanhos de tela. Esse passo é super importante, porque é exatamente essa conferência, com os ajustes mínimos, que separa um site profissional de um site que, por mais bonito que esteja, ainda tem aquele toquezinho de que foi feito por IÁ.\n\n- E tudo isso levou cerca de nove horas e meia pra ficar pronto e chegar no resultado que você tá vendo agora na tela.\n\n**Chamada final**\n\n- E aí, curtiu o resultado? Se quiser explorar essa loja, é só acessar clube dos sneakers ponto com ponto bê erre. E não esquece de comentar e deixar o seu like, se esse vídeo te ajudou em alguma coisa.\n\n## Cenas por tempo\n\nFundo claro (C) ou escuro (E) em cada cena; a legenda troca de cor junto.\n\n | \n\n | Tempo (s)\n | Cena\n | Fundo\n | Tela\n\n | 0–11,0\n | gancho\n | C\n | a janela da loja com o vídeo real do PC; relógio de \"menos de 10 horas\" girando; \"100%\" e o logo do Claude em \"com IA\"; os 5 passos em círculos de marca em \"cada passo\"; o celular entra em \"profissional\"; o anel de 24 h enche em \"menos de um dia\"\n\n | 11,0–28,2\n | Passo 1: por que referência\n | E\n | selo \"PASSO 01\"; a galeria do Mobbin rolando; o logo do Mobbin em \"MCP do Mobbin\"; sem referência, resultado genérico; com referência, loja de verdade\n\n | 28,2–43,4\n | Passo 1: MCP, busca e Droper\n | C\n | Claude e Mobbin conectados; a busca real; o que foi buscado (lojas, e-commerce, cores, marcas); Nike, adidas e New Balance; o download de tudo; o carrossel de referências arrastado pela mão e a Droper escolhida\n\n | 43,4–55,0\n | Passo 2: design system\n | E\n | a janela passa da Droper para o Clube com uma varredura; as medidas reais da Droper (cabeçalho 1420 × 54, raio 16, botão 44); os tokens de cor e fonte, com a quarta cor virando a da marca em \"personalizar\"\n\n | 55,0–67,2\n | identidade antes de tudo\n | C\n | o kit de marca real (logo, selo, cores, fonte); as três marcas genéricas que a IA inventou, riscadas; mais material, melhor resultado e menos retrabalho\n\n | 67,2–81,0\n | a skill e o \"comenta CLUBE\"\n | E\n | comentários do Instagram, o comentário publicado, o campo de comentário e a notificação de direct\n\n | 81,0–98,5\n | sem frustração\n | C\n | versões reais antes e depois da correção; o pedido de correção real; quatro semanas de hábito se preenchendo; os gostos que o agente aprendeu\n\n | 98,5–121,3\n | Passo 3: o catálogo\n | E\n | o arquivo `catalogo.csv`; a planilha com produtos reais e as colunas título, preço e fotos em destaque; a linha que vira cartão na loja; de onde puxar (pasta, Drive, plataforma, marketplace)\n\n | 121,3–144,8\n | Passo 4: as páginas\n | C\n | o comentário fixado com o prompt; o chat do agente recebendo o prompt; o print real das páginas novas; a pilha de janelas (institucionais, contato, trocas, privacidade, perguntas); a pergunta real que o agente fez\n\n | 144,8–167,5\n | Passo 5: a conferência\n | E\n | o terminal com a auditoria real; todas as páginas, uma por uma; um cartão de produto mostrando cada princípio (hover que sobe com sombra, ripple no clique, transição de página); o checklist\n\n | 167,5–183,0\n | responsivo e o \"toque de IA\"\n | C\n | cinco larguras reais de tela; o ajuste mínimo de alinhamento que se encaixa; a lupa no \"toquezinho\"; profissional × feito por IA\n\n | 183,0–188,1\n | nove horas e meia\n | E\n | o relógio de ponteiros gira até 9h30\n\n | 188,1–193,4\n | só música\n | C\n | a loja no PC e no celular; a batida cheia volta em 188,41 s e a cena pulsa no compasso\n\n | 193,4–204,8\n | chamada final\n | E\n | o selo da marca girando e a busca da loja com o endereço\n\nA trilha dos 5 passos aparece no topo do Passo 1 até a cena das nove horas e meia. Os tempos de cada palavra estão em `audio/audio-v3/words.json`."
+    },
+    {
+      "titulo": "A identidade visual",
+      "texto": "**Resumo:** a identidade do vídeo é a da loja que ele mostra: Roboto, o preto, o branco e o cinza da Droper, o vermelho do selo HOT como destaque e o verde do \"no ar\", ícones Material, cartão de produto, círculos de stories e o carrossel arrastado da vitrine como transição. Legenda palavra por palavra no topo, cenas claras e escuras alternadas, rap instrumental sob a voz. Números tirados de `base_v3.py`, `gerar_v3.py`, `kit_ae.py` e `mixar_v3.py`.\n\n## Fontes\n\n | \n\n | Uso\n | Fonte\n | Onde baixar\n\n | Título de passo (150 px, tracking −30) e números grandes\n | Roboto Black (900)\n | Google Fonts\n\n | Legenda (70 px, tracking −20), títulos de cartão, preços\n | Roboto Bold (700)\n | Google Fonts\n\n | Chips, rótulos, \"no ar\"\n | Roboto Medium (500)\n | Google Fonts\n\n | Endereço digitado na barra\n | Roboto Regular (400)\n | Google Fonts\n\n | Ícones (os mesmos da loja)\n | Material Icons\n | Google Fonts\n\n## Cores\n\n | \n\n | Token\n | Hex\n | Uso\n\n | Preto\n | `#111111`\n | fundo das cenas escuras, texto\n\n | Preto 2 e grafite\n | `#1C1C1C`, `#2A2A2A`\n | superfícies escuras, chip escuro\n\n | Branco\n | `#FFFFFF`\n | cartões, texto nas cenas escuras\n\n | Fundo\n | `#F3F3F3`\n | fundo das cenas claras\n\n | Cartão\n | `#ECECEE`\n | barra do navegador, chip cinza\n\n | Linha\n | `#E2E2E2`\n | contornos, trilho do relógio\n\n | Cinza\n | `#9E9E9E` / `#6B6B6B`\n | texto secundário\n\n | **HOT**\n | **`#FF2D17`**\n | palavra-chave da legenda, selo \"PASSO 0n\", aro do passo atual, ponteiro central, arco do relógio\n\n | Laranja\n | `#FF6A00`\n | destaque secundário\n\n | Verde\n | `#4ADE80`, `#1E7B34`, fundo `#DCFCE7`\n | \"no ar\", chip verde\n\n | Alta de preço\n | `#16A34A`\n | \"↑ +3%\" do cartão de produto\n\n | Botões da janela\n | `#FF5F57`, `#FEBC2E`, `#28C840`\n | os três círculos do navegador\n\n## Componentes\n\n- **Janela de navegador** com os três botões, a barra de endereço com cadeado, o endereço digitado por expressão (com cursor) e a pílula verde \"no ar\". O conteúdo é uma imagem ou um vídeo real, que rola.\n\n- **Celular** com moldura preta e o vídeo real da loja no iPhone.\n\n- **Cartão de produto** igual ao do site: nome à esquerda, preço e \"↑ +3%\" à direita, foto e selo HOT ou NOVO.\n\n- **Círculo de marca** dos stories da loja: disco branco, aro, logo e nome embaixo.\n\n- **Relógio de ponteiros** com marcas de hora, ponteiros que giram até 9h30, arco vermelho de progresso e relógio digital por expressão.\n\n- **Contador** por expressão (ex.: 0 → 100%).\n\n- **Título de passo:** selo HOT \"PASSO 0n\" e o nome do passo em Roboto Black.\n\n- **Chips** nos estilos branco, preto, HOT, verde, escuro, contorno e cinza.\n\n- **Trilha dos 5 passos** no topo: cinco círculos com os ícones `search`, `palette`, `table_chart`, `layers` e `verified`; o passo atual ganha aro vermelho, o feito vira disco preto com check.\n\n## Transição: o carrossel arrastado\n\nA cena que sai vai 1.080 px para a esquerda e a próxima entra pela direita, em 0,75 s, com a curva .86/.07 e motion blur: é o mesmo gesto do arraste da vitrine da loja. No momento só com música, a cena pulsa de 100% a 103% a cada compasso.\n\n## Curvas\n\n | \n\n | Nome\n | Bezier\n | Uso\n\n | mojtaba\n | (.86, 0, .07, 1)\n | carrossel, posições, ponteiros, rolagem das páginas\n\n | sai\n | (.16, 1, .3, 1)\n | entradas: sai rápido e assenta longo\n\n | entra\n | (.33, 0, .67, 1)\n | opacidade das entradas\n\n | pop\n | (.34, 1.56, .64, 1)\n | escala de chips, círculos e selos que estalam\n\n**Entrada padrão:** 0,85 s, subindo 60 px, desfoque 12 → 0, opacidade cheia aos 70% do tempo. **Saída padrão:** 0,55 s, subindo 40 px, desfoque 0 → 8 e escala a 96%. A saída termina antes do próximo arraste.\n\n## Legenda\n\n- Roboto Bold 70 px (reduz para caber em 912 px), alinhada à esquerda em x = 84, no topo da tela.\n\n- Cada palavra entra no seu tempo falado: sobe 35 px em 0,45 s, com opacidade em 0,3 s e desfoque 6 → 0.\n\n- Sai subindo 26 px, com desfoque 8, em 0,3 s.\n\n- A palavra-chave fica em vermelho HOT; o resto, em preto nas cenas claras e branco nas escuras.\n\n- Frases de 4 a 9 palavras, no máximo duas linhas.\n\n## Trilha\n\n | \n\n | Item\n | Valor\n\n | Música\n | \"Congratulations\" (Post Malone e Quavo), só o instrumental (demucs)\n\n | Tom e tempo\n | Lá♯ menor, 123 BPM\n\n | Gancho\n | só o sintetizador calmo; a batida entra em 10,85 s, no fim do gancho\n\n | Emenda\n | em 106,46 s a faixa volta 11 compassos, num trecho calmo, com cruzamento de 0,8 s\n\n | Respiro e volta\n | a música respira sob \"nove horas e meia\" e a batida cheia volta em 188,41 s, com a loja só com música\n\n## Sound design e mix\n\n | \n\n | Faixa\n | Nível\n\n | Voz\n | seca, na frente\n\n | Música\n | ganho de 0,16 na abertura, 0,11 sob a voz e 0,30 na loja só com música, com o volume nivelado pela energia em janelas de 1,5 s\n\n | Ducking\n | a música cede cerca de 2,5 dB enquanto a voz fala\n\n | EQ da música\n | −3,5 dB em 320 Hz e −2 dB em 2,5 kHz, para abrir espaço para a voz\n\n | Final\n | −15,3 LUFS medido\n\n**Paleta \"rap\":** os efeitos de desenho animado foram trocados por sons recortados de uma biblioteca premium.\n\n | \n\n | Antes\n | Depois\n\n | pops\n | cliques suaves com passa-baixas, \"select\" e botão\n\n | whooshes e papel\n | swipes\n\n | carimbo\n | impacto tonal\n\n | sucesso, notificação e sino\n | notificação digital\n\n | impacto\n | grave\n\nGrave e prato reverso abrem cada passo e o momento só com música. Digitação, tique-taque do relógio e contadores ficaram, mais baixos.\n\n## O que é \"humano\" neste vídeo\n\n- O relógio gira de verdade até 9h30, com o arco enchendo junto.\n\n- O endereço é digitado com cursor, como na barra do navegador.\n\n- As páginas da loja rolam devagar dentro das janelas.\n\n- A mão arrasta o carrossel de referências, como na vitrine.\n\n- No momento só com música, a cena pulsa no compasso.\n\n- O gerador avisa quando uma animação seria cortada pela troca de cena, para nada sumir no meio do movimento."
+    },
+    {
+      "titulo": "A montagem no After Effects",
+      "texto": "| \n\n | Script\n | O que faz\n\n | `base_v3.py`\n | tokens da loja (cores, Roboto, ícones Material), o relógio da fala (`T(\"palavra\", depois=…)`), a entrada e a saída padrão e os componentes: janela de navegador, celular, cartão de produto, círculo de marca, relógio, contador, chip e título de passo\n\n | `cenas_a.py`, `cenas_b.py`\n | as 14 cenas\n\n | `gerar_v3.py`\n | a comp principal: legenda palavra por palavra, trilha dos 5 passos no topo, carrossel arrastado entre as cenas e a lista de efeitos. Avisa quando uma chave cairia depois da troca de cena\n\n | `kit_ae.py`\n | funções de comp, camada, forma, texto e efeito, e as curvas\n\n | `preparar_assets.py`\n | prints e logos leves para o AE\n\n | `montar_narracao.py`, `palavras.py`, `conferir.py`\n | narração a 1,20× com as pausas, tempo de cada palavra (faster-whisper) e conferência\n\n | `mixar_v3.py`, `recortar_sfx.py`\n | trilha em duas partes emendadas no compasso, ducking, efeitos \"rap\" e mix\n\n | `render_leve.ps1`, `montar_final.py`\n | render em trechos de 8 s e junção com o áudio\n\nOs geradores escrevem `tutorial-v3.json`, que uma ponte MCP do After Effects importa (`ae_project_import_json`, da `mcp-aftereffects`, de código aberto); depois o `pos-import.json` centraliza os textos. O `.aep` já vem montado: os scripts servem para estudar e reaproveitar. Algumas linhas apontam para pastas da máquina onde o vídeo foi feito (fontes, gravações, músicas e efeitos); ao reaproveitar, peça ao agente para trocar pelos caminhos da sua central.\n\n**Pegadinhas da importação por JSON:** com cerca de 1.800 camadas, ela leva perto de 26 minutos; abra um projeto antes (`project.new`), porque na tela inicial ela fica parada. A camada filha de um null tem a posição compensada (por isso cada grupo animado virou precomp), a camada de forma guarda só o último grupo (por isso cada grupo virou uma camada) e a centralização do texto é ignorada (por isso o `pos-import.json`).\n\n- **Instale as fontes** (Google Fonts, grátis): Roboto (400, 500, 700 e 900) e Material Icons. Instale para todos os usuários e reinicie o After Effects. No Windows, se não aparecer no AE, copie para `C:\\Program Files\\Common Files\\Adobe\\Fonts`.\n\n- **Mantenha a pasta `projeto/` como veio** e abra o `.aep` no After Effects 2026 ou mais novo.\n\n- **Comp:** `MAIN Clube tutorial v3`, com as 14 cenas (`CENA 01` a `CENA 14`), a legenda e a trilha dos passos por cima. Renderize a `MAIN`.\n\n- **Arquivo faltando:** File › Dependencies › Find Missing Footage; clique com o direito › Replace Footage › File e aponte para `projeto/ae-v3/assets`, `projeto/ae-v3/assets-remotion` (gravações e páginas) ou `projeto/ae-v3/audio`. O AE reencontra os outros da mesma pasta.\n\n- **Render:** `render_leve.ps1` (o `aerender` em trechos de 8 s, prioridade baixa e 35% da RAM; o render pela janela do AE chegou a 46 GB de RAM numa versão anterior). Depois, `montar_final.py` junta só o vídeo dos trechos e põe o áudio final."
+    },
+    {
+      "titulo": "As decisões de direção",
+      "texto": "- **O vídeo veste o assunto.** Fonte, cores, ícones, componentes e transição vieram da loja que ele mostra. Nas palavras do autor: \"esse vídeo foi bom porque a gente criou uma identidade visual única para o vídeo, e isso é bom, devemos fazer isso sempre\".\n\n- **A fala é do autor.** O roteiro da v3 foi escrito por ele, \"bem mais humanizado\" que o anterior, e a revisão só corrigiu defeitos.\n\n- **Nada aparece antes de ser dito.** Cada elemento entra na palavra que o justifica, achada no `words.json`.\n\n- **Animação que termina.** Entrada de 0,85 s e saída de 0,55 s, completas antes do arraste. Na v2, as animações eram rápidas demais e não terminavam antes da troca de cena.\n\n- **O tempo virou objeto.** Um relógio de ponteiros gira até 9h30 no gancho e na cena das \"nove horas e meia\"; um anel de 24 horas enche em \"menos de um dia\".\n\n- **Material real em tudo:** telas do Mobbin, a Droper com as medidas reais, o kit de marca, as marcas genéricas que a IA inventou, o catálogo em planilha, as páginas publicadas, a pergunta real que o agente fez e a auditoria real da loja.\n\n- **Cenas claras e escuras se alternam**, e a legenda muda de cor junto, já no meio do arraste.\n\n- **A trilha dos 5 passos fica no topo**, em círculos de stories: o passo atual ganha o aro vermelho e o passo feito ganha um check.\n\n- **Respiro com a loja.** Depois de \"nove horas e meia\", a loja aparece 5 s só com música, e a batida cheia volta nesse momento.\n\n- **Trilha de rap no lugar de \"Levels\".** O retorno à v3 foi \"o vídeo em si ficou muito bom… tudo perfeito\", mas \"Levels\" estava \"batida e saturada\". Os efeitos trocaram os pops de desenho animado e os sons de papel por cliques suaves, swipes, grave e prato reverso.\n\nDetalhes de cores, curvas e som: estilo.md. Fala e cenas por tempo: roteiro.md. Para fazer um vídeo no mesmo estilo: PROMPT.md."
+    },
+    {
+      "titulo": "As versões até o final",
+      "texto": "| \n\n | Versão\n | O que mudou\n\n | v1\n | prévia no Remotion, 1 min 25 s, trilha \"Levels\"\n\n | v2\n | animações no After Effects, mesmos tempos e áudio da v1\n\n | v3\n | roteiro do autor, identidade da loja, 14 cenas, relógio e anel de 24 h, 3 min 25 s; retorno: \"tudo perfeito\", menos a trilha\n\n | **v3.1**\n | só o áudio mudou: \"Congratulations\" e a paleta de efeitos \"rap\"; nota 9,5/10 na segunda escuta de uma IA revisora\n\n | v3.2\n | a mesma imagem com \"Taste\"; o autor preferiu a v3.1: \"o vídeo com a outra trilha sonora ficou bem melhor\"\n\n | v4 a v6\n | mesmo roteiro e mesmas cenas, com um elemento vivo que conduz o olho (na v6, um círculo auxiliar suave)"
+    }
+  ],
+  "pacote": [
+    {
+      "pasta": "projeto/",
+      "conteudo": "`clube-tutorial-v3.aep`, o JSON de importação (`tutorial-v3.json`), o `pos-import.json` (centralização dos textos), a pasta `ae-v3/assets/` (telas do Mobbin e do Pinterest, topo da Droper, cabeçalho e marcas antes e depois, logos e selo do Clube, logos de Nike, adidas e New Balance, fotos de produto), a pasta `ae-v3/assets-remotion/` (gravações da loja no PC e no celular, as três direções de marca descartadas e as páginas publicadas), o mix final que o `.aep` usa, `words.json` e os scripts"
+    },
+    {
+      "pasta": "audio/",
+      "conteudo": "narração montada (`narracao-v3.wav`), os textos enviados à voz (`p1.json`, `p2.json`, `q01.json` a `q14.json`) e o gancho a 1,20× (`gancho-120.mp3`), `paragrafos.txt`, tempos de parágrafo e de palavra, os scripts de montagem e conferência, o mix final, `mixar_v3.py`, a lista de efeitos, a paleta \"rap\" (`sfx-rap/`) e os outros efeitos usados (`sfx/`)"
+    },
+    {
+      "pasta": "referencias/",
+      "conteudo": "a legenda do post, o prompt do comentário fixado (o \"prompt das páginas\" prometido no vídeo) e os links"
+    },
+    {
+      "pasta": "render/",
+      "conteudo": "`final.mp4`"
+    },
+    {
+      "pasta": "base_v3.py",
+      "conteudo": "tokens da loja (cores, Roboto, ícones Material), o relógio da fala (`T(\"palavra\", depois=…)`), a entrada e a saída padrão e os componentes: janela de navegador, celular, cartão de produto, círculo de marca, relógio, contador, chip e título de passo"
+    },
+    {
+      "pasta": "gerar_v3.py",
+      "conteudo": "a comp principal: legenda palavra por palavra, trilha dos 5 passos no topo, carrossel arrastado entre as cenas e a lista de efeitos. Avisa quando uma chave cairia depois da troca de cena"
+    },
+    {
+      "pasta": "kit_ae.py",
+      "conteudo": "funções de comp, camada, forma, texto e efeito, e as curvas"
+    },
+    {
+      "pasta": "preparar_assets.py",
+      "conteudo": "prints e logos leves para o AE"
+    }
+  ],
+  "prompt": "Quero fazer um tutorial narrado no mesmo estilo do projeto \"Uma loja do zero com IA\", que está em 07-videos/projetos/clube/, com o meu assunto.\n\nO que eu fiz e vou mostrar: {{ASSUNTO}} (ex.: uma loja, um site, um sistema)\nOnde ver o resultado: {{LINK}} (site no ar, gravações de tela, prints)\nOs passos: {{PASSOS}} (de 3 a 6)\nQuanto tempo levou: {{TEMPO}}\nChamada: {{CHAMADA}} (ex.: comenta uma palavra para receber um material)\nDuração aproximada: {{DURACAO}} (a referência tem 3 min 25 s)\n(Se algum desses estiver vazio ou com as chaves, me pergunte antes de começar.)\n\n1. Estude o projeto antes de propor qualquer coisa. Leia, nesta ordem: 07-videos/projetos/clube/LEIA-ME.md, estilo.md e roteiro.md. Depois abra os scripts em projeto/ae-v3/ (base_v3.py, cenas_a.py, cenas_b.py, gerar_v3.py) e o mixar_v3.py, e me explique em poucas linhas como os tokens, o relógio da fala T(\"palavra\"), a legenda palavra por palavra e o carrossel arrastado se encaixam. Diga o que vai reaproveitar.\n\n2. Siga o passo a passo de 9 etapas de 07-videos/_LEIA.md e os números de 07-videos/regras-vigentes.md. Crie o meu projeto em 07-videos/projetos/AAAA-MM-DD-tema/ a partir de 07-videos/projetos/_modelo/README.md e marque cada etapa no checklist. Não edite os arquivos do projeto clube: copie o que for reaproveitar.\n\n3. Use as skills instaladas: video-referencias (assets reais), motion-narrado (nada aparece antes de ser dito, legenda viva), motion-app-ae (interface no After Effects), conteudo-voz (o meu jeito de falar) e better-portuguese (legenda e todo texto da tela).\n\n4. O roteiro: a fala é minha. Faça só a estrutura em roteiro.md: o gancho com o resultado e o tempo que levou, um bloco por passo (o que dizer e o que aparece na tela), um respiro só com música mostrando o resultado e a chamada final. Me dê 3 opções de gancho e espere eu escrever. Guarde o meu texto sem mudar e faça ao lado a versão para a voz, só com a grafia de pronúncia (siglas como se falam, endereço por extenso).\n\n5. Narração: um parágrafo por arquivo, conferido no faster-whisper; junte a 1,20× numa passada só, com pausas curtas entre os parágrafos e uns 5 s só de música antes da chamada final. Gere o words.json. Não anime antes do áudio aprovado.\n\n6. Identidade do assunto: tire do que eu vou mostrar a fonte, as cores, os ícones, os componentes e um gesto típico para a transição (na referência, a Roboto da loja, o vermelho do selo HOT, os ícones Material, o cartão de produto, os círculos de stories e o arraste da vitrine). Registre os tokens num arquivo base, no lugar do base_v3.py, e me mostre antes de animar.\n\n7. Material real antes de gerar: grave ou capture as telas do resultado e corte ou desfoque qualquer dado pessoal (sugestões do navegador, endereço, nome no teclado). Junte prints, medidas, planilhas e mensagens reais que provem cada passo.\n\n8. Reaproveite o motor, troque o conteúdo. Mantenha deste projeto: cada elemento entrando na palavra em que é dito, a entrada de 0,85 s e a saída de 0,55 s completas antes da troca de cena (com o aviso do gerador), a legenda palavra por palavra no topo com a palavra-chave na cor de destaque, as cenas claras e escuras alternadas, a trilha dos passos no topo, o título de passo com selo, o relógio para mostrar tempo, o respiro só com música e a transição pelo gesto do assunto. Troque: tokens, componentes, cenas, textos e a trilha (rap ou pop instrumental, com a batida entrando no fim do gancho e voltando cheia no respiro; música bem abaixo da voz, com ducking e EQ nos médios-graves).\n\n9. Construa de duas em duas cenas e me mostre folhas de contato a cada rodada. Em cada movimento, pergunte: está humano ou robotizado? Renderize em trechos com o aerender, revise quadro a quadro com o áudio, peça a uma IA que ouça o mix e corrija até ficar perto de 9/10. Me entregue o vídeo, a legenda do post, o texto do comentário fixado (se a fala prometer um) e a ficha atualizada. No fim, registre uma anotação em anotacoes/.",
+  "campos": [
+    "ASSUNTO",
+    "CHAMADA",
+    "DURACAO",
+    "LINK",
+    "PASSOS",
+    "TEMPO"
+  ],
+  "fonte": {
+    "nome": "Clube do Motion",
+    "url": "https://clubedomotion.com/projeto/?id=clube",
+    "uso": "liberado pelo dono do Clube do Motion em 18/10/2026 (docs/permissoes/clube-do-motion.md)"
+  }
+}

package/lib/estudio/dados/projetos/clube-codigo.json

@@ -0,0 +1,101 @@
+{
+  "id": "clube-codigo",
+  "titulo": "Cada quadro é código",
+  "categoria": "elementos",
+  "resumo": "filme de marca de 31,5 s, 16:9, em que uma bola laranja atravessa nove cenas de motion: quica, vira fundo, vira acento de palavra, rola sobre um campo de cubos 3D, sobra no fim de 12.000 partículas e pousa como ponto final de \"CLAUDE.\". Tipografia cinética em Archivo variável, grade generativa, nó de cromo em Three.js e partículas, tudo em português e cortado nas batidas medidas da música. É uma **recriação** do \"Bold kinetic type showreel\", de kirill sh (@shneural), publicado no prompt-motion.com (prompt-motion.com/shneural-2abdfa). O original juntava dois showreels gerados pelo mesmo prompt genérico (um do Opus 5.5 e outro do GPT 6), colados com cartões de título parados; a nossa versão faz uma peça só, com o melhor das duas metades, trilha real e 152 efeitos sonoros.",
+  "indicado": "abertura de marca, showreel de estúdio ou manifesto de quem trabalha com tecnologia e quer mostrar ofício.",
+  "estilo": [
+    "tipografia cinética",
+    "partículas",
+    "3D",
+    "cromo",
+    "grade generativa",
+    "objeto protagonista",
+    "corte na batida",
+    "contraste alto."
+  ],
+  "ficha": {
+    "formato": "1920×1080, 60 qps, 16:9",
+    "duracao": "31,5 s; 9 cenas, a maioria de 3 s (4 batidas de 0,75 s)",
+    "motor": "html",
+    "voz": "ver o guia de estilo",
+    "musica": "ver o guia de estilo",
+    "fontes": "ver o guia de estilo"
+  },
+  "ferramentas": [
+    "Claude Code"
+  ],
+  "ficha_tecnica": {
+    "Duração": "31,5 s; 9 cenas, a maioria de 3 s (4 batidas de 0,75 s)",
+    "Formato": "1920×1080, 60 qps, 16:9",
+    "Narração": "nenhuma; o texto está na tela",
+    "Ferramenta": "HyperFrames (HTML + GSAP), com Three.js para cubos, cromo e partículas e canvas 2D para bola, grade e poeira",
+    "Uso": "showreel, filme de marca",
+    "Trilha": "\"Bad Karma\" (Axel Thesleff), trecho de 71,84 a 103,34 s; drop em 4,43 s"
+  },
+  "etapas": [
+    {
+      "titulo": "O roteiro",
+      "texto": "**Resumo:** vídeo sem narração, com 9 cenas presas aos bumbos medidos da música (batida a cada 0,75 s). O texto da tela está em português e sai do `index.html`; os tempos são do vídeo e vêm da tabela `T` da composição.\n\n## Como o roteiro foi feito\n\n- **Ponto de partida:** o original de @shneural tinha duas metades de 15 s, uma de cada modelo, separadas por cartões de título. O roteiro pegou a sequência da primeira metade (bola → palavras → grade → cubos → parede → partículas → assinatura) e trouxe da segunda o eco em contorno, o nó de cromo e as palavras de peso.\n\n- **O que mudou:** as palavras de 0,25 s viraram cenas de ~3 s, o mosaico de recapitulação deu lugar à frase em partículas e todo texto foi para o português.\n\n- **Cortes:** 4,43 · 7,46 · 10,46 · 13,45 · 16,45 · 19,45 · 22,48 · 28,41 s.\n\n## Cenas por tempo\n\n | \n\n | #\n | Tempo (s)\n | Rótulo do HUD\n | Texto na tela\n | O que acontece\n\n | 1\n | 0–4,43\n | 01 / COMPRIMIR E ESTICAR\n | rótulos da bola\n | a bola laranja quica em 0,74 · 1,50 · 2,24 · 3,00 s, achata e estica, sobe ao ápice (3,92 s) e mergulha na câmera (4,24 s)\n\n | 2\n | 4,43–7,46\n | 02 / TIPOGRAFIA CINÉTICA\n | **CADA** · **QUADRO** (\"1280 × 300\") · (03) **É** · **CÓDIGO**\n | **drop:** a bola vira o fundo laranja e \"CADA\" entra em preto; \"QUADRO\" (5,18 s) numa caixa de seleção com alças; o \"É\" itálico azul (5,92 s); \"CÓDIGO\" com glitch RGB sobre o azul e linhas de código (6,30 s); tudo se recolhe numa linha (7,08 s) e num ponto (7,22 s)\n\n | 3\n | 7,46–10,46\n | 03 / GRADE GENERATIVA\n | —\n | o ponto abre uma grade de pontos; três ondas trocam a forma das peças: cruzes (8,22 s), losangos (8,96 s) e quadrados (9,72 s)\n\n | 4\n | 10,46–13,45\n | 04 / PROFUNDIDADE\n | —\n | a câmera inclina e a grade vira um campo de cubos 3D, com destaques laranja e azul; a bola rola sobre eles; chicote de câmera em 13,18 s\n\n | 5\n | 13,45–16,45\n | 05 / RITMO\n | **MOVIMENTO** (em fileiras)\n | parede de fileiras azuis e creme com a palavra repetida e uma faixa central em destaque, cuja palavra alarga e se achata na saída\n\n | 6\n | 16,45–19,45\n | 06 / PESO\n | **OUSADO.** \"SEM MEDO.\" · **PRECISO.** \"SEM ACASO.\" · **VIVO.** \"NENHUM QUADRO PARADO.\"\n | uma palavra a cada batida (16,45 · 17,20 · 17,95 s), cada uma com quatro ecos em contorno; em 18,70 s a câmera mergulha no miolo do \"O\" de \"VIVO.\"\n\n | 7\n | 19,45–22,48\n | 07 / CROMO · LUZ · FORMA\n | **FORMA.** · **SEM LIMITES.** · \"CROMO · LUZ · PROFUNDIDADE\" · \"MORPH 000%\"\n | o nó de cromo gira com reflexos laranja e azul; \"FORMA.\" (19,62 s) e \"SEM LIMITES.\" (19,98 s); o nó muda de forma a partir de 20,98 s e a barra conta a porcentagem\n\n | 8\n | 22,48–28,41\n | 08 / PARTÍCULAS 12.000\n | \"CADA QUADRO / É CÓDIGO\" em partículas\n | o nó se desfaz em 12.000 pontos que derivam, viram uma galáxia (24,2 s), escrevem a frase (25,6 s) e colapsam (27,1 s) num ponto laranja (27,75 s); a música está na pausa filtrada\n\n | 9\n | 28,41–31,5\n | 09 / ASSINATURA\n | **CLAUDE.** · \"cada quadro deste reel é código.\"\n | a música volta cheia; o ponto pousa como ponto final de \"CLAUDE.\"; a frase é digitada com cursor a partir de 29,41 s; fade a partir de 30,75 s\n\n## Momentos para a trilha\n\n- 0–4,43 s: intro, com riser no mergulho da bola.\n\n- **4,43 s: drop**, no fundo laranja do \"CADA\".\n\n- 7,46 · 10,46 · 13,45 · 16,45 · 19,45 s: viradas de cena nos bumbos, com tremor de câmera.\n\n- 22,5–28,4 s: pausa filtrada da música, ocupada pelas partículas.\n\n- **28,41 s: volta da música** no \"CLAUDE.\".\n\n- 30,55–31,45 s: fade final."
+    },
+    {
+      "titulo": "A identidade visual",
+      "texto": "**Resumo:** quatro cores chapadas (tinta, creme, laranja e azul) e cromo, uma grotesca variável que estica e comprime na batida, uma bola laranja como fio condutor e três motores numa composição só: DOM para as palavras, canvas 2D para bola e grade, Three.js para cubos, cromo e partículas. A câmera treme em cada impacto e os cortes caem nos bumbos. Números tirados do `index.html`, do `mix.py` e do `cues.txt`.\n\n## Fontes\n\n | \n\n | Uso\n | Fonte\n | Onde baixar\n\n | Palavras (CADA, QUADRO, CÓDIGO, MOVIMENTO, OUSADO., CLAUDE.)\n | Archivo variável, largura 62–125 e peso 100–900; o eixo de largura pulsa na batida\n | Google Fonts / repositório google/fonts\n\n | \"É\" e destaques em itálico\n | Archivo Italic variável (o \"É\" sai a 520 px, peso 300, em azul)\n | Google Fonts\n\n | HUD, rótulos e código\n | JetBrains Mono\n | Google Fonts / JetBrains\n\n## Cores\n\n | \n\n | Token\n | Hex\n | Papel\n\n | Tinta\n | `#0d0d0f`\n | fundo escuro, letras sobre o claro\n\n | Creme\n | `#f2eee5`\n | fundo claro, letras sobre o escuro\n\n | Laranja\n | `#ff5a1f`\n | a bola, fundo do \"CADA\", \"QUADRO\", cubos de destaque, ponto de \"CLAUDE.\"\n\n | Azul\n | `#2d3bff`\n | o \"É\", fundo do \"CÓDIGO\", faixas da parede, cubos de destaque\n\n | Glitch\n | `#ff3b6b` / `#3be8ff`\n | as duas cópias deslocadas de \"CÓDIGO\"\n\n | Cubos neutros\n | `#d9d3c8`\n | o resto do campo 3D\n\n | Cromo\n | material metálico com ambiente RoomEnvironment e painéis laranja e azul\n | o nó\n\nAs cores do original eram parecidas (laranja #ec4921, azul #4247f7, creme #dad6d0); a recriação manteve a família e saturou.\n\n## Peças\n\n | \n\n | Peça\n | Como é\n\n | Bola\n | canvas 2D; quica com squash e stretch, arcos tracejados e rótulos; no mergulho, vem até a câmera e vira o fundo laranja\n\n | Palavra com peso\n | `translateY` com `expo.out` em 0,34 s, mais `scaleY = 1 + 0,32·(1 − mola)` e `scaleX = 1/√scaleY`\n\n | \"QUADRO\"\n | dentro de uma caixa de seleção com alças e a medida ao vivo (\"1280 × 300\")\n\n | \"CÓDIGO\"\n | creme sobre azul, com duas cópias em rosa e ciano deslocadas (glitch RGB) e linhas de código ao fundo\n\n | Grade generativa\n | pontos que viram cruzes, losangos e quadrados em três ondas (8,22 · 8,96 · 9,72 s)\n\n | Campo de cubos\n | Three.js; câmera de cima a `H = 1080/(passo_px·2·tan(fov/2))` (passo de 60 px e fov de 35° dão H = 28,54), `up = (0,1,0)`; os quadrados ganham sombra de extrusão nos 0,45 s finais e sobem com mola; pilares até 3,7, elevação 0,44 rad, distância 16,5, exposição 0,92\n\n | Parede MOVIMENTO\n | fileiras da palavra em faixas azul e creme, com uma faixa central cuja palavra alarga pelo eixo de largura e se achata na saída\n\n | Eco em contorno\n | palavra cheia + 4 cópias só de contorno (traço de 2 px), abrindo para cima e para baixo com 0,04 s de atraso por nível, opacidade 0,32 e 0,14\n\n | Nó de cromo\n | dois `TorusKnotGeometry` com os mesmos segmentos, (2,3) → (3,5), como morph target de posição e normal; legenda \"CROMO · LUZ · PROFUNDIDADE\" e barra \"MORPH 000%\"\n\n | Partículas\n | 12.000 pontos, posição por função do tempo e semente por índice; fases: vértices do nó → deriva → galáxia de dois braços → texto amostrado a cada 3 px → colapso; mistura aditiva, `gl_PointSize = size·62/−z`\n\n | Assinatura\n | \"CLAUDE\" com o ponto laranja e \"cada quadro deste reel é código.\" digitado com cursor\n\n | HUD\n | \"CLAUDE — SHOWREEL 2026\", \"160 BPM · 60 QPS · 1920×1080\", timecode em quadros, rótulo da cena (\"04 / PROFUNDIDADE\") e barra segmentada por cena; a cor troca com o fundo\n\n | Acabamento\n | grão determinístico (canvas de 256 px por hash) e vinheta radial até 55% nas bordas\n\n## Transições\n\n- A bola mergulha na câmera e vira o fundo laranja no drop (4,43 s).\n\n- As palavras se recolhem numa linha, a linha num ponto, e o ponto vira a grade.\n\n- A grade 2D é exatamente o campo de cubos visto de cima; a câmera inclina e os quadrados viram cubos sem corte.\n\n- Um chicote de câmera (13,18 s) leva dos cubos à parede MOVIMENTO.\n\n- A palavra da faixa central da parede alarga e se achata enquanto a parede sai, no bumbo das palavras com eco (16,45 s).\n\n- O zoom entra pelo miolo do \"O\" de \"VIVO.\" (centro medido no glifo) e abre a cena do cromo.\n\n- O nó se desfaz nas partículas; as partículas colapsam num ponto, que vira o ponto de \"CLAUDE.\".\n\n## Curvas e molas\n\n- **Mola padrão:** `spring(u) = 1 − e^(−7,5u)·cos(11u)`, com ~112% de pico e assentamento em ~0,6 s.\n\n- **Curva SAAS** (`bez(0.86, 0, 0.07, 1)`) na inclinação da câmera sobre os cubos.\n\n- **Zoom pelo \"O\":** escala em `exp(ln 90 · expo.in)`, desenhado no canvas.\n\n- **Rotação diferencial da galáxia:** `θ += t·0,9/(0,45 + 0,35r)`.\n\n- **Atraso por partícula** nas fases: `hash(i·7,7)·0,35`.\n\n## Câmera\n\n- 2D: deriva por ruído (±7 px na horizontal, ±5 px na vertical, ±0,22°) somada ao tremor de impacto.\n\n- Tremor: uma lista de impactos com amplitude própria (3 nos quiques, 16 no drop, 18 no \"CLAUDE.\") e decaimento `e^(−9d)` por 0,7 s.\n\n- 3D: a câmera do Three.js tem deriva própria, inclina sobre os cubos e faz o chicote em 13,18 s.\n\n## Trilha\n\n | \n\n | Item\n | Valor\n\n | Música\n | \"Bad Karma\" (Axel Thesleff)\n\n | Trecho\n | 71,84 a 103,34 s da faixa\n\n | Batida\n | a cada 0,75 s, medida com o `beat_this`\n\n | Drop\n | 4,43 s (a música salta de −19 para −8 dB)\n\n | Pausa\n | trecho filtrado de 22,5 a 28,4 s, usado nas partículas\n\n | Volta\n | 28,41 s, no \"CLAUDE.\"\n\n | Ducking\n | a música abaixa nos impactos de 4,43, 10,46, 16,45, 19,45 e 28,41 s e sai em fade a partir de 30,55 s\n\n## Sound design e mix\n\n | \n\n | Ação na tela\n | Efeito\n\n | quiques da bola\n | boing subindo 2 semitons a cada quique + impacto com passa-baixa\n\n | mergulho e drop\n | whoosh longo, riser, impacto, whoosh grave e Ping Boom em Fá (tonal)\n\n | palavras entrando\n | whooshes curtos, cliques e pops; glitch no \"CÓDIGO\"\n\n | ondas da grade\n | cliques e pops em cascata, subindo de tom e passeando no estéreo\n\n | cubos sobem e rolam\n | impacto, whoosh grave, carimbo abafado e cliques e teclas graves de rolagem\n\n | parede MOVIMENTO\n | whooshes curtos em cascata e boing grave abafado na batida\n\n | OUSADO., PRECISO., VIVO.\n | impacto + whoosh curto ou clique por palavra\n\n | nó de cromo\n | riser, impacto, whoosh grave, Ping Boom e sino grave; tinta no morph\n\n | partículas\n | grãos sintetizados com semente fixa (de 1,5 a 9 kHz), sino quando o texto se forma, whoosh invertido na sucção até o ponto\n\n | assinatura\n | impacto duplo + Ping Boom + pop e boing no ponto + teclas na frase digitada\n\n- 152 efeitos, cada um em `at = evento − pico` (pico medido no próprio arquivo). Na faixa só de efeitos, o ataque fica entre −60 e +30 ms do evento; os whooshes entram um pouco antes de propósito.\n\n- **Música a 0,55 e efeitos ×2,2.** Os efeitos nivelados vêm calibrados para ficar sob uma voz; sem voz, somem sob a música.\n\n- **Final:** limitador e `loudnorm` linear em duas passagens: −14,0 LUFS, pico −4,1 dBFS.\n\n## O que é \"humano\" neste vídeo\n\n- A bola tem gravidade, achata no chão e estica no ar; é ela que liga uma cena à outra.\n\n- As letras chegam esticadas, comprimem e assentam, como se tivessem massa.\n\n- A câmera nunca para e responde a cada pancada da música.\n\n- A pausa da música vira o momento mais calmo do vídeo, com as partículas girando em galáxia."
+    },
+    {
+      "titulo": "A montagem no HyperFrames",
+      "texto": "- **Instale o Node.js e o ffmpeg.** O HyperFrames roda pelo `npx`: `npx hyperframes@0.8.144`. Fontes e bibliotecas JavaScript já estão em `projeto/hf/assets/`, então nada vem da internet.\n\n- **Pré-visualize:** dentro de `projeto/hf/`, rode `npx hyperframes@0.8.144 preview`.\n\n- **Render:** de `projeto/`, rode `npx hyperframes@0.8.144 render hf --fps 240 --workers 2 -q delivery`. Nesta cena com WebGL, 2 workers renderam mais rápido que 4 (10 contra 2,3 qps no PC do autor).\n\n- **Motion blur e áudio:** junte o master de 240 qps em 60 qps com `ffmpeg -i <master>.mp4 -i audio/mix-final.wav -filter_complex \"[0:v]tmix=frames=4:weights='1 1 1 1',fps=60,format=yuv420p[v]\" -map \"[v]\" -map 1:a -c:v libx264 -crf 19 -c:a aac -shortest final.mp4`.\n\n- **Refazer o som** (opcional): no `mix.py`, aponte as pastas `S2`, `PREM` e `TON` para `audio/sfx/` e rode `SFX_G=2.2 MUS_G=0.55 python mix.py` (precisa de numpy, soundfile e ffmpeg com rubberband). A saída é `mix-bruto.wav`; depois passe um limitador e o `loudnorm` em duas passagens até −14 LUFS.\n\n**Pegadinhas:** texto DOM escalado 90× estoura a GPU do Chrome (a tela fica branca por quase 2 s), então o zoom pelo miolo do \"O\" de \"VIVO.\" é desenhado no canvas 2D. No shader das partículas, `gl_PointSize = size·62/−z`: com 420 os pontos viram mancha branca, com 38 somem."
+    },
+    {
+      "titulo": "As decisões de direção",
+      "texto": "- **Uma peça só no lugar de duas metades.** O original colava dois reels com cartões de título parados e em silêncio; a recriação junta o melhor das duas metades numa peça contínua, que começa em movimento no quadro 0.\n\n- **A bola como protagonista.** O mesmo objeto quica na abertura, vira o fundo de \"CADA\", vira o acento do \"É\", rola sobre os cubos, sobra das partículas e pousa como ponto final de \"CLAUDE.\".\n\n- **Grade 2D que vira cubos 3D sem corte.** A câmera do Three.js começa olhando de cima, na altura em que o passo da grade bate com o pixel; os quadrados ganham sombra de extrusão e sobem como cubos no bumbo.\n\n- **Letra com peso.** Cada letra chega esticada, comprime e assenta (`scaleY = 1 + 0,32·(1 − mola)`, `scaleX = 1/√scaleY`).\n\n- **Eco em contorno.** OUSADO., PRECISO. e VIVO. ganham quatro cópias só de contorno que se abrem para cima e para baixo.\n\n- **Zoom através do \"O\"** de \"VIVO.\" leva à cena do cromo.\n\n- **Partículas que formam a frase.** O nó de cromo se desfaz em 12.000 pontos, que viram galáxia, escrevem \"CADA QUADRO / É CÓDIGO\" e colapsam no ponto laranja.\n\n- **Corte nos bumbos medidos** (4,43 · 7,46 · 10,46 · 13,45 · 16,45 · 19,45 · 22,48 · 28,41 s) e câmera que nunca para, com tremor em cada impacto.\n\n- **A pausa da música vira respiro:** as partículas ocupam o trecho filtrado de 22,5 a 28,4 s, e a música volta cheia no \"CLAUDE.\".\n\n- **Um som para cada elemento** (152 efeitos), mais grãos sintetizados com semente fixa no brilho das partículas.\n\nDetalhes de cores, curvas e som: estilo.md. Cenas por tempo: roteiro.md. Para fazer um vídeo no mesmo estilo: PROMPT.md."
+    },
+    {
+      "titulo": "As versões até o final",
+      "texto": "| \n\n | Versão\n | O que mudou\n\n | rascunhos v1–v3\n | montagem das cenas; na comparação com o original, o campo de cubos ficou chapado e estourado e foi refeito (pilares até 3,7 de altura, elevação de 0,44 rad, distância 16,5, ambiente sem painéis coloridos, exposição 0,92); uma revisão do áudio pediu mais volume nos cliques da grade e um som de rolagem nos cubos\n\n | **final**\n | render a 240 qps com motion blur para 60 qps, mix a −14 LUFS; é a versão entregue"
+    }
+  ],
+  "pacote": [
+    {
+      "pasta": "projeto/hf/",
+      "conteudo": "a composição (`index.html`), o `BRIEF.md`, `hyperframes.json`, `package.json` e `assets/` com as fontes (Archivo variável romana e itálica, JetBrains Mono) e o JavaScript local (GSAP, Three.js e o RoomEnvironment)"
+    },
+    {
+      "pasta": "audio/",
+      "conteudo": "`mix.py` (música com ducking nos impactos, os efeitos e os grãos sintetizados das partículas), `cues.txt` (a lista dos efeitos com tempo e volume), o trecho da música, a faixa só de efeitos, o mix final e a pasta `sfx/`"
+    },
+    {
+      "pasta": "referencias/",
+      "conteudo": "o vídeo original e o prompt dele, folhas de contato do original, a comparação original × nossa, os recortes de momentos, as folhas a 4 qps e as análises do áudio do original"
+    },
+    {
+      "pasta": "render/",
+      "conteudo": "`render.mp4`"
+    },
+    {
+      "pasta": "T",
+      "conteudo": "a tabela de tempos de cada evento (quiques, palavras, grade, cubos, parede, nó, partículas, assinatura)"
+    },
+    {
+      "pasta": "hash(i)",
+      "conteudo": "o acaso com semente; nada usa `Math.random`"
+    }
+  ],
+  "prompt": "Quero fazer um showreel sem narração no mesmo estilo do projeto \"Cada quadro é código\", que está em 07-videos/projetos/codigo/, com a minha marca.\n\nMarca: {{MARCA}} (site: {{SITE}})\nA frase que as partículas escrevem: {{FRASE}} (na referência, \"CADA QUADRO / É CÓDIGO\")\nAs palavras de peso (três adjetivos com um complemento cada): {{PALAVRAS}} (na referência, OUSADO. / PRECISO. / VIVO.)\nO objeto protagonista: {{OBJETO}} (na referência, uma bola laranja; pode ser o símbolo da marca, um ponto, um produto simples)\nAssinatura final: {{ASSINATURA}}\nDuração aproximada: {{DURACAO}} (a referência tem 31,5 s, 9 cenas)\nFormato: {{FORMATO}} (a referência é 1920×1080; para reels, 1080×1920)\nMúsica: {{MUSICA}} (se vazio, sugira 3 faixas reais com bumbo marcado, um drop no começo e uma pausa no meio)\n(Se algum desses estiver vazio ou com as chaves, me pergunte antes de começar.)\n\n1. Estude o projeto antes de propor qualquer coisa. Leia, nesta ordem: 07-videos/projetos/codigo/LEIA-ME.md, estilo.md e roteiro.md. Depois abra projeto/hf/index.html e veja a tabela de tempos T, as cenas SC e LABELS, o relógio por setter que chama renderAll(t), o tremor de câmera (IMP e shake), o campo de cubos, o nó de cromo e as partículas no Three.js; e o audio/mix.py. Me explique em poucas linhas o que vai reaproveitar e o que vai trocar.\n\n2. Siga o passo a passo de 07-videos/_LEIA.md e os números de 07-videos/regras-vigentes.md. Crie o meu projeto em 07-videos/projetos/AAAA-MM-DD-tema/ a partir de 07-videos/projetos/_modelo/README.md e marque cada etapa no checklist. Não edite os arquivos do projeto codigo: copie o que for reaproveitar.\n\n3. Use as skills instaladas: animacao-saas (objeto protagonista, forma que vira a próxima, mola), motion-app-ae (rota em HTML determinístico), video-referencias (marca real e um som por ação), conteudo-video (regras de vídeo) e better-portuguese (todo texto da tela). Se as skills do HyperFrames estiverem instaladas, leia também as de composição e animação antes de escrever o HTML.\n\n4. A identidade vem da minha marca, de verdade: abra o site, tire o logo em SVG, as cores do CSS e as fontes, e anote cada valor com a fonte num BRAND.md do projeto. Mantenha a lógica de quatro cores chapadas (um escuro, um claro e dois acentos saturados) e uma grotesca variável com eixo de largura para as palavras; se a fonte da marca não tiver esse eixo, use a Archivo variável e deixe a fonte da marca na assinatura.\n\n5. Antes de qualquer código, meça a música com o beat_this e me mostre o mapa: batidas, bumbos onde caem os cortes, o drop e a pausa. Uma técnica por cena, na ordem da referência ou adaptada ao meu assunto (comprimir e esticar → tipografia → grade → profundidade → ritmo → peso → material → partículas → assinatura). Para cada cena, diga onde o objeto protagonista aparece e de que forma a cena nasce da anterior. As partículas ficam na pausa da música e a assinatura entra na volta.\n\n6. Construa reaproveitando o esqueleto do index.html: um relógio só (renderAll(t) chamado por um tween), acaso por hash com semente, letra com peso (chega esticada, comprime e assenta), eco em contorno nas palavras de peso, grade 2D que vira cubos 3D com a câmera de cima na altura calculada, partículas com posição por função do tempo e a frase amostrada de um canvas, câmera com deriva e tremor por impacto. Zoom através de letra vai para o canvas 2D, nunca texto DOM escalado acima de ~10×. Troque cenas, textos, cores, fontes, objeto, material do 3D e música.\n\n7. Me mostre 4 quadros de teste (abertura, drop, partículas e assinatura) e a folha de contato a 4 qps antes do render final. Em cada movimento, pergunte: está humano ou robotizado? Compare também no tamanho do celular.\n\n8. Som em paralelo, num subagente: um efeito para cada elemento que entra ou sai, em evento − pico do arquivo, a mesma família de som para a mesma ação, um tonal no tom da música no drop, no 3D e na assinatura, e grãos sintetizados com semente fixa no brilho das partículas. Sem narração, música em ~0,55 e efeitos ×2,2; limitador e loudnorm em duas passagens a −14 LUFS. Confira a faixa só de efeitos.\n\n9. Render a 240 qps (em cena com WebGL, teste 2 workers) e junte em 60 qps com tmix de 4 quadros. Rode um detector de quadro vazio e de salto; todo salto que sobrar tem de ser um corte de propósito. Entregue o vídeo, a ficha do projeto atualizada e uma anotação em anotacoes/.",
+  "campos": [
+    "ASSINATURA",
+    "DURACAO",
+    "FORMATO",
+    "FRASE",
+    "MARCA",
+    "MUSICA",
+    "OBJETO",
+    "PALAVRAS",
+    "SITE"
+  ],
+  "fonte": {
+    "nome": "Clube do Motion",
+    "url": "https://clubedomotion.com/projeto/?id=codigo",
+    "uso": "liberado pelo dono do Clube do Motion em 18/10/2026 (docs/permissoes/clube-do-motion.md)"
+  }
+}

package/lib/estudio/dados/projetos/clube-distilbook.json

@@ -0,0 +1,104 @@
+{
+  "id": "clube-distilbook",
+  "titulo": "Um bom professor desenha",
+  "categoria": "saas",
+  "resumo": "vídeo de produto de 40 s, em 16:9, para o DistilBook, que transforma um documento num vídeo explicativo desenhado à mão e narrado. É uma recriação do \"Distilbook product video\" de Ajith Pinninti (@ajith_io, fundador do DistilBook), publicado no prompt-motion.com (`ajith-io-c52e09`) e feito numa tentativa só com o Claude Opus 5.5 a partir do pedido \"Research Distilbook\" e do prompt genérico de showreel. A ideia central da recriação está no logo: os três livros (verde, azul e rosa) viram os três passos do produto (enviar, revisar, assistir). Um cartão só viaja num papel contínuo e se transforma de upload em roteiro e de roteiro em tela de desenho; a planta da aula é desenhada no ritmo de uma narração curta, e \"6 minutes.\" cai exatamente no drop da música. Feito em HyperFrames (HTML + GSAP), com 118 efeitos sonoros.",
+  "indicado": "startup ou SaaS que precisa explicar um fluxo em etapas; produto de educação, criação de conteúdo ou documentos.",
+  "estilo": [
+    "papel claro",
+    "letra de mão",
+    "desenho ao vivo",
+    "cartão único",
+    "câmera contínua",
+    "drop no benefício"
+  ],
+  "ficha": {
+    "formato": "1920×1080, 60 qps, 16:9, cor BT.709",
+    "duracao": "40,0 s",
+    "motor": "ae",
+    "voz": "uma frase de 3,94 s em inglês, a narração da aula de exemplo (ElevenLabs, voz \"Bella\", Eleven v4); o resto é texto na tela",
+    "musica": "ver o guia de estilo",
+    "fontes": "ver o guia de estilo"
+  },
+  "ferramentas": [
+    "Claude Code",
+    "After Effects",
+    "ElevenLabs"
+  ],
+  "ficha_tecnica": {
+    "Duração": "40,0 s",
+    "Formato": "1920×1080, 60 qps, 16:9, cor BT.709",
+    "Voz": "uma frase de 3,94 s em inglês, a narração da aula de exemplo (ElevenLabs, voz \"Bella\", Eleven v4); o resto é texto na tela",
+    "Ferramenta": "HyperFrames 0.8.144 (HTML + GSAP); render a 240 qps juntado em 60 qps com motion blur",
+    "Referência": "\"Distilbook product video\" (@ajith_io), 40 s, categoria Product UI",
+    "Trilha": "\"A Sky Full of Stars\" (Coldplay), 125 BPM: intro de piano, emenda no build e drop em 23,04 s",
+    "Som": "118 efeitos; mix final a −14,0 LUFS, pico −1,3 dBTP"
+  },
+  "etapas": [
+    {
+      "titulo": "O roteiro e a voz",
+      "texto": "**Resumo:** o vídeo apresenta o DistilBook em três passos (enviar o material, revisar o roteiro, assistir ao desenho) e depois mostra o que vem junto: o tempo até o primeiro slide, os estilos, os formatos, os idiomas e a marca do cliente. O texto da tela está em inglês, como no site, e foi mantido exatamente como aparece. A única fala é a narração da aula de exemplo, no passo 3.\n\n## Como a história foi montada\n\n- **Gancho:** a frase de um professor escrita à mão (\"A good teacher doesn't read the page. / They draw it.\"), cujo sublinhado vira o logo.\n\n- **Três passos = três livros do logo**, cada um com a sua cor, um título grande e uma linha de apoio.\n\n- **Benefício no drop:** \"Not a week.\" é riscado e \"About 6 minutes.\" cai na volta da música.\n\n- **Lista do que vem junto**, uma cena por item, cada uma nascendo da anterior.\n\n- **Fecho:** o logo se monta como na abertura, com a frase da marca e o botão do site.\n\n## A narração (passo 3)\n\n\"Roots drink water from the soil and send it up the stem to the leaf.\"\n\nElevenLabs, voz \"Bella\", Eleven v4; 3,94 s, começando em 16,30 s do vídeo. O tempo de cada palavra está em `audio/narr-words.json` e comanda o desenho.\n\n## Texto da tela, na ordem\n\n- `A good teacher doesn't read the page.` · `They draw it.`\n\n- `DistilBook` · `Turn any document into an animated explainer video.`\n\n- `Add your material.` · `PDF, Word, notes, a link, or just a topic.` · `Drop your file here` · `PDF, Word, text, or a link` · `Photosynthesis_Chapter7.pdf` · `Reading page 1 of 24`\n\n- `Read the script. Fix any line.` · `Nothing is drawn until you approve it.` · `Narration` · `Slide 2 of 6` · `holes` → `pores` · `Edited ✓` · `Approve narration` → `Approved ✓`\n\n- `Watch every idea get drawn.` · `Each one appears as the voice reaches it.` · legenda karaokê da narração\n\n- `Not a week.` (riscado) · `About` · `6 minutes.` · `to your first narrated slide.`\n\n- `Hand-drawn whiteboard or full motion graphics.` · `19 styles. Every scene is drawn for your content. No stock footage, no avatars.`\n\n- `16:9 or 9:16.` · `For courses and YouTube, or Shorts and Reels.`\n\n- `20` · `narration languages.` · `Written in your language, not translated.`\n\n- `Your logo. Your colours.` · `On every video. Every paid plan, from $20 a month.` · `YOUR LOGO`\n\n- `Turn any document into an animated explainer video.` · `distilbook.com` · `Free to try. No card needed.`\n\n## Cenas por tempo\n\n | \n\n | #\n | Tempo (s)\n | Cena\n | O que acontece\n\n | 1\n | 0–3,3\n | abertura escrita à mão\n | a caneta escreve as duas linhas em Caveat, com pausa entre as palavras, e sublinha \"They draw it.\"\n\n | 2\n | 3,3–7,2\n | logo\n | o texto sai, o sublinhado encolhe e vira uma barra que se divide nos três livros (4,2 s); os livros vão para a esquerda e o nome sai de trás deles com um brilho; a frase da marca entra\n\n | 3\n | 7,2–11,1\n | passo 1, verde\n | a câmera viaja; os livros tombam e viram o indicador de passos; uma semente verde cai do primeiro livro, pousa e infla no cartão de upload; os chips de formato entram; o cursor arrasta o PDF para a área tracejada e a barra lê as 24 páginas\n\n | 4\n | 11,1–15,0\n | passo 2, azul\n | o cartão viaja em arco e vira o editor de roteiro; \"holes\" é selecionado e reescrito como \"pores\" (13,56 s), fica verde e ganha \"Edited ✓\"; o botão \"Approve narration\" afunda e vira \"Approved ✓\"\n\n | 5\n | 15,0–21,0\n | passo 3, rosa\n | o cartão vira a tela 16:9; a narração começa em 16,30 s e a planta é desenhada no ritmo dela (raízes, gotas, caule, folha), com legenda karaokê rosa\n\n | 6\n | 21,1–24,4\n | benefício\n | \"Not a week.\" entra e é riscado (21,92 s); \"About\" entra antes do silêncio; **23,04 s, drop:** \"6 minutes.\" cai, o timer fecha o arco e a câmera atravessa o texto\n\n | 7\n | 23,0–27,3\n | mural de estilos\n | os 14 estilos explodem do centro (30 ms entre cada um), a câmera recua devagar, o anel pula entre os estilos na batida e a câmera mergulha no \"Doodle Color Pop\" (26,40 s)\n\n | 8\n | 27,3–31,0\n | formatos\n | corte casado: o estilo em tela cheia encolhe para o quadro 16:9 e vira o celular 9:16; o celular encolhe numa bolinha azul\n\n | 9\n | 30,7–33,0\n | idiomas\n | a bolinha vira o número, que conta até 20; os chips de idioma entram e depois se juntam no centro\n\n | 10\n | 32,6–35,3\n | marca\n | o quadro \"YOUR LOGO\" sobre um estilo do site, com as bolinhas de cor; no fim ele encolhe e vira o livro azul\n\n | 11\n | 34,9–40,0\n | fecho\n | verde e rosa saltam ao lado do azul e o logo se monta como na abertura; o botão infla de bolinha a pílula, o cursor clica com ondulação e faíscas acendem na batida\n\n## Momentos para a trilha\n\n- 0–7,68 s: intro de piano da música (4 compassos).\n\n- 7,68 s: emenda no build; a voz da música sai antes da narração (15,9 s).\n\n- 16,30–20,24 s: narração, com o instrumental ~11 dB abaixo.\n\n- 22,52–23,04 s: silêncio antes do drop.\n\n- 23,04 s: drop em \"6 minutes.\"; daí até o fim, a parte cheia da música.\n\nOs tempos fortes medidos estão em `audio/sky-beats.json`."
+    },
+    {
+      "titulo": "A identidade visual",
+      "texto": "**Resumo:** a identidade é a do site do DistilBook: tinta azul-marinho, os três livros do logo em verde, azul e rosa, Inter pesada nos títulos e a letra de mão (Caveat) na abertura, sobre um papel creme pontilhado. O movimento é de câmera que viaja num papel contínuo, com um cartão que se transforma e desenho que acompanha a voz; a cor de cada passo acende atrás dele como um brilho suave. Os números saem do `hf/index.html` e do `audio/mix.py`.\n\n## Fontes\n\n | \n\n | Uso\n | Fonte\n | Arquivo no pacote\n\n | Títulos (800, 86 px, espaçamento −0,035 em) e interface\n | Inter 400 a 800\n | `hf/fonts/Inter-400.ttf` … `Inter-800.ttf`\n\n | Abertura escrita à mão\n | Caveat\n | `hf/fonts/Caveat.ttf`\n\nSubtítulos em Inter 500, 28 px, cinza `#64748B`. As palavras dos títulos sobem uma a uma por uma máscara, com mola.\n\n## Cores\n\n | \n\n | Token\n | Hex\n | Papel\n\n | Papel\n | `#FBFAF7`\n | fundo, com pontinhos `#D9D4C8` e vinheta quente bem leve\n\n | Tinta\n | `#0F1729`\n | títulos e texto\n\n | Ardósia\n | `#64748B` / `#94A3B8`\n | subtítulos, abas inativas\n\n | Linha\n | `#E2E8F0`\n | divisores, barra de progresso vazia\n\n | Verde (Add)\n | `#22C55E` (claro `#86EFAC`)\n | livro e passo 1\n\n | Azul (Edit)\n | `#3B69F3` (claro `#93C5FD`)\n | livro e passo 2, aba ativa\n\n | Rosa (Watch)\n | `#DB2777` (claro `#F9A8D4`)\n | livro e passo 3, legenda karaokê\n\nDegradês de texto por passo: verde `#16A34A → #22C55E → #4ADE80`, azul `#2752E0 → #3B69F3 → #6B8EFF`, rosa `#BE185D → #DB2777 → #F472B6`; \"colours.\" usa `#F97316 → #DB2777 → #3B69F3 → #14B8A6`. Atrás de cada passo, um círculo de 1.400 px com a cor clara do livro (≈40%) acende devagar.\n\n## Componentes\n\n | \n\n | Peça\n | Como é\n\n | Logo\n | três livros desenhados a partir do SVG oficial (5,5 px por unidade), com o nome saindo de trás deles por recorte e um brilho em degradê passando no nome\n\n | Indicador de passos\n | os livros deitados viram pílulas \"1 Add\", \"2 Edit\", \"3 Watch\"; a ativa enche com a cor e pulsa de leve\n\n | Cartão\n | branco, borda de 7% de tinta, sombra larga (`0 40px 90px -20px` a 18%); nasce de uma semente: círculo de 60 px → quadrado de 300 px com mola → pausa de 0,08 s → cartão\n\n | Upload\n | área tracejada `#CBD5E1` sobre `#F8FAFC`, raio 22; chips PDF, DOCX, TXT e Web link; arquivo \"Photosynthesis_Chapter7.pdf\" com barra \"Reading page N of 24\"\n\n | Editor de roteiro\n | aba \"Narration\", selo \"Slide 2 of 6\", três parágrafos; \"holes\" vira \"pores\" com seleção azul; \"Approve narration\" aperta e vira \"Approved ✓\"\n\n | Tela de desenho\n | 16:9 dentro do cartão; planta em SVG com rótulos \"roots\", \"water\", \"leaf factory\", \"sunlight\"; legenda karaokê rosa embaixo\n\n | Mural\n | os 14 quadros de estilo do site num plano 3D inclinado; um anel pula entre eles na batida\n\n | Celular\n | o quadro 16:9 vira um celular 9:16, com seletor 16:9 / 9:16\n\n | Idiomas\n | contador até 20 e grade de chips que se juntam no centro ao sair\n\n | Marca\n | quadro \"YOUR LOGO\" sobre um estilo do site e bolinhas de cor\n\n | Fecho\n | logo montado como na abertura, frase da marca, botão `distilbook.com` que infla de bolinha a pílula, clique com ondulação e faíscas na batida\n\n## Transições\n\nTudo acontece num \"mundo\" de papel; a câmera viaja entre estações em 0,64 a 0,88 s com a curva SAAS e o cartão segue em arco, um quadro atrasado. A semente vira cartão, o cartão vira roteiro e o roteiro vira tela. No drop, a câmera atravessa o texto (+220% de zoom em 0,6 s). Do mural ao celular, corte casado: o quadro 16:9 em tela cheia vira o quadro da cena seguinte. O celular encolhe numa bolinha azul que vira o número de idiomas; os chips de idioma se juntam no quadro da marca; o quadro da marca vira o livro azul.\n\n## Curvas e molas\n\n | \n\n | Nome\n | Curva\n | Uso\n\n | SAAS\n | `cubic-bezier(.86, 0, .07, 1)`\n | viagens de câmera, nome saindo dos livros\n\n | SOFT\n | `cubic-bezier(.45, 0, .2, 1)`\n | assentamentos e o recuo do mural\n\n | INE\n | `cubic-bezier(.33, 0, .67, 1)`\n | saídas suaves\n\n | OUT\n | `cubic-bezier(.16, 1, .3, 1)`\n | entradas rápidas\n\n | INQ\n | `cubic-bezier(.55, 0, .9, .4)`\n | câmera atravessando o texto no drop\n\n- **Mola padrão:** linear de 0 a 1 em 0,25 s e inércia de amplitude 0,05, frequência 2, decaimento 4 (~112%). Vale para palavras, chips, semente e botão.\n\n- **Escrita à mão:** máscara em degradê cuja borda anda com a ponta da caneta, com pausa entre palavras; a caneta treme na vertical. No desenho, a caneta segue a ponta do traço real (`getPointAtLength`).\n\n- **Motion blur:** render a 240 qps e `tmix=frames=4` para 60 qps; rastro visível nas viagens, no mergulho do mural e nos livros tombando.\n\n## Câmera\n\nQuatro viagens (7,20–8,00 · 11,12–11,96 · 15,04–15,92 · 20,92–21,56 s). Em cada parada, um empurrão lento de +1,0 a +1,4% por segundo que volta a zero dentro da viagem seguinte, na mesma curva. Por cima, sempre: deriva senoidal em duas frequências (±5 e ±2,5 px em x, ±4 e ±2 px em y), ±0,3% de escala e rotação de até ~0,17°.\n\n## Trilha\n\n | \n\n | Item\n | Valor\n\n | Música\n | \"A Sky Full of Stars\" (Coldplay), 125 BPM\n\n | Montagem\n | vídeo 0–7,68 s = música 0,76–8,44 s (4 compassos da intro de piano); 7,68–23,04 s = música 62,22–77,58 s (build); 23,04–40 s = música 77,58–94,54 s (drop)\n\n | Voz da música\n | separada pelo Demucs e retirada antes da narração; instrumental ~11 dB abaixo dela\n\n | Narração\n | \"Roots drink water from the soil and send it up the stem to the leaf.\" (3,94 s), a partir de 16,30 s\n\n | Respiro\n | instrumental a zero de 22,52 a 23,04 s (−43 dB medido)\n\n | **Drop**\n | **23,04 s**, em \"6 minutes.\", com Ping Boom em Fá sustenido, impacto e whoosh grave\n\n## Sound design e mix\n\n | \n\n | Ação na tela\n | Efeito\n\n | escrita à mão, desenho da planta\n | caneta (quatro variações)\n\n | texto sai, câmera viaja\n | whoosh curto ou longo\n\n | livros nascem, chips, semente pousa\n | pop, com tom subindo em sequência\n\n | nome sai de trás dos livros, PDF arrastado\n | papel deslizando, páginas virando\n\n | digitação no roteiro\n | tecla de teclado\n\n | clique do cursor, aprovação\n | clique de mouse, sucesso, carimbo\n\n | gotas da planta\n | pop com tom variando\n\n | leitura das páginas, contador de idiomas\n | contador rolando\n\n | timer do \"6 minutes\"\n | tique de relógio\n\n | antes do drop / no drop\n | riser / impacto + Ping Boom + whoosh grave\n\n | fecho\n | sino e três pops subindo\n\n- 118 efeitos em `at = evento − pico`; mesma família de som para a mesma ação, com tom variado.\n\n- Barramentos: música a −19 LUFS, narração a ~−17 LUFS no trecho dela, efeitos ×2,2; depois limitador (`alimiter` 0,74) e `loudnorm` até −14,0 LUFS, pico −1,3 dBTP. As três camadas do drop ficam a ~0,25 cada (somadas, passavam de +2,5 dBTP).\n\n- Sincronia medida na faixa só de efeitos: erro mediano de 24 ms nos efeitos de ataque.\n\n## O que é \"humano\" neste vídeo\n\n- A letra de mão escreve com pausas entre as palavras, como uma mão de verdade.\n\n- O traço da planta treme como lápis, e a caneta acompanha a ponta.\n\n- Os livros respiram na batida e \"deitam\" em vez de se achatarem.\n\n- O cartão respira de tamanho enquanto viaja.\n\n- O botão de aprovar afunda antes de virar \"Approved ✓\".\n\n- O silêncio antes do drop segura a frase \"About…\" e solta \"6 minutes.\" com tudo."
+    },
+    {
+      "titulo": "A montagem no HyperFrames",
+      "texto": "| \n\n | Arquivo\n | O que faz\n\n | `hf/index.html`\n | a composição: uma função `frame(t)` desenha o quadro inteiro a partir do tempo, chamada por um único tween de 40 s; a câmera do \"mundo\" (`camW`) e o cronograma do desenho (`DRAW`, relativo ao início da narração) ficam no mesmo arquivo\n\n | `audio/mix.py`\n | monta a música (4 compassos da intro, emenda no build, respiro e drop), tira a voz da música sob a narração, soma os efeitos em `evento − pico` e nivela por barramento: música −19 LUFS, narração ~−17 LUFS no trecho dela, efeitos ×2,2; grava `mix-pre.wav` e `so-efeitos.wav`\n\n | `render/montar.sh`\n | junta o render de 240 qps em 60 qps com `tmix` de 4 quadros, põe o áudio final e monta a comparação com o original\n\nO `mix-final.wav` sai do `mix-pre.wav` com limitador (`alimiter` 0,74) e `loudnorm` para −14 LUFS e no máximo −1 dBTP.\n\n- **Instale o básico:** Node.js (para o `npx`), ffmpeg e Python 3 com numpy, librosa, soundfile, scipy e pyloudnorm. As fontes e o GSAP já vêm no pacote.\n\n- **Monte a pasta:** deixe `hf/` e `render/` como vieram e coloque `audio/` ao lado delas; o `mix.py` lê a música e as partes separadas da própria pasta `audio/`.\n\n- **Veja a composição:** dentro de `hf/`, rode `npx --yes hyperframes@0.8.144 preview`, ou `npm run check` para validar.\n\n- **Refaça o som** (opcional): no `mix.py`, aponte `N` para `audio/sfx/nivelados` e `TON` para `audio/sfx/tonais` e rode `python audio/mix.py`.\n\n- **Render:** da pasta do projeto, `npx --yes hyperframes@0.8.144 render hf --fps 240 --quality high --workers 3 --output render/raw240.mp4` (levou de 13 a 20 min com outros renders rodando), depois `bash render/montar.sh`. Para a comparação, aponte `REF` para o vídeo original em `referencias/original/`.\n\n**Pegadinhas:** `filter: drop-shadow` direto num texto com `background-clip: text` desenha um retângulo claro atrás da palavra; a sombra vai no título inteiro. O empurrão lento de câmera em cada parada precisa voltar a zero dentro da viagem, na mesma curva; se zerar no primeiro quadro da viagem, aparece um pulo de zoom. Depois de todo render, rode o detector de saltos: quadro com diferença maior que 3× a mediana dos vizinhos é salto a explicar ou corrigir."
+    },
+    {
+      "titulo": "As decisões de direção",
+      "texto": "- **A marca do site, conferida no dia.** Paleta, logo, ícones, slides e estilos vieram do site. Os números também: \"Turn any document into an animated explainer video\", 20 idiomas e planos a partir de US$ 20 (o original estava com dados velhos).\n\n- **O logo conta o produto.** O sublinhado da frase de abertura vira uma barra, a barra se divide nos três livros, e cada livro é um passo: verde = Add, azul = Edit, rosa = Watch. No fecho, o quadro da marca encolhe e vira o livro azul.\n\n- **Tombar em vez de achatar.** Para virar o indicador de passos, cada livro gira 90° enquanto troca largura e altura, e só no fim troca para a pílula sem giro; morfar direto passava por um quadrado feio.\n\n- **Um cartão só.** Uma semente verde cai do primeiro livro, infla como círculo, quadrado e cartão, e esse cartão viaja em arco entre as estações: upload, roteiro, tela de desenho.\n\n- **Desenho no ritmo da voz.** A planta é um SVG feito à mão com `stroke-dashoffset`, aguada de cor depois do traço e um filtro de turbulência para tremer como lápis; cada parte entra quando a narração diz a palavra (raízes, gotas, caule, folha), e a caneta segue a ponta do traço.\n\n- **Respiro e drop.** A música vai a zero na última batida antes do drop (22,52–23,04 s); \"About\" entra antes do silêncio e \"6 minutes.\" cai no primeiro quadro do drop, quando os 14 estilos explodem por trás.\n\n- **Câmera que nunca para.** Num papel pontilhado contínuo, a câmera viaja entre as estações e, em cada parada, empurra devagar (+1 a 1,4% por segundo) com deriva por cima.\n\n- **Corte casado no mural.** O mergulho termina com um quadro 16:9 em tela cheia, e a cena seguinte começa com a mesma imagem, que encolhe para o quadro e vira o celular 9:16.\n\nDetalhes de cores, curvas e som: estilo.md. Cenas por tempo: roteiro.md. Para fazer um vídeo no mesmo estilo: PROMPT.md."
+    },
+    {
+      "titulo": "As versões até o final",
+      "texto": "| \n\n | Versão\n | O que mudou\n\n | v1\n | vídeo completo; o detector achou quatro pulos de zoom (7,2 / 11,13 / 15,05 / 20,93 s), uma troca seca de cor da semente para o cartão (8,57 s) e um \"levanta\" binário no mural (25,45 s)\n\n | v2\n | saíram os pulos de zoom, a cor seca e o \"levanta\" binário\n\n | **v3**\n | editor de roteiro mais legível (texto de 25 px, cartão 900×540) e sem a caixa clara atrás das palavras com degradê; só resta o clarão intencional do drop"
+    }
+  ],
+  "pacote": [
+    {
+      "pasta": "projeto/",
+      "conteudo": "`hf/index.html` (a composição inteira), `hf/gsap.min.js` local, as fontes Inter (400 a 800) e Caveat em `hf/fonts/`, os assets reais do site em `hf/assets/` (logo e marca em SVG, ícones PDF/DOCX/TXT, 24 slides e 14 quadros de estilo), `hf/BRIEF.md`, os arquivos do projeto HyperFrames e o `render/montar.sh`"
+    },
+    {
+      "pasta": "audio/",
+      "conteudo": "mix final, faixa só de efeitos (`so-efeitos.wav`), narração (`narr.mp3`) e o tempo de cada palavra (`narr-words.json`), a música e as partes separadas pelo Demucs (voz e instrumental), as batidas (`sky-beats.json`), o `mix.py` e os efeitos usados em `audio/sfx/`"
+    },
+    {
+      "pasta": "referencias/",
+      "conteudo": "o vídeo original, o prompt original, as folhas de contato do original, a comparação lado a lado, o `APRENDIZADOS.md`, a análise do áudio do original, os painéis dos slides e dos estilos do site, e os logos e ícones baixados do site"
+    },
+    {
+      "pasta": "render.mp4",
+      "conteudo": "o vídeo final"
+    },
+    {
+      "pasta": "hf/index.html",
+      "conteudo": "a composição: uma função `frame(t)` desenha o quadro inteiro a partir do tempo, chamada por um único tween de 40 s; a câmera do \"mundo\" (`camW`) e o cronograma do desenho (`DRAW`, relativo ao início da narração) ficam no mesmo arquivo"
+    },
+    {
+      "pasta": "audio/mix.py",
+      "conteudo": "monta a música (4 compassos da intro, emenda no build, respiro e drop), tira a voz da música sob a narração, soma os efeitos em `evento − pico` e nivela por barramento: música −19 LUFS, narração ~−17 LUFS no trecho dela, efeitos ×2,2; grava `mix-pre.wav` e `so-efeitos.wav`"
+    },
+    {
+      "pasta": "render/montar.sh",
+      "conteudo": "junta o render de 240 qps em 60 qps com `tmix` de 4 quadros, põe o áudio final e monta a comparação com o original"
+    }
+  ],
+  "prompt": "Quero um vídeo de produto no mesmo estilo do projeto \"Um bom professor desenha\" (DistilBook), que está em 07-videos/projetos/distilbook/, para o meu produto.\n\nProduto: {{PRODUTO}}\nSite: {{SITE}} (pesquise o produto e tire de lá a identidade, os passos e os números)\nOs passos do produto (2 a 4): {{PASSOS}}\nO benefício principal, em poucas palavras, para cair no drop: {{BENEFICIO}}\nO que vem junto (até 4 itens): {{EXTRAS}}\nChamada final e endereço: {{CHAMADA}}\nDuração aproximada: {{DURACAO}} (a referência tem 40 s, 16:9)\n(Se algum desses estiver vazio ou com as chaves, me pergunte antes de começar.)\n\n1. Estude o projeto antes de propor qualquer coisa. Leia, nesta ordem: LEIA-ME.md, estilo.md e roteiro.md da pasta distilbook e o referencias/APRENDIZADOS.md. Abra o projeto/hf/index.html e me explique em poucas linhas como funcionam a função frame(t), a câmera do mundo (camW), o cartão único e o cronograma do desenho (DRAW), e o que você vai reaproveitar.\n\n2. Pesquise a marca no site, no dia: baixe o logo em SVG, ícones, imagens de vitrine e o CSS (cores e fontes) e confira os números que aparecem no site (preço, quantidades). Anote cada valor com a fonte. Nada de dado velho.\n\n3. Olhe o meu logo e veja se ele tem partes (formas, letras, barras, pontos). Se tiver, proponha cada parte como um passo do produto, com a cor dela, e como o logo se monta na abertura e volta no fecho. Se não tiver, proponha outro objeto da marca que possa fazer esse papel. Me mostre a estrutura cena a cena, com o respiro antes do drop e o benefício caindo nele, antes de construir.\n\n4. Se houver uma frase narrada (como a aula de exemplo da referência), escreva só a estrutura e espere eu aprovar o texto; gere a voz na ElevenLabs, confira as palavras no faster-whisper e use o tempo de cada palavra para comandar o desenho.\n\n5. Trilha num subagente: música real que eu ainda não usei. Meça com o beat_this, emende por compasso para o drop cair no benefício, zere o instrumental na última batida antes do drop e tire a voz da música (Demucs) onde houver narração. Entregue o mapa de tempos.\n\n6. Reaproveite a engenharia, troque o conteúdo. Mantenha: tudo como função do tempo num único tween, câmera viajando num papel contínuo com empurrão lento em cada parada (que volta a zero dentro da viagem, na mesma curva) e deriva por cima, a mola padrão (0,25 s linear + ~112%), a curva SAAS nas viagens, o cartão que nasce de uma semente e se transforma, os títulos palavra a palavra com mola, a escrita à mão com pausas, o desenho em SVG com stroke-dashoffset e traço de lápis, o \"tombar em vez de achatar\" e o motion blur por subquadros (240 qps + tmix de 4). Troque: textos, cores, fontes, logo, passos, imagens e trilha.\n\n7. Som: um efeito para cada elemento que entra, sai, é escrito ou clicado, em evento − pico, mesma família para a mesma ação. Mix por barramentos: música a −19 LUFS, narração a ~−17 no trecho dela, efeitos ×2,2, limitador e loudnorm até −14 LUFS e −1 dBTP. Se as camadas do drop estourarem o pico, baixe cada uma.\n\n8. Antes do render completo, me mostre 4 quadros: a abertura, um passo no meio, o drop e o fecho. Depois do render, rode o detector de saltos e corrija todo pulo que não for intencional. Em cada movimento, pergunte: está humano ou robotizado? Entregue o vídeo, a ficha do projeto e uma anotação do que aprendeu.",
+  "campos": [
+    "BENEFICIO",
+    "CHAMADA",
+    "DURACAO",
+    "EXTRAS",
+    "PASSOS",
+    "PRODUTO",
+    "SITE"
+  ],
+  "fonte": {
+    "nome": "Clube do Motion",
+    "url": "https://clubedomotion.com/projeto/?id=distilbook",
+    "uso": "liberado pelo dono do Clube do Motion em 18/10/2026 (docs/permissoes/clube-do-motion.md)"
+  }
+}

package/lib/estudio/dados/projetos/clube-drive-upload.json

@@ -0,0 +1,115 @@
+{
+  "id": "clube-drive-upload",
+  "titulo": "O cursor conduz",
+  "categoria": "saas",
+  "resumo": "vídeo quadrado de 11 s a 60 qps, sem narração, no estilo Startup SaaS, que conta o fluxo de upload do Google Drive com um componente virando o próximo: o botão \"New\" vira o menu, o menu vira um cartão pequeno, o cartão vira o diálogo, o diálogo vira o progresso, e a cena escura inteira encolhe numa esfera que vira o check verde. Um cursor de mão guia o olho o tempo todo, e o clique no botão vira o mundo para o modo escuro em nove quadros. A comp sai de um script do After Effects (`cenas.jsx`) e o som, de um script Python na Mesa. Recriação do estilo de @illdari, feita pelo Clube do Motion.",
+  "indicado": "demonstração de fluxo de app ou SaaS (upload, cadastro, checkout, envio), anúncio de recurso, tutorial curto de interface, abertura de produto com cursor.",
+  "estilo": [
+    "Startup SaaS",
+    "cursor como fio condutor",
+    "componente que vira o próximo",
+    "modo escuro no clique",
+    "lente que encolhe até o check",
+    "tipografia que se acomoda"
+  ],
+  "ficha": {
+    "formato": "1080×1080, 60 qps, desfoque de movimento com obturador de 270° e 16 amostras",
+    "duracao": "10,98 s (659 quadros), sem narração",
+    "motor": "ae",
+    "voz": "ver o guia de estilo",
+    "musica": "ver o guia de estilo",
+    "fontes": "Google Sans Flex (Regular e Medium), a família livre mais próxima da fonte do Drive"
+  },
+  "ferramentas": [
+    "Claude Code",
+    "After Effects"
+  ],
+  "ficha_tecnica": {
+    "Duração": "10,98 s (659 quadros), sem narração",
+    "Formato": "1080×1080, 60 qps, desfoque de movimento com obturador de 270° e 16 amostras",
+    "Ferramenta": "After Effects: um script ExtendScript (`cenas.jsx`) monta, no projeto aberto, a comp `RECRIACAO` e a precomp `CENA ESCURA`; a cada execução refaz as duas e reaproveita os assets já importados",
+    "Assets": "o ícone oficial do Google Drive (SVG da Wikimedia) separado em três peças por `fazer_logo_drive.py`, cursor de mão do macOS (PNG livre da Wikimedia); ícones do menu, arquivo, filmes e check desenhados como camadas de forma",
+    "Fonte": "Google Sans Flex (Regular e Medium), a família livre mais próxima da fonte do Drive",
+    "Trilha": "instrumental de \"Wow.\", de Post Malone (voz separada com o Demucs), a partir de 19,2 s, a batida cheia",
+    "Som": "44 eventos marcados na comp, um efeito por ação de interface, sem tonais; −14,0 LUFS e pico verdadeiro de −1,3 dBFS",
+    "Referência": "edit \"Google Drive in a premium motion\", de @illdari (12/08/2026), estudado quadro a quadro",
+    "Arquivo final": "MP4 H.264 com áudio AAC, 8,5 MB"
+  },
+  "etapas": [
+    {
+      "titulo": "O roteiro",
+      "texto": "**Resumo:** o vídeo não tem narração; o roteiro é o fluxo de upload, tela por tela, com o texto que aparece em cada uma e os tempos do `cenas.jsx`. Os textos ficam no bloco `TX`. Com outro app, mantenha a regra: o cursor justifica cada troca e o mesmo componente muda de forma do começo ao fim.\n\n## De onde veio a estrutura\n\nO edit estudado conta em 11 s o upload de um arquivo no Drive: logo, botão, clique, menu, arquivo, nome digitado, progresso, check e uma frase de marca. Este projeto mantém as telas, os tempos e o cursor, com texto de exemplo nosso no menu e no campo digitado.\n\n## Cenas e texto na tela\n\n | \n\n | Tempo (s)\n | Tela\n | Texto na tela\n\n | 0,00–1,32\n | branco com nuvens pastel; o logo do Drive se monta peça por peça, girando\n | —\n\n | 1,32–2,15\n | o nome se escreve ao lado do logo; tudo gira e se dissolve\n | \"Drive\"\n\n | 2,15–2,78\n | o botão nasce de uma mancha azul; o cursor sobe até ele\n | \"+ New\"\n\n | 2,78–3,25\n | clique: o fundo escurece, um anel azul se abre e o botão vira o cartão do menu\n | —\n\n | 2,98–3,94\n | os itens entram um por um; o cursor faz arcos e o destaque sobe pelas linhas\n | \"Upload file\", \"Scan document\", \"Take photo\", \"Meu perfil\"\n\n | 3,94–4,98\n | clique em \"Upload file\": o menu vira um cartão pequeno; o arquivo sobe e entra nele\n | \"Upload file\"\n\n | 5,00–6,51\n | o cartão vira uma barra azul e depois o campo do diálogo; a frase se escreve com a seleção azul\n | \"New Folder\", \"Send the project file via DM\", \"Cancel\", \"Upload\"\n\n | 6,51–7,55\n | clique em \"Upload\": o diálogo vira o cartão de progresso; as barras verdes crescem\n | \"Your file is uploading...\"\n\n | 7,55–7,87\n | a cena escura vira uma esfera que encolhe sobre o branco até a bolinha verde\n | —\n\n | 7,74–8,62\n | o check se desenha; \"Done\" sobe em onda e cai letra por letra\n | \"Done\"\n\n | 8,59–10,40\n | a frase final se acomoda em duas linhas e apaga\n | \"Keep everything\", \"Share anything.\"\n\n | 10,40–10,98\n | branco\n | —\n\n## Momentos para o som\n\n- A base com hi-hat entra no começo, 13 dB abaixo do nível do arquivo, e sai com fade de 0,6 s; os efeitos de interface ficam na frente.\n\n- Um efeito por ação: pop no logo nascendo e nas peças encaixando, whoosh no giro, brilho no logo pronto, uma tecla por letra de \"Drive\", saída do texto, pílula do botão, subida do cursor, clique e morph, pop por item do menu, teclas no hover, clique e encolhimento do menu, subida e pouso do arquivo, abertura do diálogo, digitação, clique em \"Upload\", carregamento, whoosh com o pico no fim da esfera, check, letras do \"Done\" e da frase final, e a saída.\n\n- Sem tonais: o tom da base não foi confirmado."
+    },
+    {
+      "titulo": "A identidade visual",
+      "texto": "**Resumo:** começo branco com nuvens pastel nas cores do Google, miolo preto com cartões quase pretos, borda cinza fina e halo azul-escuro, azul de ação `#2C70F7`, barras verdes de progresso e um check verde-neon. Google Sans Flex em todo o texto. Números tirados do `cenas.jsx` (q = quadro a 60 qps).\n\n## Palco\n\n | \n\n | Peça\n | Como é\n\n | Tela\n | 1080×1080, 60 qps\n\n | Desfoque de movimento\n | obturador de 270°, fase −135°, 16 amostras, limite adaptativo 128\n\n | Montagem\n | comp `RECRIACAO` (fundo branco, nuvens, logo, cursor e final) com a precomp `CENA ESCURA` no meio (botão, menu, upload, diálogo e progresso)\n\n | Câmera\n | não há: o movimento vem do cursor, do halo e das nuvens\n\n## Cores\n\n | \n\n | Peça\n | Valor\n\n | Fundo claro\n | branco, com nuvens `#C3D7FB` (760 px), `#FBEDB2` e `#C9EED3` (720 px), desfoque 280, opacidade 60%, `wiggle(0.3, 60)`\n\n | Fundo escuro\n | preto, entrando a 24%, 77% e 100% entre 2,78 e 2,95 s\n\n | Cartão\n | branco no botão, `#2A2D31` no meio do clique, `#050505` no escuro; traço `#55595E` de 2,5 px; barra azul `#2C70F7` no meio do caminho até o campo `#090909`\n\n | Halo\n | `#2C70F7` no branco, `#081A3A` no escuro, desfoque 90, 110 px maior que o cartão\n\n | Anel do clique\n | traço `#2F5FD0` de 70 px, desfoque 120\n\n | Destaques\n | hover do menu `#102347`; hover de \"Upload\" `#11306A`; seleção do texto `#2C70F7` a 55%\n\n | Upload\n | arquivo em duas folhas, azul `#3E7CF2` e verde `#2DB84B`; filmes `#E0313F`; barras `#4ADE4A`\n\n | Final\n | bolinha `#33F233` de 185 px com check `#0A0A0A`; \"Done\" `#2FD12F`; frase em `#111111`, segunda palavra entrando em `#9AA0A6`, letras novas em `#6595EB`\n\n## Fontes\n\n | \n\n | Fonte\n | Onde\n\n | Google Sans Flex Regular\n | \"Drive\" (ajustado a 272 px de largura), botão \"New\", menu, diálogo, progresso e frase final\n\n | Google Sans Flex Medium\n | \"Done\"\n\n## Cena a cena\n\n | \n\n | Cena\n | Números\n\n | Logo (0–2,15 s)\n | peças de 1.600 px a 11,7%; o null do logo gira de 100° a 395° com curva contínua; a peça azul nasce de 0 em 9 q; a amarela (0,80 s) e a verde (0,93 s) chegam de 62 px do encaixe em 11 q; o logo desliza para a esquerda entre 1,36 e 1,84 s\n\n | \"Drive\"\n | letra a letra a partir de 1,32 s, 5 q entre letras, 12 q cada, com desfoque 10 e tracking 40 zerando\n\n | Saída do logo (1,92–2,15 s)\n | escala X de 100 para 30% (o giro em Y simulado pela largura), desfoque 35 e opacidade a zero\n\n | Botão (2,15–2,84 s)\n | nasce de 80% com desfoque 40 em 0,25 s; o \"+\" gira de 45° a 0°; o cursor sobe de y 1.160 a 592 entre 2,33 e 2,74 s; clique com o cursor a 85% e o botão a 95%\n\n | Modo escuro (2,78–3,16 s)\n | fundo a preto em 9 q; anel de 300 a 1.150 px entre 2,84 e 3,16 s; o cartão cresce para 652×522 até 3,25 s com curva contínua\n\n | Menu (2,98–4,24 s)\n | quatro linhas a cada 11 q, ícone entrando 10 px da esquerda em 8 q e texto letra a letra; o destaque sobe pelas linhas entre 3,42 e 3,86 s; no clique (3,94 s) os outros itens somem com desfoque 10 em 8 q e o cartão vira 328×328\n\n | Upload (4,38–5,32 s)\n | o arquivo sobe de y 1.150 a 506 em 0,48 s girando de −12° a 0°; o cartão estica para a barra azul de 866×104 e escurece no campo de 850×112\n\n | Diálogo (5,22–6,62 s)\n | a frase se escreve em 0,33 s, uma letra por quadro, com a seleção azul na ponta e o cursor de texto piscando antes; clique em \"Upload\" em 6,51 s\n\n | Progresso (6,56–7,55 s)\n | o cartão cresce para 855×374; filmes entram de baixo em 0,32 s; barras crescem de 6,85 a 7,20 s e de 6,92 a 7,25 s\n\n | Esfera (7,53–7,87 s)\n | CC Lens com tamanho de 105 para 44, 12,5 e 0 e convergência de 0 para 60; tinta verde de 7,70 a 7,79 s\n\n | Check e \"Done\" (7,74–8,62 s)\n | bolinha de 140 para 100% com desfoque 18; check desenhado entre 7,86 e 8,00 s; \"Done\" sobe 24 px em onda (4 q por letra), escurece e cai 54 px a partir de 8,17 s; a bolinha some entre 8,43 e 8,62 s\n\n | Frase final (8,59–10,40 s)\n | a primeira palavra entra a 120% com desfoque 15 e vai para a esquerda; a segunda entra cinza, mais alta e à direita, e desce até a linha; a segunda linha se escreve a partir de 9,30 s, 0,04 s por letra; tudo apaga entre 10,00 e 10,40 s\n\n## O que é \"humano\" neste vídeo\n\n- O cursor viaja com curva contínua entre os pontos e só segura onde vai clicar; os cliques encolhem a mão para 85% por 0,09 s.\n\n- O cartão passa pelas formas intermediárias com curva contínua, sem parar entre um tamanho e outro.\n\n- As nuvens nunca param: deriva lenta mais a troca de canto entre as cenas.\n\n- A frase final se acomoda em alturas diferentes antes de assentar, em vez de entrar alinhada."
+    },
+    {
+      "titulo": "A montagem no After Effects",
+      "texto": "| \n\n | Arquivo\n | O que faz\n\n | `ae/cenas.jsx`\n | no topo ficam a fonte e o bloco `TX` (marca, botão, itens do menu, diálogo, frase digitada, progresso, \"Done\" e a frase final). `K` grava chaves com influência, `\"H\"` (segura) e `\"A\"` (curva contínua); `entra` e `sai` fazem a entrada e a saída padrão pelo desfoque; `anim` cria animadores de texto com seletor por expressão, e `eIn` e `eOut` dão a onda letra a letra. Um único retângulo (`Cartao`) carrega o botão, o menu, o cartão pequeno, a barra, o campo e o progresso. A lente da esfera é um CC Lens na precomp escura. Cada evento vira um marcador na comp\n\n | `ae/google-drive-premium.aep`\n | o resultado do script, pronto para abrir e renderizar\n\n | `ae/fazer_logo_drive.py`\n | desenha as três peças do ícone (azul, amarela e verde) em PNGs de 1.600 px na mesma tela, a partir do SVG oficial\n\n | `audio/trilha.py`\n | põe a base 13 dB abaixo, toca um efeito por evento pelo mapa padrão (pop no logo nascendo, whoosh no giro e na esfera) e mixa para −14 LUFS\n\n | `audio/mesa/`\n | o motor de mix e o mapa de sons por tipo de evento\n\n- **Fonte:** instale Google Sans Flex (Google Fonts) em `C:\\Program Files\\Common Files\\Adobe\\Fonts` e reinicie o After Effects.\n\n- **Juntar as pastas:** copie `audio/` para dentro de `projeto/`.\n\n- **Abrir:** `projeto/ae/google-drive-premium.aep`. Se o AE pedir arquivos, aponte para `projeto/assets/`.\n\n- **Adaptar:** troque o `TX` e as imagens e rode File › Scripts › Run Script File › `cenas.jsx` com o projeto aberto (ou num projeto novo). Ele refaz `RECRIACAO` e `CENA ESCURA` em cerca de 2 s; salve o projeto depois.\n\n- **Som:** no topo do `trilha.py`, aponte o `sys.path.insert` para a pasta `audio/mesa`, ponha a base em `audio/musica.wav` e rode `python audio/trilha.py`. Precisa de numpy, scipy, soundfile, librosa e pyloudnorm; no topo do `mesa.py`, aponte as pastas de efeitos para a sua biblioteca. Mudou um tempo no script? Os marcadores da comp mostram os eventos novos; atualize o `eventos.json`.\n\n- **Render:** fila do AE em H.264 a 60 qps e o `mix.wav` colado com o ffmpeg: `ffmpeg -i video.mp4 -i audio/mix.wav -map 0:v -map 1:a -c:v copy -c:a aac -b:a 320k -shortest final.mp4`.\n\n**Pegadinhas:** para a esfera ficar verde no fim, use Tint; um Fill com opacidade 0 apaga a camada inteira. No CC Lens, o diâmetro do círculo é cerca de 15,2 px por unidade de Size: 105 cobre a tela até os cantos, 44 dá a esfera de 674 px e 12,5 a bolinha do check. A seleção azul do campo segue o fim do texto por `sourceRectAtTime` e `toComp`. O `aerender` não aceita caminho com acento."
+    },
+    {
+      "titulo": "As decisões de direção",
+      "texto": "- **O cursor diz para onde olhar.** Ele sobe até o botão, faz arcos com rastro, passa pelos itens do menu, desce para buscar o arquivo e clica em \"Upload\"; cada troca tem um gesto que a justifica.\n\n- **Um retângulo só.** Botão, menu, cartão, barra, campo e progresso são a mesma camada mudando de tamanho, raio e cor, em 10 a 14 quadros por troca.\n\n- **O clique muda o clima.** O fundo vai de branco a preto em nove quadros, passando por cinza, com um anel azul se abrindo do botão.\n\n- **A esfera fecha a sequência.** A cena escura inteira encolhe numa lente bojuda até a bolinha verde, e a bolinha vira o check.\n\n- **Texto que se monta.** \"Drive\" letra a letra com o espaçamento fechando, \"Done\" em onda subindo e caindo, e a frase final com a segunda palavra entrando cinza e mais alta, descendo até a linha.\n\n- **Nuvens que trocam de canto.** Três manchas pastel nas cores do Google mudam de lugar a cada cena e deixam o branco vivo sem câmera.\n\nDetalhes de cores, tempos e números: estilo.md. Cenas por tempo e texto na tela: roteiro.md. Para fazer o seu com outro fluxo de app: PROMPT.md."
+    },
+    {
+      "titulo": "As versões até o final",
+      "texto": "| \n\n | Versão\n | O que mudou\n\n | **v1**\n | recriação cena a cena, ajustada lado a lado com o original, com texto de exemplo nosso no menu e no campo digitado"
+    }
+  ],
+  "pacote": [
+    {
+      "pasta": "projeto/",
+      "conteudo": "`ae/cenas.jsx` (o gerador comentado), `ae/google-drive-premium.aep` (o projeto montado), `ae/fazer_logo_drive.py` (separa o ícone em três peças) e `assets/` (SVG e PNGs do logo, cursor)"
+    },
+    {
+      "pasta": "audio/",
+      "conteudo": "`trilha.py` (o som inteiro), `eventos.json` (os 44 eventos da comp), `mix.wav`, `relatorio-som.json` e `mesa/`, com o motor de mix `mesa.py` e o `mapa_padrao.py`"
+    },
+    {
+      "pasta": "referencias/",
+      "conteudo": "`estudo-da-referencia.md` (o edit original decupado quadro a quadro, com a receita), `links.md` e `fora-do-pacote.md`"
+    },
+    {
+      "pasta": "render.mp4",
+      "conteudo": "o vídeo final"
+    },
+    {
+      "pasta": "ae/cenas.jsx",
+      "conteudo": "no topo ficam a fonte e o bloco `TX` (marca, botão, itens do menu, diálogo, frase digitada, progresso, \"Done\" e a frase final). `K` grava chaves com influência, `\"H\"` (segura) e `\"A\"` (curva contínua); `entra` e `sai` fazem a entrada e a saída padrão pelo desfoque; `anim` cria animadores de texto com seletor por expressão, e `eIn` e `eOut` dão a onda letra a letra. Um único retângulo (`Cartao`) carrega o botão, o menu, o cartão pequeno, a barra, o campo e o progresso. A lente da esfera é um CC Lens na precomp escura. Cada evento vira um marcador na comp"
+    },
+    {
+      "pasta": "ae/google-drive-premium.aep",
+      "conteudo": "o resultado do script, pronto para abrir e renderizar"
+    },
+    {
+      "pasta": "ae/fazer_logo_drive.py",
+      "conteudo": "desenha as três peças do ícone (azul, amarela e verde) em PNGs de 1.600 px na mesma tela, a partir do SVG oficial"
+    },
+    {
+      "pasta": "audio/trilha.py",
+      "conteudo": "põe a base 13 dB abaixo, toca um efeito por evento pelo mapa padrão (pop no logo nascendo, whoosh no giro e na esfera) e mixa para −14 LUFS"
+    },
+    {
+      "pasta": "audio/mesa/",
+      "conteudo": "o motor de mix e o mapa de sons por tipo de evento"
+    }
+  ],
+  "prompt": "Quero um vídeo quadrado no mesmo método do projeto \"Google Drive, o cursor conduz o upload\", que está em 07-videos/projetos/drive-upload/: um fluxo de app contado por um cursor e por um único componente que muda de forma.\n\nProduto e logo (SVG oficial, se tiver): {{PRODUTO}}\nSite oficial (cores, fonte e telas reais): {{SITE}}\nFluxo, passo a passo (ex.: botão → menu → escolher → preencher → enviar → pronto): {{FLUXO}}\nTextos exatos de cada tela (botões, itens, campo digitado, mensagem de progresso): {{TEXTOS}}\nFrase final, em duas linhas: {{FRASE}}\nClima no clique: modo escuro como a referência ou outra troca: {{CLIMA}}\nMúsica (base leve com batida marcada): {{MUSICA}}\nDuração: {{DURACAO}} (a referência tem 11 s) · Formato: {{FORMATO}} (a referência é 1080×1080 a 60 qps)\n(Se algum desses estiver vazio ou com as chaves, me pergunte antes de começar.)\n\n1. Estude o projeto antes de propor qualquer coisa. Leia LEIA-ME.md, estilo.md e roteiro.md. Abra projeto/ae/cenas.jsx e veja o bloco TX, as ajudantes K (com \"H\" e \"A\"), entra, sai, anim, eIn e eOut, o retângulo único Cartao com todas as formas do fluxo, a lente CC Lens na CENA ESCURA, o cursor e os marcadores de evento. Me diga em poucas linhas o que vai reaproveitar.\n\n2. Tire a identidade do produto: logo oficial separado em peças (como o fazer_logo_drive.py faz), cores do site, fonte, nomes reais dos botões e menus. Nada de botão ou cor inventados.\n\n3. Escreva o fluxo tela a tela, com o tempo de cada troca, o gesto do cursor que justifica cada uma e o texto exato, no molde do roteiro.md. Uma ação nova a cada 0,4 a 0,8 s. Me mostre e espere meu ok.\n\n4. Meça a música e prenda os momentos fortes às batidas: logo pronto, clique que muda o clima, arquivo entrando, envio, esfera e frase final.\n\n5. Construa copiando o projeto, sem editar o original. Regras: o mesmo retângulo carrega todas as telas do miolo, mudando tamanho, raio e cor em 10 a 14 quadros; entrada e saída pelo desfoque; o cursor com curva contínua e clique que encolhe a mão; a cena inteira fecha numa esfera que vira o sinal de pronto. Rode o cenas.jsx e me mostre uma folha de contato com 12 quadros, incluindo o meio do clique e da esfera.\n\n6. Revise antes do render: troca de tela sem gesto do cursor, componente que some em vez de virar o próximo, texto cortado no cartão, cursor parado longe do que vai clicar.\n\n7. Som: rode audio/trilha.py na Mesa com os eventos dos marcadores, um efeito por ação de interface e a base abaixo deles, master em −14 LUFS. Renderize em H.264 a 60 qps, cole o mix com o ffmpeg e entregue o MP4 com uma anotação do que mudou em relação ao projeto.",
+  "campos": [
+    "CLIMA",
+    "DURACAO",
+    "FLUXO",
+    "FORMATO",
+    "FRASE",
+    "MUSICA",
+    "PRODUTO",
+    "SITE",
+    "TEXTOS"
+  ],
+  "fonte": {
+    "nome": "Clube do Motion",
+    "url": "https://clubedomotion.com/projeto/?id=drive-upload",
+    "uso": "liberado pelo dono do Clube do Motion em 18/10/2026 (docs/permissoes/clube-do-motion.md)"
+  }
+}