primocode 10.13.0 → 10.14.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (196) hide show
  1. package/README.md +66 -12
  2. package/bin/primocode.js +148 -8
  3. package/lib/act.js +56 -3
  4. package/lib/catalogo.js +12 -1
  5. package/lib/config.js +1 -0
  6. package/lib/estudio/cota.js +157 -0
  7. package/lib/estudio/dados/projetos/clube-ad5.json +105 -0
  8. package/lib/estudio/dados/projetos/clube-ae-sem-memoria.json +107 -0
  9. package/lib/estudio/dados/projetos/clube-agent.json +120 -0
  10. package/lib/estudio/dados/projetos/clube-antes-e-agora.json +86 -0
  11. package/lib/estudio/dados/projetos/clube-apresentando-clube.json +110 -0
  12. package/lib/estudio/dados/projetos/clube-bluevisa.json +106 -0
  13. package/lib/estudio/dados/projetos/clube-caught-in-the-fire.json +127 -0
  14. package/lib/estudio/dados/projetos/clube-chat-cliente-satisfeito.json +98 -0
  15. package/lib/estudio/dados/projetos/clube-chatgpt-anuncios.json +120 -0
  16. package/lib/estudio/dados/projetos/clube-claude-dj.json +140 -0
  17. package/lib/estudio/dados/projetos/clube-claude-mcp.json +142 -0
  18. package/lib/estudio/dados/projetos/clube-cleanui.json +106 -0
  19. package/lib/estudio/dados/projetos/clube-clinica-take-unico.json +128 -0
  20. package/lib/estudio/dados/projetos/clube-clinica.json +104 -0
  21. package/lib/estudio/dados/projetos/clube-clube-opener.json +125 -0
  22. package/lib/estudio/dados/projetos/clube-clube.json +108 -0
  23. package/lib/estudio/dados/projetos/clube-codigo.json +101 -0
  24. package/lib/estudio/dados/projetos/clube-distilbook.json +104 -0
  25. package/lib/estudio/dados/projetos/clube-drive-upload.json +115 -0
  26. package/lib/estudio/dados/projetos/clube-dub.json +119 -0
  27. package/lib/estudio/dados/projetos/clube-enxovaly.json +105 -0
  28. package/lib/estudio/dados/projetos/clube-fecha7.json +118 -0
  29. package/lib/estudio/dados/projetos/clube-filatov.json +128 -0
  30. package/lib/estudio/dados/projetos/clube-frame.json +108 -0
  31. package/lib/estudio/dados/projetos/clube-glass.json +118 -0
  32. package/lib/estudio/dados/projetos/clube-letra-em-apps.json +84 -0
  33. package/lib/estudio/dados/projetos/clube-letra-globo-3d.json +111 -0
  34. package/lib/estudio/dados/projetos/clube-letra-nos-apps.json +146 -0
  35. package/lib/estudio/dados/projetos/clube-letra-seis-mundos.json +100 -0
  36. package/lib/estudio/dados/projetos/clube-lula-3.json +146 -0
  37. package/lib/estudio/dados/projetos/clube-morph.json +119 -0
  38. package/lib/estudio/dados/projetos/clube-motion-designer.json +115 -0
  39. package/lib/estudio/dados/projetos/clube-motion-pacote.json +112 -0
  40. package/lib/estudio/dados/projetos/clube-movimento.json +103 -0
  41. package/lib/estudio/dados/projetos/clube-not-like-us.json +117 -0
  42. package/lib/estudio/dados/projetos/clube-pinterest-inspiracao.json +86 -0
  43. package/lib/estudio/dados/projetos/clube-pixel-e-tinta.json +108 -0
  44. package/lib/estudio/dados/projetos/clube-ponte.json +118 -0
  45. package/lib/estudio/dados/projetos/clube-processo-edit-tonal.json +126 -0
  46. package/lib/estudio/dados/projetos/clube-processo-motion-100-ia.json +109 -0
  47. package/lib/estudio/dados/projetos/clube-promo.json +114 -0
  48. package/lib/estudio/dados/projetos/clube-proposito.json +115 -0
  49. package/lib/estudio/dados/projetos/clube-rankhog.json +128 -0
  50. package/lib/estudio/dados/projetos/clube-recursao.json +116 -0
  51. package/lib/estudio/dados/projetos/clube-revelar.json +118 -0
  52. package/lib/estudio/dados/projetos/clube-robo.json +125 -0
  53. package/lib/estudio/dados/projetos/clube-shelby-ep2.json +144 -0
  54. package/lib/estudio/dados/projetos/clube-shelby.json +97 -0
  55. package/lib/estudio/dados/projetos/clube-solar-eclipse.json +96 -0
  56. package/lib/estudio/dados/projetos/clube-soldier.json +128 -0
  57. package/lib/estudio/dados/projetos/clube-som-de-cena.json +108 -0
  58. package/lib/estudio/dados/projetos/clube-spotify-candidatura.json +112 -0
  59. package/lib/estudio/dados/projetos/clube-tda-app.json +118 -0
  60. package/lib/estudio/dados/projetos/clube-tda-ia.json +75 -0
  61. package/lib/estudio/dados/projetos/clube-telegram-chat.json +118 -0
  62. package/lib/estudio/dados/projetos/clube-telegram-ilha.json +106 -0
  63. package/lib/estudio/dados/projetos/clube-tennessee-nike.json +132 -0
  64. package/lib/estudio/dados/projetos/clube-tudo-se-move.json +112 -0
  65. package/lib/estudio/dados/projetos/clube-uiad.json +107 -0
  66. package/lib/estudio/dados/projetos/clube-viralgrow.json +108 -0
  67. package/lib/estudio/dados/projetos/clube-whose-side.json +140 -0
  68. package/lib/estudio/dados/projetos/clube-youtube-inscrever.json +108 -0
  69. package/lib/estudio/dados/projetos/elementos-do-site-em-movimento.json +49 -0
  70. package/lib/estudio/dados/projetos/explainer-narrado.json +51 -0
  71. package/lib/estudio/dados/projetos/lancamento-de-produto.json +51 -0
  72. package/lib/estudio/dados/projetos/motion-so-com-sons.json +50 -0
  73. package/lib/estudio/dados/projetos/titulo-em-after-effects.json +51 -0
  74. package/lib/estudio/dados/projetos/tour-de-saas.json +50 -0
  75. package/lib/estudio/dados/projetos-ae/antes-e-agora/ae/cenas.jsx +733 -0
  76. package/lib/estudio/dados/projetos-ae/antes-e-agora/assets/fazer_assets.py +88 -0
  77. package/lib/estudio/dados/projetos-ae/letra-em-apps/ae/cenas.jsx +402 -0
  78. package/lib/estudio/dados/projetos-ae/letra-em-apps/assets/preparar_assets.py +17 -0
  79. package/lib/estudio/dados/projetos-ae/letra-em-apps/assets/svg_para_ae.py +25 -0
  80. package/lib/estudio/dados/projetos-ae/letra-nos-apps/BRIEF-AGENTES.md +31 -0
  81. package/lib/estudio/dados/projetos-ae/letra-nos-apps/README.md +53 -0
  82. package/lib/estudio/dados/projetos-ae/letra-nos-apps/ROTEIRO-CENAS.md +69 -0
  83. package/lib/estudio/dados/projetos-ae/letra-nos-apps/ae/A-agenda.jsx +148 -0
  84. package/lib/estudio/dados/projetos-ae/letra-nos-apps/ae/B-docs.jsx +174 -0
  85. package/lib/estudio/dados/projetos-ae/letra-nos-apps/ae/C-alttab.jsx +113 -0
  86. package/lib/estudio/dados/projetos-ae/letra-nos-apps/ae/D-spotify.jsx +118 -0
  87. package/lib/estudio/dados/projetos-ae/letra-nos-apps/ae/E-notas.jsx +146 -0
  88. package/lib/estudio/dados/projetos-ae/letra-nos-apps/ae/F-jornal1.jsx +144 -0
  89. package/lib/estudio/dados/projetos-ae/letra-nos-apps/ae/G-google.jsx +153 -0
  90. package/lib/estudio/dados/projetos-ae/letra-nos-apps/ae/H-mapa.jsx +176 -0
  91. package/lib/estudio/dados/projetos-ae/letra-nos-apps/ae/I-imagens.jsx +132 -0
  92. package/lib/estudio/dados/projetos-ae/letra-nos-apps/ae/J-jornal2.jsx +191 -0
  93. package/lib/estudio/dados/projetos-ae/letra-nos-apps/ae/K-maps.jsx +184 -0
  94. package/lib/estudio/dados/projetos-ae/letra-nos-apps/ae/camera-movimentos.jsx +48 -0
  95. package/lib/estudio/dados/projetos-ae/letra-nos-apps/ae/camera.jsx +57 -0
  96. package/lib/estudio/dados/projetos-ae/letra-nos-apps/ae/card-spotify.jsx +98 -0
  97. package/lib/estudio/dados/projetos-ae/letra-nos-apps/ae/digitar.jsx +38 -0
  98. package/lib/estudio/dados/projetos-ae/letra-nos-apps/ae/jornal-comum.jsx +196 -0
  99. package/lib/estudio/dados/projetos-ae/letra-nos-apps/ae/letra.jsx +23 -0
  100. package/lib/estudio/dados/projetos-ae/letra-nos-apps/ae/letra_automatica.py +83 -0
  101. package/lib/estudio/dados/projetos-ae/letra-nos-apps/ae/montagem.jsx +74 -0
  102. package/lib/estudio/dados/projetos-ae/letra-nos-apps/ae/w-agenda/render_html.py +13 -0
  103. package/lib/estudio/dados/projetos-ae/letra-nos-apps/ae/w-agenda/util.jsx +162 -0
  104. package/lib/estudio/dados/projetos-ae/letra-nos-apps/ae/w-midia-comum.jsx +114 -0
  105. package/lib/estudio/dados/projetos-ae/letra-nos-apps/ae/wg-util.jsx +360 -0
  106. package/lib/estudio/dados/projetos-ae/letra-nos-apps/assets/F-jornal1/render_html.py +13 -0
  107. package/lib/estudio/dados/projetos-ae/letra-nos-apps/assets/render_w-midia.py +26 -0
  108. package/lib/estudio/dados/projetos-ae/letra-nos-apps/assets/w-midia-ferramentas/inclin.py +30 -0
  109. package/lib/estudio/dados/projetos-ae/letra-nos-apps/assets/w-midia-ferramentas/medir_d.py +36 -0
  110. package/lib/estudio/dados/projetos-ae/letra-nos-apps/assets/w-midia-ferramentas/medir_e.py +27 -0
  111. package/lib/estudio/dados/projetos-ae/letra-nos-apps/camera/ajustar_movimentos.py +61 -0
  112. package/lib/estudio/dados/projetos-ae/letra-nos-apps/camera/ancorar.py +74 -0
  113. package/lib/estudio/dados/projetos-ae/letra-nos-apps/camera/assar.py +47 -0
  114. package/lib/estudio/dados/projetos-ae/letra-nos-apps/camera/camera3d_jornal.py +172 -0
  115. package/lib/estudio/dados/projetos-ae/letra-nos-apps/camera/comparar.py +32 -0
  116. package/lib/estudio/dados/projetos-ae/letra-nos-apps/camera/dados_ae_jornal.py +46 -0
  117. package/lib/estudio/dados/projetos-ae/letra-nos-apps/camera/folha_contato.py +28 -0
  118. package/lib/estudio/dados/projetos-ae/letra-nos-apps/camera/homografia_jornal.py +74 -0
  119. package/lib/estudio/dados/projetos-ae/letra-nos-apps/camera/integrar.py +44 -0
  120. package/lib/estudio/dados/projetos-ae/letra-nos-apps/camera/medir_quadro_a_quadro.py +32 -0
  121. package/lib/estudio/dados/projetos-ae/letra-nos-apps/camera/mesa_2d.py +64 -0
  122. package/lib/estudio/dados/projetos-ae/letra-nos-apps/camera/plot_cenas.py +11 -0
  123. package/lib/estudio/dados/projetos-ae/letra-nos-apps/camera/retificar_quadros.py +38 -0
  124. package/lib/estudio/dados/projetos-ae/letra-nos-apps/camera/w-agenda/assar_ab.py +52 -0
  125. package/lib/estudio/dados/projetos-ae/letra-nos-apps/camera/w-agenda/medir_ab.py +59 -0
  126. package/lib/estudio/dados/projetos-ae/letra-nos-apps/camera/wg_ajustar_h.py +111 -0
  127. package/lib/estudio/dados/projetos-ae/letra-nos-apps/camera/wg_corrige_cam.py +17 -0
  128. package/lib/estudio/dados/projetos-ae/letra-nos-apps/camera/wg_ecc_cadeia.py +80 -0
  129. package/lib/estudio/dados/projetos-ae/letra-nos-apps/camera/wg_finalizar_cam.py +65 -0
  130. package/lib/estudio/dados/projetos-ae/letra-nos-apps/camera/wg_mosaico.py +61 -0
  131. package/lib/estudio/dados/projetos-ae/letra-nos-apps/guia-do-metodo/tutorial-lyric-edit-interfaces/01-gramatica-e-roteiro.md +55 -0
  132. package/lib/estudio/dados/projetos-ae/letra-nos-apps/guia-do-metodo/tutorial-lyric-edit-interfaces/02-camera.md +66 -0
  133. package/lib/estudio/dados/projetos-ae/letra-nos-apps/guia-do-metodo/tutorial-lyric-edit-interfaces/03-montagem-no-ae.md +50 -0
  134. package/lib/estudio/dados/projetos-ae/letra-nos-apps/guia-do-metodo/tutorial-lyric-edit-interfaces/04-render-e-conferencia.md +43 -0
  135. package/lib/estudio/dados/projetos-ae/letra-nos-apps/guia-do-metodo/tutorial-lyric-edit-interfaces/05-abertura-celular-mergulho.md +43 -0
  136. package/lib/estudio/dados/projetos-ae/letra-nos-apps/guia-do-metodo/tutorial-lyric-edit-interfaces.md +42 -0
  137. package/lib/estudio/dados/projetos-ae/letra-nos-apps/transicao/atraso_imagem.py +31 -0
  138. package/lib/estudio/dados/projetos-ae/letra-nos-apps/transicao/fundo.py +56 -0
  139. package/lib/estudio/dados/projetos-ae/letra-nos-apps/transicao/juntar.py +45 -0
  140. package/lib/estudio/dados/projetos-ae/letra-nos-apps/transicao/montar.py +177 -0
  141. package/lib/estudio/dados/projetos-ae/letra-nos-apps/transicao/rastreio.py +74 -0
  142. package/lib/estudio/dados/projetos-ae/letra-nos-apps/transicao/sincronia.py +18 -0
  143. package/lib/estudio/dados/projetos-ae/pinterest-inspiracao/ae/cenas.jsx +530 -0
  144. package/lib/estudio/dados/projetos-ae/pinterest-inspiracao/assets/fazer_assets.py +107 -0
  145. package/lib/estudio/dados/projetos-ae/processo-motion-100-ia/assets/pessoas/figurinha.py +46 -0
  146. package/lib/estudio/dados/projetos-ae/processo-motion-100-ia/comp-a/BRIEF-A.md +83 -0
  147. package/lib/estudio/dados/projetos-ae/processo-motion-100-ia/comp-a/audio.py +179 -0
  148. package/lib/estudio/dados/projetos-ae/processo-motion-100-ia/comp-a/confere.py +20 -0
  149. package/lib/estudio/dados/projetos-ae/processo-motion-100-ia/comp-a/dados/tempo-parte1.js +1 -0
  150. package/lib/estudio/dados/projetos-ae/processo-motion-100-ia/comp-a/dados/tempo-parte2.js +1 -0
  151. package/lib/estudio/dados/projetos-ae/processo-motion-100-ia/comp-a/gerar_emojis.py +11 -0
  152. package/lib/estudio/dados/projetos-ae/processo-motion-100-ia/comp-a/img/filmes/_indice.js +122 -0
  153. package/lib/estudio/dados/projetos-ae/processo-motion-100-ia/comp-a/js/base.js +380 -0
  154. package/lib/estudio/dados/projetos-ae/processo-motion-100-ia/comp-a/js/main.js +86 -0
  155. package/lib/estudio/dados/projetos-ae/processo-motion-100-ia/comp-a/js/p1a.js +169 -0
  156. package/lib/estudio/dados/projetos-ae/processo-motion-100-ia/comp-a/js/p1b.js +455 -0
  157. package/lib/estudio/dados/projetos-ae/processo-motion-100-ia/comp-a/js/p1c.js +389 -0
  158. package/lib/estudio/dados/projetos-ae/processo-motion-100-ia/comp-a/js/p2.js +379 -0
  159. package/lib/estudio/dados/projetos-ae/processo-motion-100-ia/comp-a/video.py +62 -0
  160. package/lib/estudio/dados/projetos-ae/processo-motion-100-ia/take-unico/README.md +65 -0
  161. package/lib/estudio/dados/projetos-ae/processo-motion-100-ia/take-unico/oraculo_take.py +137 -0
  162. package/lib/estudio/dados/projetos-ae/processo-motion-100-ia/take-unico/render_take.py +388 -0
  163. package/lib/estudio/dados/projetos-ae/processo-motion-100-ia/take-unico/take.js +235 -0
  164. package/lib/estudio/editor.js +290 -0
  165. package/lib/estudio/effectcraft.js +152 -0
  166. package/lib/estudio/exportar.js +181 -0
  167. package/lib/estudio/index.js +97 -2
  168. package/lib/estudio/kit-ae/base.jsx +1146 -0
  169. package/lib/estudio/kit-ae/cenas.jsx +395 -0
  170. package/lib/estudio/kit-ae/primitivas.jsx +911 -0
  171. package/lib/estudio/maquina-diretor.js +393 -0
  172. package/lib/estudio/maquina-elementos.js +134 -0
  173. package/lib/estudio/maquina-layout.js +198 -0
  174. package/lib/estudio/maquina-som.js +478 -0
  175. package/lib/estudio/maquina-trilha.js +160 -0
  176. package/lib/estudio/maquina-voz.js +429 -0
  177. package/lib/estudio/maquina.js +516 -0
  178. package/lib/estudio/projetos.js +72 -0
  179. package/lib/headless.js +71 -0
  180. package/lib/hooks.js +72 -0
  181. package/lib/limites.js +100 -0
  182. package/lib/local/cerebro.json +398 -12
  183. package/lib/local/entrada.js +46 -2
  184. package/lib/marca-kit.js +312 -0
  185. package/lib/mcp.js +286 -6
  186. package/lib/perigo.js +31 -3
  187. package/lib/planos.js +49 -19
  188. package/lib/preparar.js +111 -0
  189. package/lib/retomar.js +55 -0
  190. package/lib/sandbox.js +197 -0
  191. package/lib/skills.js +3 -1
  192. package/lib/tools.js +13 -4
  193. package/lib/ui.js +1 -1
  194. package/package.json +4 -2
  195. package/skills/after-effects/SKILL.md +52 -0
  196. package/skills/maquina-de-motion/SKILL.md +84 -0
