primocode 10.13.0 → 10.14.1

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

@@ -0,0 +1,128 @@
+{
+  "id": "clube-filatov",
+  "titulo": "Novas ferramentas todo dia",
+  "categoria": "elementos",
+  "resumo": "filme horizontal de 17,2 s, sem narração, que recria o primeiro filme do Reels de Daniil Filatov sobre criar com ferramentas de IA: letras grandes por máscara, 21 dias que acendem, um quadrado laranja que vira retrato, um cursor que arrasta a foto para o Framer, gera imagens no Recraft e anexa uma delas no Claude, uma parede de logos e os resultados em cards, até a assinatura final. Uma cena declarativa única gera a prévia em HTML e um projeto nativo do After Effects com 42 composições, todas editáveis. Na comparação lado a lado com o original, a recriação foi aprovada como \"praticamente perfeita\". Feito pelo Clube do Motion.",
+  "indicado": "criador, designer ou estúdio que quer mostrar como trabalha com várias ferramentas, ou produto que quer demonstrar um fluxo entre apps; vídeo horizontal para site, YouTube ou apresentação.",
+  "estilo": [
+    "elementos únicos",
+    "tipografia por máscara",
+    "interface recriada",
+    "cursor que demonstra",
+    "transferência de objeto",
+    "parede de logos",
+    "laranja de destaque",
+    "som procedural"
+  ],
+  "ficha": {
+    "formato": "1920×1080, 30 qps, 16:9",
+    "duracao": "17,2 s (516 quadros), sem narração",
+    "motor": "ae",
+    "voz": "ver o guia de estilo",
+    "musica": "ver o guia de estilo",
+    "fontes": "ver o guia de estilo"
+  },
+  "ferramentas": [
+    "Codex",
+    "After Effects"
+  ],
+  "ficha_tecnica": {
+    "Duração": "17,2 s (516 quadros), sem narração",
+    "Formato": "1920×1080, 30 qps, 16:9",
+    "Ferramenta": "cena declarativa em Python (`gerar.py`) que gera um HTML com `render(t)` e `seek(t)` e o JSON nativo do After Effects; render final no After Effects, em 3 trechos",
+    "Projeto do After Effects": "42 composições e 756 camadas (755 visuais e uma de áudio); textos, formas, seleções, cursor, progresso e interfaces editáveis; fotos e logos como mídia",
+    "Tipografia": "Nohemi Regular nos títulos, Inter na interface, Geist Mono no contador, Source Serif 4 na resposta do chat",
+    "Som": "66 eventos sintetizados por código (toque, clique, sopro, golpe grave e acorde em Fá maior); −27,63 LUFS, pico de −7,33 dBTP, de propósito discreto",
+    "Referência": "o primeiro filme horizontal do Reels de Daniil Filatov e o prompt \"BONUS\" do tutorial dele no Notion; o autor fez em HTML com o Claude, sem After Effects",
+    "Arquivo final": "MP4 H.264 com áudio AAC estéreo a 48 kHz, 14,1 MB"
+  },
+  "etapas": [
+    {
+      "titulo": "O roteiro",
+      "texto": "**Resumo:** o filme não tem narração; o roteiro é a linha do tempo da versão aceita, cena a cena, com o texto exato da tela. O texto ficou em inglês, como no original, para a comparação lado a lado. Os tempos são do vídeo final e algumas cenas se sobrepõem.\n\n## De onde veio a estrutura\n\nO original apresenta uma ideia com letras grandes, transforma um detalhe em objeto, usa o cursor para demonstrar o trabalho em três ferramentas, reúne as marcas numa parede de logos, mostra os resultados como cards e fecha com a marca do autor. O prompt \"BONUS\" do tutorial dele descreve esse filme; a recriação seguiu o prompt e as poses do Reels.\n\n## Cenas por tempo\n\n | \n\n | #\n | Tempo (s)\n | Texto na tela\n | O que acontece\n\n | 1\n | 0,00–2,40\n | \"New creative tools\" / \"appear every day.\" · \"Day 01\" … \"Day 21\"\n | as duas linhas entram palavra por palavra; 21 quadrados acendem em laranja, cada vez mais rápido, com o contador acompanhando; no fim, os quadrados convergem para o centro\n\n | 2\n | 2,38–4,69\n | \"Hey, I’m Daniil\" · \"I explore what they\" / \"make possible.\"\n | o quadrado cresce e vira o retrato; a apresentação sobe; o cursor entra em 3,55 s, clica no retrato em 4,05 s e arrasta\n\n | 3\n | 4,64–6,74\n | \"Framer,\" · \"Build the page\"\n | a janela do Framer entra pela direita e o retrato pousa como foto dentro dela; o título é digitado; em 5,85 s o cursor clica em Insert e dois cards sobem; em 6,34 s o placeholder ganha a seleção azul\n\n | 4\n | 6,71–8,65\n | \"Framer,\" \"Recraft,\" · \"Generate the missing visual\"\n | a janela do Recraft: três linhas de prompt digitadas, clique em Generate (7,79 s), \"Generating…\", skeletons e a galeria 2×2; em 8,33 s o cursor pega a primeira imagem\n\n | 5\n | 8,60–10,47\n | \"Framer,\" \"Recraft,\" \"Claude.\" · \"Write the tutorial\"\n | a imagem vira o anexo no Claude; a mensagem e a resposta entram linha a linha; a janela encolhe e some\n\n | 6\n | 10,20–12,05\n | \"Brands I’ve created with\"\n | a íris laranja cobre o palco; 36 tiles de logos chegam do centro, derivam em fileiras alternadas, pulsam e saem pelos lados\n\n | 7\n | 12,05–12,98\n | \"Then turn them into\" · \"visual stories,\"\n | fundo cinza; um story inclinado com três fotos trocando e a barra de progresso\n\n | 8\n | 12,95–13,90\n | \"workflows,\"\n | fluxo com três nós (Framer, Recraft, Claude), conectores que se desenham e checks que acendem\n\n | 9\n | 13,85–14,83\n | \"and tutorials\"\n | player com foto, legenda, barra de progresso e quatro capítulos com check\n\n | 10\n | 14,75–15,50\n | \"worth trying.\"\n | três cards salvos sobem em sequência e o marcador de cada um se preenche\n\n | 11\n | 15,48–17,20\n | \"filatov.design\" · \"AI, design and content\"\n | o fundo volta ao branco; o avatar do canto cresce até o centro; o domínio entra por máscara e a assinatura sobe por último\n\n## Momentos para o som\n\n- 0–2,40 s: um toque por quadrado que entra e outro, com o tom subindo, em cada dia que acende; sopro em 2,00 s.\n\n- 2,38 s: sopro e golpe grave na morfose do quadrado em retrato.\n\n- 4,05 · 5,11 · 5,85 · 6,34 · 7,79 · 8,33 s: cliques do cursor; 4,68 e 8,64 s: soltar.\n\n- 6,45 · 8,34 · 10,05 · 11,76 · 15,45 s: sopros nas trocas de cena.\n\n- 10,32 s: golpe grave na íris.\n\n- 12,05 · 12,95 · 13,85 · 14,75 s: um golpe grave a cada resultado.\n\n- 15,76 s: acorde em Fá maior na assinatura.\n\nA lista completa dos 66 eventos, com tempo, tipo, ganho, pan e tom, está em `audio/eventos.json`."
+    },
+    {
+      "titulo": "A identidade visual",
+      "texto": "**Resumo:** palco branco e cinza-claro, tinta quase preta, o laranja `#FF4D17` como única cor de destaque, títulos grandes em Nohemi com tracking negativo e interfaces de app recriadas em formas e texto. O movimento usa quatro curvas com funções separadas, palavras recortadas por máscara, um cursor com pontos de contato medidos e transferências de objeto entre cenas. Números tirados do `gerar.py`, do `som.py` e do tutorial do projeto.\n\n## Palco e cores\n\n | \n\n | Token\n | Valor\n | Papel\n\n | Fundo\n | `#FFFFFF`\n | abertura, demonstração e fecho\n\n | Fundo dos resultados\n | `#F2F2F2`\n | separa a coleção de saídas da demonstração\n\n | Tinta\n | `#121212`\n | títulos e logos\n\n | Apoio\n | `#83858D`\n | apresentação, legendas e assinatura\n\n | Laranja\n | `#FF4D17`\n | dias, quadrado, cursor, íris, checks, barras de progresso\n\n | Nome anterior\n | `#CFCFCF`\n | o nome da ferramenta que já passou fica cinza quando a próxima entra\n\n | \n\n | Peça\n | Como é\n\n | Sombra\n | preta a 12%, distância de 10 px, suavidade 36 (no HTML: `feDropShadow`, `dy=10`, `stdDeviation=18`)\n\n | Cantos\n | retrato 14 px; janelas 18; cards de 20 a 32\n\n | Motion blur no AE\n | 70°, fase −35°, 8 amostras, limite adaptativo 16\n\n | Marca persistente\n | avatar de 56 px no canto (68, 68), escondido na parede de logos\n\n## Fontes\n\n | \n\n | Fonte\n | Onde\n\n | Nohemi Regular, tracking −25\n | títulos, frases, apresentação e assinatura (150, 124, 132 e 196 px)\n\n | Inter Regular\n | interfaces, etiquetas, capítulos e cards\n\n | Geist Mono, 22 px\n | o contador de dias, que não pula de largura\n\n | Source Serif 4, 24 px\n | a resposta do Claude\n\n | Segoe UI Symbol\n | só os onze símbolos `☰ ✓ ↑ ▶` no AE\n\n## Curvas\n\n | \n\n | Nome\n | Bézier\n | Uso\n\n | `expo`\n | `(0.16, 1, 0.3, 1)`\n | entradas rápidas com acomodação: textos, janelas, fades\n\n | `smooth`\n | `(0.65, 0, 0.35, 1)`\n | arraste, transferência, convergência e grandes transições\n\n | `pop`\n | `(0.34, 1.56, 0.64, 1)`\n | unidades pequenas com excesso de escala, como os quadrados dos dias\n\n | `linear`\n | —\n | progresso, sinal e estados de carregamento\n\nNo AE as chaves ficam nativas e esparsas, e a expressão gerada pelo `kit_ae.expr_curva()` calcula a Bézier entre elas com 24 iterações.\n\n## Componentes\n\n- **Palavra mascarada:** cada palavra tem precomp de recorte própria (largura medida + 7 px, altura de 1,25 × o tamanho); entra de baixo, deslocada 0,85 × o tamanho, com opacidade de 0 a 100 em 0,55 s (`expo`) e 85 ms de atraso entre palavras.\n\n- **Dias:** 21 quadrados de 30 px, raio 8, a 44 px um do outro; entram do centro para fora com `pop`; o central acende em 0,68 s e os outros em `0,90 + (n/20)^0,6`; cada preenchimento pulsa a 132% e solta um anel de 1,5 px. O contador \"Day 01\" acompanha.\n\n- **Quadrado → retrato:** o quadrado de 30 px cresce a 733% × 953% (cerca de 220×286) e sobe 389 px entre 2,40 e 2,80 s; a foto aparece por opacidade.\n\n- **Janelas de app:** 1104×888, raio 18, centro (1312, 540); deixam uma coluna à esquerda para o nome da ferramenta (112 px) e a descrição da ação (32 px). Framer escuro, Recraft claro e Claude creme.\n\n- **Cursor:** seta laranja com contorno branco de 2 px e etiqueta de 175×37; âncora na ponta. No clique, 100% aos −60 ms, 88% no contato e 100% aos +120 ms; anel de 48 px com traço de 3 px, de 50 a 180% em 0,30 s.\n\n- **Íris:** elipse de 3000 px que cresce de 0 a 100% entre 10,20 e 10,50 s e sai subindo 2.100 px.\n\n- **Parede de logos:** 36 tiles de 176 px, raio 28, logo de 84 px, em 3 fileiras de 12 com 11 marcas (`(n + fileira × 4) % 11`); partem do centro e chegam em 0,36 s, escala 0 → 108 → 100%, deriva de +120 px nas fileiras 1 e 3 e −120 na 2, pulso com 16 ms de atraso por coluna e saída de ±2.400 px.\n\n- **Story:** card 9:16 de 300×533, raio 32, a 130% e −2°, com um apoio laranja inclinado 8° atrás; três fotos trocam a cada 0,29 s.\n\n- **Fluxo:** três nós de 305×96 ligados por conectores de 4 px que se desenham em 0,35 s; checks cinza viram laranja; um sinal de 13 px percorre o caminho.\n\n- **Tutorial:** player com foto, legenda, barra laranja que cresce a partir do centro e quatro capítulos que acendem a cada 0,24 s.\n\n- **Cards salvos:** três cards de 250×420 com 45 ms de atraso; o marcador muda de contorno para preenchido.\n\n## Transições\n\nQuadrado → retrato; retrato → foto dentro do Framer (mesma pose global no mesmo instante, 4,68 s); imagem gerada no Recraft → anexo no Claude (sobe, encolhe a 35% e gira 0 → −5 → 0° entre 8,33 e 8,64 s); janela do Claude que encolhe a 88% e some; íris laranja que cobre o palco e revela a parede; avatar do canto que cresce de 40 para 100% e vai para o centro (15,48 a 16,03 s).\n\n## Som\n\nFeito por código no `som.py`, sem música, com 66 eventos em estéreo a 48 kHz e semente 42.\n\n | \n\n | Som\n | Síntese\n | Papel\n\n | `tap`\n | seno + ruído, 75 ms\n | entrada e preenchimento dos dias\n\n | `click`\n | ruído + seno de 1.900 Hz, 40 ms\n | contato do cursor\n\n | `air`\n | ruído suavizado, 320 ms\n | transições\n\n | `thock`\n | grave descendente + ruído, 150 ms\n | morfose, íris e troca de resultado\n\n | `chord`\n | 174,61 / 220 / 261,63 / 349,23 Hz, 1,35 s\n | assinatura final em Fá maior\n\n- Entradas dos quadrados com ganho 0,022 e pan `(n − 10)/13`; preenchimentos com 0,082 e tom subindo `350 + n × 14` Hz.\n\n- Cliques a 0,13; soltar a 0,055; sopros a 0,07; íris com thock a 0,17; resultados a 0,09; acorde a 0,13.\n\n- **Final:** `loudnorm=I=-28:TP=-1:LRA=9`; medido −27,63 LUFS, pico de −7,33 dBTP, LRA 4,40 LU. O nível baixo é desta peça sem fala nem música; para vídeo narrado, mixe junto da voz.\n\n## O que é \"humano\" neste vídeo\n\n- Cada ação tem entrada, repouso legível, interação e saída.\n\n- O cursor afunda no clique e o anel se abre no ponto exato do contato.\n\n- A parede de logos nunca fica parada: as fileiras derivam em sentidos opostos e um pulso passa pelas colunas."
+    },
+    {
+      "titulo": "A montagem em HTML",
+      "texto": "| \n\n | Arquivo\n | O que faz\n\n | `gerar.py`\n | define a peça inteira: composições, camadas, tempos de visibilidade (`ini`, `fim`), posição base e chaves relativas (`anim.pos`, `anim.esc`, `anim.rot`, `anim.opa`), digitação (`typein`), desenho de caminho (`draw`) e curvas; grava `cenas.json` e `ae/projeto.json`\n\n | `gerar_html.py`\n | junta `cenas.json`, `player-template.html`, imagens, fontes e áudio num HTML independente, com reprodução e busca por tempo\n\n | `ae/kit_ae.py`\n | converte a cena em JSON nativo do AE: precomps para a hierarquia, uma camada por grupo de forma, máscaras de oito vértices com tangentes para cantos redondos e a expressão `expr_curva()`, que calcula a curva Bézier entre chaves esparsas\n\n | `render-html.mjs`\n | abre o HTML no Chrome sem janela, espera `window.ready` (fontes e imagens) e chama `seek(quadro/30)`; sem argumento grava poses de conferência, com `--full` exporta os 516 quadros\n\n | `render-ae.ps1`\n | renderiza o AEP com `aerender -reuse` em 3 trechos (quadros 0–239, 240–479 e 480–515), um por vez, com prioridade baixa e memória limitada, e junta com o WAV final\n\n | `som.py`\n | sintetiza `tap`, `click`, `air`, `thock` e `chord` com semente 42 e mixa os 66 eventos, normalizando para −28 LUFS\n\n | `registrar-fontes.py`\n | registra as fontes do projeto para o usuário do Windows quando copiar para a pasta da Adobe não basta\n\n | `verificar-final.py`\n | confere quadros, duração, qps e decodificação do MP4\n\n- **Use uma pasta nova** e copie o pacote; a versão aceita fica intacta.\n\n- **Troque os assets do autor pelos seus**, com os mesmos nomes em `assets/`: `avatar.jpg`, `portrait.jpg`, `legs.jpg`, `summer.jpg`, `blue.jpg`, `work.jpg`, `finance.jpg`, `slit.jpg`, `slit-tall.jpg` (600×1008) e `desk.jpg`, além dos logos. Os tamanhos de cada um estão no `ASSETS.md`. Para os títulos, use outra fonte e salve como `assets/Nohemi-Regular.ttf` e `.woff2`, ou troque o nome da fonte no `gerar.py`: ele mede as frases com o TTF, e o `gerar_html.py` embute os WOFF2.\n\n- **Fontes:** instale as de `assets/`; se não aparecerem no AE, rode `python -X utf8 registrar-fontes.py`. Os onze símbolos `☰ ✓ ↑ ▶` usam a Segoe UI Symbol do Windows no AE.\n\n- **Gerar:** `python -X utf8 som.py`, depois `python -X utf8 gerar.py` e `python -X utf8 gerar_html.py`.\n\n- **Conferir no navegador:** `node render-html.mjs` grava poses de revisão; `node render-html.mjs --full` exporta o filme em HTML. Troque o caminho do Chrome e do `playwright-core` no topo do script.\n\n- **After Effects pela ponte MCP:** com um projeto vazio aberto, valide `ae_project_import_json` com `dryRun: true`, importe `ae/projeto.json`, aplique `ae/pos-import.json` com `ae_do` e salve um AEP novo. Sem a ponte, abra uma cópia do `filatov-motion.aep` e reaponte as mídias faltando (File › Dependencies › Find Missing Footage).\n\n- **Render:** ajuste os caminhos do `render-ae.ps1`, use uma pasta de trechos limpa por versão (o script junta todos os `trecho-*.mp4` que encontrar) e rode no PowerShell 7. Não mande comandos à ponte durante o render.\n\n**Pegadinhas:** nomes de camada se repetem (há vários checks), então localize por composição e índice. A âncora do cursor fica na ponta, em [0,0]: aplique depois de criar a camada e confira na pose do clique. Todas as precomps duram 17,2 s com tempo global: mudar a duração exige atualizar som, captura, trechos e junção. Editar o Easy Ease no gráfico não muda a curva enquanto a expressão `expr_curva()` estiver ativa."
+    },
+    {
+      "titulo": "As decisões de direção",
+      "texto": "- **Continuidade do objeto conecta as cenas.** Origem e destino casam posição, escala, recorte e instante: o retrato termina em (1150, 344) a 62% em 4,68 s, exatamente onde a foto aparece dentro do Framer no quadro seguinte.\n\n- **O cursor demonstra as ações.** Ele entra em 3,55 s, clica em 6 pontos medidos, arrasta e solta, com o clique que encolhe a seta a 88% e um anel laranja.\n\n- **Palavra por palavra, com 85 ms entre elas**, cada uma recortada pela própria máscara: a frase ganha hierarquia sem andar como um bloco.\n\n- **Curvas por função:** `expo` nas entradas, `smooth` nos arrastes e transferências, `pop` nas unidades pequenas e linear no progresso e no sinal.\n\n- **Densidade sem trabalho manual:** os 36 tiles de logos saem de uma fórmula de posição, atraso e marca, com deriva alternada por fileira e um pulso que percorre as colunas.\n\n- **Os resultados como cards concretos:** story, fluxo de trabalho, tutorial e cards salvos, cada um com a frase grande à esquerda.\n\n- **Uma cena, dois motores:** a mesma especificação gera a prévia HTML e as camadas nativas do AE, e as poses de revisão acharam problemas que um JSON válido não mostrava.\n\n- **Som discreto e sincronizado aos contatos:** cliques nos instantes dos cliques, sopros nas transições, golpes graves nas trocas de resultado e um acorde na assinatura.\n\nDetalhes de cores, curvas e som: estilo.md. Cenas por tempo e texto na tela: roteiro.md. Para fazer um filme no mesmo método com a sua marca: PROMPT.md."
+    },
+    {
+      "titulo": "As versões até o final",
+      "texto": "| \n\n | Versão\n | O que mudou\n\n | v1\n | primeira montagem no After Effects (`filatov-motion-v1.aep`), comparada quadro a quadro com o Reels: corrigidos posição do retrato, abertura, títulos finais, tamanho do story, player, minicards e logos\n\n | **final**\n | aprovada no lado a lado com o original: símbolos com Segoe UI Symbol (a Inter do site não tem esses glifos), estilos de texto aplicados depois da importação e render em 3 trechos com `-reuse`; 516 quadros conferidos, zero fontes e mídias faltando"
+    }
+  ],
+  "pacote": [
+    {
+      "pasta": "projeto/",
+      "conteudo": "`ae/filatov-motion.aep` (o projeto editável), `ae/projeto.json` e `ae/pos-import.json` (o projeto em JSON para importar pela ponte MCP do After Effects), `ae/kit_ae.py` e `ae/ponte.mjs`; `gerar.py`, `gerar_html.py`, `cenas.json` e `player-template.html`; `render-html.mjs`, `render-ae.ps1`, `registrar-fontes.py`, `verificar-final.py` e `documentar.py`; `CATALOGO-MOTION.md`, `MAPA-DO-PROJETO.md` (todas as camadas e chaves) e `ASSETS.md`; em `assets/`, as fontes Inter, Geist Mono e Source Serif 4 (TTF e WOFF2), os logos de Framer, Figma, Freepik e LottieFiles e os inventários em JSON"
+    },
+    {
+      "pasta": "audio/",
+      "conteudo": "`som.py` (a síntese dos 5 sons e o mix), `eventos.json` (os 66 eventos com tempo, tipo, ganho, pan e tom), `sfx-final.wav` (o mix aceito) e `sfx.mp3` (o mesmo áudio para a prévia HTML)"
+    },
+    {
+      "pasta": "referencias/",
+      "conteudo": "`tutorial/` (o método em 5 partes: construção, cenas com valores, controles e som, procedimento e falhas), `estudo-da-referencia.md`, `links.md` e `fora-do-pacote.md`"
+    },
+    {
+      "pasta": "render.mp4",
+      "conteudo": "o filme final, exportado do After Effects"
+    },
+    {
+      "pasta": "gerar.py",
+      "conteudo": "define a peça inteira: composições, camadas, tempos de visibilidade (`ini`, `fim`), posição base e chaves relativas (`anim.pos`, `anim.esc`, `anim.rot`, `anim.opa`), digitação (`typein`), desenho de caminho (`draw`) e curvas; grava `cenas.json` e `ae/projeto.json`"
+    },
+    {
+      "pasta": "gerar_html.py",
+      "conteudo": "junta `cenas.json`, `player-template.html`, imagens, fontes e áudio num HTML independente, com reprodução e busca por tempo"
+    },
+    {
+      "pasta": "ae/kit_ae.py",
+      "conteudo": "converte a cena em JSON nativo do AE: precomps para a hierarquia, uma camada por grupo de forma, máscaras de oito vértices com tangentes para cantos redondos e a expressão `expr_curva()`, que calcula a curva Bézier entre chaves esparsas"
+    },
+    {
+      "pasta": "render-html.mjs",
+      "conteudo": "abre o HTML no Chrome sem janela, espera `window.ready` (fontes e imagens) e chama `seek(quadro/30)`; sem argumento grava poses de conferência, com `--full` exporta os 516 quadros"
+    },
+    {
+      "pasta": "render-ae.ps1",
+      "conteudo": "renderiza o AEP com `aerender -reuse` em 3 trechos (quadros 0–239, 240–479 e 480–515), um por vez, com prioridade baixa e memória limitada, e junta com o WAV final"
+    },
+    {
+      "pasta": "som.py",
+      "conteudo": "sintetiza `tap`, `click`, `air`, `thock` e `chord` com semente 42 e mixa os 66 eventos, normalizando para −28 LUFS"
+    },
+    {
+      "pasta": "registrar-fontes.py",
+      "conteudo": "registra as fontes do projeto para o usuário do Windows quando copiar para a pasta da Adobe não basta"
+    },
+    {
+      "pasta": "verificar-final.py",
+      "conteudo": "confere quadros, duração, qps e decodificação do MP4"
+    }
+  ],
+  "prompt": "Quero um filme de tipografia e interfaces no mesmo método do projeto \"Novas ferramentas todo dia\", que está em 07-videos/projetos/filatov/, com a minha marca.\n\nMarca, nome ou estúdio: {{MARCA}}\nDomínio ou assinatura do fecho: {{ASSINATURA}}\nA ideia de abertura, em uma frase grande: {{FRASE_DE_ABERTURA}}\nAs ferramentas ou apps que aparecem, na ordem, com a ação em cada um: {{FERRAMENTAS_E_ACOES}}\nOs resultados que quero mostrar em cards (story, fluxo, tutorial, cards salvos…): {{RESULTADOS}}\nFotos, retrato e avatar: {{FOTOS}}\nCor de destaque: {{COR}} (a referência usa #FF4D17)\nDuração: {{DURACAO}} (a referência tem 17,2 s) · Formato: {{FORMATO}} (a referência é 1920×1080, 30 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, depois referencias/tutorial/ na ordem e o CATALOGO-MOTION.md. Abra projeto/gerar.py e veja como funcionam comp(), add(), text(), image(), group(), path(), entrance(), os campos ini, fim, anim, typein e draw e as curvas expo, smooth e pop; leia também ae/kit_ae.py, gerar_html.py, player-template.html, render-html.mjs, render-ae.ps1 e som.py. Me explique em poucas linhas o que você vai reaproveitar.\n\n2. Se o formato for vertical, redesenhe hierarquia, posições e o tamanho das janelas; não encolha o filme horizontal.\n\n3. Escreva a linha do tempo antes de codar, no molde do roteiro.md: cada cena com entrada, repouso legível, interação e saída, o texto exato e o tempo. Marque os pontos de contato do cursor e, para cada transferência, a mesma pose (posição global, escala, recorte e instante) na cena de origem e na de destino. Me mostre e espere meu ok.\n\n4. Tire a identidade do assunto: as minhas fotos, o meu avatar, a minha fonte de títulos e as interfaces reais das ferramentas que eu uso, recriadas em formas e texto editáveis (nada de print colado). Confira se as fontes têm todos os glifos usados; símbolo que faltar ganha uma fonte própria só naquela camada.\n\n5. Construa numa pasta nova: copie gerar.py e troque textos, composições, dimensões, tempos e curvas. A mesma cena gera o HTML com render(t) e seek(t) determinísticos e o JSON nativo do After Effects. Se mudar a duração, atualize também o som, a captura e os trechos do render.\n\n6. Som feito por código no som.py: um clique em cada contato do cursor, sopro nas trocas de cena, golpe grave nas morfoses e nos resultados, toques nos elementos pequenos e uma nota no fecho, sem música, a não ser que eu peça. Mixe discreto e me diga o nível final.\n\n7. Confira a prévia com node render-html.mjs nas poses de repouso e no meio de cada transição, especialmente as transferências, a íris, os checks e a marca final. Corrija até as poses baterem.\n\n8. Importe no After Effects pela ponte MCP: valide ae_project_import_json com dryRun, importe, aplique o pos-import.json e salve um AEP novo. Confirme zero fontes e mídias faltando e localize camadas com nome repetido por composição e índice.\n\n9. Renderize com o render-ae.ps1 em trechos, numa pasta limpa por versão, junte com o WAV e confira quadros, duração, qps e decodificação com o verificar-final.py. Entregue o MP4, o AEP, o HTML e uma anotação do que mudou em relação à referência.",
+  "campos": [
+    "ASSINATURA",
+    "COR",
+    "DURACAO",
+    "FERRAMENTAS_E_ACOES",
+    "FORMATO",
+    "FOTOS",
+    "FRASE_DE_ABERTURA",
+    "MARCA",
+    "RESULTADOS"
+  ],
+  "fonte": {
+    "nome": "Clube do Motion",
+    "url": "https://clubedomotion.com/projeto/?id=filatov",
+    "uso": "liberado pelo dono do Clube do Motion em 18/10/2026 (docs/permissoes/clube-do-motion.md)"
+  }
+}

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

