primocode 10.13.0 → 10.14.1

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

@@ -0,0 +1,115 @@
+{
+  "id": "clube-proposito",
+  "titulo": "Cada quadro de propósito",
+  "categoria": "elementos",
+  "resumo": "manifesto de 15 s, 16:9, em oito compassos da música, um por cena: ponto, tipo, forma, campo, partícula, linha, ritmo e assinatura. Um ponto abre o vídeo e o atravessa inteiro, até virar a faísca do Claude no fim; no caminho, a frase \"CADA QUADRO / DE PROPÓSITO.\" entra em tipografia pesada, formas se transformam dentro de uma caixa de transformação, uma flor vira meio-tom e depois grade, partículas 3D viram esfera, toro e cubo, um tubo listrado desenha um laço e anéis de texto giram até um ponto. Primárias Bauhaus (laranja, cobalto, sol) sobre marfim e tinta, com a faísca oficial do Claude. É uma **recriação** do \"Abstract motion design reel\", de @ajith_io, publicado no prompt-motion.com (prompt-motion.com/ajith-io-b5626e) e gerado com o prompt genérico de showreel. A nossa versão troca os cortes secos por cenas que nascem de um ponto, põe motion blur de verdade, música real com drop no compasso 5, uma nota tonal por forma e 101 efeitos.",
+  "indicado": "manifesto de estúdio ou de marca, abertura de showreel e vinheta de apresentação.",
+  "estilo": [
+    "morph de formas",
+    "tipografia pesada",
+    "partículas 3D",
+    "primárias Bauhaus",
+    "HUD de compasso",
+    "corte na batida",
+    "motion blur."
+  ],
+  "ficha": {
+    "formato": "1920×1080, 60 qps, 16:9, cor BT.709",
+    "duracao": "15,0 s (900 quadros); 8 compassos de 1,8775 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": "15,0 s (900 quadros); 8 compassos de 1,8775 s",
+    "Formato": "1920×1080, 60 qps, 16:9, cor BT.709",
+    "Narração": "nenhuma; o texto está na tela",
+    "Ferramenta": "HyperFrames, com tudo num canvas 2D, função pura do tempo; motion blur por subquadros dentro do canvas",
+    "Uso": "manifesto, showreel, vinheta",
+    "Trilha": "\"Spaceman\" (Hardwell), a partir de 22,55 s da faixa; 127,8 BPM; drop em 7,51 s"
+  },
+  "etapas": [
+    {
+      "titulo": "O roteiro",
+      "texto": "**Resumo:** vídeo sem narração em 8 compassos de 1,8775 s, uma cena por compasso e um evento por batida. O texto da tela está em português e sai do `main.js`; os tempos são do vídeo.\n\n## Como o roteiro foi feito\n\n- **Ponto de partida:** o original de @ajith_io, que já trocava as 8 cenas exatamente nos tempos fortes de uma faixa de 128 BPM. A recriação manteve as cenas e a ordem.\n\n- **O que mudou:** 6 das 7 trocas do original eram cortes secos com troca de cor; agora cada cena nasce da anterior a partir de um ponto. O drop passou para o compasso 5, a assinatura usa a faísca oficial do Claude e todo texto foi para o português.\n\n- **Compassos:** 0 · 1,88 · 3,76 · 5,63 · 7,51 · 9,39 · 11,27 · 13,14 s.\n\n## Cenas por tempo\n\n | \n\n | #\n | Tempo (s)\n | Cena (HUD)\n | Texto na tela\n | O que acontece\n\n | 1\n | 0–1,88\n | 01 — PONTO\n | —\n | um ponto laranja no escuro; a cada batida ele vira 2, 4 e 8 pontos num anel, com uma nota por batida; os pontos se juntam e o ponto cresce até encher a tela de laranja\n\n | 2\n | 1,88–3,76\n | 02 — TIPO\n | **CADA** / **QUADRO** / **DE PROPÓSITO.**\n | uma linha por batida: \"CADA\" no impacto, \"QUADRO\" em chicote com eco em contorno e colchetes de foco que travam, \"DE PROPÓSITO.\" letra a letra; o ponto final pousa e a câmera mergulha nele\n\n | 3\n | 3,76–5,63\n | 03 — FORMA\n | \"ROT 000.0°\"; \"FORMA CÍRCULO\", \"QUADRADO\", \"TRIÂNGULO\", \"FLOR\", \"MEIO-TOM\"\n | no escuro, dentro da caixa de transformação, a forma vai de círculo a quadrado, triângulo e flor, uma por batida e uma nota por forma; a flor se enche de pontos e vira meio-tom\n\n | 4\n | 5,63–7,51\n | 04 — CAMPO\n | —\n | sobre o marfim, os pontos voam para a grade de dentro para fora; ondas passam na batida; a grade deita em 3D; tudo implode num ponto e a música para por 0,15 s\n\n | 5\n | 7,51–9,39\n | 05 — PARTÍCULA\n | —\n | **drop:** o cobalto cresce do ponto e as partículas explodem em esfera; a esfera vira toro e depois cubo de arame, que trava no tempo; o cubo encolhe num ponto\n\n | 6\n | 9,39–11,27\n | 06 — LINHA\n | —\n | sobre o sol, um tubo listrado sai do ponto, desenha um laço e estala no nó; o contorno do tubo infla e engole a tela\n\n | 7\n | 11,27–13,14\n | 07 — RITMO\n | \"MOTION DESIGN • ANIMAÇÃO • DIREÇÃO DE ARTE •\"; \"TIPOGRAFIA • 3D • ILUSTRAÇÃO •\"\n | linhas de texto deslizam no escuro, curvam em anéis concêntricos, giram e encolhem até um ponto central\n\n | 8\n | 13,14–15,0\n | 08 — ASSINATURA\n | faísca + **Claude**; \"MOTION DESIGNER\"; \"900 QUADROS · 60 QPS · 128 BPM · FEITO 100% EM CÓDIGO\"\n | o marfim cresce do ponto; o ponto salta e pousa como a faísca do Claude, que abre com três notas; \"MOTION DESIGNER\" entra e a ficha é digitada\n\n## Momentos para a trilha\n\n- 0–1,88 s: a faixa abafada (\"dentro da tela\"), abrindo até o laranja.\n\n- 1,88 s: a faixa abre por inteiro com o impacto do \"CADA\".\n\n- 7,345–7,51 s: respiro (música zerada).\n\n- **7,51 s: drop** da faixa, na explosão da esfera, com Ping Boom em Sol#.\n\n- 13,14 s: assinatura, com o golpe do Ping Boom; a faixa volta a abafar."
+    },
+    {
+      "titulo": "A identidade visual",
+      "texto": "**Resumo:** primárias Bauhaus (laranja, cobalto e sol) sobre marfim e tinta, Inter pesada no tipo, serifa só no \"Claude\" e um HUD mono de compasso. Tudo é desenhado num canvas como função pura do tempo, com motion blur por subquadros. A regra que manda em tudo: uma cena por compasso, troca no tempo forte e toda mudança de fundo nascendo de um ponto. Números tirados do `main.js` e do `build_audio.py`.\n\n## Fontes\n\n | \n\n | Uso\n | Fonte\n | Onde baixar\n\n | Frase \"CADA QUADRO / DE PROPÓSITO.\"\n | Inter 900\n | Google Fonts\n\n | Anéis de texto (\"MOTION DESIGN • ANIMAÇÃO • …\") e \"MOTION DESIGNER\"\n | Inter 800 e 700\n | Google Fonts\n\n | \"Claude\" da assinatura\n | Source Serif 4 600\n | Google Fonts\n\n | HUD, leitura da caixa de transformação, ficha final\n | Geist Mono 400, 15 px, espaçamento 2,5 px\n | Google Fonts / Vercel\n\n## Cores\n\n | \n\n | Token\n | Hex\n | Papel\n\n | Tinta\n | `#141413`\n | fundo dos compassos 1, 3 e 7\n\n | Marfim\n | `#F0EEE6`\n | fundo do compasso 4 e da assinatura\n\n | Laranja\n | `#D97757`\n | o ponto, o fundo da frase, a faísca do Claude\n\n | Cobalto\n | `#3A4BD8`\n | fundo do drop (partículas)\n\n | Sol\n | `#EDB43C`\n | fundo do tubo listrado\n\n | Kraft\n | `#D4A27F`\n | apoio\n\nO original usava as mesmas primárias Bauhaus (vermelho `#EB4033`, azul `#323CF6`, amarelo `#F3C941`) sobre `#111013` e creme `#EAE4DD`; a recriação trouxe o laranja e o marfim do Claude para dentro dessa família.\n\n## Peças\n\n | \n\n | Peça\n | Como é\n\n | Ponto\n | abre sozinho no escuro, vira 2, 4 e 8 pontos num anel, junta num ponto só e cresce até a tela\n\n | Frase\n | \"CADA\" / \"QUADRO\" (em chicote, com eco em contorno marfim atrás) / \"DE PROPÓSITO.\" letra a letra; colchetes de foco que travam e pulam\n\n | Caixa de transformação\n | quadrado com 8 alças e mira no centro, leitura \"ROT 090.0°\" e \"FORMA QUADRADO\"; segue a forma com 60 ms de atraso; a forma deixa 3 contornos atrasados (40, 80 e 120 ms, opacidade 0,21 → 0,07)\n\n | Formas\n | círculo → quadrado (superelipse n = 4) → triângulo arredondado → flor, cada uma como r(θ) em 360 amostras, cantos arredondados por média circular de ±16°\n\n | Meio-tom e grade\n | os pontos de uma filotaxia (ângulo áureo 137,5°) preenchem a flor e cada um vai ao ponto da grade de mesma ordem de distância ao centro; a grade deita em 3D\n\n | Partículas 3D\n | esfera → toro → cubo de arame, derivados da mesma direção de cada ponto\n\n | Tubo listrado\n | listras laranja, marfim e cobalto com contorno escuro, desenhado em pedaços de 70 amostras para o trecho novo passar por cima no nó; pontas redondas em anéis concêntricos\n\n | Anéis de texto\n | \"MOTION DESIGN • ANIMAÇÃO • DIREÇÃO DE ARTE •\" (raio 468) e \"TIPOGRAFIA • 3D • ILUSTRAÇÃO •\" (raio 372), girando em sentidos opostos; frases alternando cheias e em contorno de 1,6 px\n\n | Assinatura\n | faísca oficial do Claude + \"Claude\" em serifa + \"MOTION DESIGNER\" + \"900 QUADROS · 60 QPS · 128 BPM · FEITO 100% EM CÓDIGO\"\n\n | HUD\n | cantoneiras; \"CLAUDE · SHOWREEL DE MOTION\"; \"COMPASSO n/8\" e \"128 BPM\"; quadradinhos que andam na batida; rótulo da cena (\"03 — FORMA\"); contador de quadros e timecode; a cor inverte com o fundo\n\n | Acabamento\n | grão e vinheta leves, fora do motion blur\n\n## Transições\n\n | \n\n | Troca\n | Como acontece\n\n | ponto → frase\n | o ponto cresce em círculo e enche a tela de laranja\n\n | frase → forma\n | mergulho no ponto final de \"PROPÓSITO.\": o escuro volta\n\n | forma → campo\n | a flor vira meio-tom e o meio-tom vira a grade, de dentro para fora\n\n | campo → partículas\n | a grade implode num ponto (respiro de 0,15 s) e explode em esfera no drop, sobre o cobalto\n\n | partículas → linha\n | o cubo encolhe num ponto e o tubo sai dele, sobre o sol\n\n | linha → ritmo\n | o contorno escuro do tubo infla de 82 para ~3.900 px em 0,38 s (curva u^2,2) e engole a tela\n\n | ritmo → assinatura\n | as linhas de texto curvam em anéis (curvatura κ = b/R, de 0 a 1), giram e encolhem num ponto; o ponto salta e vira a faísca\n\nCada fundo novo cresce em círculo a partir do ponto da ação, com borda clara de 18%. Só duas trocas são cortes secos, e as duas caem no bumbo (7,53 e 9,40 s).\n\n## Curvas e molas\n\n- **Mola padrão:** ζ 0,55 e ω 14, com ~112% de pico e assentamento em ~0,55 s.\n\n- Curvas cúbicas e de quarta (`eO3`, `eIO3`, `eO4`), `expoIn` nos mergulhos.\n\n- **Motion blur:** cada quadro é a média de 6 subquadros num obturador de 180°; de 10 a 28 nos trechos rápidos (chicote do \"QUADRO\", mergulho, drop, explosão, trocas em círculo).\n\n## Câmera\n\n- Deriva por senos: cerca de ±9 px na horizontal, ±7,5 px na vertical e ±0,3° de rotação.\n\n- Pulso de escala em cada batida, de 0,45% (1,1% do drop até a assinatura), com ataque de 15 ms e queda de 130 ms.\n\n## Trilha\n\n | \n\n | Item\n | Valor\n\n | Música\n | \"Spaceman\" (Hardwell)\n\n | Trecho\n | 22,55 a 37,55 s da faixa; o drop da faixa (30,06 s) cai em 7,51 s do vídeo\n\n | Andamento e tom\n | 127,8 BPM medido com o `beat_this` (batida 0,4694 s, compasso 1,8775 s); Sol# maior\n\n | Abertura\n | o compasso 1 abafado (passa-baixa de 650 Hz, \"dentro da tela\"), abrindo até o laranja\n\n | Respiro\n | a música zera de 7,345 s até o drop\n\n | Assinatura\n | a faixa volta a abafar a partir do compasso 8\n\n## Sound design e mix\n\n | \n\n | Ação na tela\n | Som\n\n | pontos aparecem no anel\n | pop + nota de malho de vidro, alternando no estéreo\n\n | pontos se juntam\n | riser curto\n\n | \"CADA\" e o laranja\n | impacto + whoosh grave\n\n | \"QUADRO\" em chicote; colchetes travam\n | whoosh curto; clique\n\n | \"DE PROPÓSITO.\"\n | 9 teclas subindo de tom; pop + nota no ponto final\n\n | mergulho no ponto\n | whoosh longo crescendo até o corte\n\n | cada forma nova\n | uma nota do arpejo de Sol# maior + whoosh curto; quatro notas agudas quando vira meio-tom\n\n | grade e campo 3D\n | whoosh longo; notas graves nas ondas; whoosh grave quando deita\n\n | implosão e drop\n | whoosh invertido + Ping Boom em Sol# com a subida em reverso; no drop, impacto + whoosh grave\n\n | toro e cubo\n | whoosh + nota; clique + nota quando trava\n\n | tubo e nó\n | pop, whooshes; pop + nota + clique no nó; whoosh grave + impacto quando infla\n\n | anéis de texto\n | whooshes em cascata; clique + nota no ponto central; riser até a assinatura\n\n | assinatura\n | golpe do Ping Boom + impacto; whoosh no salto, pop no pouso, três notas quando a faísca abre; 18 teclas na ficha\n\n- 101 sons ao todo, cada efeito em `at = evento − pico`. As notas são sintetizadas (malho de vidro: parciais 1 · 2 · 3 · 4,16, decaimentos 0,7 · 0,28 · 0,14 · 0,07 s, 22% de reverb de sala) porque o kit tonal não tem nota curta.\n\n- **Música a 0,78**, abaixada sob os impactos grandes. Respiro antes do drop a −28 dB, contra −17 dB antes e −13 dB depois.\n\n- **Final:** limitador `alimiter=limit=0.7` antes do `loudnorm` em duas passagens (−14 LUFS, TP −2): −14,1 LUFS e pico −1,8 dBTP no MP4. Sem o limitador, o AAC subia o pico para −0,5.\n\n## O que é \"humano\" neste vídeo\n\n- A caixa de transformação chega 60 ms depois da forma, como ação secundária, e o giro ganha peso.\n\n- O tubo cruza por cima de si mesmo no nó, como uma linha de verdade.\n\n- O ponto que abre o vídeo é o mesmo que fecha, e nenhuma cor muda sem origem.\n\n- A câmera respira na batida o tempo todo e bate mais forte depois do drop."
+    },
+    {
+      "titulo": "A montagem no HyperFrames",
+      "texto": "- **Instale o Node.js, o ffmpeg e o Python 3.** O HyperFrames roda pelo `npx`: `npx hyperframes@0.8.144`. As fontes e a faísca já estão em `projeto/hf/assets/`.\n\n- **Edite no `main.js`, não no `index.html`.** Depois de mudar, rode `python build.py` dentro de `projeto/hf/` para gerar o `index.html` de novo.\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 --workers 3 -q delivery` e salve o vídeo mudo em `projeto/render/` como `<nome>-mudo.mp4`. O motion blur já sai do canvas, então o render é a 60 qps; no PC do autor, os 900 quadros levaram ~85 s com 3 workers.\n\n- **Áudio:** copie a pasta `audio/` para dentro de `projeto/` (os scripts esperam `hf/`, `audio/` e `render/` lado a lado). No `build_audio.py`, aponte `SFX2` e `TON` para `audio/sfx/` e rode `python build_audio.py` (precisa de numpy e soundfile). Depois passe o limitador `alimiter=limit=0.7` no `mix-bruto.wav` e rode `bash loudnorm.sh <entrada> mix-final.wav`.\n\n- **Final:** `bash render/montar.sh <nome>` junta o vídeo com o mix e monta a comparação; para a comparação, ajuste o caminho do original para `referencias/original/`."
+    },
+    {
+      "titulo": "As decisões de direção",
+      "texto": "- **Uma cena por compasso, trocando no tempo forte.** A 127,8 BPM, 15 s são exatamente 8 compassos; dentro de cada um, as 4 batidas viram 4 eventos (4 formas, 4 palavras).\n\n- **Um ponto atravessa tudo:** abre o vídeo, vira o fundo, é o ponto final da frase, é para onde a grade implode e de onde a esfera explode, é de onde sai o tubo e, no fim, salta e vira a faísca do Claude.\n\n- **Troca de cor sempre de um ponto da ação:** o fundo novo cresce em círculo a partir do objeto, nunca num corte sem origem. Os dois cortes secos que sobraram caem no bumbo de propósito.\n\n- **Caixa de transformação em volta da forma**, com 8 alças, mira e a leitura \"ROT 090.0° / FORMA QUADRADO\"; ela segue a forma com 60 ms de atraso, o que dá peso ao giro.\n\n- **Morph por função radial** (círculo, superelipse, triângulo arredondado e flor em 360 amostras), e a flor vira meio-tom e grade de dentro para fora.\n\n- **Morph 3D limpo:** toro e cubo derivados da mesma direção de cada ponto da esfera, para os pontos andarem pouco e o morph não virar poeira.\n\n- **Texto reto que curva em anel** e gira até um ponto, com frases alternando cheias e em contorno.\n\n- **Respiro de 0,15 s antes do drop** e o drop no compasso 5, junto da explosão da esfera.\n\n- **Uma nota tonal por forma**, num arpejo de Sol# maior no tom da música, mais 101 sons ao todo.\n\n- **Escala para o celular:** o tipo chega a 1.720 px de largura, os pontos e o tubo são grandes e os anéis ocupam a altura do quadro.\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 | o morph 3D usava distribuições independentes de pontos e virava poeira; corrigido derivando toro e cubo da mesma direção da esfera\n\n | v2\n | vídeo completo, mas tímido em escala quando comparado lado a lado com o original\n\n | **v3**\n | tipo até 1.720 px de largura, pontos do compasso 1 40% maiores, tubo 37% mais grosso e anéis de texto ocupando a altura do quadro; é a versão entregue"
+    }
+  ],
+  "pacote": [
+    {
+      "pasta": "projeto/hf/",
+      "conteudo": "`main.js` (todas as cenas), `template.html.txt` e `build.py` (geram o `index.html` com o script embutido, exigência do lint do HyperFrames), o `index.html` já gerado, `BRIEF.md`, `hyperframes.json`, `package.json` e `assets/` com as fontes (Inter 500/700/800/900, Source Serif 4, Geist Mono) e a faísca do Claude em SVG"
+    },
+    {
+      "pasta": "projeto/render/",
+      "conteudo": "`montar.sh`: junta o vídeo mudo com o mix final e monta a comparação"
+    },
+    {
+      "pasta": "audio/",
+      "conteudo": "`build_audio.py` (trilha, efeitos e as notas tonais sintetizadas em Sol# maior), `loudnorm.sh`, `cues.json` (cada som com tempo e volume), as batidas medidas (`spaceman-beats.json`), a música, 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 e o estudo quadro a quadro com a análise do áudio"
+    },
+    {
+      "pasta": "render/",
+      "conteudo": "`render.mp4`"
+    },
+    {
+      "pasta": "T",
+      "conteudo": "o início de cada compasso (`n × 1,8775 s`); cada cena (`s1` … `s8`) vive no seu compasso"
+    },
+    {
+      "pasta": "WIPES",
+      "conteudo": "as trocas de fundo, sempre em círculo a partir de um ponto da ação"
+    },
+    {
+      "pasta": "subCount",
+      "conteudo": "quantos subquadros cada quadro soma: 6 por padrão, de 10 a 28 nos movimentos rápidos"
+    },
+    {
+      "pasta": "camera(t)",
+      "conteudo": "deriva por senos, rotação lenta e pulso de escala em cada batida, mais forte do drop até a assinatura"
+    },
+    {
+      "pasta": "mola()",
+      "conteudo": "a mola padrão: ~112% de pico, assenta em ~0,55 s (ζ 0,55, ω 14)"
+    }
+  ],
+  "prompt": "Quero fazer um manifesto curto, sem narração, no mesmo estilo do projeto \"Cada quadro de propósito\", que está em 07-videos/projetos/proposito/, com a minha marca.\n\nMarca: {{MARCA}} (site: {{SITE}}; símbolo em SVG)\nA frase do manifesto (2 ou 3 linhas curtas): {{FRASE}} (na referência, \"CADA QUADRO / DE PROPÓSITO.\")\nO que a marca faz, para os anéis de texto (4 a 6 itens): {{ITENS}} (na referência, \"MOTION DESIGN • ANIMAÇÃO • DIREÇÃO DE ARTE • TIPOGRAFIA • 3D • ILUSTRAÇÃO\")\nLinha da ficha final: {{FICHA}} (na referência, \"900 QUADROS · 60 QPS · 128 BPM · FEITO 100% EM CÓDIGO\")\nDuração aproximada: {{DURACAO}} (a referência tem 15 s, 8 compassos)\nFormato: {{FORMATO}} (a referência é 1920×1080; para reels, 1080×1920)\nMúsica: {{MUSICA}} (se vazio, sugira 3 faixas reais perto de 128 BPM com um drop claro 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/proposito/LEIA-ME.md, estilo.md e roteiro.md. Depois abra projeto/hf/main.js (as cenas s1 a s8, os compassos T, as trocas de fundo WIPES, o motion blur por subquadros, a câmera e o HUD) e o audio/build_audio.py (trilha, efeitos e as notas sintetizadas). 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 proposito: copie o que for reaproveitar.\n\n3. Use as skills instaladas: animacao-saas (uma cena por compasso, forma que vira a próxima, mola), motion-app-ae (rota em HTML determinístico), video-referencias (marca real, troca de cor que nasce da ação, uma nota por forma), 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 símbolo em SVG, as cores do CSS e as fontes, e anote cada valor com a fonte num BRAND.md do projeto. Monte uma paleta de cinco papéis como a da referência (um escuro, um claro e três acentos saturados que se revezam nos fundos), um tipo bem pesado para a frase e a fonte da marca só na assinatura.\n\n5. Antes de qualquer código, meça a música com o beat_this e calcule o tom. Me mostre o mapa: o início de cada compasso (n × duração do compasso), a cena de cada compasso (ponto → tipo → forma → campo → partícula → linha → ritmo → assinatura, ou uma adaptação ao meu assunto), os 4 eventos de cada compasso (um por batida), de onde nasce cada troca de cor e onde cai o drop. O mesmo ponto precisa abrir o vídeo, atravessar todas as cenas e virar o meu símbolo no fim.\n\n6. Construa reaproveitando o esqueleto do main.js (edite o main.js e rode o build.py para gerar o index.html): tudo num canvas como função pura do tempo, acaso por hash com semente, motion blur com 6 subquadros num obturador de 180° e mais subquadros nos trechos rápidos, trocas de fundo em círculo a partir do ponto da ação, caixa de transformação com atraso de 60 ms, morph por função radial, morph 3D derivado da mesma direção, texto que curva em anel, câmera com deriva e pulso na batida. Corte seco só no bumbo. Troque cenas, textos, cores, fontes, símbolo e música.\n\n7. Me mostre 4 quadros de teste (abertura, frase, drop e assinatura) e a folha de contato a 4 qps antes do render final, lado a lado com a referência. Em cada movimento, pergunte: está humano ou robotizado? Confira a escala no tamanho do celular: na referência, o tipo chega a 1.720 px de largura.\n\n8. Som em paralelo, num subagente: um efeito para cada entrada e saída, em evento − pico do arquivo, uma nota tonal por forma no tom da música (arpejo subindo; se o kit não tiver nota curta, sintetize o malho de vidro como no build_audio.py), 2 ou 3 camadas no drop e na assinatura, a faixa abafada no primeiro compasso e respiro curto antes do drop. Limitador antes do loudnorm em duas passagens a −14 LUFS.\n\n9. Render a 60 qps (o motion blur já sai do canvas), junte com o mix e rode um detector de salto e de quadro vazio; todo salto que sobrar tem de ser um corte de propósito no bumbo. Entregue o vídeo, a ficha do projeto atualizada e uma anotação em anotacoes/.",
+  "campos": [
+    "DURACAO",
+    "FICHA",
+    "FORMATO",
+    "FRASE",
+    "ITENS",
+    "MARCA",
+    "MUSICA",
+    "SITE"
+  ],
+  "fonte": {
+    "nome": "Clube do Motion",
+    "url": "https://clubedomotion.com/projeto/?id=proposito",
+    "uso": "liberado pelo dono do Clube do Motion em 18/10/2026 (docs/permissoes/clube-do-motion.md)"
+  }
+}

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