@@ -0,0 +1,118 @@
1
+ {
2
+ "id": "clube-telegram-chat",
3
+ "titulo": "Do ícone ao chat",
4
+ "categoria": "produto",
5
+ "resumo": "vídeo quadrado de 16,25 s a 60 qps, sem narração, em que o ícone do Telegram sai de uma fileira de apps, dá duas voltas inteiras e vira a tab bar, que vira a lista de conversas, que vira o chat. No chat, a câmera trabalha em pulsos de zoom com giro acumulado e as bolhas são digitadas palavra por palavra no tempo da música. A comp inteira sai de um script do After Effects (`cenas.jsx`) e o som, de um script Python na Mesa. Recriação do estilo de @illdari, feita pelo Clube do Motion.",
6
+ "indicado": "vídeo de app de mensagens ou de atendimento, demonstração de chatbot, conversa com cliente encenada, abertura de produto em que um ícone leva para dentro da interface.",
7
+ "estilo": [
8
+ "interface da Apple",
9
+ "morph contínuo",
10
+ "rotação longa sem mola",
11
+ "letterbox animado",
12
+ "câmera em pulsos de zoom",
13
+ "digitação no tempo da música"
14
+ ],
15
+ "ficha": {
16
+ "formato": "1080×1080, 60 qps, desfoque de movimento com obturador de 240° e 16 amostras",
17
+ "duracao": "16,25 s (975 quadros), sem narração",
18
+ "motor": "ae",
19
+ "voz": "ver o guia de estilo",
20
+ "musica": "ver o guia de estilo",
21
+ "fontes": "SF Pro Text (Regular, Medium e Semibold) e SF Pro Rounded Semibold"
22
+ },
23
+ "ferramentas": [
24
+ "Claude Code",
25
+ "After Effects"
26
+ ],
27
+ "ficha_tecnica": {
28
+ "Duração": "16,25 s (975 quadros), sem narração",
29
+ "Formato": "1080×1080, 60 qps, desfoque de movimento com obturador de 240° e 16 amostras",
30
+ "Ferramenta": "After Effects: um script ExtendScript (`cenas.jsx`) cria o projeto, monta a comp `RECRIACAO` com as precomps `TABBAR`, `LISTA` e `CHAT` (maior que o quadro, para a câmera passear) e salva o `.aep`",
31
+ "Assets": "20 ícones de app em squircle feitos com os glifos oficiais do Simple Icons (CC0), papel de parede verde com desenhos, avatar de uma pessoa gerada; scripts `fazer_icones.py` e `fazer_fundo_chat.py`",
32
+ "Fontes": "SF Pro Text (Regular, Medium e Semibold) e SF Pro Rounded Semibold",
33
+ "Trilha": "\"Hot (Remix)\", de Young Thug com Gunna e Travis Scott, 111 BPM, a partir de 2,33 s da faixa",
34
+ "Som": "40 eventos tirados da comp, tique por palavra, pop por bolha, morph com tonal e chicote; −14,0 LUFS e pico verdadeiro de −1,3 dBFS",
35
+ "Referência": "edit \"Telegram\" com chat cantado, de @illdari (09/08/2026), estudado quadro a quadro",
36
+ "Arquivo final": "MP4 H.264 com áudio AAC, 50 MB"
37
+ },
38
+ "etapas": [
39
+ {
40
+ "titulo": "O roteiro",
41
+ "texto": "**Resumo:** o vídeo não tem narração; o roteiro é a sequência de telas e o diálogo digitado no chat, com os tempos do `cenas.jsx`. O texto é nosso e trocável no bloco `TEXTOS`. Com outro app, mantenha a regra: um objeto só do ícone até a conversa, e as palavras entrando no tempo da música.\n\n## De onde veio a estrutura\n\nO edit estudado leva 16 s do dock de apps até um chat em que as bolhas recebem, palavra por palavra, a letra da música. Este projeto mantém as telas, os tempos e a câmera, e troca a letra por um diálogo sobre o próprio trabalho de motion, com o mesmo número de palavras por bolha e o mesmo ritmo.\n\n## Cenas e texto na tela\n\n | \n\n | Tempo (s)\n | Tela\n | Texto na tela\n\n | 0,00–1,60\n | fundo cinza; ícones de Arc, Finder, Discord, Instagram, Mail, TikTok, Telegram e WhatsApp entram pela direita; barras de cinema fecham\n | —\n\n | 1,60–2,40\n | as barras reabrem; os ícones caem, menos o Telegram, que sobe ao centro\n | —\n\n | 2,00–3,80\n | o Telegram gira e, em 2,85 s, estica numa pílula escura\n | —\n\n | 3,65–5,40\n | ícones e rótulos brotam da pílula; a seleção acende em \"Chats\"; a barra estica e some\n | \"Chats\", \"Contatos\", \"Ajustes\", \"Você\"\n\n | 5,40–6,05\n | lista de conversas em foco, prévias se escrevendo\n | \"Cliente · Dá para trocar a música também?\", \"Marina · Você viu o que eu te mandei?\", \"After Effects · Já tá pronto?\", \"Clube do Motion · Projeto novo no ar\"\n\n | 6,05–6,75\n | só a conversa \"After Effects\" fica e sobe; a prévia vira a primeira bolha\n | \"Já tá pronto?\"\n\n | 6,75–8,10\n | papel de parede verde; a câmera aproxima; chega a bolha enviada\n | \"Falta só o som\"\n\n | 8,10–12,40\n | a 3ª bolha nasce como mancha e é digitada palavra por palavra; a câmera dá um soco e recua; faixas pretas engrossam\n | \"Ajustando cada quadro / pra ficar bem liso\"\n\n | 12,40–14,60\n | chicote de câmera; bolha branca recebida, digitada palavra por palavra\n | \"Manda assim que sair, hein?\"\n\n | 14,60–16,25\n | tudo clareia até o branco\n | —\n\n## Momentos para o som\n\n- A música entra a partir de 2,33 s da faixa; assim, o primeiro tempo forte do refrão (4,30 s na faixa) cai em 1,97 s do vídeo, na queda dos ícones.\n\n- Na grade de 0,54 s da música caem a saída da barra (5,2 s), o isolamento da conversa (6,3 s), a entrada do chat (6,8 s) e o soco de câmera (9,0 a 9,5 s).\n\n- Um pop para cada ícone que entra, queda, whoosh longo com um tonal no morph, pop na pílula, rótulos, clique na seleção, letras da lista, bolha nova, um tique leve por palavra digitada, chicote e o clarão do fim.\n\n- A música fica 11 dB abaixo do nível do arquivo, com fade de 1,4 s no fim."
42
+ },
43
+ {
44
+ "titulo": "A identidade visual",
45
+ "texto": "**Resumo:** cinza claro do iOS (`#EBEBEB`), ícones oficiais em squircle, a pílula da tab bar num preto levemente roxo, a lista no layout do Telegram e o chat com papel de parede verde. Rotações com ease-out puro, entradas pelo desfoque e uma câmera que nunca para no chat. Números tirados do `cenas.jsx`.\n\n## Palco\n\n | \n\n | Peça\n | Como é\n\n | Tela\n | 1080×1080, 60 qps, 8 bits por canal\n\n | Desfoque de movimento\n | obturador de 240°, fase −90°, 16 amostras\n\n | Montagem\n | comp `RECRIACAO` com a fileira de ícones (null `FILEIRA`), as barras de cinema, `TABBAR`, `LISTA` e `CHAT` (precomp de 1.640×1.600, filha do null `CAM`)\n\n | Câmera do chat\n | a âncora do `CHAT` diz qual ponto fica no centro; a escala e o giro ficam no null `CAM`, com `wiggle(2.4,3)` na posição depois de 6,7 s\n\n## Cores\n\n | \n\n | Peça\n | Valor\n\n | Fundo das telas de sistema\n | `#EBEBEB`\n\n | Telegram no giro\n | `#3C93DC`, escurecendo até `#1B1A1F` em 0,6 s; borda `#2E2D33` de até 3 px\n\n | Seleção na tab bar\n | `#2081D6` a 32%; rótulo ativo `#5FB0FF`\n\n | Lista\n | nome `#0B0B0D`, prévia `#6E6E73`, hora e contador `#8E8E93` (a conversa escolhida em `#2F9BF0`); avatares laranja `#E8913A`, Ae `#00005B` com letras `#9999FF` e um losango preto no avatar branco\n\n | Bolha enviada\n | `#D5FFAE`, hora `#3FA33A` com ✓✓\n\n | Bolha recebida\n | branca, hora `#8E8E93`; sombra de 35% com distância 3 e suavidade 12\n\n | Fim\n | branco puro\n\n## Fontes\n\n | \n\n | Fonte\n | Onde\n\n | SF Pro Text Regular\n | prévias (36 px), bolhas (54 px, entrelinha 62 nas de duas linhas), horas\n\n | SF Pro Text Semibold\n | nomes da lista (42 px) e contadores\n\n | SF Pro Text Medium\n | rótulos da tab bar (17 px)\n\n | SF Pro Rounded Semibold\n | letras dos avatares\n\n## Cena a cena\n\n | \n\n | Cena\n | Números\n\n | Dock (0–1,6 s)\n | oito ícones de 216 px, passo de 240 px, entrando em 0,00, 0,12, 0,25, 0,38, 0,58, 0,78, 0,97 e 1,17 s; cada um nasce 12% maior, com desfoque 22 e 60 px adiante, e assenta em 12 q (o primeiro em 8); a fileira anda de x 540 a −714 com curva contínua e encolhe de 105 para 87%; quem passa da borda esquerda vai a 45% de opacidade com desfoque 10\n\n | Letterbox\n | barras de 240 px descem até 113 px de altura visível entre 0,02 e 1,30 s, seguram até 1,60 s e voltam até 2,40 s\n\n | Queda (1,60–2,30 s)\n | cada ícone, menos o Telegram, desce 860 px em 40 q acelerando, gira de −10° a 12° e vai a 45% de opacidade; 1 q de defasagem entre eles\n\n | Giro e morph (2,0–3,8 s)\n | o Telegram gira de 0 a 720° (influência de saída 60 e de chegada 67) e, em 2,85 s, cede o lugar à pílula num crossfade de 4 q; a pílula vai de 173×172 a 746×128 até 3,80 s (influências 18 e 97), com o raio de 40 para 64; o ponto branco de 40 px nasce no centro e vai até a aba \"Você\"\n\n | Tab bar (3,65–5,45 s)\n | três ícones de linha saem do centro para x 262, 437 e 624 em 20 q, de 60 a 100% e desfoque 12, com 3 q entre eles; rótulos sobem 5 px em 10 q a partir de 4,40 s; seleção cresce de 40 a 100% em 4,90–5,00 s; saída com escala X de 100 a 165% e desfoque direcional de 0 a 90 entre 5,18 e 5,45 s\n\n | Lista (5,38–6,80 s)\n | entra de 105 a 100% com desfoque 40 em 0,38 s; as prévias se digitam de 5,42 a 5,80 s; em 6,05 s as outras conversas somem em 20 q (3 q entre elas) e a escolhida sobe até y 486 e cresce 8%\n\n | Chat (6,45–14,6 s)\n | bolhas de 107 px (uma linha) e 167 px (duas), raio 40; a 2ª, a 3ª e a 4ª nascem em 7,22, 8,12 e 12,40 s como mancha (90%, desfoque 18 a 20, deslocadas 30 a 60 px) e assentam em 9 a 12 q; a câmera vai de 72 a 100% na entrada e oscila 145, 108, 158, 121 e 173%, com giro até −6° e depois até +5,4°; chicote entre 12,47 e 12,67 s; faixas pretas de até 208 px entre 8,55 e 12,47 s\n\n | Digitação\n | palavras da 3ª bolha em 8,25 a 10,23 s e da 4ª em 12,78 a 14,14 s, a cada 0,33 a 0,34 s, a cerca de 19 letras por segundo\n\n | Fim (14,60–16,25 s)\n | sólido branco de 0 a 100% em 0,26 s\n\n## O que é \"humano\" neste vídeo\n\n- A câmera do chat foi medida no original a cada 0,2 s e tem curva contínua em todos os pontos, mais uma tremida de 3 px a 2,4 Hz.\n\n- A rotação do morph freia até menos de 1° por quadro sem passar do ponto.\n\n- Os ícones não caem juntos: cada um tem um quadro de diferença e um giro próprio.\n\n- As faixas pretas engrossam e afinam com a câmera em vez de entrarem prontas."
46
+ },
47
+ {
48
+ "titulo": "A montagem no After Effects",
49
+ "texto": "| \n\n | Arquivo\n | O que faz\n\n | `ae/cenas.jsx`\n | cria um projeto novo e monta tudo. No topo ficam o bloco `TEXTOS` (abas, lista de conversas com nome, prévia, hora, contador e tipo de avatar, e as bolhas) e as listas `TEMPOS_B3` e `TEMPOS_B4`, com o segundo em que cada palavra começa a ser digitada. A ajudante `K` grava chaves com influência (−1 = linear, `'a'` = curva contínua) e `digita` escreve letra a letra. A câmera do chat é a tabela `CAMQ`: tempo, ponto do chat no centro, zoom e giro, medidos no original a cada 0,2 s. No fim, grava `audio/eventos.json` e salva `ae/telegram-chat.aep`\n\n | `ae/telegram-chat.aep`\n | o resultado do script, pronto para abrir e renderizar\n\n | `assets/fazer_icones.py`\n | desenha os ícones em squircle de 512 px a partir dos SVGs de `assets/svg/`\n\n | `assets/fazer_fundo_chat.py`\n | repete e tinge um padrão de desenhos em degradê verde para o papel de parede do chat\n\n | `audio/trilha.py`\n | põe a música 11 dB abaixo, marca o drop em 1,97 s e troca três sons do mapa padrão: tecla por palavra, whoosh longo com tonal no morph e pop na pílula\n\n | `audio/mesa/`\n | o motor de mix e o mapa de sons por tipo de evento\n\n- **Fontes:** instale SF Pro Text e SF Pro Rounded em `C:\\Program Files\\Common Files\\Adobe\\Fonts` e reinicie o After Effects.\n\n- **Juntar as pastas:** copie `audio/` para dentro de `projeto/`. O script grava os eventos em `projeto/audio/eventos.json`.\n\n- **Abrir:** `projeto/ae/telegram-chat.aep`. Se o AE pedir arquivos, aponte para `projeto/assets/`.\n\n- **Adaptar:** troque o `TEXTOS`, os tempos de digitação e os ícones e rode File › Scripts › Run Script File › `cenas.jsx`. Ele cria um projeto novo e sobrescreve o `.aep` em cerca de 3 s.\n\n- **Som:** no topo do `trilha.py`, aponte o `sys.path.insert` para a pasta `audio/mesa` e o `MUSICA` para a sua faixa, e rode `python audio/trilha.py`. Precisa de numpy, scipy, soundfile, librosa e pyloudnorm; no topo do `mesa.py`, aponte as pastas de efeitos para a sua biblioteca.\n\n- **Render:** fila do AE em H.264 a 60 qps e o `mix.wav` colado com o ffmpeg: `ffmpeg -i video.mp4 -i audio/mix.wav -map 0:v -map 1:a -c:v copy -c:a aac -b:a 320k -shortest final.mp4`.\n\n**Pegadinhas:** filho não herda opacidade, por isso o texto e a hora de cada bolha leem a opacidade do corpo por expressão. As faixas pretas do chat são filhas da câmera e corrigem a própria escala pelo zoom, para manterem a espessura na tela. Ícone que passa da borda esquerda fica translúcido e desfocado por expressão, calculada pela posição real na tela. O Gaussian Blur vem com \"Repeat Edge Pixels\" desligado; ligado, PNG desfocado vira caixa. O `aerender` não aceita caminho com acento."
50
+ },
51
+ {
52
+ "titulo": "As decisões de direção",
53
+ "texto": "- **Um objeto só, do ícone ao chat.** O ícone vira pílula, a pílula vira tab bar, a prévia da conversa vira a primeira bolha no mesmo lugar.\n\n- **Rotação longa sem mola.** Duas voltas inteiras em 1,8 s, acelerando até o morph e freando sem rebote: parece caro e não fica borrachudo.\n\n- **Letterbox no começo.** As barras de cinema fecham enquanto os ícones entram e reabrem na queda, e a escala muda sem nenhum corte.\n\n- **Gravidade na saída.** Os ícones caem acelerando e girando, cada um com um quadro de diferença; só o Telegram sobe.\n\n- **Câmera em pulsos.** No chat, zoom de 100 a 173% em ondas, giro que chega a −6° e a +5,4°, tremida de 3 px e um chicote: oito segundos num plano só sem nada parado.\n\n- **Digitação no tempo da música.** Cada palavra começa num tempo da grade de 0,33 s, letra a letra, e cada bolha nasce como mancha borrada e ganha forma em 9 a 12 quadros.\n\n- **Nada parado nem na tab bar.** Na revisão, uma respiração de 2% de escala e 6 px de subida entrou entre 4,35 e 5,45 s, onde o render acusou 0,6 s de tela parada.\n\nDetalhes de cores, tempos e números: estilo.md. Cenas por tempo e texto na tela: roteiro.md. Para fazer o seu com outro app: PROMPT.md."
54
+ },
55
+ {
56
+ "titulo": "As versões até o final",
57
+ "texto": "| \n\n | Versão\n | O que mudou\n\n | v1\n | recriação cena a cena, ajustada lado a lado com o original, com diálogo nosso no lugar da letra da música\n\n | **v1.1**\n | respiração na tab bar entre 4,35 e 5,45 s, para a tela não ficar parada"
58
+ }
59
+ ],
60
+ "pacote": [
61
+ {
62
+ "pasta": "projeto/",
63
+ "conteudo": "`ae/cenas.jsx` (o gerador comentado), `ae/telegram-chat.aep` (o projeto montado), `assets/icones/` (20 PNGs), `assets/svg/` (os glifos de origem), `assets/chat-fundo-v4.jpg`, `assets/avatar-pessoa.png` e os dois scripts que fazem essas imagens"
64
+ },
65
+ {
66
+ "pasta": "audio/",
67
+ "conteudo": "`trilha.py` (o som inteiro), `eventos.json` (os 40 eventos da comp), `mix.wav`, `relatorio-som.json` e `mesa/`, com o motor de mix `mesa.py` e o `mapa_padrao.py`"
68
+ },
69
+ {
70
+ "pasta": "referencias/",
71
+ "conteudo": "`links.md` e `fora-do-pacote.md`"
72
+ },
73
+ {
74
+ "pasta": "render.mp4",
75
+ "conteudo": "o vídeo final"
76
+ },
77
+ {
78
+ "pasta": "ae/cenas.jsx",
79
+ "conteudo": "cria um projeto novo e monta tudo. No topo ficam o bloco `TEXTOS` (abas, lista de conversas com nome, prévia, hora, contador e tipo de avatar, e as bolhas) e as listas `TEMPOS_B3` e `TEMPOS_B4`, com o segundo em que cada palavra começa a ser digitada. A ajudante `K` grava chaves com influência (−1 = linear, `'a'` = curva contínua) e `digita` escreve letra a letra. A câmera do chat é a tabela `CAMQ`: tempo, ponto do chat no centro, zoom e giro, medidos no original a cada 0,2 s. No fim, grava `audio/eventos.json` e salva `ae/telegram-chat.aep`"
80
+ },
81
+ {
82
+ "pasta": "ae/telegram-chat.aep",
83
+ "conteudo": "o resultado do script, pronto para abrir e renderizar"
84
+ },
85
+ {
86
+ "pasta": "assets/fazer_icones.py",
87
+ "conteudo": "desenha os ícones em squircle de 512 px a partir dos SVGs de `assets/svg/`"
88
+ },
89
+ {
90
+ "pasta": "assets/fazer_fundo_chat.py",
91
+ "conteudo": "repete e tinge um padrão de desenhos em degradê verde para o papel de parede do chat"
92
+ },
93
+ {
94
+ "pasta": "audio/trilha.py",
95
+ "conteudo": "põe a música 11 dB abaixo, marca o drop em 1,97 s e troca três sons do mapa padrão: tecla por palavra, whoosh longo com tonal no morph e pop na pílula"
96
+ },
97
+ {
98
+ "pasta": "audio/mesa/",
99
+ "conteudo": "o motor de mix e o mapa de sons por tipo de evento"
100
+ }
101
+ ],
102
+ "prompt": "Quero um vídeo quadrado no mesmo método do projeto \"Telegram, do ícone ao chat\", que está em 07-videos/projetos/telegram-chat/: um objeto só, do ícone do app até a conversa, e o diálogo digitado no tempo da música.\n\nApp que vira a interface (mensagens, atendimento, o meu produto...): {{APP}}\nÍcones da fileira de abertura (6 a 8 apps): {{ICONES}}\nAbas da barra do app: {{ABAS}}\nLista de conversas (nome, prévia, hora e qual é a escolhida): {{LISTA}}\nDiálogo do chat, bolha por bolha, dizendo quem envia: {{DIALOGO}}\nMúsica (com um tempo forte claro e uma grade estável): {{MUSICA}}\nDuração: {{DURACAO}} (a referência tem 16,25 s) · Formato: {{FORMATO}} (a referência é 1080×1080 a 60 qps)\n(Se algum desses estiver vazio ou com as chaves, me pergunte antes de começar.)\n\n1. Estude o projeto antes de propor qualquer coisa. Leia LEIA-ME.md, estilo.md e roteiro.md. Abra projeto/ae/cenas.jsx e veja o bloco TEXTOS, as listas TEMPOS_B3 e TEMPOS_B4, as ajudantes K e digita, o morph da pílula na precomp TABBAR, o isolamento da conversa na LISTA, a função bolha do CHAT e a tabela CAMQ da câmera. Me diga em poucas linhas o que vai reaproveitar.\n\n2. Meça a música: BPM, grade e o primeiro tempo forte. A queda dos ícones cai nesse tempo; a saída da barra, o isolamento da conversa e a entrada do chat caem na grade; cada palavra digitada começa num tempo.\n\n3. Junte os assets reais: o glifo oficial de cada app em SVG (Simple Icons ou o site da marca), as cores oficiais e o padrão de fundo do chat do app escolhido. Gere os ícones com assets/fazer_icones.py e anote de onde veio cada um.\n\n4. Escreva o roteiro tela a tela, com o tempo de cada troca e o texto exato, no molde do roteiro.md. O diálogo é seu: nada de letra de música, nem traduzida nem adaptada. Mantenha o número de palavras por bolha perto do original para o ritmo bater. Me mostre e espere meu ok.\n\n5. Construa copiando o projeto, sem editar o original: troque TEXTOS, ícones e tempos. Regras: rotação longa com ease-out puro e sem rebote no morph, a prévia da conversa continuando no lugar como primeira bolha, bolha que nasce como mancha e ganha forma, câmera do chat com curva contínua em todos os pontos e uma tremida leve. Rode o cenas.jsx e me mostre uma folha de contato com 12 quadros, incluindo o meio do giro e do chicote.\n\n6. Revise antes do render: tela parada por mais de meio segundo (a tab bar já precisou de uma respiração), palavra que aparece antes do tempo, borda do papel de parede aparecendo fora das faixas pretas, texto cortado na bolha.\n\n7. Som: rode audio/trilha.py na Mesa com os eventos da comp (pop por ícone e por bolha, tique por palavra, whoosh no morph, chicote), master em −14 LUFS. Renderize em H.264 a 60 qps, cole o mix com o ffmpeg e entregue o MP4 com uma anotação do que mudou em relação ao projeto.",
103
+ "campos": [
104
+ "ABAS",
105
+ "APP",
106
+ "DIALOGO",
107
+ "DURACAO",
108
+ "FORMATO",
109
+ "ICONES",
110
+ "LISTA",
111
+ "MUSICA"
112
+ ],
113
+ "fonte": {
114
+ "nome": "Clube do Motion",
115
+ "url": "https://clubedomotion.com/projeto/?id=telegram-chat",
116
+ "uso": "liberado pelo dono do Clube do Motion em 18/10/2026 (docs/permissoes/clube-do-motion.md)"
117
+ }
118
+ }
@@ -0,0 +1,106 @@
1
+ {
2
+ "id": "clube-telegram-ilha",
3
+ "titulo": "A ligação na pílula",
4
+ "categoria": "produto",
5
+ "resumo": "loop quadrado de 8,9 s, sem narração, em que o ícone do Telegram sobe, vira um card de recentes, e o card dá lugar a uma pílula preta no estilo da Dynamic Island que recebe uma ligação e a recusa. Toda troca passa por um respiro azul: o fundo vira azul-claro e o próximo elemento já nasce desfocado por cima dele. Um script do After Effects (`cenas.jsx`) monta o projeto inteiro do zero. Feito pelo Clube do Motion como recriação do estilo de @illdari.",
6
+ "indicado": "app ou produto digital que quer um loop curto de chamada, notificação ou alerta; portfólio de UI motion; vinheta quadrada de recurso novo.",
7
+ "estilo": [
8
+ "interface da Apple",
9
+ "Dynamic Island",
10
+ "respiro na cor da marca",
11
+ "entrada pelo desfoque",
12
+ "rastro longo",
13
+ "loop"
14
+ ],
15
+ "ficha": {
16
+ "formato": "1080×1080, 30 qps, desfoque de movimento com obturador de 720° (fase −360°, 16 amostras)",
17
+ "duracao": "8,9 s, sem narração; o trecho de 4,367 s (131 quadros) se repete a partir de 4,37 s e de 8,73 s",
18
+ "motor": "ae",
19
+ "voz": "ver o guia de estilo",
20
+ "musica": "ver o guia de estilo",
21
+ "fontes": "SF Pro Display (Bold, Medium e Regular)"
22
+ },
23
+ "ferramentas": [
24
+ "Claude Code",
25
+ "After Effects"
26
+ ],
27
+ "ficha_tecnica": {
28
+ "Duração": "8,9 s, sem narração; o trecho de 4,367 s (131 quadros) se repete a partir de 4,37 s e de 8,73 s",
29
+ "Formato": "1080×1080, 30 qps, desfoque de movimento com obturador de 720° (fase −360°, 16 amostras)",
30
+ "Ferramenta": "After Effects: um script ExtendScript (`cenas.jsx`) cria as comps `CARD`, `AVATAR chamada`, `LOOP` e `RECRIACAO`; o `.aep` já vem montado",
31
+ "Assets": "logo oficial do Telegram (ícone de app e círculo), fone, dois avatares ilustrados e um monograma neutro no lugar do logo do autor original",
32
+ "Fonte": "SF Pro Display (Bold, Medium e Regular)",
33
+ "Som": "trecho de \"Life Is Good\" (Future e Drake), a 143,6 BPM, recortado para as trocas caírem na batida, e 38 efeitos sonoros posicionados pela Mesa; −14,0 LUFS. A música fica fora do pacote",
34
+ "Referência": "edit \"Telegram apple style\" de @illdari (21/07/2026)",
35
+ "Arquivo final": "MP4 H.264 com áudio AAC"
36
+ },
37
+ "etapas": [
38
+ {
39
+ "titulo": "O roteiro",
40
+ "texto": "**Resumo:** o vídeo não tem narração; o roteiro é a sequência de peças do trecho de 4,37 s, com o texto que aparece na tela e os tempos do `cenas.jsx`. A segunda passada repete tudo com +4,37 s.\n\n## De onde veio a estrutura\n\nO edit de @illdari conta uma ligação no Telegram em menos de cinco segundos e toca o trecho duas vezes. Cada peça nasce da anterior e toda troca grande passa pelo azul. Esta recriação mantém as peças e os tempos, troca os textos pelo português e põe avatares ilustrados e um monograma neutro no lugar das imagens do autor.\n\n## Cenas por tempo\n\n | \n\n | Tempo (s)\n | Texto na tela\n | O que acontece\n\n | 0,00–0,13\n | —\n | só o azul do respiro\n\n | 0,13–0,57\n | —\n | o ícone do Telegram sobe de baixo com rastro longo e o fundo volta ao cinza\n\n | 0,45–0,82\n | —\n | o ícone gira, anda para a esquerda e some desfocando; o fundo fica azul de novo\n\n | 0,87–1,27\n | \"Recentes\" · \"Cliente Marcos\" · \"Bia Souza\" · \"Estúdio\"\n | o card branco sai do desfoque inclinado em 3D e assenta; avatares e nomes entram em cascata\n\n | 1,27–1,66\n | —\n | o card cresce acelerando, as bordas abaulam e ele estoura no azul\n\n | 1,64–2,00\n | —\n | a pílula preta nasce do desfoque; três pontos azuis acendem um depois do outro\n\n | 2,00–2,27\n | —\n | a pílula desce e os pontos caem para dentro dela\n\n | 2,27–2,77\n | —\n | esticão até virar a barra da chamada, com um rebote só\n\n | 2,40–2,87\n | \"Telegram\" · \"Bia está ligando… atende aí\"\n | o avatar da Bia sobe do desfoque; o letreiro corre com as pontas esfumadas; o botão verde aparece\n\n | 2,87–3,30\n | —\n | o botão verde é arrastado para a esquerda, acelerando\n\n | 3,32–3,53\n | \"ou deixa para depois\"\n | no quadro mais rápido o botão vira o vermelho de recusar e freia; o texto entra palavra por palavra; a pílula recua e inclina\n\n | 3,53–4,20\n | —\n | a pílula respira e deriva\n\n | 4,20–4,37\n | —\n | tudo desfoca e o fundo volta ao azul do primeiro quadro\n\n | 4,37–8,90\n | o mesmo\n | segunda passada e o começo da terceira\n\n## Momentos para o som\n\n- A música começa no primeiro quadro; as trocas grandes (ícone, card, pílula) foram colocadas perto das batidas, com desvio de até 0,2 s, como no original.\n\n- Um efeito curto para cada peça que sobe, sai, aparece ou estoura; um tique por ponto que acende.\n\n- O esticão da pílula leva o efeito de morph, a chamada leva o de notificação, o arrasto leva um deslize e a troca para o vermelho leva o clique.\n\n- Na segunda passada, a música não repete; os mesmos eventos tocam de novo com +4,37 s."
41
+ },
42
+ {
43
+ "titulo": "A identidade visual",
44
+ "texto": "**Resumo:** fundo cinza neutro (`#E0E0E0`), respiro azul-claro (`#ACD3DC`) nas trocas, pílula quase preta, verde de atender e vermelho de recusar, tudo em SF Pro Display, sem sombra. Movimento com curva de saída rápida e chegada longa, rastro de 720° e um único rebote. Números tirados do `cenas.jsx`.\n\n## Palco\n\n | \n\n | Peça\n | Como é\n\n | Tela\n | 1080×1080, 30 qps\n\n | Desfoque de movimento\n | obturador 720°, fase −360°, 16 amostras (limite adaptativo 128)\n\n | Montagem\n | comp `LOOP` de 4,367 s; a `RECRIACAO` empilha três cópias dela em 0, 4,367 e 8,733 s\n\n | Pré-comps\n | `CARD` (900×420) com o card \"Recentes\"; `AVATAR chamada` (200×200) com o avatar recortado em círculo\n\n## Cores\n\n | \n\n | Peça\n | Valor\n\n | Fundo\n | `#E0E0E0`\n\n | Respiro e véu\n | `#ACD3DC`\n\n | Pílula\n | `#050505`\n\n | Ponto apagado › aceso\n | `#174766` › `#2C8ED3`\n\n | Atender\n | `#22D23A`\n\n | Recusar\n | `#C00014`\n\n | Card\n | `#FFFFFF`, texto `#000000`\n\n | Letreiro\n | `#BDBDC2`; segunda linha `#EDECEF`\n\n## Fontes\n\n | \n\n | Fonte\n | Onde\n\n | SF Pro Display Bold\n | \"Recentes\" (40 px)\n\n | SF Pro Display Medium\n | \"Telegram\" na pílula (42 px)\n\n | SF Pro Display Regular\n | nomes no card (25 px), letreiro e \"ou deixa para depois\" (27 px)\n\n## Curvas\n\n | \n\n | Nome\n | Chaves\n | Uso\n\n | Saída rápida\n | saída 5% · chegada 90%\n | entradas, assentar do card, avatares\n\n | Aceleração\n | saída 90% · chegada linear\n | arrasto do botão verde, empurrão do card\n\n | Suave\n | 50/50\n | deriva, respiração e inclinação da pílula\n\nTodas as chaves caem na grade de quadros, e o caminho entre chaves é reto, sem curva espacial automática.\n\n## Cena a cena\n\n | \n\n | Cena\n | Números\n\n | Ícone\n | 205 px; sobe de y 1140 a 540 em 0,13–0,57 s; X 20° › 0°; depois Z até 42°, Y até −15° e x até 400 px; desfoque 60 › 0 na entrada e 0 › 150 na saída (valores ×5, por causa da escala); 4 cópias de eco a 55, 38, 24 e 12%\n\n | Card\n | 806×380, raio 60; entra em 0,87–1,27 s com X 22° › 0°, Y −28° › 0° e escala 80 › 100%; avatares de 156 px em 1,00, 1,10 e 1,17 s (escala 80 › 100%, desfoque 60 › 0); nomes a cada 2 quadros; \"Recentes\" com tracking 25 › 0\n\n | Estouro\n | o card cresce 100 › 112 › 130 › 165% entre 1,27 e 1,66 s; Optics Compensation 0 › 60 invertido (1,46–1,58 s) abaula as bordas; véu azul em 1,55–1,67 s\n\n | Pílula\n | nasce em 1,64 s com 300×110 e chega a 492×186 em 1,80 s; raio sempre igual a metade da altura (expressão); pontos de 84 px acendem com 2 quadros de defasagem\n\n | Queda\n | o nulo `PILULA ctrl` desce de y 562 a 732 (2,00–2,27 s); os pontos caem 110 px recortados por uma cópia da pílula (track matte)\n\n | Esticão\n | 463×177 › 836×243 (2,27–2,53 s) com Box Blur até 22; assenta em 801×240 em 2,77 s\n\n | Chamada\n | avatar sobe 60 px saindo do desfoque (2,40–2,63 s); letreiro anda 60 px/s numa janela de 340 px com pena de 36 px\n\n | Arrasto\n | botão verde de 144 px de x 270 a −9 (2,87–3,30 s), acelerando; em 3,32 s entra o vermelho de 176 px, com o fone girado 135°, freando até −302 em 3,50 s\n\n | Vida\n | nulo da pílula: x 540 › 505 › 540 › 512 › 540 entre 2,53 e 3,75 s; escala 100 › 101,7 › 100 › 100,8%; rotação 0 › 2° › 0 em 3,33–3,72 s\n\n | Saída\n | desfoque 0 › 30 em 4,20–4,37 s e o fundo volta ao azul no último quadro\n\n## Som\n\n | \n\n | Item\n | Valor\n\n | Música\n | trecho a partir de 187,222 s de \"Life Is Good\", 143,6 BPM; ganho −10 dB antes da soma, entrada de 0,03 s e saída de 0,6 s\n\n | Eventos\n | 38 (19 por passada): sobe, sai, aparece, item, empurra, estoura, pílula, ponto, cai, morph, notificação, desliza, clique e palavra\n\n | Efeitos\n | um por evento, pelo mapa padrão da Mesa, sem tonais; barramentos ×4 para o efeito ficar de 4 a 6 dB abaixo da música na janela\n\n | Medido\n | final −14,0 LUFS, pico −1,3 dBFS; música −15,4 e efeitos −17,9 LUFS\n\n## O que é \"humano\" neste vídeo\n\n- A pílula nunca para depois de assentar: deriva, respira e inclina de leve.\n\n- Os pontos acendem em onda, um depois do outro, como um carregamento.\n\n- O rastro fica atrás do movimento, nunca na frente."
45
+ },
46
+ {
47
+ "titulo": "A montagem no After Effects",
48
+ "texto": "| \n\n | Arquivo\n | O que faz\n\n | `ae/cenas.jsx`\n | apaga o que houver no projeto aberto e monta tudo. No topo fica o bloco `CFG`, com textos, cores, fontes e a duração do loop. Ajudantes: `K` (chaves com influência de entrada e saída, ou linear e hold), `retang`, `circulo`, `texto`, `animador`, `mascaraCirculo`, `blur`, `rastro` (Directional Blur ligado à velocidade) e `eco` (cópias atrasadas que fazem o rastro só para trás). As cenas ficam em ordem dentro de `montar()`, com o segundo de cada chave comentado\n\n | `ae/telegram.aep`\n | o resultado do script, pronto para abrir e renderizar\n\n | `audio/trilha.py`\n | lê `eventos.json`, põe a música 10 dB abaixo antes da soma, coloca um efeito por evento pelo mapa padrão, reforça os efeitos ×4 e mixa para −14 LUFS\n\n | `audio/eventos.json`\n | os tempos e tipos de cada evento (sobe, sai, item, ponto, pílula, cai, morph, notificação, desliza, clique…), escritos a partir das chaves do `.aep`\n\n- **Fonte:** instale a SF Pro Display em `C:\\Program Files\\Common Files\\Adobe\\Fonts` e reinicie o After Effects.\n\n- **Abrir:** `projeto/ae/telegram.aep`. Se o AE pedir arquivos, aponte para `projeto/assets/`.\n\n- **Adaptar:** troque os textos em `CFG.textos`, as cores em `CFG.cor` e as imagens em `assets/`, mantendo os nomes. Abra um projeto vazio e rode File › Scripts › Run Script File › `cenas.jsx`; ele procura `assets/` uma pasta acima de `ae/`.\n\n- **Render:** fila do AE com a comp `RECRIACAO` em H.264.\n\n- **Som:** no `audio/trilha.py`, troque o `sys.path` para a pasta `audio/mesa`, ponha a sua faixa em `audio/musica.wav` e rode `python audio/trilha.py`. Sai `audio/mix.wav`. Cole no vídeo com `ffmpeg -i render.mp4 -i audio/mix.wav -map 0:v -map 1:a -c:v copy -c:a aac -shortest final.mp4`.\n\n**Pegadinhas:** opacidade não passa do pai para o filho, por isso o fone copia a opacidade do botão por expressão. Efeito roda antes da escala: o ícone é uma imagem de 1024 px a 20%, então o desfoque dele vai ×5. Directional Blur no ícone borra a imagem por dentro; o rastro dele vem das quatro cópias de eco. Depois de acrescentar um efeito numa camada, releia a referência do efeito anterior, porque ela deixa de valer."
49
+ },
50
+ {
51
+ "titulo": "As decisões de direção",
52
+ "texto": "- **O respiro azul faz a transição.** Nas trocas, o fundo vira `#ACD3DC` e volta ao cinza em 0,3 s, enquanto o elemento novo ainda está desfocado por cima. O corte some.\n\n- **Cada peça nasce da anterior.** O ícone dá lugar ao card, o card estoura na pílula e a pílula estica e vira a chamada.\n\n- **Tudo entra saindo do desfoque**, com uma curva que começa rápida e freia longo (influência de 5% na saída e 90% na chegada).\n\n- **O rastro é mais longo que o padrão.** Obturador de 720° e, no ícone, quatro cópias atrasadas um quadro cada, de 55% a 12% de opacidade, só atrás do movimento.\n\n- **A troca de cor fica escondida no rastro.** O verde vira vermelho em 3,32 s, no quadro mais rápido do arrasto.\n\n- **Um rebote só.** A pílula estica até 836 px e assenta em 801 px, cerca de 4%, sem oscilar.\n\n- **Nada para.** Depois de assentar, a pílula deriva até 35 px na horizontal, respira a 101,7% de escala, recua no arrasto e inclina 2°.\n\n- **Loop barato.** O trecho de 4,37 s toca duas vezes; o último quadro cai no mesmo azul do primeiro.\n\nDetalhes de cores, tempos e números: estilo.md. Cenas por tempo: roteiro.md. Para fazer o seu com outro app: PROMPT.md."
53
+ },
54
+ {
55
+ "titulo": "As versões até o final",
56
+ "texto": "| \n\n | Versão\n | O que mudou\n\n | **v1**\n | recriação ajustada lado a lado com o original, quadro a quadro; textos em português, avatares ilustrados e monograma neutro no lugar do logo do autor"
57
+ }
58
+ ],
59
+ "pacote": [
60
+ {
61
+ "pasta": "projeto/",
62
+ "conteudo": "`ae/cenas.jsx` (o gerador comentado), `ae/telegram.aep` (o projeto montado) e `assets/` (os 6 PNGs que o script importa)"
63
+ },
64
+ {
65
+ "pasta": "audio/",
66
+ "conteudo": "`trilha.py` (o som inteiro), `eventos.json` (os 38 eventos), `mix.wav`, `relatorio-som.json` e `mesa/`, com o motor de mix `mesa.py` e o `mapa_padrao.py`"
67
+ },
68
+ {
69
+ "pasta": "referencias/",
70
+ "conteudo": "`estudo-da-referencia.md` (o edit original quadro a quadro, com cores, tempos e receita), `links.md` e `fora-do-pacote.md`"
71
+ },
72
+ {
73
+ "pasta": "render.mp4",
74
+ "conteudo": "o vídeo final"
75
+ },
76
+ {
77
+ "pasta": "ae/cenas.jsx",
78
+ "conteudo": "apaga o que houver no projeto aberto e monta tudo. No topo fica o bloco `CFG`, com textos, cores, fontes e a duração do loop. Ajudantes: `K` (chaves com influência de entrada e saída, ou linear e hold), `retang`, `circulo`, `texto`, `animador`, `mascaraCirculo`, `blur`, `rastro` (Directional Blur ligado à velocidade) e `eco` (cópias atrasadas que fazem o rastro só para trás). As cenas ficam em ordem dentro de `montar()`, com o segundo de cada chave comentado"
79
+ },
80
+ {
81
+ "pasta": "ae/telegram.aep",
82
+ "conteudo": "o resultado do script, pronto para abrir e renderizar"
83
+ },
84
+ {
85
+ "pasta": "audio/trilha.py",
86
+ "conteudo": "lê `eventos.json`, põe a música 10 dB abaixo antes da soma, coloca um efeito por evento pelo mapa padrão, reforça os efeitos ×4 e mixa para −14 LUFS"
87
+ },
88
+ {
89
+ "pasta": "audio/eventos.json",
90
+ "conteudo": "os tempos e tipos de cada evento (sobe, sai, item, ponto, pílula, cai, morph, notificação, desliza, clique…), escritos a partir das chaves do `.aep`"
91
+ }
92
+ ],
93
+ "prompt": "Quero um loop quadrado de UI motion no mesmo método do projeto \"telegram-ilha\", que está em 07-videos/projetos/telegram-ilha/: peças que nascem uma da outra, respiro na cor da marca em cada troca e tudo entrando pelo desfoque.\n\nApp ou marca: {{APP}}\nSite oficial (para tirar cor, logo e fonte): {{SITE}}\nO que acontece na tela, em 3 peças (ex.: ícone › card › pílula com notificação): {{HISTORIA}}\nTextos da tela, em português: {{TEXTOS}}\nMúsica (arquivo e segundo de início): {{MUSICA}}\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 e abra projeto/ae/cenas.jsx: o bloco CFG, os ajudantes K, retang, texto, animador, blur, rastro e eco, e a ordem das cenas em montar(). Me diga em poucas linhas o que vai reaproveitar.\n\n2. Tire a identidade do app real: logo oficial em PNG ou SVG, a cor da marca para o respiro (em tom claro, como o azul #ACD3DC do Telegram) e um fundo neutro. Nada de sombra; profundidade só com desfoque e escala.\n\n3. Escreva a sequência como transferências antes de animar: de qual peça nasce a próxima e em que quadro. Toda troca grande passa pelo respiro: o fundo vira a cor da marca e o elemento novo nasce desfocado por cima. Me mostre a tabela tempo › peça › texto e espere meu ok.\n\n4. Construa copiando o projeto, sem editar o original. Mantenha a curva de saída rápida e chegada longa (5/90), o obturador de 720°, o eco atrás de quem anda rápido, a troca de cor no quadro mais rápido de um gesto e um único rebote de uns 4%. Depois de assentar, nada para: deriva, respiração e uma inclinação leve.\n\n5. Feche o loop: o último quadro tem de ser igual ao primeiro. A comp final empilha duas ou três cópias do trecho.\n\n6. Meça as batidas da música (librosa) e encaixe as trocas grandes perto delas. Escreva os eventos (tempo, tipo, volume, pan) num eventos.json e faça o som pelo audio/trilha.py: um efeito por peça que entra ou sai, música 10 dB abaixo antes da soma, final em −14 LUFS.\n\n7. Antes do render, me mostre uma folha de contato com 12 quadros, incluindo o meio dos movimentos, e confira: troca com corte seco, peça que surge do nada, tela parada e emenda do loop visível. Renderize a comp RECRIACAO em H.264, cole o som com o ffmpeg e entregue o MP4 com uma anotação do que mudou em relação ao projeto.",
94
+ "campos": [
95
+ "APP",
96
+ "HISTORIA",
97
+ "MUSICA",
98
+ "SITE",
99
+ "TEXTOS"
100
+ ],
101
+ "fonte": {
102
+ "nome": "Clube do Motion",
103
+ "url": "https://clubedomotion.com/projeto/?id=telegram-ilha",
104
+ "uso": "liberado pelo dono do Clube do Motion em 18/10/2026 (docs/permissoes/clube-do-motion.md)"
105
+ }
106
+ }
@@ -0,0 +1,132 @@
1
+ {
2
+ "id": "clube-tennessee-nike",
3
+ "titulo": "O som conta igual à imagem",
4
+ "categoria": "sound",
5
+ "resumo": "Reel vertical de 66,8 s em duas partes. Nos primeiros 16,8 s, uma narração curta explica por que o sound design pesa tanto quanto o motion design, enquanto o primeiro quadro do edit \"dark mode\" do Tennessee Football anda em câmera lenta, quase sem cor, e elementos de interface em laranja nascem no ataque de cada palavra. Na palavra \"viva\", a imagem ganha cor e o edit começa no mesmo quadro, com o áudio refeito do zero (o projeto `not-like-us`). A introdução é um HTML com o quadro calculado pelo tempo, renderizado a 60 qps com desfoque de movimento de obturador; o som sai da Mesa, o motor de mix do Clube do Motion. Feito pelo Clube do Motion.",
6
+ "indicado": "criador, estúdio ou marca que quer apresentar um trabalho pronto com uma introdução narrada curta; vídeo de bastidor, \"antes e depois\" ou caso de portfólio em Reel.",
7
+ "estilo": [
8
+ "introdução narrada",
9
+ "quadro congelado em câmera lenta",
10
+ "interface em laranja",
11
+ "elemento por palavra",
12
+ "onda sonora viva",
13
+ "passagem sem corte",
14
+ "cor da marca do assunto"
15
+ ],
16
+ "ficha": {
17
+ "formato": "1080×1920, 60 qps, 9:16, cor BT.709; o edit original (4:5) foi ampliado para preencher o 9:16",
18
+ "duracao": "66,8 s; introdução narrada até 16,82 s e o edit do Tennessee a partir daí",
19
+ "motor": "html",
20
+ "voz": "voz clonada na ElevenLabs (Eleven v4), três tomadas a 1,2×; ficou a A, com 16,8 s",
21
+ "musica": "ver o guia de estilo",
22
+ "fontes": "ver o guia de estilo"
23
+ },
24
+ "ferramentas": [
25
+ "Claude Code",
26
+ "ElevenLabs"
27
+ ],
28
+ "ficha_tecnica": {
29
+ "Duração": "66,8 s; introdução narrada até 16,82 s e o edit do Tennessee a partir daí",
30
+ "Formato": "1080×1920, 60 qps, 9:16, cor BT.709; o edit original (4:5) foi ampliado para preencher o 9:16",
31
+ "Ferramenta": "introdução em HTML com `canvas` (motor do take único: `seek(t)` puro e render com obturador de 180°); som em Python pela Mesa; junção no ffmpeg",
32
+ "Render da introdução": "1.054 quadros a 60 qps em 5 trechos, 12 navegadores, 108 s",
33
+ "Voz": "voz clonada na ElevenLabs (Eleven v4), três tomadas a 1,2×; ficou a A, com 16,8 s",
34
+ "Som": "−14,0 LUFS no master; a música da introdução fica 17,7 dB abaixo da voz",
35
+ "Arquivo final": "MP4 H.264 com áudio AAC, 48 MB"
36
+ },
37
+ "etapas": [
38
+ {
39
+ "titulo": "O roteiro e a voz",
40
+ "texto": "**Resumo:** a fala da introdução exatamente como foi enviada à voz clonada (um parágrafo, com a grafia de pronúncia), a leitura normal, o tempo de cada palavra na tomada aprovada e o elemento que nasce em cada uma. Depois da passagem, em 16,82 s, o Reel segue com o edit do Tennessee e o áudio refeito no projeto `not-like-us`, sem narração.\n\n## Como a fala foi feita\n\n- **Texto:** um parágrafo curto, escrito para ser dito em cerca de 17 s. O ponto central é que o som pesa tanto quanto a imagem.\n\n- **Voz:** ElevenLabs, Eleven v4, voz clonada, estabilidade 0,5, similaridade 0,75, velocidade 1,12; depois `atempo` até 1,2×. Três tomadas (a, b e c); ficou a A, com 16,8 s.\n\n- **Tempo das palavras:** faster-whisper large-v3 com `word_timestamps`, com \"sound design, motion design, Opus 5.5\" no `initial_prompt` para acertar os termos.\n\n## Grafia de pronúncia\n\n | \n\n | Escrito para a voz\n | Leitura normal\n\n | sáund dizáin\n | sound design\n\n | môuchon dizáin\n | motion design\n\n | Ôpus cinco ponto cinco\n | Opus 5.5\n\n## A fala, verbatim (texto enviado à voz)\n\nNesse vídeo você vai entender o porquê um sáund dizáin é tão importante quanto um môuchon dizáin. Esse projeto foi recriado completamente pelo Ôpus cinco ponto cinco, justamente pra te mostrar como que o som é tão importante quanto o que você vê na tela, para deixar a experiência muito mais viva.\n\n## Palavra por palavra\n\nTempos no Reel (a voz entra em 0,20 s).\n\n | \n\n | Tempo (s)\n | Palavra\n | O que acontece\n\n | 0,20\n | \"Nesse vídeo\"\n | haste com ponto sobe do pé da tela; curva fina encosta no ponto; rótulo \"Nesse vídeo\"\n\n | 1,16 · 1,66\n | \"entender\", \"porquê\"\n | dois horizontes de luz laranja abrem sob o ponto\n\n | 2,24\n | \"sound design\"\n | o ponto estoura num anel com 4 pontos e ondas sonoras\n\n | 3,52\n | \"importante\"\n | o anel vira estrela de 4 pontas\n\n | 4,02\n | \"quanto\"\n | a estrela vira pílula; o laranja varre, o brilho passa, entra o ♪\n\n | 4,60\n | \"motion design\"\n | um ponto cai do topo e abre a pílula escura \"✦ Motion design\"; o \"=\" entra no segundo \"design\" (4,98)\n\n | 5,54 · 6,06\n | \"Esse projeto\"\n | cantos de mira fecham em volta do jogador; T do Tennessee × swoosh da Nike\n\n | 6,74 · 7,18\n | \"recriado completamente\"\n | 7 pontos em fila sobem como equalizador da voz; \"Recriado do zero\"\n\n | 8,26 · 8,62\n | \"Opus 5.5\"\n | os pontos viram a pílula \"Claude Opus 5.5\"; o 5.5 rola como contador; luz na borda\n\n | 10,58\n | \"mostrar\"\n | a pílula encolhe num ponto que viaja até o centro\n\n | 11,56\n | \"som\"\n | onda sonora viva na largura da tela; pílula \"♪ Som\"\n\n | 13,66 · 14,04\n | \"vê\", \"tela\"\n | pílula \"◉ Imagem\"; clarão nos cantos da mira\n\n | 15,22 a 16,32\n | \"experiência\", \"muito mais viva\"\n | as pílulas viram bolhas de luz que giram e formam um orbe; a cor volta ao quadro\n\n | 16,82\n | fim de \"viva\"\n | o orbe estoura numa onda de choque e o edit começa no mesmo quadro\n\n | 16,82–66,8\n | —\n | o edit \"dark mode\" do Tennessee com o áudio recriado, sem narração\n\n## Momentos para a trilha\n\n- 0,0–16,82 s: o som congelado da abertura do edit, abafado em 700 Hz, 17,7 dB abaixo da voz.\n\n- Cada elemento tem o seu efeito, no tom de Fá# menor (pop, morfo, brilho, mira, logo, contador, flash).\n\n- 15,1–16,7 s: o filtro do som congelado abre até 8 kHz; em 15,6 s entra o reverso do primeiro 1,2 s do edit, que termina na passagem.\n\n- **16,82 s: golpe Collision + riser Portal**, e o áudio do edit começa no mesmo ponto da imagem.\n\n- O resto segue o mapa do projeto `not-like-us`: troca para 66,6% em 4,82 s do edit, corte seco em 33,42 s e impacto final em 45,40 s (somar 16,82 s para o tempo no Reel)."
41
+ },
42
+ {
43
+ "titulo": "A identidade visual",
44
+ "texto": "**Resumo:** a introdução veste as cores do assunto (laranja do Tennessee, preto e um branco quente) sobre o primeiro quadro do edit, escurecido e quase sem cor. As formas vêm do opener \"Thought in Motion\" e aparecem uma por palavra, com molas e curvas da biblioteca do take único. O som da abertura é o próprio vídeo esticado e abafado, que se abre junto com a cor na passagem. Números tirados do `index.html`, do `trilha.py`, do `congelado.py` e do relatório de som.\n\n## Palco e fundo\n\n | \n\n | Peça\n | Como é\n\n | Tela\n | 1080×1920, `canvas` pintado do zero a cada quadro\n\n | Fundo\n | os 20 quadros dos primeiros 0,8 s do edit, tocados de trás para a frente em ~17 s com curva senoidal e fusão entre quadros; termina no quadro 0 na passagem\n\n | Tratamento do fundo\n | saturação 30%, brilho 50% e contraste 1,08 até \"muito\"; volta a 100% junto com a passagem\n\n | Câmera\n | escala de 1,045 a 1,0 ao longo da introdução e deriva de até 4 px em dois senos lentos, que somem perto da passagem\n\n | Vinheta\n | radial até 75% de preto nas bordas, que some quando a cor volta\n\n | Poeira\n | 46 partículas laranja (`#FFB25B`) de 1 a 3,2 px subindo a 8–30 px/s, com cintilação suave\n\n## Cores e fonte\n\n | \n\n | Token\n | Valor\n | Papel\n\n | Laranja\n | `#FF8200`\n | haste, anel, mira, pílula preenchida, onda sonora\n\n | Laranja claro\n | `#FFB25B`\n | poeira, brilhos e horizontes de luz\n\n | Branco quente\n | `#F7F3EE`\n | textos e contornos das pílulas\n\n | Texto sobre laranja\n | `#1A0D00`\n | \"Sound design\" e o ícone ♪ quando a pílula fica cheia\n\n- **Fonte: Roboto**, a do template. Light (56–64 px) nos rótulos e em \"Motion design\", Regular em \"Sound design\" e \"Claude Opus 5.5\" e Thin a 104 px no \"×\" entre o T e o swoosh.\n\n- **Pílulas** medidas pelo texto: largura = texto + 190 px (\"Sound design\", \"Motion design\", \"Claude Opus 5.5\") ou + 165 px (\"Som\", \"Imagem\").\n\n## Elementos por cena\n\n | \n\n | Cena\n | Palavra\n | Elemento\n\n | C1\n | \"Nesse vídeo\"\n | haste com ponto sobe do pé da tela, curva fina encosta no ponto, rótulo; dois horizontes de luz abrem em \"entender\" e \"porquê\" e respiram\n\n | C2\n | \"sound design\"\n | o ponto estoura num anel com 4 pontos e ondas saindo; em \"importante\" vira estrela de 4 pontas; em \"quanto\" vira pílula, o laranja varre a pílula, um brilho passa e entra o ícone ♪\n\n | C3\n | \"motion design\"\n | um ponto cai do topo e abre a pílula escura \"✦ Motion design\"; um \"=\" aparece entre as duas no segundo \"design\"\n\n | C4\n | \"Esse projeto\"\n | cantos de mira fecham em volta do jogador; o T do Tennessee e o swoosh entram com o desenho \"fervendo\" a 8 qps, como no fim do edit\n\n | C5\n | \"recriado completamente\"\n | 7 pontos em fila sobem como equalizador que segue a voz; rótulo \"Recriado do zero\"\n\n | C6\n | \"Opus 5.5\"\n | os pontos se juntam na pílula \"Claude Opus 5.5\"; o 5.5 rola como contador e uma luz percorre a borda\n\n | C7–C9\n | \"mostrar\" até \"viva\"\n | a pílula vira um ponto que viaja até o centro; onda sonora na largura da tela com a amplitude da voz; pílulas \"♪ Som\" e \"◉ Imagem\"; clarão na mira em \"tela\"; bolhas de luz giram e viram um orbe\n\n | Passagem\n | fim de \"viva\"\n | o orbe estoura numa onda de choque (raio de 20 a 1.500 px em 0,7 s) com clarão de 0,22 s e o edit começa\n\n## Curvas e molas\n\n | \n\n | Nome no código\n | Uso\n\n | `spring(t, ζ, ω)`\n | mola em forma fechada da `take.js`; aqui com ζ de 0,45 a 0,72 e ω de 10 a 16: o anel (0,5; 13), a pílula escura (0,55; 14), a mira (0,72; 11), os pontos do equalizador (0,45; 13, a 0,04 s um do outro)\n\n | `expoOut`\n | haste, pílulas que crescem, onda sonora, onda de choque\n\n | `cubicInOut`\n | morfos (anel → estrela → pílula), viagem do ponto, bolhas\n\n | `expoIn`\n | o ponto que cai antes de \"motion\"\n\n | `sineInOut`\n | o fundo em câmera lenta e a volta da cor\n\nToda entrada começa 0,05 a 0,15 s antes do ataque da palavra, para o elemento estar visível quando a sílaba soa.\n\n## Render\n\n60 qps com obturador de 180°: cada quadro é a média, em luz linear, de várias capturas dentro do meio intervalo; o número de capturas vem do quanto as peças andam na tela (`__motion`). Quadro parado sai sem custo. O final levou 3.153 capturas para 1.054 quadros, em 108 s.\n\n## Trilha e som\n\n | \n\n | Camada\n | Como é\n\n | Voz\n | tomada A a 1,2×, entra em 0,20 s; −14,2 LUFS no stem\n\n | Som congelado\n | 0–2,4 s do edit esticados por paulstretch (janela de 0,5 s) até a passagem, entrada em rampa de 1,2 s; passa-baixa de 700 Hz que abre até 8 kHz nos últimos 1,6 s; −31,7 LUFS, 17,7 dB abaixo da voz\n\n | Reverso\n | o primeiro 1,2 s do edit de trás para a frente, terminando na passagem, −2 dB\n\n | Efeitos\n | um por evento pelo mapa padrão da Mesa, tom Fá# menor; 32 eventos (7 pontos, 4 pílulas, morfos, mira, logo, contador, flash, impacto…); bus de efeitos +9 dB\n\n | Passagem\n | golpe Collision (−21) e riser Portal (−27, subida de 2,2 s)\n\n | Master\n | introdução + áudio do edit a partir de 16,82 s, limitador a 0,8, −14,0 LUFS, pico −1,2 dBFS, sem estalo na emenda\n\n## O que é \"humano\" neste vídeo\n\n- O fundo nunca para: a câmera lenta de trás para a frente e a deriva de poucos pixels mantêm o quadro vivo enquanto a voz fala.\n\n- Os elementos respiram (horizontes de luz, pílula que pulsa, poeira que cintila) e saem antes do próximo entrar.\n\n- A onda sonora e o equalizador seguem a voz de verdade, então o desenho muda a cada sílaba.\n\n- A cor e o som abrem juntos, como se o vídeo acordasse."
45
+ },
46
+ {
47
+ "titulo": "A montagem em HTML",
48
+ "texto": "| \n\n | Arquivo\n | O que faz\n\n | `comp/index.html`\n | `estado(t)` calcula a posição de cada peça e `desenha(t)` pinta o quadro no `canvas`, cena por cena (C1 a C7 e a passagem). A tabela `T` pega o instante de cada palavra em `dados/voz.js`, então trocar a voz move os elementos juntos. O fundo toca os 20 quadros de trás para a frente em cerca de 17 s e termina no quadro 0\n\n | `comp/take.js`\n | curvas, molas em forma fechada, entradas de texto e o contrato `__seek`, `__motion` e `__events` que o render e o som usam\n\n | `lib/render_take.py`\n | renderiza o HTML: `--previa` sai em segundos, sem desfoque; `--fps 60 --trechos 4 --turbo` faz o final com obturador e refaz só os trechos que mudaram\n\n | `lib/oraculo_take.py`\n | confere continuidade, enquadramento e saltos antes do render e exporta os eventos para o som (`--eventos`)\n\n | `audio/gerar_voz.py`\n | gera as tomadas na ElevenLabs com a grafia de pronúncia e acelera para 1,2×\n\n | `audio/transcrever.py`\n | tira o tempo de cada palavra com o faster-whisper\n\n | `audio/dados_voz.py`\n | grava as palavras e o envelope da voz a 60 qps em `comp/dados/voz.js`\n\n | `audio/congelado.py`\n | estica os 2,4 s iniciais do edit até a passagem (paulstretch) e faz o reverso do primeiro 1,2 s, terminando na passagem\n\n | `audio/trilha.py`\n | na Mesa: voz em 0,20 s, som congelado abafado em 700 Hz que abre até 8 kHz na reta final, reverso, um efeito por evento no tom de Fá# menor, golpe e riser na passagem\n\n | `juntar.sh`\n | soma o som da introdução com o áudio do edit a partir da passagem, limita, leva a −14 LUFS e emenda a introdução com o edit a 60 qps\n\n- **Junte as pastas:** copie `audio/` para dentro de `projeto/` e ponha `mesa/` em `biblioteca/som/` da sua central, ou ajuste o `sys.path` do `trilha.py`.\n\n- **Gere os quadros do fundo com o seu vídeo:** extraia os primeiros 0,8 s em 20 JPGs 1080×1920 (`ffmpeg -i video.mp4 -t 0.8 -vf \"scale=-2:1920,crop=1080:1920\" -frames:v 20 comp/assets/fundo/f%02d.jpg`). Os recortes da marca vão em PNG transparente em `power-t/` e `swoosh/`; com outra marca, troque os nomes no `index.html`.\n\n- **Voz:** troque o texto e o ID da voz no `gerar_voz.py`, rode-o, transcreva a tomada escolhida com `python audio/transcrever.py audio/voz-a-1.2x.wav` e depois rode `python audio/dados_voz.py a`.\n\n- **Ver no navegador:** abra `comp/index.html?play`, ou `?t=6.4&hud` para parar num instante.\n\n- **Prévia:** `python lib/render_take.py comp/index.html --out render/previa.mp4 --previa`.\n\n- **Som:** no `congelado.py`, aponte `REMIX` para o áudio do seu vídeo e rode `python audio/congelado.py 16.82` (o instante da passagem). Depois, `python mesa/som.py .` exporta os eventos, roda o `trilha.py` e gera `audio/mix.wav`. No topo do `mesa.py`, aponte as pastas de efeitos e tonais para a sua biblioteca.\n\n- **Final:** `python lib/render_take.py comp/index.html --out render/intro-final-sem-som.mp4 --fps 60 --trechos 4 --turbo` e depois `bash juntar.sh render/intro-final-sem-som.mp4 render/final.mp4`, com `V` e `REMIX` apontando para o seu vídeo e o seu áudio.\n\n**Pegadinhas:** o fundo precisa terminar exatamente no quadro 0 do vídeo, senão a passagem dá um salto; o `juntar.sh` começa o vídeo no ponto em que a introdução o deixou. Normalizado sozinho, o som de interface ficou 23 dB abaixo da voz e não se ouvia: o bus de efeitos sobe 9 dB no `trilha.py`. Sem as fontes Roboto, o `canvas` cai na fonte padrão."
49
+ },
50
+ {
51
+ "titulo": "As decisões de direção",
52
+ "texto": "- **Cada palavra tem um elemento.** Nada entra antes de ser dito: \"sound design\" estoura o anel, \"motion design\" derruba o ponto que vira pílula, \"Opus 5.5\" faz o número rolar como contador.\n\n- **O vídeo já está na tela desde o começo.** O fundo é o primeiro quadro do edit em câmera lenta, de trás para a frente, então a introdução não parece um bloco separado.\n\n- **Cor como evento.** A imagem fica a 30% de saturação e 50% de brilho e só recupera a cor em \"muito mais viva\", junto com o som.\n\n- **Elementos de um opener real, nas cores do assunto.** As formas do \"Thought in Motion\" foram refeitas em laranja `#FF8200`, preto e branco, as cores do Tennessee.\n\n- **A voz mexe na imagem.** O equalizador de sete pontos e a onda sonora usam o envelope medido da narração.\n\n- **O som da introdução vem do próprio vídeo:** a abertura do edit, esticada e abafada, abre até 8 kHz quando a fala chega ao fim.\n\n- **Passagem sem corte.** Na última sílaba, o orbe estoura numa onda de choque, o reverso termina e o edit começa no mesmo quadro, com golpe e riser.\n\n- **Volume medido, não estimado.** Os efeitos de interface subiram 9 dB depois da medição por camada; o master fecha em −14,0 LUFS sem estalo na emenda.\n\nDetalhes de cores, curvas e som: estilo.md. Fala e elementos por tempo: roteiro.md. Para fazer um Reel no mesmo método com o seu vídeo: PROMPT.md."
53
+ },
54
+ {
55
+ "titulo": "As versões até o final",
56
+ "texto": "| \n\n | Versão\n | O que mudou\n\n | **v1**\n | aprovada: tomada A da narração, introdução de 16,82 s, render final a 60 qps com obturador e master a −14,0 LUFS"
57
+ }
58
+ ],
59
+ "pacote": [
60
+ {
61
+ "pasta": "projeto/",
62
+ "conteudo": "`comp/index.html` (a introdução inteira), `comp/take.js` (biblioteca de movimentos), `comp/dados/voz.js` (palavras e envelope da voz), `comp/fonts/` (Roboto Thin, Light, Regular e Medium), `comp/assets/claude.svg`, `juntar.sh` e `lib/` com `render_take.py` e `oraculo_take.py`"
63
+ },
64
+ {
65
+ "pasta": "audio/",
66
+ "conteudo": "`trilha.py`, `eventos.json` (os 32 eventos da introdução), `congelado.py`, `dados_voz.py`, `gerar_voz.py`, `transcrever.py`, a voz aprovada (`voz.wav` e as palavras com tempo), `mix.wav` da introdução, `master.wav` do Reel inteiro, `remix-v25.wav` (o áudio do edit), `relatorio-som.json` e `mesa/` com `mesa.py`, `mapa_padrao.py` e `som.py`"
67
+ },
68
+ {
69
+ "pasta": "referencias/",
70
+ "conteudo": "`estudo-do-template.md` (o opener \"Thought in Motion\" por dentro, de onde vieram os elementos), `links.md` e `fora-do-pacote.md`"
71
+ },
72
+ {
73
+ "pasta": "render.mp4",
74
+ "conteudo": "o Reel final (v1)"
75
+ },
76
+ {
77
+ "pasta": "comp/index.html",
78
+ "conteudo": "`estado(t)` calcula a posição de cada peça e `desenha(t)` pinta o quadro no `canvas`, cena por cena (C1 a C7 e a passagem). A tabela `T` pega o instante de cada palavra em `dados/voz.js`, então trocar a voz move os elementos juntos. O fundo toca os 20 quadros de trás para a frente em cerca de 17 s e termina no quadro 0"
79
+ },
80
+ {
81
+ "pasta": "comp/take.js",
82
+ "conteudo": "curvas, molas em forma fechada, entradas de texto e o contrato `__seek`, `__motion` e `__events` que o render e o som usam"
83
+ },
84
+ {
85
+ "pasta": "lib/render_take.py",
86
+ "conteudo": "renderiza o HTML: `--previa` sai em segundos, sem desfoque; `--fps 60 --trechos 4 --turbo` faz o final com obturador e refaz só os trechos que mudaram"
87
+ },
88
+ {
89
+ "pasta": "lib/oraculo_take.py",
90
+ "conteudo": "confere continuidade, enquadramento e saltos antes do render e exporta os eventos para o som (`--eventos`)"
91
+ },
92
+ {
93
+ "pasta": "audio/gerar_voz.py",
94
+ "conteudo": "gera as tomadas na ElevenLabs com a grafia de pronúncia e acelera para 1,2×"
95
+ },
96
+ {
97
+ "pasta": "audio/transcrever.py",
98
+ "conteudo": "tira o tempo de cada palavra com o faster-whisper"
99
+ },
100
+ {
101
+ "pasta": "audio/dados_voz.py",
102
+ "conteudo": "grava as palavras e o envelope da voz a 60 qps em `comp/dados/voz.js`"
103
+ },
104
+ {
105
+ "pasta": "audio/congelado.py",
106
+ "conteudo": "estica os 2,4 s iniciais do edit até a passagem (paulstretch) e faz o reverso do primeiro 1,2 s, terminando na passagem"
107
+ },
108
+ {
109
+ "pasta": "audio/trilha.py",
110
+ "conteudo": "na Mesa: voz em 0,20 s, som congelado abafado em 700 Hz que abre até 8 kHz na reta final, reverso, um efeito por evento no tom de Fá# menor, golpe e riser na passagem"
111
+ },
112
+ {
113
+ "pasta": "juntar.sh",
114
+ "conteudo": "soma o som da introdução com o áudio do edit a partir da passagem, limita, leva a −14 LUFS e emenda a introdução com o edit a 60 qps"
115
+ }
116
+ ],
117
+ "prompt": "Quero um Reel com introdução narrada no mesmo método do projeto \"Tennessee × Nike\", que está em 07-videos/projetos/tennessee-nike/, com o meu vídeo.\n\nVídeo que entra depois da introdução: {{VIDEO}}\nÁudio final desse vídeo (mix pronta): {{AUDIO}}\nTexto da narração, de 15 a 20 s falado: {{TEXTO}}\nVoz (ID da minha voz na ElevenLabs ou outra voz): {{VOZ}}\nCores do assunto (marca, time, produto): {{CORES}}\nMarca ou logo que aparece na introdução: {{MARCA}}\nFormato: {{FORMATO}} (a referência é 1080×1920 a 60 qps)\n(Se algum desses estiver vazio ou com as chaves, me pergunte antes de começar.)\n\n1. Estude o projeto antes de propor qualquer coisa. Leia LEIA-ME.md, estilo.md e roteiro.md. Depois abra projeto/comp/index.html e veja como a tabela T pega o tempo de cada palavra em dados/voz.js, como estado(t) e desenha(t) montam cada cena e como o fundo toca os quadros de trás para a frente. Leia também take.js, audio/trilha.py, audio/congelado.py e juntar.sh. Me diga em poucas linhas o que vai reaproveitar.\n\n2. Narração primeiro. Adapte a grafia do texto para a voz falar certo (termos em inglês escritos como se fala), gere três tomadas com audio/gerar_voz.py e me mande para escolher. Só siga com a voz aprovada.\n\n3. Tempo das palavras: transcreva a tomada escolhida com audio/transcrever.py e rode audio/dados_voz.py. Confira na prévia se cada elemento entra no ataque da palavra.\n\n4. Fundo: extraia os primeiros 0,8 s do meu vídeo em 20 quadros no formato final e use-os de trás para a frente, terminando no quadro 0 na passagem. Mantenha a imagem escura e quase sem cor até a reta final.\n\n5. Um elemento por palavra importante, nas cores do assunto: ponto, anel, pílula, mira, equalizador que segue a voz, onda sonora com a amplitude da fala, bolhas que viram orbe. Nada entra antes de ser dito; cada elemento sai antes de o próximo ocupar o mesmo lugar. A marca entra com o recorte tirado do próprio vídeo.\n\n6. Passagem sem corte: na última sílaba, um estouro (onda de choque e clarão curto) e o vídeo começa exatamente no quadro em que o fundo parou. A cor volta junto.\n\n7. Som na Mesa, em paralelo: voz a −14 LUFS; por baixo, a abertura do meu vídeo esticada (audio/congelado.py), abafada e abrindo na reta final, 15 a 18 dB abaixo da voz; reverso terminando na passagem; um efeito por elemento no tom do meu áudio; golpe e riser na passagem. Meça cada camada e suba o bus de efeitos se ele ficar inaudível.\n\n8. Prévia com render_take.py --previa e o som colado. Revise quadro a quadro na entrada de cada palavra e na passagem (salto de imagem, estalo na emenda).\n\n9. Render final a 60 qps com obturador (--fps 60 --trechos 4 --turbo) e juntar.sh para emendar com o vídeo e fechar o master em −14 LUFS. Confira a duração, o quadro da passagem e o volume no arquivo final. Entregue o MP4 e uma anotação do que mudou.",
118
+ "campos": [
119
+ "AUDIO",
120
+ "CORES",
121
+ "FORMATO",
122
+ "MARCA",
123
+ "TEXTO",
124
+ "VIDEO",
125
+ "VOZ"
126
+ ],
127
+ "fonte": {
128
+ "nome": "Clube do Motion",
129
+ "url": "https://clubedomotion.com/projeto/?id=tennessee-nike",
130
+ "uso": "liberado pelo dono do Clube do Motion em 18/10/2026 (docs/permissoes/clube-do-motion.md)"
131
+ }
132
+ }
@@ -0,0 +1,112 @@
1
+ {
2
+ "id": "clube-tudo-se-move",
3
+ "titulo": "Tudo se move",
4
+ "categoria": "elementos",
5
+ "resumo": "filme de marca de 15 s, 16:9, que percorre os princípios do motion em sete seções: uma bola que quica no tempo da música, quatro palavras (TEMPO, ESPAÇO, curva, RITMO), um painel com dados reais do próprio vídeo, 1.800 partículas que viram uma esfera e depois o símbolo do Claude, fitas de linhas sob a frase \"tudo se move.\" e a assinatura com o símbolo e o nome oficiais. Os gráficos não inventam números: mostram o espectro da música quadro a quadro, a curva da mola padrão e o progresso real do vídeo. É uma **recriação** do \"Claude motion reel\", de Jason Zhou (@jasonzhou1993), publicado no prompt-motion.com (prompt-motion.com/jasonzhou1993-8595e0) e feito numa tentativa só com o prompt genérico de showreel. A nossa versão troca a paleta genérica pela marca do Claude, as cortinas de listras por formas que viram a próxima e a trilha sintética por \"Clocks\", do Coldplay.",
6
+ "indicado": "filme de marca de empresa de tecnologia, abertura de apresentação e showreel com dados.",
7
+ "estilo": [
8
+ "tipografia cinética",
9
+ "partículas",
10
+ "gráficos animados",
11
+ "dados reais",
12
+ "cadeia de formas",
13
+ "HUD técnico",
14
+ "corte na batida."
15
+ ],
16
+ "ficha": {
17
+ "formato": "1920×1080, 60 qps, 16:9",
18
+ "duracao": "15,0 s (900 quadros); seções de 1,84 s, um compasso a 130 BPM",
19
+ "motor": "html",
20
+ "voz": "ver o guia de estilo",
21
+ "musica": "ver o guia de estilo",
22
+ "fontes": "ver o guia de estilo"
23
+ },
24
+ "ferramentas": [
25
+ "Claude Code"
26
+ ],
27
+ "ficha_tecnica": {
28
+ "Duração": "15,0 s (900 quadros); seções de 1,84 s, um compasso a 130 BPM",
29
+ "Formato": "1920×1080, 60 qps, 16:9",
30
+ "Narração": "nenhuma; o texto está na tela",
31
+ "Ferramenta": "HyperFrames, com tudo desenhado num canvas 2D por `render(t)`; motion blur feito dentro do canvas, sem render em alta taxa",
32
+ "Uso": "filme de marca, showreel",
33
+ "Trilha": "\"Clocks\" (Coldplay), trecho de 13,0 a 28,1 s da faixa, sem voz; a bateria entra em 1,84 s"
34
+ },
35
+ "etapas": [
36
+ {
37
+ "titulo": "O roteiro",
38
+ "texto": "**Resumo:** vídeo sem narração em sete seções, cada uma com cerca de um compasso de 1,84 s (130 BPM), mais o painel de dados, que ocupa dois. O texto da tela está em português e sai do `index.html`; os tempos são do vídeo (0 s = 13,0 s da música).\n\n## Como o roteiro foi feito\n\n- **Ponto de partida:** o original de @jasonzhou1993, que já dava uma palavra-princípio a cada tempo forte (princípio, tipografia, sistema, partículas, 3D, dados, frase e assinatura).\n\n- **O que mudou:** as cortinas de listras e o quadro cinza viraram transições de forma, o painel passou a mostrar dados reais, a assinatura usa o símbolo e o nome oficiais e todo texto foi para o português.\n\n## Cenas por tempo\n\n | \n\n | #\n | Tempo (s)\n | Seção (HUD)\n | Texto na tela\n | O que acontece\n\n | 1\n | 0–1,84\n | 00 — PRINCÍPIOS\n | \"princípios primeiro.\"; régua de quadros\n | a bola cai e quica numa régua, cada quique mais curto, no grid da música; fantasmas mostram o espaçamento; ela rola até parar (1,38 s), achata em antecipação (1,40–1,62 s) e cresce até a tela\n\n | 2\n | 1,84–2,30\n | 01 — TIPOGRAFIA\n | **TEMPO**\n | **drop:** a bola vira o fundo argila e as letras pousam com cliques; zoom ×70 pela haste do T\n\n | 3\n | 2,30–2,76\n | 01 — TIPOGRAFIA\n | **ESPAÇO**\n | o preto do T vira o fundo; o tracking fecha de 600 para −30 e a palavra achata num traço de 5 px\n\n | 4\n | 2,76–3,22\n | 01 — TIPOGRAFIA\n | curva; \"112%\"\n | o traço abre o fundo claro; a curva da mola se desenha com o selo de pico e depois engorda até virar o fundo azul\n\n | 5\n | 3,22–3,68\n | 01 — TIPOGRAFIA\n | **RITMO**\n | as letras entram sobre o azul e cada uma vira uma barra\n\n | 6\n | 3,68–7,34\n | 02 — DADOS\n | \"energia da trilha\", \"130 BPM\"; \"o reel em números\" (60, 0, 1.800); \"a mola padrão\"; \"progresso do reel\", \"quadro … de 900\"\n | as 5 barras se dividem nas 24 do espectro, que reage à música; a câmera recua do cartão azul e viaja entre os cartões (vai à mola em 5,87 s e volta às barras em 6,90 s); contadores rolam e o anel mostra o progresso real\n\n | 7\n | 7,34–9,18\n | 03 — PARTÍCULAS\n | \"1.800 PARTÍCULAS · SEMENTE 42 · ESFERA DE FIBONACCI\"\n | cada barra explode em 75 partículas, que formam uma esfera girando\n\n | 8\n | 9,18–11,02\n | 04 — FORMA\n | \"1.800 PARTÍCULAS · O SÍMBOLO DO CLAUDE\"\n | a esfera vira o símbolo do Claude, que se forma com um sino\n\n | 9\n | 11,02–12,84\n | 05 — MOVIMENTO\n | tudo se move.\n | as partículas entram em três fitas de linhas que torcem e se cruzam; a frase entra em serifa itálica\n\n | 10\n | 12,84–15,0\n | 06 — ASSINATURA\n | símbolo + **Claude**; \"DESIGNER DE MOTION — SHOWREEL 2026\"; feito em código, quadro a quadro.; \"TEMPO · ESPAÇO · CURVA · RITMO · DADOS · PARTÍCULAS · FORMA\"\n | as fitas fecham num ponto de luz, o símbolo nasce dele com onda de choque e faíscas, anda até a marca e o nome se revela (13,6 s); o subtítulo se decodifica (13,86 s); a frase em serifa entra em 14,2 s e o rodapé em 14,4 s; o símbolo segue girando\n\n## Momentos para a trilha\n\n- 0–1,84 s: intro da faixa, com o riser tonal subindo até o drop.\n\n- **1,84 s: a bateria entra**, no corte para TEMPO.\n\n- 3,68 s: virada para o painel de dados.\n\n- **7,34 s: estouro das partículas**, com Ping Boom.\n\n- **12,84 s: assinatura**, com Ping Boom e impacto.\n\n- 14,1–15,0 s: fade final."
39
+ },
40
+ {
41
+ "titulo": "A identidade visual",
42
+ "texto": "**Resumo:** a marca do Claude num filme de motion de 15 s: argila, marfim e preto quente, Inter Tight pesada nas palavras, Source Serif 4 itálica nas frases e JetBrains Mono no HUD. Tudo é desenhado num canvas por `render(t)`, com motion blur por subamostras, gráficos alimentados por dados reais e uma cadeia de formas em que cada cena nasce da anterior. Números tirados do `index.html`, do `data.js` e do `mix.py`.\n\n## Fontes\n\n | \n\n | Uso\n | Fonte\n | Onde baixar\n\n | Palavras (TEMPO, ESPAÇO, RITMO)\n | Inter Tight 900 (no lugar da Styrene da marca)\n | Google Fonts\n\n | Frases (\"princípios primeiro.\" em mono; \"curva\", \"tudo se move.\", \"feito em código, quadro a quadro.\")\n | Source Serif 4 itálica (no lugar da Tiempos)\n | Google Fonts\n\n | HUD, legendas técnicas e contadores\n | JetBrains Mono, 12–22 px\n | Google Fonts / JetBrains\n\n | Nome \"Claude\"\n | path oficial em SVG, que já é serifado\n | vem em `assets/claude.js`\n\n## Cores\n\n | \n\n | Token\n | Hex\n | Papel\n\n | Argila\n | `#D97757`\n | a bola, o fundo do drop, as partículas quentes, a frase da assinatura\n\n | Marfim\n | `#F0EEE6`\n | fundo claro, tinta sobre o escuro\n\n | Papel\n | `#FAF9F5`\n | cartões\n\n | Preto quente\n | `#141413`\n | fundo escuro\n\n | Ardósia\n | `#262624`\n | superfícies escuras\n\n | Azul\n | `#6A9BCC`\n | fundo da curva que engorda, barras\n\n | Verde\n | `#788C5D`\n | apoio\n\n | Kraft\n | `#D4A27F`\n | apoio\n\n | Cinzas\n | `#8F8D85`, `#E3E1D7`\n | réguas, grades, rótulos\n\nO original usava laranja `#F4561F` e cobalto `#2A3FF2` saturados; a argila da marca é mais sofisticada, mas grita menos no celular. Para mais impacto, um caminho é subir o azul para `#4F8FE0`.\n\n## Peças\n\n | \n\n | Peça\n | Como é\n\n | Bola e régua\n | quiques com gravidade de 12.397 px/s² e durações de 0,44 · 0,23 · 0,115 · 0,0575 s, no grid de 8ª, 16ª e 32ª da música; rola até parar em 1,38 s; fantasmas a cada 1/30 s mostram o espaçamento; squash no impacto (`e^(−t/0,045)`) e stretch na direção da velocidade\n\n | Palavras\n | TEMPO (corta no tempo forte), ESPAÇO (tracking de 600 a −30), curva (a mola desenhada, selo \"112%\"), RITMO (as letras viram barras)\n\n | Painel de dados\n | cartões \"energia da trilha\" (espectro de 24 bandas ao vivo, \"130 BPM\", \"AO VIVO · 24 BANDAS · COLDPLAY, CLOCKS\"), \"o reel em números\" (60 quadros por segundo, 0 keyframes à mão, 1.800 partículas, \"FEITO 100% EM CÓDIGO\"), \"a mola padrão\" (\"PICO 112% · ASSENTA EM 0,6 S\") e \"progresso do reel\" (anel com t/15 real e \"quadro 412 de 900\")\n\n | Espectro\n | FFT de 4096 pontos por quadro, 24 bandas logarítmicas de 40 Hz a 14 kHz, normalizadas por banda entre os percentis 5 e 99, com marcador de pico que cai em parábola\n\n | Partículas\n | cada barra explode em 75 partículas (1.800 no total), que formam uma esfera de Fibonacci projetada à mão (foco 1.100) e depois o símbolo do Claude amostrado do SVG (passo de 4 px, embaralhado com semente); legenda \"1.800 PARTÍCULAS · SEMENTE 42 · ESFERA DE FIBONACCI\"\n\n | Fitas de linhas\n | 3 fitas × 34 linhas; `y = base(x,t) + cos(x·g + 0,9t)·largura·(k/33 − 0,5)·2`; mistura `lighter` no escuro, alfa 0,22–0,44, traço de 1,3 px\n\n | Assinatura\n | símbolo e nome oficiais; linha fina; \"DESIGNER DE MOTION — SHOWREEL 2026\" decodificado letra a letra; \"feito em código, quadro a quadro.\" em serifa itálica argila; rodapé \"TEMPO · ESPAÇO · CURVA · RITMO · DADOS · PARTÍCULAS · FORMA\"\n\n | HUD\n | cantoneiras de 26 px, \"CLAUDE · SHOWREEL 2026\", timecode real, rótulo da seção decodificado; mono 14 px a 62% de opacidade, tinta clara ou escura conforme o fundo\n\n## Transições (a cadeia de formas)\n\n- A bola cresce em `expoIn` (de 26 px ao fundo inteiro) e vira o fundo argila no drop.\n\n- Zoom ×70 na haste do T (sólida, ao contrário do miolo do O) e o preto vira o fundo seguinte.\n\n- A palavra achata num traço de 5 px, e o traço abre o fundo claro.\n\n- A curva da mola engorda (traço de 9 a 3.200 px) e vira o fundo azul.\n\n- Cada letra de RITMO vira uma barra, as 5 barras se dividem nas 24 do gráfico e a tela azul é o cartão; a câmera recua dele.\n\n- Cada barra explode em partículas, que formam a esfera, que vira o símbolo.\n\n- As partículas entram nas faixas das fitas, as fitas se fecham num ponto de luz, e o ponto vira o símbolo da marca, com onda de choque e faíscas.\n\n## Curvas e molas\n\n- **Mola padrão desenhada:** `1 − e^(−6,5s)·cos(10,05s)`: pico de 113% em 0,31 s, assenta em 0,6 s.\n\n- Curvas cúbicas de entrada e saída (`eOutCubic`, `eInCubic`, `eInOutCubic`) e `expoIn` nos crescimentos até a tela.\n\n- **Motion blur:** 6 subamostras num obturador de 180°, 10 nas transições rápidas, acumuladas com `globalAlpha = 1/(k+1)`; com 5 amostras, expansões muito rápidas mostram degraus.\n\n## Câmera\n\nDeriva contínua somada a toda transformação (`setCam`): ±7,5 px na horizontal, ±5,5 px na vertical, ±0,2° de rotação e ±0,4% de escala. A câmera viaja entre os cartões do painel e recua do cartão azul.\n\n## Trilha\n\n | \n\n | Item\n | Valor\n\n | Música\n | \"Clocks\" (Coldplay)\n\n | Trecho\n | 13,0 a 28,1 s da faixa, sem voz (a voz entra em 29,3 s)\n\n | Andamento e tom\n | 130 BPM medido com o `beat_this`; Mi bemol maior\n\n | Drop\n | 1,84 s, quando a bateria entra, no corte para TEMPO\n\n | Fecho\n | fade de 14,1 a 15,0 s\n\n## Sound design e mix\n\n | \n\n | Ação na tela\n | Efeito\n\n | bola caindo e quicando\n | whoosh curto grave; pops graves e abafados (passa-baixa de 2,6 kHz), meio tom acima a cada quique\n\n | \"princípios primeiro.\" digitado\n | tecla de teclado a cada duas letras\n\n | drop (1,84 s)\n | riser Clarity em Ré# (no tom) terminando no drop, Ping Boom em Ré#, whoosh grave, impacto\n\n | letras de TEMPO pousam\n | cliques em cascata, subindo de tom\n\n | zoom na haste do T, tracking\n | whooshes curtos\n\n | palavra vira linha, curva desenha\n | clique; caneta; pop no selo \"112%\"\n\n | curva engorda e vira o azul\n | whoosh grave\n\n | letras viram barras\n | colagem + impacto\n\n | cartões e contadores\n | pops em cascata; contador rolando; caneta na mola\n\n | estouro das partículas (7,34 s)\n | riser, Ping Boom, impacto, glitch\n\n | esfera e símbolo\n | whoosh longo, whoosh grave, sino quando o símbolo se forma\n\n | fitas e título\n | whoosh longo; whoosh curto grave no \"tudo se move.\"\n\n | assinatura (12,84 s)\n | riser, Ping Boom, impacto, pop; whooshes no deslize do símbolo; digitação no subtítulo; sino na frase em serifa\n\n- 64 efeitos, cada um em `at = evento − pico`; os 50 efeitos curtos ficam a até 25 ms do evento, medidos na faixa só de efeitos.\n\n- **Sem voz, os acentos sobem ×1,8 (teto de 0,7) e a música fica em 0,68.** Alvo: efeito ~6 dB abaixo da música na janela de 80 ms do evento (mediana medida: −6 dB).\n\n- **Final:** mix no ffmpeg (`adelay` + `amix`), limitador a 0,95 e `loudnorm` em duas passagens: −13,9 LUFS, pico −2,3 dBFS.\n\n## O que é \"humano\" neste vídeo\n\n- A bola rola até parar e faz antecipação antes de crescer, em vez de esperar congelada.\n\n- Os gráficos mexem com a música de verdade, então o painel nunca congela.\n\n- Nenhuma tela vazia entre as seções: cada uma começa com a forma da anterior.\n\n- O símbolo final continua girando devagar até o último quadro."
43
+ },
44
+ {
45
+ "titulo": "A montagem no HyperFrames",
46
+ "texto": "- **Instale o Node.js e o ffmpeg.** O HyperFrames roda pelo `npx`: `npx hyperframes@0.8.144`. Fontes, GSAP e dados já estão em `projeto/hf/`.\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 -q delivery` e guarde o vídeo em `projeto/render/`. O motion blur já sai do canvas, então o render é a 60 qps. Se algum quadro sair vazio, renderize de novo e junte os dois com `python render/juntar_bons.py A.mp4 B.mp4 saida.mp4`.\n\n- **Áudio:** copie a pasta `audio/` para dentro de `projeto/` (os scripts esperam `hf/`, `audio/` e `render/` lado a lado). No `mix.py`, aponte `SFX`, `PACK` e `TON` para `audio/sfx/` e rode `python mix.py`; ele monta o mix no ffmpeg e normaliza a −14 LUFS, gerando `audio/mix.wav`.\n\n- **Final:** `bash render/finalizar.sh render/<video>.mp4` junta o vídeo com o mix e monta a comparação; para a comparação, ajuste `REF` para `referencias/original/`.\n\n- **Conferência:** `python revisao/saltos.py <final>.mp4` e `python revisao/vazios.py <final>.mp4`.\n\n**Pegadinhas:** crie os contextos do canvas com `getContext('2d', { willReadFrequently: true })`; com a GPU e vários renders em paralelo, a captura perdeu o contexto e gravou quadros vazios em sequência. Registre a timeline só depois de `document.fonts.load()` de cada peso usado."
47
+ },
48
+ {
49
+ "titulo": "As decisões de direção",
50
+ "texto": "- **Os princípios em ordem, um por compasso:** princípio → tipografia → dados → partículas → forma → movimento → assinatura.\n\n- **Dados reais no lugar de números inventados:** o espectro da música ao vivo, a mola padrão desenhada (pico de 112%, assenta em 0,6 s), \"o reel em números\" (60 quadros por segundo, 0 keyframes à mão, 1.800 partículas) e um anel com o progresso real (\"quadro 412 de 900\").\n\n- **Uma forma vira a próxima, 12 vezes:** a bola cresce e vira o fundo argila; zoom na haste do T, nunca no miolo do O; a palavra achata num traço que abre o fundo claro; a curva da mola engorda até virar o fundo azul; as letras de RITMO viram barras, as barras viram o painel; as barras explodem em partículas, que viram esfera e depois o símbolo; as fitas fecham num ponto de luz, que vira a marca.\n\n- **Física no tempo da música:** quiques com gravidade constante e durações em progressão geométrica, todos no grid de 8ª, 16ª e 32ª; fantasmas a cada 1/30 s mostram o espaçamento.\n\n- **Motion blur dentro do canvas**, sem render a 240 qps: 6 subamostras por quadro, 10 nas transições rápidas.\n\n- **A marca do Claude:** argila, marfim, preto quente, azul e kraft; símbolo e nome a partir dos paths oficiais em SVG; serifa itálica nas frases.\n\n- **Trilha no tom.** \"Clocks\" está em Mi bemol maior, e os tonais (riser Clarity e Ping Boom em Ré#) entram no drop, no estouro das partículas e no logo.\n\n- **Assinatura viva até o fim:** o símbolo gira devagar e o subtítulo se decodifica letra a letra.\n\nDetalhes de cores, curvas e som: estilo.md. Cenas por tempo: roteiro.md. Para fazer um vídeo no mesmo estilo: PROMPT.md."
51
+ },
52
+ {
53
+ "titulo": "As versões até o final",
54
+ "texto": "| \n\n | Versão\n | O que mudou\n\n | rascunho\n | primeira passagem completa; a captura com GPU e vários renders em paralelo gravou 10 quadros vazios\n\n | v2\n | render pelo SwiftShader; ainda saíram 18 quadros vazios\n\n | **v3**\n | contextos do canvas na CPU (`willReadFrequently: true`): 0 quadros vazios e só três saltos, todos cortes de propósito (1,85 · 2,75 · 12,85 s); mix com os acentos ×1,8 e a música a 0,68; é a versão entregue"
55
+ }
56
+ ],
57
+ "pacote": [
58
+ {
59
+ "pasta": "projeto/hf/",
60
+ "conteudo": "a composição (`index.html`), o `BRIEF.md`, `hyperframes.json`, `package.json`, o GSAP local, `assets/data.js` (batidas e espectro da música por quadro), `assets/beats.json`, `assets/claude.js` e `assets/claude-paths.json` (símbolo e nome oficiais em path) e as fontes em `fonts/` (Inter Tight, Source Serif 4 romana e itálica, JetBrains Mono)"
61
+ },
62
+ {
63
+ "pasta": "projeto/render/",
64
+ "conteudo": "`finalizar.sh` (junta o vídeo com o mix e monta a comparação) e `juntar_bons.py` (troca quadros vazios de um render pelos de outro render do mesmo código)"
65
+ },
66
+ {
67
+ "pasta": "projeto/revisao/",
68
+ "conteudo": "`saltos.py` (salto entre quadros 3× maior que os vizinhos) e `vazios.py` (quadro chapado)"
69
+ },
70
+ {
71
+ "pasta": "audio/",
72
+ "conteudo": "`mix.py` (os 64 efeitos, a música e o `loudnorm` em duas passagens), as batidas medidas (`clocks-batidas.json`), a música, o mix final e a pasta `sfx/`"
73
+ },
74
+ {
75
+ "pasta": "referencias/",
76
+ "conteudo": "o vídeo original e o prompt dele, folhas de contato do original, a comparação original × nossa e três folhas de momentos comparados"
77
+ },
78
+ {
79
+ "pasta": "render/",
80
+ "conteudo": "`render.mp4`"
81
+ },
82
+ {
83
+ "pasta": "render(t)",
84
+ "conteudo": "desenha o quadro inteiro no canvas; é chamada no `onUpdate` de um tween GSAP pausado de 0 a 15 s, então qualquer quadro sai igual"
85
+ },
86
+ {
87
+ "pasta": "T",
88
+ "conteudo": "os tempos de cada seção: palavras em 1,84 · 2,30 · 2,76 · 3,22 s; dados 3,68; partículas 7,34; forma 9,18; movimento 11,02; assinatura 12,84"
89
+ },
90
+ {
91
+ "pasta": "data.js",
92
+ "conteudo": "o espectro da trilha por quadro (FFT de 4096 pontos, 24 bandas logarítmicas de 40 Hz a 14 kHz, normalizadas por banda entre os percentis 5 e 99)"
93
+ }
94
+ ],
95
+ "prompt": "Quero fazer um filme de marca curto, sem narração, no mesmo estilo do projeto \"Tudo se move\", que está em 07-videos/projetos/tudo-se-move/, com a minha marca.\n\nMarca: {{MARCA}} (site: {{SITE}}; símbolo e logo em SVG)\nQuatro palavras que resumem o que a marca faz: {{PALAVRAS}} (na referência, TEMPO, ESPAÇO, curva, RITMO)\nDados reais que podem ir para o painel: {{DADOS}} (números do meu produto, do meu negócio ou do próprio vídeo; nada inventado)\nFrase do meio: {{FRASE}} (na referência, \"tudo se move.\")\nAssinatura: {{ASSINATURA}} (na referência, \"feito em código, quadro a quadro.\")\nDuração aproximada: {{DURACAO}} (a referência tem 15 s)\nFormato: {{FORMATO}} (a referência é 1920×1080; para reels, 1080×1920)\nMúsica: {{MUSICA}} (se vazio, sugira 3 faixas reais com uma intro curta e a bateria entrando num tempo forte claro)\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/tudo-se-move/LEIA-ME.md, estilo.md e roteiro.md. Depois abra projeto/hf/index.html e veja a função render(t), a tabela de tempos T, o motion blur por subamostras, a deriva da câmera (setCam), a física da bola, o painel de dados, as partículas que formam o símbolo, as fitas de linhas e o HUD; o assets/data.js (o espectro da música por quadro) e o audio/mix.py. Me explique em poucas linhas o que vai reaproveitar e o que vai trocar.\n\n2. Siga o passo a passo de 07-videos/_LEIA.md e os números de 07-videos/regras-vigentes.md. Crie o meu projeto em 07-videos/projetos/AAAA-MM-DD-tema/ a partir de 07-videos/projetos/_modelo/README.md e marque cada etapa no checklist. Não edite os arquivos do projeto tudo-se-move: copie o que for reaproveitar.\n\n3. Use as skills instaladas: animacao-saas (forma que vira a próxima, câmera viva, mola), motion-app-ae (rota em HTML determinístico), video-referencias (marca real e um som por ação), conteudo-video (regras de vídeo) e better-portuguese (todo texto da tela). Se as skills do HyperFrames estiverem instaladas, leia também as de composição e animação antes de escrever o HTML.\n\n4. A identidade vem da minha marca, de verdade: abra o site, tire o símbolo e o logo em SVG, as cores do CSS e as fontes, e anote cada valor com a fonte num BRAND.md do projeto. Uma sans pesada nas palavras, uma serifa itálica nas frases (ou a fonte de texto da marca) e uma mono no HUD. Showreel precisa de contraste para o celular: use a cor de acento mais saturada da marca.\n\n5. Antes de qualquer código, meça a música com o beat_this, calcule o tom e me mostre o mapa: uma seção por compasso (princípio → as quatro palavras → dados → partículas → forma → frase → assinatura) e, para cada troca, qual forma vira a próxima (a bola vira o fundo, zoom na haste de uma letra e nunca no miolo do O, a palavra achata num traço, uma curva engorda até virar o fundo, as letras viram barras, as barras explodem em partículas, as partículas desenham o meu símbolo). Mostre também de onde vem cada número do painel.\n\n6. Construa reaproveitando o esqueleto do index.html: um canvas desenhado por render(t) num tween GSAP pausado, contextos com willReadFrequently: true, fontes carregadas com document.fonts.load antes da timeline, motion blur com 6 subamostras (10 nas transições rápidas), quiques com gravidade no grid da música, espectro da trilha calculado em Python por quadro, partículas amostradas do meu SVG com semente fixa, câmera com deriva contínua. Troque seções, palavras, dados, cores, fontes, símbolo e música.\n\n7. Me mostre 4 quadros de teste (abertura, palavras, painel e assinatura) e a folha de contato a 4 qps antes do render final. Em cada movimento, pergunte: está humano ou robotizado? E compare no tamanho do celular: o vídeo grita o bastante?\n\n8. Som em paralelo, num subagente: um efeito para cada elemento que entra ou sai, em evento − pico do arquivo, e tonais no tom da música no drop, no estouro das partículas e na assinatura. Sem voz, suba os acentos ×1,8 (teto 0,7) e deixe a música em ~0,68, mirando o efeito ~6 dB abaixo da música no instante do evento; meça a sincronia na faixa só de efeitos. Final com loudnorm em duas passagens a −14 LUFS.\n\n9. Render a 60 qps e rode os detectores de quadro vazio e de salto (projeto/revisao/vazios.py e saltos.py). Se sair quadro vazio, renderize de novo e junte os dois com projeto/render/juntar_bons.py. Todo salto que sobrar tem de ser um corte de propósito. Entregue o vídeo, a ficha do projeto atualizada e uma anotação em anotacoes/.",
96
+ "campos": [
97
+ "ASSINATURA",
98
+ "DADOS",
99
+ "DURACAO",
100
+ "FORMATO",
101
+ "FRASE",
102
+ "MARCA",
103
+ "MUSICA",
104
+ "PALAVRAS",
105
+ "SITE"
106
+ ],
107
+ "fonte": {
108
+ "nome": "Clube do Motion",
109
+ "url": "https://clubedomotion.com/projeto/?id=tudo-se-move",
110
+ "uso": "liberado pelo dono do Clube do Motion em 18/10/2026 (docs/permissoes/clube-do-motion.md)"
111
+ }
112
+ }