@@ -0,0 +1,108 @@
+{
+  "id": "clube-frame",
+  "titulo": "Frame by Frame",
+  "categoria": "saas",
+  "resumo": "vinheta quadrada de 12 s, sem narração, para o lançamento do \"Frame by Frame\", curso de refazer vídeos de lançamento que fica num hub da Whop (é o produto padrão do próprio prompt). É uma recriação do \"Launch video remake comparison\" de dawood46 (@notdwd), publicado no prompt-motion.com (`notdwd-c2037d`) e feito com o Claude Opus 5.5. O prompt dele é o mais detalhado da coleção: especifica o vídeo quadro a quadro, com cortes em quadros exatos 2 quadros antes da batida, tabelas de posição por quadro e entradas que já chegam em movimento. A recriação mantém os mesmos 8 planos e os mesmos quadros de corte e acrescenta o que faltava: som de verdade, câmera viva, match cut real do ícone para a barra de menus, vidro e títulos com acabamento, logo sem quadro congelado e um fecho com o visor da marca. Feito em HyperFrames (HTML + GSAP), com música real e 85 efeitos.",
+  "indicado": "lançamento de curso, app ou produto digital em formato curto; teaser para redes sociais.",
+  "estilo": [
+    "keynote da Apple",
+    "vidro fosco",
+    "branco e azul",
+    "cursor",
+    "cortes na batida",
+    "desfoque de movimento"
+  ],
+  "ficha": {
+    "formato": "1080×1080, 60 qps, 1:1",
+    "duracao": "12,075 s (360 quadros a 29,97 qps, a grade do prompt)",
+    "motor": "ae",
+    "voz": "sem narração",
+    "musica": "ver o guia de estilo",
+    "fontes": "ver o guia de estilo"
+  },
+  "ferramentas": [
+    "Claude Code",
+    "After Effects",
+    "ElevenLabs"
+  ],
+  "ficha_tecnica": {
+    "Duração": "12,075 s (360 quadros a 29,97 qps, a grade do prompt)",
+    "Formato": "1080×1080, 60 qps, 1:1",
+    "Voz": "sem narração",
+    "Ferramenta": "HyperFrames 0.8.144 (HTML + GSAP); render a 120 qps juntado em 60 qps com motion blur",
+    "Referência": "\"Launch video remake comparison\" (@notdwd), painel da direita (\"Frame by Frame remake\"), 12,07 s",
+    "Trilha": "\"Lose Control\" (MEDUZA, Becky Hill, Goodboys), 124 BPM; drop em 2,467 s",
+    "Som": "85 efeitos; mix final a −14,0 LUFS, pico −1,4 dBTP"
+  },
+  "etapas": [
+    {
+      "titulo": "O roteiro",
+      "texto": "**Resumo:** a vinheta não tem fala; a história é a do prompt original, em 8 planos: o cabeçalho do produto sobe dentro do hub, o cursor clica no logo, o ícone do app ganha os quadrados, vira um ícone da barra de menus, o prompt é digitado, a página da aula responde, os cartões das aulas passam e o fecho mostra o nome. Os quadros abaixo estão na grade de 29,97 qps do prompt (f0–f359); o vídeo final roda a 60 qps.\n\n## Como a história foi montada\n\n- **Entrada do prompt:** produto \"Frame by Frame\" no hub da Whop, logo de visor (quatro colchetes em volta de \"FF\"), prompt \"Make a launch video for my app\", aula \"2.1 Choose a reference\", cartões \"Launch\" e \"Sound\".\n\n- **Batida:** `k = 0,048 + 0,4838·k s` (124 BPM, 14,5 quadros por batida); os cortes caem 2 quadros antes da batida.\n\n- **Um único momento de calma permitido** pelo prompt (o logo no plano 7), que na recriação virou o visor focando.\n\n## Texto da tela, na ordem\n\n- `Frame by Frame` · `on Whop` · `Search Frame by Frame` · `⌘K` · `Course · 8 lessons`\n\n- Barra de menus: `Mon Jun 22 9:41 AM`\n\n- Prompt digitado: `Make a launch video for my app`\n\n- Página: `Courses › Remake any launch video` · `2.1 Choose a reference` · `Module 2 · Lesson 1` · \"Pick one launch video you want to match. Download it, count its frames, and write down every cut. The agent rebuilds it **frame for frame** with your brand, your colours and your words, then checks it side by side against the original.\" · `What you need` e os cinco itens\n\n- Cartão: `MODULE 2` · `Remake any launch video` · `Module 2 · 8 lessons`\n\n- Cartões: `Module 3` / `Launch` · `Module 5` / `Sound`\n\n- Fecho: `Frame by Frame` entre os colchetes do visor\n\n## Planos por tempo\n\n | \n\n | #\n | Quadros (29,97)\n | Tempo (s)\n | O que acontece\n\n | 1\n | f0–f71\n | 0–2,40\n | o cabeçalho sobe da névoa azul (y 932 → 776 → 683 → 608 → 546 → 536 nos quadros 0, 2, 5, 10, 24 e 37) e depois deriva 1 px por quadro; o nome entra desfocado no f2, a pílula no f4–5 deslizando; a janela do hub aparece em volta (opacidade 0 → 0,53 → 0,7 → 1); o cursor entra no f27, desacelera, gira para mergulhar, pousa no logo e cresce no hover; anel de gelo acende; zoom de 1,0 a 1,2 e volta a 1,04 no clique\n\n | 2\n | f72–f100\n | 2,40–3,37\n | **corte no drop:** o ícone navy de 276 px encolhe para 178 px num halo cinza; os quatro quadrados giram em sentido anti-horário e travam em cruz um depois do outro; no fim, tudo encolhe acelerando e o ícone para no lugar exato do ícone da barra, com os quadrados virando as três bolinhas\n\n | 3\n | f101–f158\n | 3,37–5,30\n | **match cut:** a barra de menus do Mac entra desfocada e assenta; o cursor sobe e clica na marca (f113–117); a câmera anda +125 px; a caixa de vidro salta do ícone (f116) e assenta em f138; o prompt é digitado de f121 a f150; a partir de f136 a cena sobe acelerando até o chicote, tingindo de azul-claro\n\n | 4\n | f159–f186\n | 5,30–6,24\n | **corte no chicote:** a página da aula chega borrada e 420 px abaixo, sobe em degraus cada vez menores e assenta em f180; um clarão claro some até f165; o cursor sobe junto e para sob \"frame for frame\"\n\n | 5\n | f187–f214\n | 6,24–7,17\n | o cartão sobe por cima da página, que desfoca; o cursor da página desce e some; o cartão sai encolhendo 5% enquanto o quadro desfoca de 1 a 7 px, e o corte cai no pico do desfoque\n\n | 6\n | f215–f244\n | 7,17–8,17\n | os dois cartões com títulos de vidro entram desfocados e escalonados, ficam nítidos em f224, sobem 3 px por quadro e saem acelerando em desfoque\n\n | 7\n | f245–f300\n | 8,17–10,04\n | o disco do logo sobe ao centro com rastro vertical; o visor foca (os cantos abrem e travam), três ondas e um halo pulsam nas batidas (f262, f277, f291) com aproximação lenta; no fim, o disco encolhe acelerando\n\n | 8\n | f301–f359\n | 10,04–12,075\n | **corte para o fecho preto:** a palavra entra larga (~1.650 px) com rastro de zoom, assenta perto de 516 px, os colchetes do visor se desenham e fecham sobre ela com obturador, o brilho passa, e a palavra colapsa no último meio segundo; o vídeo termina no meio do colapso\n\n## Momentos para a trilha\n\n- 0–2,40 s: só a voz da música, abafada, sob o cabeçalho e o cursor.\n\n- 2,467 s: drop, 2 quadros depois do corte f72.\n\n- 3,45–5,2 s: música 2,5 dB abaixo para o clique e as teclas do prompt.\n\n- 6,240 e 8,175 s: golpes de transição exatamente nos cortes.\n\n- 10,043 s: a música para seca e sobra a cauda de reverb, com o drone em Dó e o brilho do fecho.\n\nOs 85 efeitos, com tempo e ganho, estão em `audio/cues.json`."
+    },
+    {
+      "titulo": "A identidade visual",
+      "texto": "**Resumo:** clima de keynote da Apple, como pede o prompt original: tudo suave, branco, azul forte e vidro. A paleta e a fonte são as do prompt (sem roxo, violeta, magenta nem laranja); o movimento é especificado quadro a quadro, com entradas que já chegam em movimento, saídas que aceleram até o corte e desfoque que segue a velocidade. A recriação acrescenta câmera viva, vidro com aro e um visor que \"foca\" como estado vivo do logo. Os números saem do prompt, 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 | Tudo (nome, interface, página, títulos de vidro, fecho)\n | Inter 400, 500, 600, 700 e 800\n | `hf/fonts/Inter-400.ttf` … `Inter-800.ttf`\n\nOs títulos de vidro usam Inter 800 a 132 px com espaçamento −5, para caber nos cartões de 538 px. O texto da página usa Inter 400 a 47 px, cinza `#BCBCBA`, com a frase-chave em preto 600.\n\n## Cores\n\n | \n\n | Token\n | Hex\n | Papel\n\n | Página\n | `#FDFDFB`\n | fundo branco\n\n | Névoa\n | `#B7CFEB`\n | névoa azul de onde o cabeçalho sobe, sumindo até o quadro 28\n\n | Gelo\n | `#E6F0FA`\n | tinta clara; brilho do chicote `#E6F4FE`, clarão `#E2F4FE`\n\n | Chão de luz\n | `#DBEEFD`\n | brilho azul na base da janela\n\n | Céu\n | `#294376 → #769CC2`\n | papel de parede do Mac\n\n | Navy\n | `#1E2F52`\n | ícone do app (degradê `#294376 → #1E2F52`), barra de menus\n\n | Azul\n | `#2F6BFF`\n | quadrado de cima, bolinha, botão enviar\n\n | Ciano\n | `#3CC8F0`\n | quadrado da direita, bolinha\n\n | Menta\n | `#4ED6A0`\n | quadrado de baixo, bolinha\n\n | Turquesa\n | `#7FE3DA`\n | brilho dos cartões (o remake original vazava rosa, proibido pelo prompt)\n\n | Fecho\n | `#020204` nos cantos, `≈#272729` ao redor da palavra\n | fundo radial do cartão final; palavra `#F3F3F5`\n\n## Componentes\n\n | \n\n | Peça\n | Como é\n\n | Logo\n | visor: quatro colchetes de canto em volta de \"FF\" em negrito, num disco de 132 px `#FBFCFE` com aro `#E8E8EA`\n\n | Cabeçalho\n | disco + \"Frame by Frame\" (Inter 500) + pílula escura \"on Whop\" (`#2F2E2F`), ocupando x 474–1063\n\n | Janela do hub\n | raio 93, `#FCFDFF`, faixa de cima `#F1F6FF`, busca, coluna de ícones e o cartão do curso (\"Course · 8 lessons\")\n\n | Cursor\n | seta do macOS (preta, contorno branco, sombra leve), que gira até −36° no mergulho, cresce 1,6× no hover e afunda 15% no clique\n\n | Ícone do app\n | squircle navy de 276 → 178 px, raio de 28% da largura, sobre halo cinza `#E9E9E7`; quatro quadrados de 92 px (raio 26) em órbita, travando em cruz a 216 px\n\n | Barra de menus\n | moldura do notebook (`#686866` no brilho), barra navy, Wi-Fi, bateria, a marca e as três bolinhas, \"Mon Jun 22 9:41 AM\" a 34 px\n\n | Caixa de vidro\n | `backdrop-filter: blur(10px) saturate(1.15) brightness(1.1)`, branco de 24% a 10%, aro de cima `inset 0 1.5px 0` branco 75%, borda interna de 1 px, sombra `0 30px 70px` navy a 32%; 726×228, raio 60\n\n | Página da aula\n | trilha \"Courses › Remake any launch video\", título \"2.1 Choose a reference\", texto com \"frame for frame\" em destaque\n\n | Cartão\n | branco, capa de 627×536 com raio 64, alça no topo, \"MODULE 2\" e \"Remake any launch video\"\n\n | Cartões com título de vidro\n | 538×348, raio 57, pílula fosca (\"Module 3\", \"Module 5\") e \"•••\" fosco; o título (\"Launch\", \"Sound\") é a arte desfocada e clareada (`feGaussianBlur 9`, `feComponentTransfer` 0,62 / 0,43), recortada pelas letras, com degradê branco 30% → 2% e contorno de 2 px, cortado pela borda de baixo do cartão\n\n | Fecho\n | a palavra com brilho estreito e halo largo, 26 cópias para o rastro de zoom, colchetes do visor que se desenham e fecham\n\n## Transições\n\nSete cortes secos nos quadros f72, f101, f159, f187, f215, f245 e f301 (2,402 · 3,370 · 5,305 · 6,240 · 7,174 · 8,175 · 10,043 s). Nenhum crossfade: cada plano sai acelerando ou numa rampa de desfoque, e o corte cai no pico. Do plano 2 para o 3, match cut: o ícone para no lugar exato do ícone da barra (432, 507) e os quadrados viram as bolinhas. Do plano 3 para o 4, chicote vertical: `y = −a·(f − 136)^4`, até ~25 px por quadro, com desfoque só acima de 5 px por quadro (`(v − 5)·0,35`).\n\n## Curvas e tabelas\n\n- **Tabelas de chaves por quadro**, interpoladas por cúbica monotônica (Fritsch–Carlson): passa pelos pontos sem passar do alvo e sem quinas de velocidade.\n\n- **Entradas:** ease-out exponencial que anda 12–19% da distância restante por quadro. Exemplo, a página: 420, 315, 210, 170, 140, 116, 96, 81… px (fator ≈ 0,83).\n\n- **Desfoque:** `k·|derivada da tabela|` com teto, separado em x e y (`feGaussianBlur stdDeviation=\"x y\"`).\n\n- **Caixa de vidro nascendo do ícone:** origem no ponto do ícone; escala X 0,12 → 1,025 → 0,993 → 1 e Y 0,04 → 1,035 → 0,99 → 1 (o Y atrasa um quadro e passa mais), assentando em f138.\n\n- **Prompt:** cerca de 1 caractere por quadro, com uma pausa de 1 quadro a cada 2 ou 3; cursor de texto sempre aceso.\n\n- **Rastro do fecho:** cópia `i` escalada `1 + i·0,072·s`, opacidade `0,12·(1 − i/26)·s`, com `s` caindo a zero em 6 quadros.\n\n- **Motion blur:** render a 120 qps e `tmix=frames=2:weights=1 1` para 60 qps; eventos discretos presos à grade de 60 qps.\n\n## Câmera\n\nAlém dos movimentos do prompt (zoom de 1,0 a 1,2 no clique do logo e volta a 1,04; panorâmica de +125 px na barra de menus; subida acelerando no chicote), uma deriva por ruído suave com semente (±2 px, ±0,12°) roda em todos os planos. No plano 7, aproximação de 3,5% sobre o logo.\n\n## Trilha\n\n | \n\n | Item\n | Valor\n\n | Música\n | \"Lose Control\" (MEDUZA, Becky Hill, Goodboys), playlist internacional; 124 BPM medido\n\n | Abertura\n | antes do drop, só a voz da música, abafada (passa-alta de 180 Hz e passa-baixa de 2,4 kHz)\n\n | **Drop**\n | **2,467 s**, no corte para o ícone (f72), com impacto\n\n | Prompt\n | música 2,5 dB abaixo entre 3,45 e 5,2 s, para os cliques e as teclas aparecerem\n\n | Fecho\n | a música para seca no corte do fecho (10,043 s) e solta uma cauda de reverb (convolução com um hall de 4 s), mais o drone Atlantic em Dó\n\nTonais em Dó: Clarity com pico no drop e dois Ping Boom, cuja subida serve de riser para o drop e para o fecho.\n\n## Sound design e mix\n\n | \n\n | Ação na tela\n | Efeito\n\n | cabeçalho sobe\n | impacto suave com passa-baixa, whoosh curto\n\n | pílula \"on Whop\"\n | pop\n\n | janela abre, cursor entra e mergulha\n | whoosh longo e curtos, abafados\n\n | hover e anel no logo\n | clique leve, pop\n\n | clique no logo e no ícone da barra\n | clique de mouse\n\n | corte do drop\n | whoosh longo + impacto + Ping Boom\n\n | órbita dos quadrados\n | whoosh de giro; um pop por quadrado, subindo 0/+3/+5/+7 semitons\n\n | colapso até a barra\n | whoosh curto + impacto grave\n\n | vidro nasce do ícone\n | pop\n\n | prompt digitado\n | tecla de teclado, bem baixa\n\n | chicote e página chegando\n | whoosh longo com pico no corte, papel deslizando\n\n | cortes dos cartões\n | whoosh curto, pop, impacto no corte de 8,175 s\n\n | visor \"foca\"\n | foco de câmera, clique ao travar, sino\n\n | fecho\n | whoosh longo com pico no corte, impacto, brilho (shimmer), obturador nos colchetes\n\n- 85 efeitos em `at = evento − pico`, listados em `audio/cues.json`.\n\n- Final com `loudnorm` em duas passagens: −14,0 LUFS, pico −1,4 dBTP; fade só nos últimos 60 ms.\n\n## O que é \"humano\" neste vídeo\n\n- Nenhum plano começa parado; tudo chega já em movimento.\n\n- O cursor \"olha\" para onde vai, cresce no hover e afunda no clique.\n\n- Os quadrados travam um depois do outro, com um pequeno rebote cada.\n\n- O logo, que no original ficava congelado, foca como uma câmera e pulsa nas batidas.\n\n- O cursor da página desce e some quando o cartão sobe, em vez de ficar abandonado sobre o texto."
+    },
+    {
+      "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 `render(f)` pura em função do quadro (na grade de 29,97), chamada por um único tween; cada plano é uma tabela de chaves por quadro interpolada por cúbica monotônica\n\n | `audio/mix.py`\n | monta a trilha (intro só com a voz abafada, instrumental a partir do drop, música parando seca no corte do fecho com cauda de reverb), soma os efeitos em `evento − pico`, abaixa a música 2,5 dB na cena do prompt e faz o `loudnorm` em duas passagens (−14 LUFS)\n\n | `scripts/revisar.sh`\n | junta o render de 120 qps em 60 qps com `tmix` de 2 quadros, monta as folhas de contato (a nossa e a do original) e mede os saltos entre quadros fora dos cortes\n\n | `scripts/pares.py`\n | monta pares \"original\n\n- **Instale o básico:** Node.js (para o `npx`), ffmpeg e Python 3 com numpy e soundfile. A fonte e o GSAP já vêm no pacote.\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- **Render:** da pasta do projeto, `npx --yes hyperframes@0.8.144 render hf --fps 120 --quality high --output render/raw120-v1.mp4` (cerca de 1 min 40 s com 2 processos) e depois `bash scripts/revisar.sh v1`, que gera `render/video60-v1.mp4`, as folhas e a lista de saltos. Por fim, junte o vídeo de 60 qps com `audio/mix-final.wav` no ffmpeg.\n\n- **Som** (opcional): coloque `audio/` ao lado de `hf/`, aponte `SFX`, `PREM` e `TON` no `mix.py` para `audio/sfx/nivelados`, `audio/sfx/premium` e `audio/sfx/tonais` e rode `python audio/mix.py`.\n\n- **Comparar com o original:** o `pares.py` e o `revisar.sh` procuram `estudo/ref-remake-1080.mp4`; o recorte está em `referencias/estudo/`.\n\n**Pegadinhas:** com o `tmix`, todo evento discreto (corte, letra digitada, piscar do cursor) precisa cair na grade de 60 qps (`ceil(t·60)/60`); senão o corte vira um dissolve de 1 quadro e aparece um cursor fantasma. Desfoque alto demais apaga a forma: se um quadro parecer vazio, baixe o desfoque. O quadrado branco da órbita some no fundo branco sem a borda de 1 px e a sombra. No ffmpeg, para tirar quadros de revisão, use `-ss` depois do `-i`; antes dele, às vezes saem quadros com blocos."
+    },
+    {
+      "titulo": "As decisões de direção",
+      "texto": "- **A especificação é a estrutura.** Os quadros de corte do prompt (f72, f101, f159, f187, f215, f245, f301) foram mantidos; eles caem cerca de 67 ms antes da batida, para o olho chegar no corte e o ouvido no bumbo.\n\n- **Entrar já em movimento, sair acelerando.** Toda entrada anda de 12 a 19% da distância restante por quadro; toda saída acelera ou cresce em desfoque, e o corte acontece no pico.\n\n- **O desfoque segue a velocidade.** Ele é calculado pela derivada da tabela de posição e separado em x e y: vertical no chicote do prompt, horizontal no rastro do fecho.\n\n- **Match cut real.** O ícone para exatamente onde fica o ícone da barra de menus e os quadrados viram as três bolinhas antes do corte; no original, a barra aparecia em outro lugar.\n\n- **Cada quadrado com o seu tempo.** Os quatro quadrados da órbita travam 1,2 quadro um depois do outro, com microrrebote de 4 px e um pop subindo de tom para cada.\n\n- **Logo vivo no lugar do quadro congelado.** O visor \"foca\" (os cantos abrem 7 px e travam com overshoot), três ondas e um halo pulsam nas batidas, com aproximação de 3,5% e deriva.\n\n- **Vidro com acabamento.** A caixa do prompt e os títulos dos cartões são vidro de verdade: desfoque, aro claro em cima, borda interna e sombra larga; os títulos são uma cópia desfocada e clareada da arte, recortada pelas letras.\n\n- **Fecho com a marca.** Os colchetes do visor se desenham e fecham sobre a palavra (com som de obturador), com degradê branco → gelo e brilho passando; a música para seca no corte e solta uma cauda de reverb.\n\nDetalhes de cores, curvas e som: estilo.md. Planos por quadro: 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 | os 8 planos nas posições do original, com ícone squircle de verdade, sombras coloridas e vidro\n\n | v2\n | logo vivo no plano 7 no lugar do quadro parado\n\n | v3 e **v4**\n | correções da revisão com o Gemini ouvindo o vídeo (teclas e cliques +4 dB e música 2,5 dB abaixo na cena do prompt, cursor da página que desce e some, fecho que deixou de ser estático); na v4, entregue, os 7 cortes foram conferidos quadro a quadro, sem quadro misturado e sem salto fora dos cortes"
+    }
+  ],
+  "pacote": [
+    {
+      "pasta": "projeto/",
+      "conteudo": "`hf/index.html` (a composição inteira, com o logo, o ícone, a barra de menus e as artes desenhados em SVG), `hf/gsap.min.js` local, a fonte Inter (400 a 800) em `hf/fonts/`, `hf/BRIEF.md`, os arquivos do projeto HyperFrames e os scripts `scripts/revisar.sh` e `scripts/pares.py`"
+    },
+    {
+      "pasta": "audio/",
+      "conteudo": "mix final, o `mix.py`, a lista dos 85 efeitos (`cues.json`), o trecho da música separado pelo Demucs (voz e instrumental) e os efeitos usados em `audio/sfx/`"
+    },
+    {
+      "pasta": "referencias/",
+      "conteudo": "o vídeo original (as duas telas lado a lado), o prompt original completo, as folhas de contato, a comparação lado a lado, o `APRENDIZADOS.md` (com o método de especificação quadro a quadro), os recortes do painel do remake e do lançamento real do Manus em 1080 e as folhas e quadros do estudo"
+    },
+    {
+      "pasta": "render.mp4",
+      "conteudo": "o vídeo final"
+    },
+    {
+      "pasta": "hf/index.html",
+      "conteudo": "a composição: uma função `render(f)` pura em função do quadro (na grade de 29,97), chamada por um único tween; cada plano é uma tabela de chaves por quadro interpolada por cúbica monotônica"
+    },
+    {
+      "pasta": "audio/mix.py",
+      "conteudo": "monta a trilha (intro só com a voz abafada, instrumental a partir do drop, música parando seca no corte do fecho com cauda de reverb), soma os efeitos em `evento − pico`, abaixa a música 2,5 dB na cena do prompt e faz o `loudnorm` em duas passagens (−14 LUFS)"
+    },
+    {
+      "pasta": "scripts/revisar.sh",
+      "conteudo": "junta o render de 120 qps em 60 qps com `tmix` de 2 quadros, monta as folhas de contato (a nossa e a do original) e mede os saltos entre quadros fora dos cortes"
+    },
+    {
+      "pasta": "scripts/pares.py",
+      "conteudo": "monta pares \"original | nossa\" nos mesmos quadros, para comparar posições"
+    }
+  ],
+  "prompt": "Quero uma vinheta de lançamento no mesmo estilo do projeto \"Frame by Frame\", que está em 07-videos/projetos/frame/, para o meu produto.\n\nProduto: {{PRODUTO}}\nLogo: {{LOGO}} (arquivo, ou peça para desenhar uma marca simples)\nCores da marca: {{CORES}} (ou tire do logo)\nA frase que o usuário digita no produto: {{PROMPT_DO_USUARIO}}\nA página que responde (título + 2 ou 3 frases, com uma frase-chave): {{PAGINA}}\nDois nomes para os cartões: {{CARTOES}}\nFormato e duração: {{FORMATO}} (a referência é 1:1, 1080×1080, 12 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: LEIA-ME.md, estilo.md e roteiro.md da pasta frame, o prompt original em referencias/original/prompt-original.md (inteiro: ele é a aula) e o referencias/APRENDIZADOS.md. Abra o projeto/hf/index.html e me explique em poucas linhas como funcionam o render(f) por quadro, as tabelas de chaves com interpolação monotônica e o desfoque calculado pela velocidade, e o que você vai reaproveitar.\n\n2. Escreva a especificação antes do código, no formato de blocos do prompt original (<inputs> <direction> <structure> <build> <gotchas> <start>): qps de trabalho e do master, a batida como fórmula, os quadros de corte 2 quadros antes da batida, e para cada plano uma tabela de valores por quadro (posição, escala, opacidade, desfoque). Toda entrada já em movimento (12–19% da distância restante por quadro); toda saída acelerando ou em rampa de desfoque, com o corte no pico. No máximo um trecho calmo, declarado, e mesmo ele vivo. Liste os proibidos (crossfade, Math.random, timer, roxo ou outra cor fora da paleta) e as pegadinhas. Me mostre a especificação antes de construir.\n\n3. Trilha num subagente: música real que eu ainda não usei, com batida clara. Meça com o beat_this, ponha o drop no primeiro corte forte e, se a música tiver intro cantada, deixe só a voz abafada antes do drop (Demucs). No fecho, pare a música seca no corte e solte uma cauda de reverb.\n\n4. Reaproveite a engenharia, troque o conteúdo. Mantenha: o render(f) puro chamado por um único tween, as tabelas kf com cúbica monotônica, o desfoque separado em x e y pela derivada, o vidro com aro e backdrop, o título de vidro feito da arte desfocada e clareada recortada pelas letras, o cursor que gira para onde vai e afunda no clique, o match cut do ícone para o próximo plano, a deriva de câmera em todos os planos e o motion blur por subquadros (120 qps + tmix de 2), com todo evento discreto preso à grade de 60 qps. Troque: marca, cores, textos, páginas, cartões e trilha.\n\n5. Som: um efeito por ação, em evento − pico; um pop por elemento em sequência com o tom subindo; whoosh com pico no corte; música abaixando um pouco quando houver digitação e cliques. Final em −14 LUFS com loudnorm em duas passagens.\n\n6. Antes do render completo, me mostre 4 quadros que provem os planos principais (ex.: o cabeçalho na janela, o ícone travado, o prompt completo, os dois cartões). Depois do render, confira cada corte (quadro antes, do corte e depois, sem quadro misturado) e rode o detector de saltos fora dos cortes. Em cada movimento, pergunte: está humano ou robotizado? Entregue o vídeo, a ficha do projeto e uma anotação do que aprendeu.",
+  "campos": [
+    "CARTOES",
+    "CORES",
+    "FORMATO",
+    "LOGO",
+    "PAGINA",
+    "PRODUTO",
+    "PROMPT_DO_USUARIO"
+  ],
+  "fonte": {
+    "nome": "Clube do Motion",
+    "url": "https://clubedomotion.com/projeto/?id=frame",
+    "uso": "liberado pelo dono do Clube do Motion em 18/10/2026 (docs/permissoes/clube-do-motion.md)"
+  }
+}

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