@@ -0,0 +1,128 @@
+{
+  "id": "clube-rankhog",
+  "titulo": "Seja a resposta no ChatGPT",
+  "categoria": "saas",
+  "resumo": "filme de lançamento de 54 s, em 16:9 e sem narração, para a Rankhog, ferramenta de SEO pelo Reddit: ela acha as threads que já aparecem no Google e no ChatGPT, escreve a resposta, aquece contas do Reddit que você controla e roda em modo \"Copilot\" (você aprova) ou \"Autopilot\". É uma recriação do \"Reddit marketing tool launch video\" de Anthony Riera (@anthonyriera, fundador da Rankhog), publicado no prompt-motion.com (`anthonyriera-9b1b2a`). O original não nasceu de um prompt, e sim da skill `product-film` dele (repositório `Rieranthony/product-film-skill`, licença MIT), em várias rodadas no Remotion; a recriação usa o kit dessa mesma skill. O mascote, um porco-espinho, ganhou corpo: pula, agacha, corre, espia e dorme. A câmera nunca para, os elementos viajam de uma cena para a outra e cada ação tem o seu som (316 efeitos sobre a música).",
+  "indicado": "startup ou SaaS com mascote ou personagem de marca; lançamento de ferramenta de marketing, SEO ou automação.",
+  "estilo": [
+    "modo escuro",
+    "mascote animado",
+    "frases grandes",
+    "pontilhado",
+    "câmera contínua",
+    "magic move",
+    "cortes na batida"
+  ],
+  "ficha": {
+    "formato": "1920×1080, 60 qps, 16:9, cor BT.709",
+    "duracao": "54,1 s (o original tem 52,8 s)",
+    "motor": "ae",
+    "voz": "sem narração; as frases grandes contam a história",
+    "musica": "ver o guia de estilo",
+    "fontes": "ver o guia de estilo"
+  },
+  "ferramentas": [
+    "Claude Code",
+    "After Effects",
+    "ElevenLabs"
+  ],
+  "ficha_tecnica": {
+    "Duração": "54,1 s (o original tem 52,8 s)",
+    "Formato": "1920×1080, 60 qps, 16:9, cor BT.709",
+    "Voz": "sem narração; as frases grandes contam a história",
+    "Ferramenta": "Remotion 4.0.520 (React); mestre a 240 qps juntado em 60 qps com motion blur",
+    "Referência": "\"Reddit marketing tool launch video\" (@anthonyriera), skill `product-film`",
+    "Trilha": "\"Boneless\" (Steve Aoki, Chris Lake, Tujamo), trecho a partir de 17,14 s da música; 128,02 BPM",
+    "Som": "316 efeitos; mix final a −14,0 LUFS"
+  },
+  "etapas": [
+    {
+      "titulo": "O roteiro",
+      "texto": "**Resumo:** o filme não tem narração; as frases grandes, em inglês como o site, contam a história, e o porco-espinho atua em todas as cenas. Abaixo estão as frases exatamente como aparecem, os atos por tempo (todos escritos em compassos no `cues.ts`) e os momentos da música. A ordem segue o original do @anthonyriera; cada troca passou a levar um elemento da cena anterior.\n\n## Como a história foi montada\n\n- **Arco:** o bicho acorda → apresenta o produto → monta a rede de contas → aquece as contas → acha as threads e escreve a resposta → você aprova ou solta no piloto automático → o Reddit aparece em 1º no Google → o ChatGPT recomenda o produto → slogan e logo.\n\n- **Orçamento por compasso** (regra da skill `product-film`): abertura de 1 a 2 compassos, frase de 1 a 1,5, cena de função de 2 a 4, prova de 1,5 a 2,5, fim de 2. Algo acontece em toda batida.\n\n- **Drop** no clique em \"Autopilot\" (compasso 16); **parada** de um compasso na troca para o ChatGPT (compasso 23).\n\n## Frases grandes, na ordem\n\n- `Meet Rankhog.`\n\n- `Promote one product` / `with many Reddit accounts.`\n\n- `Warm up Reddit accounts you own.`\n\n- `Or let it run.`\n\n- `Rank 1st on Google.`\n\n- `Be the answer` / `on ChatGPT.`\n\n- `Rank on ChatGPT and` / `Google through Reddit.` (o slogan do site)\n\nAs palavras de destaque (\"Rankhog.\", \"one product\", \"you own.\", \"run.\", \"Google.\", \"ChatGPT.\", \"Reddit.\") nascem brancas e são pintadas de laranja; Reddit, Google e ChatGPT entram com o logo antes do nome.\n\nOutros textos da tela: `[x] you own them`, `karma`, `r/startups`, `r/SaaS`, `r/Entrepreneur`, `How do small teams handle support?`, o rascunho `We built (your product) for this. Happy to help you set it up.`, `Approve each action,`, `Approved`, `Copilot` / `Autopilot`, `Joined`, `Post in r/SaaS`, `We stopped pitching and started helping.`, `(your keyword)`, `Get my free Reddit SEO audit ↗`.\n\n## Atos por tempo\n\n | \n\n | #\n | Tempo (s)\n | Compassos\n | O que acontece\n\n | 1\n | 0–3,8\n | 1–2\n | o contorno tracejado do bicho se desenha, o pontilhado sobe de baixo, os olhos abrem; a câmera sai de 114%\n\n | 2\n | 3,3–5,6\n | 2–3\n | \"Meet Rankhog.\" com o bicho descendo para baixo do texto\n\n | 3\n | 5,6–9,4\n | 4–5\n | \"Promote one product with many Reddit accounts.\", com o logo do Reddit antes do nome\n\n | 4\n | 9,4–13,6\n | 6–8\n | a rede: avatares das contas de demonstração ligados ao bicho por linhas\n\n | 5\n | 13,1–18,8\n | 8–10\n | \"Warm up Reddit accounts you own.\"; os avatares viajam para as linhas da lista; as barras de karma enchem segmento a segmento, `[x] Ready` acende em colcheias, o carimbo \"[x] you own them\" desce; o bicho faz polichinelo\n\n | 6\n | 18,8–26,3\n | 11–14\n | o radar de ondas tracejadas sai do bicho e acha as threads; o card vira o post grande; a resposta é digitada com cursor de texto; três checagens; o botão Approve\n\n | 7\n | 26,3–28,6\n | 15–16\n | o Approve vira a metade ativa do seletor Copilot / Autopilot; \"Approve each action,\"\n\n | 8\n | 28,1–30,5\n | 16–17\n | **drop:** o clique em Autopilot solta a enchente laranja de pontilhado; \"Or let it run.\"; o bicho corre\n\n | 9\n | 30,0–37,5\n | 17–20\n | o navegador com as tarefas do piloto (Join, Upvote, Post, Reply) e o cursor laranja \"rankhog\" trabalhando sozinho\n\n | 10\n | 37,5–41,3\n | 21–22\n | a janela vira a busca do Google, com o Reddit em 1º; o bicho espia gigante; \"Rank 1st on Google.\"\n\n | 11\n | 41,3–45,0\n | 23–24\n | **parada** de um compasso; a resposta do ChatGPT recomenda \"(your product)\"; a música volta em 43,12 s\n\n | 12\n | 45,0–47,8\n | 25–26\n | \"Be the answer on ChatGPT.\"\n\n | 13\n | 47,8–51,1\n | 26–28\n | o slogan do site, com os logos voando para o lugar de cada nome\n\n | 14\n | 50,6–54,1\n | 28–29\n | logo com wordmark, endereço e o botão \"Get my free Reddit SEO audit ↗\"; o bicho dorme e vira contorno, como no quadro 0\n\n## Momentos para a trilha\n\n- 0–13 s: groove (compassos 1 a 6).\n\n- 13–28 s: subida; o grave sai e os médios crescem (compassos 7 a 15).\n\n- 28,13 s: drop no clique em Autopilot.\n\n- 41,25 s: parada de um compasso, sem o grave; o bicho treme.\n\n- 43,12 s: volta.\n\n- 52,50 s: fim do último compasso; fade até 54,1 s.\n\nOs tempos de cada efeito estão em `audio/cues-sfx.json`, gerados pelo `mixar.py` com a mesma função `b()` do filme."
+    },
+    {
+      "titulo": "A identidade visual",
+      "texto": "**Resumo:** a identidade é a do site da Rankhog, medida no CSS computado: modo escuro, laranja do Reddit como acento, Geist e Geist Mono, canto reto em tudo, moldura tracejada laranja e marcadores em mono (`[x]`, `[/]`, `[?]`). Por cima, um mascote com corpo e uma textura de pontilhado Bayer que vira enchente no drop. O movimento vem do kit da skill `product-film`: molas em forma fechada, câmera em mola pesada com zoom em escala logarítmica, frases grandes palavra por palavra e magic move entre as cenas. Os números saem de `remotion/src/` e do `audio/mixar.py`.\n\n## Fontes\n\n | \n\n | Uso\n | Fonte\n | Arquivo no pacote\n\n | Frases grandes e interface\n | Geist (100 a 900)\n | `remotion/public/fonts/geist.woff2`\n\n | Marcadores, URLs, rótulos\n | Geist Mono\n | `remotion/public/fonts/geist-mono.woff2`\n\nAs duas são as do site, baixadas dele.\n\n## Cores\n\n | \n\n | Token\n | Hex\n | Papel\n\n | Fundo\n | `#0A0A0A`\n | fundo (oklch 14,5%)\n\n | Cartão\n | `#171717`\n | cartões\n\n | Superfície\n | `#121212`\n | janela do app, um pouco acima do fundo\n\n | Linha\n | `#262626`\n | bordas\n\n | Texto\n | `#FAFAFA`\n | texto principal\n\n | Secundário\n | `#A1A1A1`\n | texto de apoio\n\n | Apagado\n | `#525252`\n | itens inativos\n\n | **Laranja**\n | `#FF4500`\n | acento da marca (o laranja oficial do Reddit), botão chapado, palavra de destaque, cursor do produto\n\n | Laranja quente\n | `#FF6900`\n | tracejado secundário\n\n | Laranja fundo\n | `#842600`\n | tons do pontilhado\n\n | Verde\n | `#5EE9B5`\n | `[x]` e \"Ready\"\n\n | ChatGPT\n | `#10A37F`\n | resposta do ChatGPT\n\n | Google\n | `#4285F4`, `#EA4335`, `#FBBC05`, `#34A853`\n | busca do Google\n\nTudo que anima está em hex: `interpolateColors` não lê oklch nem `color-mix()`.\n\n## Componentes\n\n | \n\n | Peça\n | Como é\n\n | Porco-espinho\n | silhueta do `icon.svg` oficial refeita como polígono de 21 pontos; pose = posição, tamanho, esticar x/y, rotação, giro, olhar, piscar, humor, eriçar, balanço, desenho do contorno e preenchimento\n\n | Frases grandes\n | até 6 palavras em 2 linhas; cada palavra entra com desfoque de 16 px subindo 36 px em 0,3 s (`cubic-bezier(.22,1,.36,1)`) e guarda o lugar desde o início; logo de parceiro a 0,82 em antes do nome\n\n | Palavra de destaque\n | nasce branca e é pintada de laranja pelo pontilhado, da esquerda para a direita, em 0,3 s\n\n | Pontilhado\n | Bayer 4x4 pintado por quadro numa grade de células de 6 px; calmo atrás da interface, ralo atrás das palavras\n\n | Moldura\n | tracejado laranja em SVG (o tracejado em CSS \"anda\" quando a caixa muda de tamanho)\n\n | Contas\n | lista com avatar, nome (`u/founder_builds`, `u/mira_ships`…), barra de karma em segmentos e `[x] Ready` verde\n\n | Radar\n | ondas tracejadas saindo do bicho, que \"acham\" as threads\n\n | Post e rascunho\n | post em r/SaaS, resposta digitada com cursor de texto, três checagens e botão Approve\n\n | Seletor\n | Copilot / Autopilot; a metade ativa nasce do botão Approve\n\n | Navegador\n | tarefas do piloto (Join, Upvote, Post, Reply) e o cursor laranja com etiqueta \"rankhog\"\n\n | Google e ChatGPT\n | busca com o Reddit em 1º lugar; resposta do ChatGPT recomendando \"(your product)\"\n\n | Fecho\n | logo com wordmark, endereço e o botão do site \"Get my free Reddit SEO audit ↗\"\n\n## Transições\n\nMagic move em toda troca possível: o elemento que existe nas duas cenas viaja com mola (150/20), e o resto troca por desfoque (entra 0,18 s depois, desfoque de 10 px). Pares usados: avatar → linha da lista, card → post grande, Approve → metade do seletor, janela → Google, logos → slogan. No logo que voa para o slogan, o próprio item da linha anda `(origem − destino)·(1 − q)`, então o pouso é exato sem medir o DOM. Texto nunca atravessa texto. No drop, a enchente laranja nasce do botão \"Autopilot\".\n\n## Curvas e molas\n\n- **Mola em forma fechada** (`step(t)` do kit): pura, funciona em qualquer qps. Valor que muda de alvo = soma de um degrau por chave (`track`).\n\n- **Câmera:** mola pesada (rigidez 120, amortecimento 30, massa 1,2), com zoom em escala logarítmica.\n\n- **Frases:** `cubic-bezier(.22, 1, .36, 1)` em 0,3 s por palavra.\n\n- **Cursor:** chega exatamente no tempo do clique, em arco leve (até 70 px); o clique amassa 20% em 0,16 s e o alvo reage depois. O cursor do produto (laranja, com etiqueta) é separado do cursor do usuário.\n\n- **Pulo do bicho:** agacha 0,14 s antes (−20% de altura, +13% de largura), estica no ar (+16% de altura no começo e no fim), gira até 10° na direção do salto e pousa amassando (`0,24·e^(−7,5τ)·cos(17τ)`); respiração de ±1,8% a 0,55 Hz; tremidinha só na parada da música.\n\n- **Motion blur:** mestre a 240 qps, média de 4 subquadros (`tmix`) e 1 em cada 4 guardado, para 60 qps.\n\n## Câmera\n\n31 chaves `[tempo, x, y, zoom]` escritas em compassos (de 114% no começo a 100% quando o bicho acorda, aproximações no que está acontecendo, recuos nas trocas). Por cima, sempre: deriva somada de três senoides (±9 px em x, ±6 px em y, ±0,6% de zoom). Ao aproximar numa janela, a barra lateral nunca é cortada no meio da palavra: `x ≥ borda + 960/zoom`.\n\n## Trilha\n\n | \n\n | Item\n | Valor\n\n | Música\n | \"Boneless\" (Steve Aoki, Chris Lake, Tujamo), playlist millennial; trecho a partir de 17,14 s da faixa\n\n | Tempo\n | 128,02 BPM, batida de 0,46866 s, compasso de 1,87464 s; primeiro tempo forte em 0,008 s do filme\n\n | Seções\n | compassos 1–6 groove; 7–15 subida; **16 drop (28,13 s)**; 23 parada de um compasso (41,25 s); 24 volta (43,12 s); 29 fim (52,50 s)\n\n | Fecho\n | fade no fim, 1,65 s depois do último compasso\n\n## Sound design e mix\n\n | \n\n | Ação na tela\n | Efeito\n\n | contorno do bicho se desenha\n | caneta, tom abaixo\n\n | pulo e pouso do bicho\n | boing de desenho animado, pop\n\n | palavra das frases, itens entrando\n | pop, com tom subindo por avatar e por checagem\n\n | barras e contadores\n | contador rolando\n\n | teclas do rascunho\n | tecla de teclado\n\n | cliques\n | clique de mouse, clique curto\n\n | \"[x] you own them\", aprovação\n | carimbo, sucesso\n\n | radar, notificações\n | ruído digital, notificação digital\n\n | trocas de cena\n | whoosh curto, longo ou grave\n\n | drop e volta da parada\n | impacto em três camadas, impactos tonais, riser antes\n\n- 316 efeitos no pico (`evento − pico`), mesma família por ação; a lista está em `audio/cues-sfx.json`.\n\n- Música nivelada a −19 LUFS antes da soma; efeitos ×2,2; `loudnorm` final a −14,0 LUFS.\n\n- Medido no instante de cada acento: clique, pop e carimbo a ±2 dB da música; teclas ~6 dB abaixo; drop e volta da parada ~7 dB acima.\n\n## O que é \"humano\" neste vídeo\n\n- O bicho acorda devagar: o contorno se desenha, o pontilhado sobe e os olhos abrem.\n\n- Ele agacha antes de cada pulo e amassa ao pousar; os espinhos eriçam e balançam.\n\n- Os olhos acompanham a ação; o humor muda por cena; no fim ele dorme.\n\n- A câmera nunca para, nem nos trechos de leitura.\n\n- O cursor chega no tempo do clique, em arco, e o botão responde depois."
+    },
+    {
+      "titulo": "A montagem no Remotion",
+      "texto": "- **Instale o básico:** Node.js, ffmpeg e Python 3 com numpy e scipy. Dentro de `remotion/`, rode `npm install remotion@4.0.520 @remotion/cli@4.0.520 @remotion/bundler@4.0.520 @remotion/renderer@4.0.520 react react-dom` (o projeto original usava uma pasta `node_modules` compartilhada, que não vem no pacote).\n\n- **Veja e edite:** `npx remotion studio src/index.ts` abre o filme no navegador. Para revisar quadros: `node scripts/stills.mjs ../revisao 5 12.4 28.2`.\n\n- **Rascunho rápido:** `npx remotion render src/index.ts Rankhog ../render/draft.mp4 --scale=0.5 --muted`.\n\n- **Render final:** gere o mestre a 240 qps passando `--props='{\"fps\":240}'` e `--pixel-format=yuv444p`, com saída em `render/tmp/master-240.mp4` (12.996 quadros, ~12 min com 12 processos); depois `bash render/finalizar.sh`.\n\n- **Som** (opcional): coloque `audio/` ao lado de `remotion/`, aponte `NIV` e `PREM` no `mixar.py` para `audio/sfx/nivelados` e `audio/sfx/premium` e rode `python -I audio/mixar.py`.\n\n**Pegadinhas de cor:** o Remotion 4.0.520 com `yuv444p` grava em faixa cheia (`yuvj444p`), e o `tmix` converte para faixa limitada sozinho. O que funcionou foi `tmix` → `colorspace=all=bt709:iall=bt601-6-625:irange=tv:range=tv`; confira nos pixels decodificados que o fundo dá 10,10,10 (`#0A0A0A`). Outras: `interpolateColors` não lê `color-mix()` nem oklch (use hex em tudo que anima); tracejado CSS \"anda\" quando a caixa muda de tamanho (use SVG); avatar assíncrono sai vazio (use `<Img>`)."
+    },
+    {
+      "titulo": "As decisões de direção",
+      "texto": "- **A marca medida no site.** Fundo `#0A0A0A`, texto `#FAFAFA`, laranja `#FF4500` (o do Reddit), verde dos `[x]` `#5EE9B5`, Geist e Geist Mono, raio zero, moldura tracejada laranja e marcadores `[x]` `[/]` `[?]`. Tudo anotado com a fonte.\n\n- **O mascote com corpo.** A silhueta do ícone oficial virou um polígono de 21 pontos; cada espinho tem comprimento, eriçar e balanço. Ele agacha antes de pular, estica no ar, pousa amassando, respira o tempo todo, faz polichinelo no \"warm up\", corre no \"let it run\", espia gigante no Google e dorme no fim.\n\n- **Folha de batidas como dado.** Todo o filme é escrito em compassos (`b(16)` é o drop); som e imagem leem a mesma função.\n\n- **Magic move antes de qualquer troca.** O elemento que existe nas duas cenas viaja: avatar → linha da lista, card → post grande, botão Approve → metade ativa do seletor, janela → Google, logos → slogan. O resto troca por desfoque curto.\n\n- **Algo acontece em toda batida.** Barras de karma enchendo segmento a segmento, `[x] Ready` em colcheias, carimbo \"[x] you own them\", digitação com cursor de texto.\n\n- **Interface grande.** Texto de 22 a 54 px a 1080p (o original tinha 13 a 16 px), com a câmera aproximando no que está acontecendo.\n\n- **Palavra-chave pintada pela marca.** A palavra de destaque nasce branca e o pontilhado a pinta de laranja da esquerda para a direita em 0,3 s.\n\n- **Fim que fecha o laço.** Slogan do site, logo com wordmark, endereço e o botão real \"Get my free Reddit SEO audit ↗\"; o bicho dorme e vira contorno, como no quadro 0.\n\nDetalhes de cores, curvas e som: estilo.md. Atos 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 | rascunho\n | render a meia escala e sem som, para revisar tempos e enquadramento\n\n | revisão\n | duas rodadas de quadros (`revisao/v1` e `revisao/v2`), comparadas lado a lado com o original\n\n | **final**\n | quadros parados caíram de 14,7% (original) para 1,1%, sem nenhum trecho parado de 0,5 s; um único salto entre quadros, no flood do drop (28,32 s), intencional; cor conferida nos pixels decodificados"
+    }
+  ],
+  "pacote": [
+    {
+      "pasta": "projeto/",
+      "conteudo": "o projeto Remotion: `remotion/src/film/` (o filme), `remotion/src/kit/` (o kit da skill `product-film`), `remotion/public/` (fontes Geist e Geist Mono, ícone da Rankhog, logos do Reddit, Google e ChatGPT, avatares do site), `remotion/scripts/stills.mjs`, `package.json`, `tsconfig.json` e o `render/finalizar.sh`"
+    },
+    {
+      "pasta": "audio/",
+      "conteudo": "mix final, faixa só de efeitos (`sfx-so.wav`), a música, o `mixar.py`, a lista dos 316 efeitos (`cues-sfx.json`) e os efeitos usados em `audio/sfx/`"
+    },
+    {
+      "pasta": "referencias/",
+      "conteudo": "o vídeo original, a página do original, as folhas de contato, a comparação lado a lado, o `APRENDIZADOS.md` (com o estudo da skill), quadros do estudo, o material do site (ícone, mascote, logos, avatares, texto) e a skill original `product-film` em `skill-original/`, só para leitura"
+    },
+    {
+      "pasta": "render.mp4",
+      "conteudo": "o vídeo final"
+    },
+    {
+      "pasta": "film/cues.ts",
+      "conteudo": "a folha de batidas como dado: `b(compasso, tempo, fração)` dá o segundo de qualquer batida; drop, parada, volta e fim; o início e o fim de cada ato. Nenhuma cena guarda número de quadro"
+    },
+    {
+      "pasta": "film/tokens.ts",
+      "conteudo": "as cores e fontes da Rankhog, medidas no CSS do site, e as contas de demonstração"
+    },
+    {
+      "pasta": "film/Film.tsx",
+      "conteudo": "a composição: camadas (fundo, textura, cenas sob a câmera, bicho, cursores, frases) e as 31 chaves de câmera"
+    },
+    {
+      "pasta": "film/Punch.tsx",
+      "conteudo": "as frases grandes palavra por palavra"
+    },
+    {
+      "pasta": "film/Flood.tsx",
+      "conteudo": "o pontilhado Bayer 4x4 da marca, que vira enchente laranja no drop"
+    },
+    {
+      "pasta": "kit/",
+      "conteudo": "o kit da skill: câmera, mola em forma fechada, cursor e caminho do cursor, pontilhado, frases, tempo"
+    },
+    {
+      "pasta": "scripts/stills.mjs",
+      "conteudo": "empacota uma vez e tira vários quadros (o `remotion still` reempacota a cada chamada)"
+    },
+    {
+      "pasta": "audio/mixar.py",
+      "conteudo": "música nivelada a −19 LUFS, os 316 efeitos em `evento − pico` com ganho ×2,2, nos mesmos tempos do `cues.ts`; `loudnorm` até −14 LUFS e −1 dBTP"
+    },
+    {
+      "pasta": "render/finalizar.sh",
+      "conteudo": "motion blur (`tmix` de 4 subquadros), conversão de cor para BT.709, áudio e comparação com o original"
+    }
+  ],
+  "prompt": "Quero um filme de lançamento no mesmo estilo do projeto \"Seja a resposta no ChatGPT\" (Rankhog), que está em 07-videos/projetos/rankhog/, para o meu produto.\n\nProduto: {{PRODUTO}}\nSite: {{SITE}} (de onde sai o design system)\nMascote, logo ou símbolo que pode virar personagem: {{MASCOTE}}\nFunções que entram no filme (3 a 5): {{FUNCOES}}\nSlogan e chamada final: {{SLOGAN}}\nDuração e formato: {{FORMATO}} (a referência tem 54 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 rankhog, o referencias/APRENDIZADOS.md e a skill original em referencias/skill-original/ (SKILL.md e a pasta reference/). Abra projeto/remotion/src/film/cues.ts, tokens.ts, Hog.tsx, hogScript.ts e Film.tsx e me explique em poucas linhas como a folha de batidas, a câmera, o personagem e as frases se encaixam, e o que você vai reaproveitar.\n\n2. Descoberta da marca, em varreduras paralelas que devolvem valores e caminhos, nunca opinião: CSS computado do site (fundo, texto, secundário, acento, raio, fontes e de onde carregam), logo em SVG, mascote, textura ou assinatura visual e as telas das funções. Escreva um BRAND.md com cada valor e a fonte; ele vence o padrão da skill.\n\n3. Entrevista em duas rodadas, no máximo 4 perguntas por rodada, com 2 a 4 opções e a recomendada primeiro, usando os nomes reais das minhas funções. Rodada 1: onde o filme passa, duração, música, funções. Rodada 2: o que carrega a marca (mascote, logo, só interface), como as palavras aparecem, como as cenas se ligam, extras (cursor, prova, textura). Não pergunte o que o site responde. Depois me mostre 3 quadros de estilo em vez de perguntar o meu gosto.\n\n4. Trilha antes de animar: música real que eu ainda não usei. Meça com o beat_this e escreva o cues.ts com b(compasso, tempo, fração), o drop, a parada e o fim. Orçamento por compasso: abertura 1–2, frase 1–1,5, função 2–4, prova 1,5–2,5, fim 2. Me mostre a folha de batidas com o que acontece em cada compasso antes de construir.\n\n5. Reaproveite a engenharia, troque o conteúdo. Mantenha: o kit (mola em forma fechada, track com um degrau por chave, câmera em mola pesada 120/30/1,2 com zoom em log, cursor que chega no tempo do clique, pontilhado Bayer), as frases grandes (até 6 palavras, desfoque 16 px + subida 36 px em 0,3 s, cada palavra guardando o lugar), a palavra de destaque pintada pela marca, o magic move antes de qualquer troca, a deriva de câmera por cima das chaves e o motion blur por subquadros (mestre a 240 qps + tmix de 4). Se eu tiver mascote, faça o rig por parâmetros como o Hog.tsx: antecipação de 0,14 s, estica no ar, pousa amassando, respira o tempo todo, olhos que piscam e acompanham a ação. Troque: marca, telas, textos, personagem e trilha.\n\n6. Interface grande: nada abaixo de 22 px a 1080p; aproxime a câmera no que está acontecendo, sem cortar barra lateral no meio da palavra.\n\n7. Som: um efeito por ação, em evento − pico, nos mesmos tempos do cues.ts; mesma família por ação, tom subindo nas sequências, impacto em camadas no drop. Música nivelada a −19 LUFS antes de somar, efeitos ×2 a ×3, loudnorm final a −14 LUFS.\n\n8. Revise com stills (scripts/stills.mjs, empacotando uma vez) e com o detector de quadros parados e de saltos. Confira a cor nos pixels decodificados depois da conversão para BT.709. Em cada movimento, pergunte: está humano ou robotizado? Entregue o vídeo, a ficha do projeto e uma anotação do que aprendeu.",
+  "campos": [
+    "FORMATO",
+    "FUNCOES",
+    "MASCOTE",
+    "PRODUTO",
+    "SITE",
+    "SLOGAN"
+  ],
+  "fonte": {
+    "nome": "Clube do Motion",
+    "url": "https://clubedomotion.com/projeto/?id=rankhog",
+    "uso": "liberado pelo dono do Clube do Motion em 18/10/2026 (docs/permissoes/clube-do-motion.md)"
+  }
+}

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

@@ -0,0 +1,116 @@
+{
+  "id": "clube-recursao",
+  "titulo": "Como explicar recursão?",
+  "categoria": "elementos",
+  "resumo": "vídeo explicativo de 77 s, em 16:9 e sem narração, que explica recursão sendo ele mesmo uma pilha de chamadas: cada gênero (explainer corporativo, terminal, videogame 8-bit, documentário de natureza, filme noir, TV infantil, infomercial e trailer de cinema) começa a frase, \"chama\" o gênero seguinte, que já está passando numa tela dentro dele, e só termina a frase na volta. No fundo da pilha fica o caso base, uma página HTML sem estilo nenhum. É uma recriação do \"Recursion explained in genres\" de Ethan Mollick (@emollick), publicado no prompt-motion.com (`emollick-8661a8`) e feito numa tentativa só com o Claude Opus 5.5 a partir de uma frase. A recriação trocou a narração por texto na tela, criou uma câmera que mergulha de tela em tela sem cortes (zoom Droste com o conteúdo ao vivo) e vestiu a mesma música com o figurino de cada gênero. Feito em HyperFrames (HTML + GSAP), com cerca de 330 efeitos sonoros.",
+  "indicado": "criador ou professor explicando um conceito técnico com humor; conteúdo educativo que quer prender pela forma.",
+  "estilo": [
+    "metalinguagem",
+    "tela dentro da tela",
+    "zoom contínuo",
+    "oito estilos",
+    "personagens animados",
+    "paródia de gêneros"
+  ],
+  "ficha": {
+    "formato": "1920×1080, 60 qps, 16:9",
+    "duracao": "77,0 s",
+    "motor": "html",
+    "voz": "sem narração; o texto na tela é a narração, no estilo de cada gênero",
+    "musica": "ver o guia de estilo",
+    "fontes": "ver o guia de estilo"
+  },
+  "ferramentas": [
+    "Claude Code"
+  ],
+  "ficha_tecnica": {
+    "Duração": "77,0 s",
+    "Formato": "1920×1080, 60 qps, 16:9",
+    "Voz": "sem narração; o texto na tela é a narração, no estilo de cada gênero",
+    "Ferramenta": "HyperFrames 0.8.144 (HTML + GSAP); render a 120 qps juntado em 60 qps com motion blur",
+    "Referência": "\"Recursion explained in genres\" (@emollick), 75 s, com narração em TTS; categorias Characters e Code",
+    "Trilha": "\"When They Fight, They Fight\" (Generationals) como espinha contínua, tratada por gênero; \"Red Right Hand\" (Nick Cave & The Bad Seeds) só no noir",
+    "Som": "cerca de 330 efeitos (334 eventos); mix final a −14,0 LUFS, pico −0,8 dBFS"
+  },
+  "etapas": [
+    {
+      "titulo": "O roteiro",
+      "texto": "**Resumo:** o roteiro é uma pilha de chamadas. Na descida (0–47 s), cada gênero começa a explicar recursão, para no meio da frase e mergulha no gênero seguinte; no fundo fica o caso base (47–52 s); na subida (52–77 s), cada gênero termina a frase e devolve a vez para o de cima. Não há voz: o texto na tela, em inglês e no estilo de cada gênero, é a narração. Os tempos vêm do cronograma do `hf/CONTRATO-CENAS.md` (120 BPM, uma batida a cada 0,5 s).\n\n## Como a história foi montada\n\n- **Pedido original:** explicar recursão com cada explicação num estilo de vídeo radicalmente diferente, de forma autorreferente, esperta e rápida.\n\n- **Estrutura:** a frase cortada na ida e completada na volta; contador de profundidade com CALL e RETURN; caso base sem estilo nenhum; final que volta ao quadro 0.\n\n- **Regra do texto:** as palavras aparecem quando seriam \"ditas\" (palavra a palavra, máquina de escrever ou do jeito do gênero), grandes o bastante para o celular.\n\n## Cronograma da pilha\n\n | \n\n | Prof.\n | Cena\n | Descida\n | Mergulho no próximo\n | Volta do próximo\n | Subida\n\n | 0\n | intro\n | 0–4,0\n | 4,0–4,5\n | 72,5–73,0\n | 73,0–77,0\n\n | 1\n | explainer\n | 4,5–9,0\n | 9,0–9,5\n | 70,0–70,5\n | 70,5–72,5\n\n | 2\n | terminal\n | 9,5–14,0\n | 14,0–14,5\n | 68,0–68,5\n | 68,5–70,0\n\n | 3\n | 8-bit\n | 14,5–19,0\n | 19,0–19,5\n | 65,5–66,0\n | 66,0–68,0\n\n | 4\n | natureza\n | 19,5–24,0\n | 24,0–24,5\n | 63,0–63,5\n | 63,5–65,5\n\n | 5\n | noir\n | 24,5–29,5\n | 29,5–30,0\n | 60,5–61,0\n | 61,0–63,0\n\n | 6\n | TV infantil\n | 30,0–34,5\n | 34,5–35,0\n | 58,0–58,5\n | 58,5–60,5\n\n | 7\n | infomercial\n | 35,0–40,5\n | 40,5–41,0\n | 55,0–55,5\n | 55,5–58,0\n\n | 8\n | trailer\n | 41,0–46,5\n | 46,5–47,0\n | 52,0–52,5\n | 52,5–55,0\n\n | 9\n | caso base\n | 47,0–52,0\n | —\n | —\n | —\n\n## Texto da tela por gênero\n\n | \n\n | Gênero\n | Na descida\n | Na subida\n\n | Intro\n | `RECURSION?` · `EASY.` · o player sobe e o play é clicado\n | `RECURSION.` · `STILL CONFUSED?` · `WATCH THIS VIDEO.` · o player rebobina e o play é clicado de novo\n\n | Explainer\n | `The super simple guide` · `Recursion is super simple.` · `It's when something is defined in terms of…`\n | a frase termina com a palavra que faltava\n\n | Terminal\n | `man recursion` · `RECURSION(1)` · `recursion — a function that solves a problem by calling` · `explain(smaller(topic)) depth=3` · `◀ you are here`\n | digita `itself.`, que acende; `[3] explain() returned ✓` · `Process finished with exit code 0` · EXIT 0 brilhando\n\n | 8-bit\n | `SUPER RECURSIVE QUEST` · `PRESS START` · `EACH CALL IS A NEW LEVEL.` · `THE GAME SAVES YOUR SPOT,` · `SO YOU CAN COME BACK` · `RIGHT WHERE YOU…`\n | `LEFT OFF!` · `LEVEL CLEAR!` · `SAVING...`\n\n | Natureza\n | `Episode IV` · `RECURSION` · `A Natural History` · `The Recursive Fern` · `Polypodium recursivum` · `Recursion is everywhere in nature.` · `Each frond…` (`smaller…`)\n | `Fronds, all the way down.` · `Magnificent.`\n\n | Noir\n | `The Recursive Case` · `A CASE FILE IN B&W` · `Recursion.` · `A case inside a case inside…` · `And if it never stops…` · `So get yourself a…`\n | o isqueiro acende e o carimbo vermelho `BASE CASE` bate na pasta\n\n | TV infantil\n | `RECURSION TIME!` · `Hi friends!` · `Open a doll…` · `SMALLER doll inside!` · `Keep going,`\n | `…the TINIEST doll!` · `YAAAY!` · `Bye, friends!`\n\n | Infomercial\n | `AS SEEN ON TV` · `INTRODUCING…` · `THE RECURSION-MATIC 3000™` com o selo `SOLVES ANY PROBLEM` · antes: `GOT A BIG PROBLEM?` · depois: `JUST SOLVE A SMALLER COPY OF IT!` · `HOW?` `SIMPLE.` `YOU JUST…` · `BUT WAIT—THERE'S MORE!`\n | a frase do apresentador termina; `CALL NOW!` e as letras miúdas\n\n | Trailer\n | `IN A WORLD…` · `WHERE EVERY PROBLEM` · `HIDES A SMALLER ONE` · `TO REACH…`\n | `BASE CASE.` · `RECURSION` · `COMING SOON.` · `AND AGAIN.` · cartão de classificação e créditos (\"directed by f(f(n))\")\n\n | Caso base\n | `Base case` · `Nothing left to break down, so I just return` · o botão é clicado · `↑ Now, every paused layer finishes its sentence.` · `Best viewed at depth 9.`\n | —\n\n## Momentos para a trilha\n\n- 0–47 s: a espinha muda de figurino a cada mergulho, no meio do zoom, coberta pelo whoosh; cada chamada toca uma nota acima.\n\n- 24,5–30 s e 60,5–63 s: o noir troca para \"Red Right Hand\".\n\n- 47–52 s: caso base em silêncio, só cliques e ruído de sala.\n\n- 52–73 s: a volta acelera (de 2,5 s para 1,5 s por nível); cada retorno toca uma nota abaixo e cada gênero fecha com o seu gesto.\n\n- 73–77 s: intro de novo, pergunta final e o loop para o começo.\n\nOs 334 eventos de som estão em `audio/events.json`; os mergulhos e o loop, em `audio/schedule.json`."
+    },
+    {
+      "titulo": "A identidade visual",
+      "texto": "**Resumo:** não existe uma identidade única: cada profundidade da pilha é um gênero de vídeo com paleta, tipografia, textura, câmera e personagens próprios, numa versão \"premium\" do gênero. O que amarra tudo é o motor: a câmera mergulha de tela em tela com zoom de ponto fixo, o HUD da pilha fica sempre no topo e a mesma música atravessa o vídeo trocando só de figurino. Os números saem do `hf/engine.js`, das cenas, do `hf/CONTRATO-CENAS.md` e do `audio/build_audio.py`.\n\n## Os gêneros\n\n | \n\n | Prof.\n | Gênero\n | Fontes\n | Paleta e textura\n | A \"tela\" para o próximo\n\n | 0\n | intro e fecho\n | Anton, JetBrains Mono\n | `#0B0B10`, vermelho `#FF3B30`, amarelo `#FFD60A`; túnel de molduras, granulado\n | um player de vídeo\n\n | 1\n | explainer corporativo (escola Headspace/Slack)\n | Inter\n | creme `#FFF6EA`, roxo `#6C5CE7`, coral `#FF7A59`, sol `#FFC93C`, tinta `#23234A`; ilustração chapada\n | o laptop da apresentadora\n\n | 2\n | terminal\n | VT323\n | fósforo verde `#39FF7A` sobre `#021108`; CRT\n | uma janela de emulador que salta da linha de código\n\n | 3\n | videogame 8-bit, \"SUPER RECURSIVE QUEST\"\n | Press Start 2P\n | canvas de 320×180 ampliado 6×\n | a tela do jogo\n\n | 4\n | documentário de natureza\n | Cormorant Garamond (itálico)\n | bokeh, luz natural; samambaia recursiva em canvas\n | uma gota de orvalho (portal redondo)\n\n | 5\n | filme noir, \"The Recursive Case\"\n | Special Elite, Oswald\n | preto e branco estrito: luz de persiana, fumaça, granulado, tremor de projeção\n | a tela do projetor\n\n | 6\n | TV infantil de feltro, \"RECURSION TIME!\"\n | Fredoka\n | céu `#8FD3FF`, rosa `#FF5FA2`, vermelho `#E8443A`, azul `#3E7BE6`, amarelo `#F5B82E`, verde `#3FB25A`, roxo `#9B5DE5`\n | uma TV de feltro que salta numa mola\n\n | 7\n | infomercial dos anos 90\n | Bangers, Anton\n | magenta `#E0218A`, amarelo `#FFD60A`, roxo `#6A2BD9`; VHS com OSD, linhas e ruído\n | a TV do estúdio\n\n | 8\n | trailer de cinema\n | Cinzel\n | azul-petróleo `#05090B → #0D1C22` com ouro `#FFF3C4 → #E9C46A → #8A5A1C`; névoa, feixes de luz, reflexos anamórficos\n | a tela do cinema\n\n | 9\n | caso base\n | Times New Roman, de propósito\n | HTML padrão: botão padrão, link azul sublinhado, ampliado como num navegador a 250%\n | nenhuma\n\nTexto que é narração: linhas principais de 80 a 160 px, legendas de pelo menos 48 px, cada linha na tela por pelo menos 1,2 s. Todo texto de destaque tem acabamento do gênero (brilho, bisel, metal, extrusão, contorno, textura de tinta), menos no caso base.\n\n## HUD da pilha\n\n- Barra de chamadas no topo à esquerda (y < 100 px): vidro escuro a 62%, borda branca a 14%, um chip no estilo de cada gênero que entra na pilha.\n\n- Contador de profundidade no canto superior direito: Anton de 84 px rolando como odômetro, com a etiqueta \"▼ CALL\" (amarela, `#FFD60A`) na descida e \"▲ RETURN\" (verde, `#34C759`) na volta.\n\n- Na profundidade 9, o HUD perde o estilo: Times, preto e link azul sublinhado.\n\n## Transições\n\nToda troca é um mergulho na tela onde o próximo gênero já está passando:\n\n- **Zoom de ponto fixo:** `Z = 1920/R.w`, `f = Z·R.xy/(Z − 1)`, escala `Z^p` com `p` de 0 a 1. Mãe: `x' = f + Z^p·(x − f)`; filha: a mesma transformação composta com R.\n\n- **Descida:** antecipação de −3% nos 0,28 s antes, mergulho de 0,5 s em `cubic-bezier(.62, 0, .22, 1)`, overshoot de 1,4% e assentamento em 0,45 s.\n\n- **Subida:** a filha empurra 1,8% para dentro (antecipação) e sai em `cubic-bezier(.55, 0, .18, 1)`.\n\n- **Recorte:** `clip-path: inset(0 round r)` com o raio indo a 0 no fim do zoom; na gota, `clip-path: circle()` que abre do círculo inscrito até a meia-diagonal.\n\n- **Camadas:** moldura, vidro, mão e cursor da mãe ficam acima da filha (`z-index` de `1000 − nível`).\n\n- A tela pode se mexer (mola, TV saltando) e a câmera segue, porque o retângulo é recalculado a cada quadro.\n\n## Curvas, molas e câmera\n\n- **Mola padrão:** linear de 0 a 1 em 0,25 s e depois ~112% de overshoot que assenta em ~0,6 s; vale para cartões, balões, selos e palavras.\n\n- **Câmera de cada cena:** `drift(t)` com empurrão lento (~1,2%) e flutuação orgânica (~6 px); a câmera nunca para.\n\n- **Personagens:** SVG de formas simples; squash & stretch em pulos e pousos, antecipação, ação sobreposta (cabelo, gravata, antena e orelhas atrasam), piscar a cada 2–4 s (~0,12 s), boca que mexe enquanto a fala está na tela, respiração (escala vertical 1 ↔ 1,015 a ~0,3 Hz).\n\n- **Acaso com semente:** `hash(n)` e `rng(seed)` só na montagem; texturas geradas uma vez e reaproveitadas.\n\n- **Motion blur:** render a 120 qps e `tmix=frames=2` para 60 qps.\n\n## Trilha\n\n | \n\n | Item\n | Valor\n\n | Espinha\n | \"When They Fight, They Fight\" (Generationals), 120 BPM, contínua desde 30,08 s da faixa (batidas em `0,08 + 0,5·n`)\n\n | Explainer\n | limpa e brilhante\n\n | Terminal\n | alto-falante pequeno (380–3.400 Hz) e leve bitcrush\n\n | 8-bit\n | bitcrush de 5 bits e redução de amostras ×7\n\n | Natureza\n | instrumental com passa-baixa em 1,4 kHz e hall de 3,2 s\n\n | Noir\n | troca para \"Red Right Hand\" (Nick Cave & The Bad Seeds), esticada a 120 BPM (`atempo=1.04`), mono, com estalo de vinil\n\n | TV infantil\n | +4 semitons (rubberband)\n\n | Infomercial\n | som de TV (220–6.500 Hz) com saturação\n\n | Trailer\n | metade da velocidade, uma oitava abaixo, reverb de catedral\n\n | Caso base\n | sem música: só cliques e ruído de sala\n\nAs trocas acontecem no meio de cada mergulho, cobertas pelo whoosh.\n\n## Sound design e mix\n\n- Cada cena registra um evento por ação audível (`{ t, kind, desc }`); são 334 no `audio/events.json`. Tipos: pop, whoosh, impacto, clique, tique, digitação, blip, pulo, moeda, power-up, carimbo, boing, brilho, sino, braam, dinheiro, plateia, \"yay\" de criança, isqueiro, projetor, rebobinar, gota, taça, papel, CRT ligando, estática.\n\n- **Nota da pilha:** cada chamada toca uma nota pluck (Karplus-Strong) uma posição acima na pentatônica de Ré maior; cada retorno, uma abaixo.\n\n- **8-bit sintetizado:** blip, pulo com varredura, moeda (Si → Mi) e power-up em arpejo, em onda quadrada.\n\n- As ambiências (pássaros, chuva, parquinho, plateia, drone escuro) e os golpes cinematográficos vêm da biblioteca premium.\n\n- Trilha a ~−19 LUFS antes da soma, efeitos nivelados ×2,2, `loudnorm` em duas passagens: −14,0 LUFS, pico −0,8 dBFS. Por trecho, os gêneros ficam entre −15,6 e −11,9 LUFS; o caso base, em −25, de propósito.\n\n- Sincronia medida na faixa só de efeitos: cliques e carimbos a 2–46 ms do evento.\n\n## O que é \"humano\" neste vídeo\n\n- Nenhuma cena congela: deriva de câmera, piscadas, poeira, chama e tremor de projeção o tempo todo.\n\n- O próximo gênero já está vivo dentro da tela antes do mergulho, e a cena de cima continua viva enquanto a de baixo encolhe na volta.\n\n- Os personagens atuam: o herói do 8-bit corre e pula, o detetive do noir acende o isqueiro, a TV infantil termina num YAAAY.\n\n- Cada gênero termina a frase com um gesto próprio na volta.\n\n- O caso base é parado e sem graça de propósito, e é por isso que funciona."
+    },
+    {
+      "titulo": "A montagem no HyperFrames",
+      "texto": "- **Instale o básico:** Node.js (para o `npx`), ffmpeg e Python 3 com numpy, soundfile, librosa e scipy. As fontes vêm no pacote. O GSAP é carregado do CDN (jsdelivr) no `index.html`: é preciso internet, ou baixe o `gsap.min.js` 3.14.2 para dentro de `hf/` e troque a linha do script.\n\n- **Veja a composição:** dentro de `hf/`, rode `npx --yes hyperframes@0.8.144 preview`. Para conferir uma cena: `npx --yes hyperframes@0.8.144 snapshot --at 31.0,32.4,34.2 --no-end --describe false -o ../revisao/teste .` (cerca de 10 s).\n\n- **Render:** `npx --yes hyperframes@0.8.144 render hf --fps 120 --quality high --workers 4 --output render/video-120.mp4` (levou 14 min 32 s e gera ~500 MB) e depois junte em 60 qps com o áudio: `ffmpeg -i render/video-120.mp4 -i audio/mix_v2.wav -vf \"tmix=frames=2:weights=1 1,fps=60,format=yuv420p\" -map 0:v -map 1:a -c:v libx264 -crf 16 -c:a aac render/final.mp4`.\n\n- **Som** (opcional): aponte `NIV` e `PREM` no `build_audio.py` para `audio/sfx/nivelados` e `audio/sfx/premium` e rode `python audio/build_audio.py audio/events.json audio/mix.wav`, depois `python audio/loudnorm.py audio/mix.wav audio/mix_final.wav`.\n\n**Pegadinhas:** em render paralelo, todo canvas precisa de `getContext('2d', {willReadFrequently: true})`, senão aparecem quadros vazios; as fontes têm de carregar (`document.fonts.load`) antes de registrar a timeline. A fonte Bangers não tem ★ nem ▶: desenhe em SVG. Uma cena vista antes como miniatura não pode sumir e se reconstruir quando o zoom pousa: o estado da miniatura tem de ser o primeiro estado da cena."
+    },
+    {
+      "titulo": "As decisões de direção",
+      "texto": "- **A estrutura é a pilha de chamadas.** Na descida, cada gênero começa a frase e é cortado; na subida, termina a frase com um gesto de conclusão (EXIT 0, LEVEL CLEAR, o carimbo BASE CASE, a gota caindo, YAAAY).\n\n- **Zoom Droste com ponto fixo.** Para entrar numa tela de retângulo R: `Z = 1920/R.w`, ponto fixo `f = Z·R.xy/(Z − 1)`, escala `Z^p`. Em `p = 1` a cena filha fica exatamente em tela cheia, sem salto, e a escala logarítmica dá velocidade constante aos olhos.\n\n- **Conteúdo vivo dentro da tela.** A cena seguinte já está passando dentro da tela pelo menos 1,2 s antes do mergulho; moldura, vidro, mão e cursor ficam numa camada acima dela.\n\n- **A mesma música, outro figurino.** A espinha nunca para; só muda o tratamento (alto-falante pequeno no terminal, bitcrush no 8-bit, passa-baixa e hall na natureza, tom acima na TV infantil, TV saturada no infomercial, metade da velocidade e catedral no trailer). O noir troca de música, e o caso base fica sem música.\n\n- **A pilha se ouve.** Cada chamada toca uma nota uma posição acima na pentatônica de Ré maior (o tom da música); cada retorno, uma abaixo.\n\n- **Cada gênero na sua versão premium.** Paleta, tipografia, textura, câmera e personagens próprios; os personagens têm antecipação, squash & stretch, piscadas, boca que acompanha as palavras e cabelo, antena e gravata com atraso.\n\n- **O caso base sem estilo.** Times, um botão padrão, um link azul sublinhado; até o HUD perde o estilo nessa hora.\n\n- **Volta que respira.** A subida acelera de 2,5 s para 1,5 s por nível, e o fim pergunta \"STILL CONFUSED? WATCH THIS VIDEO.\" e volta ao começo.\n\nDetalhes de cores, fontes, 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 | as dez cenas integradas, revisadas por snapshots e folhas a 4 qps\n\n | **v2**\n | correções da revisão quadro a quadro e mix final; render de 120 qps juntado em 60 qps; existe também uma cópia leve (37 MB) para enviar pelo celular\n\nPonto em aberto: o desfoque com 2 amostras (120 → 60 qps) ainda mostra imagem dupla nos zooms mais rápidos; num próximo, renderizar a 240 qps só nos mergulhos e usar `tmix=frames=4`. A textura de feltro da TV infantil do original é mais rica que a nossa."
+    }
+  ],
+  "pacote": [
+    {
+      "pasta": "projeto/",
+      "conteudo": "`hf/index.html` (a casca, o HUD e o relógio), `hf/engine.js` (câmera recursiva, portais e HUD da pilha), as dez cenas em `hf/scenes/` (intro, explainer, terminal, game, nature, noir, kids, infomercial, trailer, base), as onze fontes do Google Fonts em `hf/assets/fonts/`, o `hf/CONTRATO-CENAS.md`, os arquivos do projeto HyperFrames, o `README.md` do projeto e o `revisao/revisar.py`"
+    },
+    {
+      "pasta": "audio/",
+      "conteudo": "mix final (`mix_v2.wav`), o `build_audio.py` (trilha e efeitos), o `loudnorm.py`, os eventos de som (`events.json`) e o cronograma dos mergulhos (`schedule.json`), as duas músicas e as batidas em `audio/src/`, e os efeitos usados em `audio/sfx/`"
+    },
+    {
+      "pasta": "referencias/",
+      "conteudo": "o vídeo original, o prompt original, as folhas de contato, a comparação lado a lado e o `APRENDIZADOS.md`"
+    },
+    {
+      "pasta": "render.mp4",
+      "conteudo": "o vídeo final"
+    },
+    {
+      "pasta": "hf/engine.js",
+      "conteudo": "dono da câmera, dos mergulhos e do HUD: cada cena diz onde está a sua \"tela\" (`portal(t)`) e o motor faz o zoom com ponto fixo até ela, desenhando a cena filha ao vivo lá dentro, em até três níveis"
+    },
+    {
+      "pasta": "hf/scenes/*.js",
+      "conteudo": "uma cena por gênero, registrada com `update(t)` (desenha a cena a partir do tempo) e `portal(t)` (o retângulo da tela onde passa o próximo gênero); cada uma empurra os seus eventos de som"
+    },
+    {
+      "pasta": "hf/CONTRATO-CENAS.md",
+      "conteudo": "o contrato que permitiu quatro agentes escreverem oito cenas em paralelo sem conflito: API, regras, zonas do HUD e o cronograma"
+    },
+    {
+      "pasta": "hf/index.html",
+      "conteudo": "carrega as fontes, inicia o motor e cria um tween de 77 s cujo `onUpdate` chama `ENGINE.render(t)`"
+    },
+    {
+      "pasta": "audio/build_audio.py",
+      "conteudo": "a espinha musical contínua (fonte = `t + 30,08 s`), o tratamento de cada gênero, a troca para \"Red Right Hand\" no noir, o silêncio no caso base, os efeitos por evento e as notas da pilha"
+    },
+    {
+      "pasta": "audio/loudnorm.py",
+      "conteudo": "`loudnorm` em duas passagens para −14 LUFS e −1 dBTP"
+    },
+    {
+      "pasta": "revisao/revisar.py",
+      "conteudo": "detector de saltos entre quadros e de quadros escuros ou vazios, mais folhas de contato"
+    }
+  ],
+  "prompt": "Quero um vídeo explicativo no mesmo estilo do projeto \"Como explicar recursão?\", que está em 07-videos/projetos/recursao/, com o meu assunto.\n\nConceito a explicar: {{CONCEITO}}\nPor que ele combina com a estrutura de \"um dentro do outro\" (camadas, etapas, níveis, histórico…): {{ESTRUTURA}}\nGêneros que eu quero (ou deixe o agente propor de 5 a 8): {{GENEROS}}\nCom narração ou só texto na tela: {{VOZ}} (a referência é só texto)\nDuração e formato: {{FORMATO}} (a referência tem 77 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 recursao, o referencias/APRENDIZADOS.md e o projeto/hf/CONTRATO-CENAS.md. Abra o projeto/hf/engine.js e uma cena (ex.: projeto/hf/scenes/terminal.js) e me explique em poucas linhas como o motor faz o zoom de ponto fixo, como uma cena declara o portal(t) e como o HUD acompanha a pilha, e o que você vai reaproveitar.\n\n2. Proponha a estrutura antes de construir: a ordem dos gêneros, o que cada um mostra, a frase que ele começa na ida e como a termina na volta, a \"tela\" onde o próximo gênero passa (laptop, TV, gota, projetor…), o caso do fundo (o momento sem estilo) e o fecho que volta ao começo. Monte o cronograma (descida, mergulho, volta, subida) na batida da música e me mostre.\n\n3. Trilha num subagente: uma música real que eu ainda não usei, contínua do começo ao fim, e o tratamento de cada gênero (EQ, bitcrush, reverb, tom, velocidade); troca de figurino no meio de cada mergulho, coberta pelo whoosh. No momento sem estilo, sem música. Uma nota por nível da pilha: sobe na chamada, desce no retorno, no tom da música.\n\n4. Reaproveite o motor, troque as cenas. Mantenha: o engine.js (zoom de ponto fixo com antecipação, overshoot e assentamento; filha ao vivo dentro da tela; camada da mãe acima da filha; HUD da pilha que muda de estilo no fundo), o contrato de cenas com update(t) e portal(t), tudo como função do tempo num único tween, o acaso só por hash com semente, a deriva de câmera em toda cena, a mola padrão e o motion blur por subquadros. Escreva cada gênero na versão \"premium\" dele: paleta, fonte, textura, câmera e personagens próprios, com antecipação, squash & stretch, piscadas e boca acompanhando as palavras. Se valer a pena, divida as cenas entre subagentes em paralelo, cada um mexendo só nos arquivos dele, como no contrato.\n\n5. Texto na tela como narração: as palavras entram quando seriam ditas, linhas principais de 80 a 160 px, cada linha por pelo menos 1,2 s, acabamento do gênero em todo destaque. Passe todo texto pela skill better-portuguese se o vídeo for em português.\n\n6. Som: cada cena registra um evento por ação (entra, sai, bate, pula, clica); efeitos em evento − pico, mesma família por ação. Trilha a ~−19 LUFS antes de somar, efeitos ×2,2, loudnorm em duas passagens a −14 LUFS.\n\n7. Revise com snapshots de cada cena (miniatura dentro da mãe, tela cheia, meio do mergulho, volta) e, depois do render, com o detector de saltos e de quadros vazios. Confira que nenhuma cena some e se reconstrói no pouso do zoom. Em cada movimento, pergunte: está humano ou robotizado? Entregue o vídeo, a ficha do projeto e uma anotação do que aprendeu.",
+  "campos": [
+    "CONCEITO",
+    "ESTRUTURA",
+    "FORMATO",
+    "GENEROS",
+    "VOZ"
+  ],
+  "fonte": {
+    "nome": "Clube do Motion",
+    "url": "https://clubedomotion.com/projeto/?id=recursao",
+    "uso": "liberado pelo dono do Clube do Motion em 18/10/2026 (docs/permissoes/clube-do-motion.md)"
+  }
+}