@@ -0,0 +1,118 @@
+{
+  "id": "clube-glass",
+  "titulo": "Glass Tides",
+  "categoria": "saas",
+  "resumo": "filme de produto de 18 s, horizontal, no estilo do Spotify: um palco escuro de cantos arredondados sobre fundo verde, a interface do app recriada e uma única capa de disco, \"Glass Tides\", que atravessa o filme inteiro até virar textura dentro das letras de \"Find your rhythm\". É uma recriação: a referência é o filme que @brainextends gerou com o Claude Opus 5.5 e publicou no prompt-motion.com, a partir de um prompt em blocos que o autor colou inteiro. A nossa versão manteve a linha do tempo do prompt e corrigiu o que o original errava (títulos sobrepostos, dissoluções, barra de progresso parada, nenhum efeito sonoro, 30 qps). Tudo é um HTML só, com o quadro calculado pelo tempo (`window.seek(t)`), renderizado no Chrome a 60 qps com desfoque de movimento por subquadros. O autor: \"ficou muito bom e aprovado\".",
+  "indicado": "marca ou startup apresentando um app ou produto digital; lançamento de recurso em vídeo curto horizontal para site, anúncio ou redes.",
+  "estilo": [
+    "filme de produto",
+    "interface recriada",
+    "modo escuro",
+    "objeto herói",
+    "transferências",
+    "cor da marca como evento",
+    "sincronizado na batida"
+  ],
+  "ficha": {
+    "formato": "1920×1080, 60 qps reais, 16:9, cor BT.709",
+    "duracao": "18,0 s (1.080 quadros), sem narração",
+    "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": "18,0 s (1.080 quadros), sem narração",
+    "Formato": "1920×1080, 60 qps reais, 16:9, cor BT.709",
+    "Ferramenta": "HTML + CSS + JavaScript num arquivo só, render com Playwright no Chrome sem janela, ProRes nos trechos e H.264 no final",
+    "Desfoque de movimento": "4 subquadros por quadro, obturador de meio quadro, juntados no ffmpeg (`tmix`)",
+    "Trilha": "\"Dancin (feat. Luvli) – Krono Remix\", Aaron Smith, 120 BPM; o drop da faixa cai no zoom da capa (8,30 s)",
+    "Som": "47 efeitos em 7 famílias, sempre abaixo da música; −14,0 LUFS",
+    "Referência": "filme Spotify \"Glass Tides\" de @brainextends no prompt-motion.com (30 qps, sem efeitos sonoros)"
+  },
+  "etapas": [
+    {
+      "titulo": "O roteiro",
+      "texto": "**Resumo:** o filme não tem narração; o roteiro é a linha do tempo do prompt em blocos que gerou a referência, cena a cena, com o texto exato da tela. Os tempos abaixo já passaram pelo mapa de tempo, ou seja, são os tempos vistos no vídeo final. O texto da tela é em inglês, como no prompt original.\n\n## De onde veio a estrutura\n\nO prompt da referência tem oito blocos: entrega (formato, duração, 60 qps, fonte editável), direção de arte (palco, fundo, cores, uma fonte, nada de legenda externa ou marca d'água), arte (a capa \"Glass Tides\" de \"AURA\" e as capas secundárias), linha do tempo por segundo, player persistente, qualidade de movimento (molas sem quique, transferências, título que sai antes do próximo), áudio (eletrônica perto de 120 BPM, efeitos abaixo da música) e validação (`seek(t)` determinístico, subquadros, folhas de contato). A nossa versão seguiu a mesma linha do tempo e trocou cada dissolução por uma transferência.\n\n## Cenas por tempo\n\n | \n\n | #\n | Tempo (s)\n | Texto na tela\n | O que acontece\n\n | 1\n | 0,00–0,60\n | —\n | o logotipo cresce de 0 a 150 px no centro do palco, girando de −24° a 0°, com mola de passagem mínima\n\n | 2\n | 0,54–1,35\n | \"Spotify\" · \"Discover\" / \"new music\"\n | o ícone encolhe e sobe; \"Spotify\" sai de trás dele por máscara lateral; \"Discover\" (branco) e \"new music\" (verde) sobem por máscara e saem por cima antes da janela\n\n | 3\n | 1,51–2,30\n | \"Made for you\" · \"Recently played\"\n | a janela do app (barra lateral, busca, 3 capas, player) sobe inclinada (24° → 0°) e assenta com mola; as capas sobem em cascata; a identidade pequena voa até o lugar dela na barra lateral\n\n | 4\n | 2,39–3,30\n | \"New for you\"\n | a câmera aproxima nas 3 capas (escala 1 → 1,42); \"Made for you\" sai antes de \"New for you\" entrar no mesmo lugar; o player passa para a base do palco e a barra de progresso começa a andar\n\n | 5\n | 3,30–4,05\n | \"Fresh finds\"\n | as 3 capas viajam até as miniaturas da lista, uma de cada vez; a 4ª linha (Deep Focus) nasce com mola; a 1ª linha fica verde com equalizador animado\n\n | 6\n | 4,05–4,97\n | \"Every mood\" / \"Find what moves you\"\n | os textos da lista saem, as miniaturas crescem para 236 px e viram uma faixa horizontal na mesma ordem; a faixa desliza para a esquerda e sai em chicote com desfoque direcional\n\n | 7\n | 4,97–5,90\n | \"What do you want to play?\" → \"Glass Tides\" · \"Song · AURA\"\n | a lupa nasce como círculo e se estica até virar o campo; 11 letras digitadas em 0,3 s com cursor verde; o resultado desce com mola e é selecionado com um clique\n\n | 8\n | 5,90–6,55\n | \"Glass Tides\" · \"AURA\"\n | a miniatura do resultado é a própria capa herói: ela cresce até 360 px no centro e deriva enquanto espera\n\n | 9\n | 6,55–7,45\n | \"Glass Tides\" · \"AURA\" · \"A new frequency\" · botão \"Play\"\n | a capa vai para a esquerda; a coluna da direita entra em cascata; o Play chega com mola e é clicado em 7,28 s (afunda 6% e solta uma onda)\n\n | 10\n | 7,45–8,30\n | identidade escura \"Spotify\"\n | um círculo verde nasce do botão e cobre o palco em 0,46 s; a capa encolhe para um bloco de 232 px; a identidade preta com arcos verdes entra embaixo\n\n | 11\n | 8,26–10,10\n | —\n | o escuro volta crescendo de dentro da capa; **no drop (8,30 s)** a capa cresce de 236 para 1.700 px em 0,62 s e segue empurrando devagar; o player volta por cima, translúcido\n\n | 12\n | 9,78–11,14\n | \"Find your\" / \"rhythm\"\n | as letras aparecem em escala 2,5 preenchidas com a própria capa e encolhem até o tamanho final, como se a imagem se recolhesse para dentro da palavra; em 10,30 s ganham as cores finais (branco e degradê verde) e um brilho passa por \"rhythm\"\n\n | 13\n | 11,30–12,55\n | \"Made for your every day\" · \"Your sound, always evolving\"\n | Late Nights, Good Energy e Deep Focus sobem inclinadas em 3D; depois encolhem e Daily Mix 1, 2 e 3 entram pela direita, em leque\n\n | 14\n | 12,51–13,80\n | —\n | seis capas viram quatro: Daily Mix 2 e 3 tombam e recuam; Good Energy vira de costas e mostra a capa herói no verso; as quatro flutuam juntas em profundidade\n\n | 15\n | 13,80–15,30\n | —\n | as capas se fecham em volta do centro como um livro; o ícone nasce no mesmo ponto (14,30 s) com um brilho verde atrás e respira\n\n | 16\n | 15,30–18,00\n | \"Spotify\" · \"Discover new music\" / \"every day\"\n | o ícone vai para a esquerda; \"Spotify\" (118 px) entra por cortina macia sem nunca encostar nele; a linha final entra em 16,30 s; o conjunto cresce 1,8% até o fim\n\n## Momentos para a trilha\n\n- 0,30–7,30 s: pulso grave em cada tempo, introdução da faixa 8 dB mais alta.\n\n- 7,30–8,30 s: um compasso sem pulso, para a subida da própria faixa aparecer.\n\n- **8,30 s: drop no zoom da capa**, com whoosh e impacto.\n\n- 10,24 s: nota tonal (lá) quando as letras ganham cor.\n\n- 14,32 s: Ping Boom em lá quando o ícone nasce do centro.\n\n- 15,52 s: nota tonal (mi) na marca; a música sai em rampa de 16,4 s a 18,0 s.\n\nA lista completa dos 47 efeitos, com tempo, arquivo, família e volume, está em `audio/eventos.json`."
+    },
+    {
+      "titulo": "A identidade visual",
+      "texto": "**Resumo:** palco quase preto de cantos arredondados sobre um fundo verde atmosférico que se move devagar, interface do Spotify recriada em HTML, Figtree no lugar da fonte do Spotify e o verde `#1ED760` como única cor de destaque. O movimento usa molas sem quique, transferências por posição e títulos por máscara; o filme roda a 60 qps com desfoque de movimento por subquadros. Números tirados do `index.html`, do `trilha.py` e do tutorial do projeto.\n\n## Palco e fundo\n\n | \n\n | Peça\n | Como é\n\n | Palco\n | 1536×810 (80% × 75% da tela) em (192, 156), centrado na horizontal e 21 px abaixo do centro; cantos de 44 px, fundo `#0b0c0e`, contorno interno de 1 px branco a 7%\n\n | Sombra do palco\n | larga, num div atrás do palco (o `clip-path` do palco cortaria a sombra)\n\n | Fundo externo\n | quatro gradientes: esmeralda luminoso no canto superior esquerdo (`rgba(46,232,120,.95)`), floresta nas laterais, quase preto embaixo (`#010302`); o centro deriva ±1,6% numa senoide lenta e o brilho sobe 22% quando o verde da marca toma o palco (7,5–8,5 s)\n\n | Grão\n | ruído de 256 px com semente fixa, 5% em `overlay`, deslocado a cada quadro; evita faixas no gradiente escuro depois da compressão\n\n | Brilho interno\n | radial verde a 7% no canto superior esquerdo do palco\n\n## Cores e fonte\n\n | \n\n | Token\n | Valor\n | Papel\n\n | Texto\n | `#fff`\n | títulos e marca\n\n | Secundário\n | `#a7a7ad`\n | apoio\n\n | Verde\n | `#1ED760`\n | destaque, botões, linha tocando\n\n | Degradê de \"rhythm\"\n | `#4ff08a → #1ed760 → #16b852`\n | palavra de destaque, com um brilho diagonal que passa\n\n- **Fonte: Figtree** (variável 300–900), a livre mais próxima da tipografia do Spotify. Pesos: 550 no apoio, 650–700 nos títulos, 750–850 na marca e no destaque. A marca \"Spotify\" é texto em Figtree 760 com tracking −0,035 em.\n\n- **Tamanhos de anúncio, não de apresentação:** títulos de 36–46 px, destaque de 66–74 px, marca de 118 px, apoio de 21 px.\n\n## Capas e ícones\n\n- **Capa herói \"Glass Tides\":** gerada no GPT Image 2.5 (seda líquida perolada e vidro derretido, dobra em S, lavanda, ciano, rosa, dourado e menta, sem texto) e ampliada para 2K para aguentar o zoom de 1.700 px.\n\n- **Seis capas em SVG 300×300**, cada uma com título em Figtree 900, um motivo geométrico próprio e rodapé \"SPOTIFY MIX\":\n\n | \n\n | Capa\n | Fundo\n | Motivo\n\n | Late Nights\n | mostarda `#EDB52B`\n | sol em dois tons, lua crescente e 3 estrelas\n\n | Good Energy\n | rosa `#F35B9C`\n | 18 raios em leque e 3 círculos concêntricos\n\n | Deep Focus\n | azul `#2B55E0`\n | 4 anéis finos e esfera com gradiente radial\n\n | Daily Mix 1\n | creme `#E6EBDA`\n | 10 barras de equalizador e \"1\" verde\n\n | Daily Mix 2\n | violeta `#8857F2`\n | grade 6×6 de pontos\n\n | Daily Mix 3\n | coral `#FF6A3C`\n | 5 ondas em traço grosso\n\n- **Logotipo** redesenhado em SVG (círculo verde e três arcos pretos com pontas redondas), com versão invertida para a identidade sobre o verde. Ícones de interface com traço de 2 px e pontas redondas.\n\n- Capas mudam de tamanho por `width/height`, não por `scale`, para texto e SVG ficarem nítidos de 32 px a 250 px.\n\n## Curvas e molas\n\n | \n\n | Nome no código\n | Curva\n | Uso\n\n | expo\n | saída exponencial\n | entrada de texto\n\n | inC\n | cúbica de entrada\n | saídas\n\n | smooth\n | `cubic-bezier(.65,0,.35,1)`\n | câmera e transferências\n\n | move\n | `cubic-bezier(.7,0,.2,1)`\n | capa que viaja\n\n | zoom\n | `cubic-bezier(.55,0,.1,1)`\n | o zoom do drop: o trecho mais rápido fica logo depois do bumbo\n\n | crit\n | mola criticamente amortecida, sem quique\n | janela, lupa, cartões\n\n | soft\n | mola com cerca de 2% de passagem\n | só na chegada da marca e do ícone\n\n- **Cascatas:** capas que sobem 0,06 s uma da outra; capas que viajam para a lista com 0,045 s entre elas; linhas da lista com 0,06 s.\n\n- **Títulos por máscara vertical:** entrada de 0,5 s, saída de 0,15–0,2 s, e o próximo só entra depois que o anterior saiu.\n\n- **Chicote da faixa de capas:** aceleração para a esquerda (900 px, potência 2,2) com desfoque direcional proporcional à velocidade. Sem esse desfoque, os 4 subquadros viram 4 cópias em degrau.\n\n## Transições\n\nCada troca é escrita como \"de quê para quê\" antes de animar: ícone que encolhe e vira a identidade pequena; identidade que voa para a barra lateral da janela; capas que viram miniaturas da lista; miniaturas que viram a faixa \"Every mood\" na mesma ordem, sem cruzar caminhos; miniatura do resultado da busca que vira a capa grande; botão Play que infla até cobrir o palco de verde (círculo de 27 px até 1.020 px em 0,46 s); escuro que volta crescendo de dentro da capa no drop; capa gigante que se recolhe para dentro das letras de \"Find your rhythm\"; capas em 3D que se fecham em volta do ícone como um livro.\n\nQuando um elemento precisa sair de um grupo transformado (janela inclinada, câmera), uma cópia idêntica assume no palco no instante em que o grupo está plano e parado. A troca não aparece.\n\n## 3D\n\nContêiner com `perspective: 1500px` e `preserve-3d`; cada capa tem duas faces com `backface-visibility: hidden` e sombra por face. As quatro capas flutuam ±7 px na mesma onda (período de 1,7 s), defasadas 0,45 rad, e o grupo inteiro orbita de +5° a −5° em Y.\n\n## Render\n\n60 qps reais. Cada quadro é a média de 4 capturas espalhadas em meio intervalo (`--sub 4 --shutter 0.5`): o ffmpeg recebe 240 qps, faz `tmix=frames=4` e pega um quadro a cada quatro. Parado continua nítido; o que se move ganha um rastro contido.\n\n## Trilha\n\n | \n\n | Item\n | Valor\n\n | Música\n | \"Dancin (feat. Luvli) – Krono Remix\", Aaron Smith; deep house a 120 BPM (beat_this)\n\n | Encaixe\n | drop da faixa em 63,62 s; início em 55,32 s para o drop cair no zoom de 8,30 s; batidas do filme em 0,30 + 0,5·k s\n\n | Introdução\n | fica cerca de 16 dB abaixo do refrão; `INTRO_DB = 8`: sobe 8 dB até 6,3 s, desce para +2 dB até 8,26 s e volta a 0 no drop\n\n | Pulso\n | bumbo grave sintetizado (seno de 110 a 48 Hz, passa-baixa de 180 Hz) em cada tempo de 0,30 s a 7,30 s; para um compasso antes do drop\n\n | Saída\n | rampa de 16,4 s a 18,0 s, com uma nota tonal soando sob a marca\n\n## Sound design e mix\n\n | \n\n | Família\n | Quando\n | Arquivo\n | Volume\n\n | pop\n | algo entra (ícone, linhas, busca, resultado, Play, capas)\n | `transitions-bigcasualpop.wav`; os pequenos em cascata com `pop-up-sound-pack.wav`, tom subindo 5–6% por item\n | 0,12–0,42\n\n | clique\n | seleção do resultado e clique no Play\n | `tap.wav`\n | 0,55–0,60\n\n | digitação\n | 11 letras da busca\n | procedural (ruído + seno de 1,9–2,6 kHz, 50 ms)\n | baixo\n\n | whoosh\n | troca de tela, câmera, capa viajando\n | `motion-whoosh-swipe.wav`, `rm-whoosh.wav`, `cinematic-whoosh(-2).wav`, passa-baixa de 7–9 kHz e pan para o lado do movimento\n | 0,26–0,46\n\n | whoosh invertido\n | arte se condensando nas letras\n | `cinematic-whoosh.wav` ao contrário\n | 0,34\n\n | impacto\n | drop e zoom\n | `whoosh-hit-2.wav`\n | 0,62\n\n | marca\n | ícone nasce, verde, letras ganham cor, marca final\n | tonais Ping Boom e Clarity em lá e mi, mais `activating.wav` no verde\n | 0,28–0,55\n\n- Cada efeito entra em `evento − pico do arquivo`.\n\n- Medido no resultado: efeitos sempre abaixo da música (mediana −17 dB, o mais alto −6,8 dB, em janelas de 300 ms).\n\n- **Final:** `loudnorm` em duas passagens para −14 LUFS; pico −2,5 dBFS.\n\n## O que é \"humano\" neste vídeo\n\n- A capa deriva e cresce um pouco enquanto espera, em vez de parar e sair num golpe.\n\n- O ícone respira antes de ir para a marca, e o conjunto final cresce 1,8% até o último quadro.\n\n- O botão Play afunda 6% no clique e solta uma onda branca.\n\n- A palavra \"Spotify\" entra por uma cortina de borda macia e nunca encosta no ícone."
+    },
+    {
+      "titulo": "A montagem em HTML",
+      "texto": "| \n\n | Arquivo\n | O que faz\n\n | `html/index.html`\n | `apply(t)` recalcula cada elemento a partir do tempo, cena por cena, com comentário em cada bloco; `window.seek(t)` espera fontes e imagem e chama `apply`. No fim do script fica a tabela `WARP`, o mapa de tempo que leva os eventos para a batida da música\n\n | `render.mjs`\n | abre o HTML no Chrome sem janela. `--stills 1.0,4.5,8.4 --dir nome` grava quadros parados para conferir; `--full --sub 4 --shutter 0.5 --from 0 --to 2` renderiza um trecho com subquadros\n\n | `render-trechos.sh`\n | renderiza o filme em trechos de 2 s (navegador novo a cada trecho, até 3 tentativas), junta sem recomprimir, põe o áudio e gera o MP4; trecho que já existe é pulado\n\n | `verificar.py`\n | confere o MP4: quadros, intervalo entre quadros, duração, qps, cor, LUFS e pico\n\n | `folha.py`\n | monta a folha de contato de uma pasta de quadros\n\n | `audio/trilha.py`\n | lê a tabela `WARP` direto do HTML, posiciona os efeitos pelo pico de cada arquivo, cria o pulso grave da abertura, ajusta o volume da introdução e normaliza em duas passagens para −14 LUFS\n\n | `audio/analisar.py`\n | mede batidas e tempos fortes com o beat_this e imprime a energia por compasso, para achar o drop de outra faixa\n\n- **Junte as pastas:** copie `audio/` para dentro de `projeto/`. O `trilha.py` lê o mapa de tempo em `../html/index.html` e o `render-trechos.sh` procura `audio/mix.wav`.\n\n- **Ver no navegador:** abra `html/index.html?play` no Chrome para tocar em tempo real, ou `html/index.html?t=8.4` para parar num instante.\n\n- **Preparar o render:** instale Node, ffmpeg e o `playwright-core` (`npm i playwright-core`). No topo do `render.mjs`, troque a linha do `createRequire` pelo caminho do seu `playwright-core` e o `executablePath` pelo Chrome da sua máquina.\n\n- **Quadros de conferência:** `node render.mjs --stills 1.0,4.5,8.4 --dir teste`, depois `python folha.py revisao/teste revisao/folha.jpg`.\n\n- **Som:** nas primeiras linhas do `audio/trilha.py`, aponte `PREM` para `audio/sfx/premium` e `TON` para `audio/sfx/tonais`, e rode `python audio/trilha.py` (gera `audio/mix.wav` e `audio/eventos.json`). Precisa de Python com numpy e scipy.\n\n- **Vídeo:** `bash render-trechos.sh v5 audio/mix.wav` gera `render/glass-tides-v5.mp4`. O filme inteiro leva cerca de 5 min; a prévia sem subquadros, cerca de 80 s. Depois, `python verificar.py render/glass-tides-v5.mp4`.\n\n- **Corrigir só uma cena:** copie a pasta de trechos da versão anterior, apague só os trechos afetados e rode de novo; os outros são reaproveitados.\n\n**Pegadinhas:** sombra com `filter: drop-shadow` achata o 3D e espelha o verso das capas (use `box-shadow` em cada face); `visibility: visible` num filho aparece mesmo com o pai escondido (esconda com `display: none`); o desfoque dos subquadros só aparece no arquivo final, então confira o render completo e não só a prévia."
+    },
+    {
+      "titulo": "As decisões de direção",
+      "texto": "- **Um objeto herói atravessa tudo.** A mesma capa é miniatura da busca, capa grande, bloco no verde, zoom gigante e textura dentro das letras. Ela nunca some para outra aparecer no lugar.\n\n- **Toda troca de cena é uma transferência.** O que sai vira o que entra: capas viram miniaturas da lista, a lista vira a faixa horizontal, o botão Play infla e vira o palco verde, o escuro volta crescendo de dentro da capa. Não há dissolução de tela cheia.\n\n- **Um elemento persistente costura as cenas curtas.** O player fica na base do palco de 2,3 s a 14,3 s, com a barra de progresso andando de verdade.\n\n- **O título sai antes de o próximo entrar** no mesmo lugar: máscara vertical, entrada de 0,5 s e saída de 0,15 a 0,2 s.\n\n- **Nada para morto.** A capa deriva enquanto espera, o ícone respira, as capas em 3D orbitam juntas e o fundo externo se move devagar.\n\n- **A cor da marca é um evento.** O verde nasce do botão Play e o escuro volta de dentro da capa no drop.\n\n- **O drop cai no maior gesto:** o zoom da capa em 8,30 s, no primeiro bumbo do refrão.\n\n- **Mapa de tempo para a grade da música.** Cada cena é animada no tempo que pede, e uma curva leva os eventos à batida ou à colcheia mais próxima: antes, 7 de 25 eventos caíam perto da batida; depois, 20 de 25 caem na colcheia.\n\n- **Família de som por ação.** Pop quando algo entra, clique em botão, digitação no campo, whoosh na troca de tela, impacto no drop e nota no tom quando aparece a marca.\n\n- **Revisão em três passadas** (quadro parado, movimento e olho externo) e conferência do arquivo final.\n\nDetalhes de cores, curvas e som: estilo.md. Cenas por tempo e texto na tela: roteiro.md. Para fazer um filme no mesmo estilo com o seu produto: PROMPT.md."
+    },
+    {
+      "titulo": "As versões até o final",
+      "texto": "| \n\n | Versão\n | O que mudou\n\n | v1\n | primeiro render completo; parou perto do quadro 1.030 porque o Chrome recusou uma captura; não entregue\n\n | v2\n | mapa de tempo na batida, 11 defeitos da primeira revisão corrigidos e render em trechos de 2 s\n\n | v3\n | desfoque direcional no chicote da faixa de capas (os 4 subquadros viravam cópias em degrau), ícone que não cruza mais o \"Discover\", lupa que nasce depois das capas; aprovada com a trilha \"Vibe Check\" (YouTube Audio Library)\n\n | **v4**\n | a mesma imagem da v3, com a trilha trocada a pedido por \"Dancin (Krono Remix)\" da playlist do autor, início em 55,32 s da faixa para o drop cair em 8,30 s e introdução 8 dB mais alta; nenhum quadro mudou"
+    }
+  ],
+  "pacote": [
+    {
+      "pasta": "projeto/",
+      "conteudo": "`html/index.html` (o filme inteiro), `html/assets/` (fonte Figtree, a capa `hero.jpg` e a versão 2K `hero-2k.png`), `render.mjs`, `render-trechos.sh`, `verificar.py`, `folha.py`"
+    },
+    {
+      "pasta": "audio/",
+      "conteudo": "`trilha.py` (música + pulso + efeitos + mix), `analisar.py` (batidas e energia da faixa), a música, as batidas medidas (`dancin-krono.json`), a lista dos 47 eventos (`eventos.json`), o mix final, a faixa só de efeitos e `sfx/` com os 13 arquivos de efeito usados"
+    },
+    {
+      "pasta": "referencias/",
+      "conteudo": "o vídeo original (`ref.mp4`), as folhas de contato dele a 4 qps, a leitura do Gemini com áudio e o estudo da referência com o resumo do prompt em blocos"
+    },
+    {
+      "pasta": "render.mp4",
+      "conteudo": "o filme final (v4)"
+    },
+    {
+      "pasta": "html/index.html",
+      "conteudo": "`apply(t)` recalcula cada elemento a partir do tempo, cena por cena, com comentário em cada bloco; `window.seek(t)` espera fontes e imagem e chama `apply`. No fim do script fica a tabela `WARP`, o mapa de tempo que leva os eventos para a batida da música"
+    },
+    {
+      "pasta": "render.mjs",
+      "conteudo": "abre o HTML no Chrome sem janela. `--stills 1.0,4.5,8.4 --dir nome` grava quadros parados para conferir; `--full --sub 4 --shutter 0.5 --from 0 --to 2` renderiza um trecho com subquadros"
+    },
+    {
+      "pasta": "render-trechos.sh",
+      "conteudo": "renderiza o filme em trechos de 2 s (navegador novo a cada trecho, até 3 tentativas), junta sem recomprimir, põe o áudio e gera o MP4; trecho que já existe é pulado"
+    },
+    {
+      "pasta": "verificar.py",
+      "conteudo": "confere o MP4: quadros, intervalo entre quadros, duração, qps, cor, LUFS e pico"
+    },
+    {
+      "pasta": "folha.py",
+      "conteudo": "monta a folha de contato de uma pasta de quadros"
+    },
+    {
+      "pasta": "audio/trilha.py",
+      "conteudo": "lê a tabela `WARP` direto do HTML, posiciona os efeitos pelo pico de cada arquivo, cria o pulso grave da abertura, ajusta o volume da introdução e normaliza em duas passagens para −14 LUFS"
+    },
+    {
+      "pasta": "audio/analisar.py",
+      "conteudo": "mede batidas e tempos fortes com o beat_this e imprime a energia por compasso, para achar o drop de outra faixa"
+    }
+  ],
+  "prompt": "Quero um filme de produto horizontal no mesmo método do projeto \"Glass Tides\", que está em 07-videos/projetos/glass/, com o meu produto.\n\nProduto ou marca: {{PRODUTO}}\nSite oficial (para tirar cores, fonte e logo): {{SITE}}\nObjeto herói que atravessa o filme (capa, produto, cartão, tela): {{OBJETO_HEROI}}\nMensagem final e chamada: {{CHAMADA}}\nDuração: {{DURACAO}} (a referência tem 18 s) · Formato: {{FORMATO}} (a referência é 1920×1080)\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. Depois abra projeto/html/index.html e veja como apply(t), window.seek(t), as curvas (expo, smooth, move, crit, soft), maskLine() e a tabela WARP funcionam; leia também render.mjs, render-trechos.sh e audio/trilha.py. Me explique em poucas linhas o que você vai reaproveitar.\n\n2. Tire a identidade do assunto, não da imaginação. Abra o site oficial, pegue o logo, as cores do CSS e a fonte (ou a livre mais próxima, como o Figtree fez para o Spotify). Se o objeto herói for uma imagem, gere em alta resolução, sem texto, e amplie para aguentar o maior zoom; as peças secundárias podem ser SVG desenhado no próprio HTML.\n\n3. Escreva o prompt do meu filme no molde em blocos antes de codar: <deliverables> (formato, duração, 60 qps, áudio, fonte editável), <art_direction> (palco, fundo, cores com hex, uma fonte, tamanhos de anúncio), <artwork> (o objeto herói e as peças secundárias), <timeline> (um parágrafo por trecho de ~1 s com o texto exato), <persistent_element> (o elemento que costura as cenas, como o player), <motion_quality>, <audio> e <implementation_and_validation>. Me mostre a linha do tempo e espere meu ok.\n\n4. Escreva cada troca de cena como transferência (\"de quê para quê\") antes de animar: o que sai vira o que entra, e nada de dissolução de tela cheia. O objeto herói nunca some para outro aparecer no lugar. Título sai antes de o próximo entrar no mesmo lugar.\n\n5. Construa copiando o projeto, sem editar o original: troque as capas, os textos, as cores, o objeto herói e o logo; mantenha apply(t) sem transição CSS, timer nem estado acumulado, as molas sem quique, a cópia que assume quando um elemento sai de um grupo transformado, o render em trechos e o verificar.py.\n\n6. Trilha em paralelo, num subagente: música real das minhas playlists, de preferência perto de 120 BPM. Meça com audio/analisar.py, encaixe o drop no maior gesto do filme (início da faixa = drop − tempo do gesto), ajuste o volume da introdução e use uma família de som por ação (pop entra, clique em botão, digitação em campo, whoosh em troca de tela, impacto no drop, nota no tom na marca), com cada efeito em evento − pico e sempre abaixo da música. Final a −14 LUFS.\n\n7. Depois de fechar os tempos, use a tabela WARP para levar os eventos à batida ou à colcheia, mantendo a velocidade entre âncoras entre 0,75 e 1,25 da original.\n\n8. Revise em três passadas antes do render final: quadros parados a 4 qps (folha.py) e recortes em tamanho real; prévia sem subquadros com folhas a 15 qps nas transições; e uma IA que assista com áudio, perguntando onde o movimento para morto, embola, pisca ou vira dissolução barata. Confira cada apontamento nos quadros antes de mexer.\n\n9. Render final com 4 subquadros em trechos de 2 s, confira o arquivo com verificar.py (quadros, qps, duração, −14 LUFS) e olhe o movimento rápido no arquivo final, onde o desfoque pode virar cópias em degrau. Entregue o MP4, o HTML editável e uma anotação do que mudou em relação à referência.",
+  "campos": [
+    "CHAMADA",
+    "DURACAO",
+    "FORMATO",
+    "OBJETO_HEROI",
+    "PRODUTO",
+    "SITE"
+  ],
+  "fonte": {
+    "nome": "Clube do Motion",
+    "url": "https://clubedomotion.com/projeto/?id=glass",
+    "uso": "liberado pelo dono do Clube do Motion em 18/10/2026 (docs/permissoes/clube-do-motion.md)"
+  }
+}