primocode 10.16.0 → 10.17.0

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 (234) hide show
  1. package/LICENSES/edit-ia-pro.txt +32 -0
  2. package/LICENSES/fontes-OFL.txt +476 -0
  3. package/LICENSES/hyperframes-Apache-2.0.txt +205 -0
  4. package/LICENSES/permanent-marker-Apache-2.0.txt +204 -0
  5. package/LICENSES/selfie-multiclass-Apache-2.0.txt +227 -0
  6. package/LICENSES/three-MIT.txt +23 -0
  7. package/LICENSES/video-use-MIT.txt +24 -0
  8. package/LICENSES/woven-sfx-CC0.txt +16 -0
  9. package/LICENSES/yunet-MIT.txt +21 -0
  10. package/README.md +2 -2
  11. package/bin/primocode.js +11 -2
  12. package/editor/LICENSE.md +11 -0
  13. package/editor/README.md +321 -0
  14. package/editor/SKILL.md +307 -0
  15. package/editor/THIRD_PARTY_NOTICES.md +228 -0
  16. package/editor/assets/baixar.json +591 -0
  17. package/editor/assets/fonts/anton/OFL.txt +93 -0
  18. package/editor/assets/fonts/caveat/OFL.txt +93 -0
  19. package/editor/assets/fonts/figtree/OFL.txt +93 -0
  20. package/editor/assets/fonts/fonts.json +10 -0
  21. package/editor/assets/fonts/montserrat/OFL.txt +93 -0
  22. package/editor/assets/fonts/permanentmarker/LICENSE.txt +202 -0
  23. package/editor/assets/models/SELFIE_MULTICLASS_LICENSE.txt +227 -0
  24. package/editor/assets/models/YUNET_LICENSE.txt +21 -0
  25. package/editor/assets/sfx/licencas/bass_drop.txt +32 -0
  26. package/editor/assets/sfx/licencas/cash.txt +76 -0
  27. package/editor/assets/sfx/licencas/charge.txt +31 -0
  28. package/editor/assets/sfx/licencas/click.txt +46 -0
  29. package/editor/assets/sfx/licencas/coin.txt +50 -0
  30. package/editor/assets/sfx/licencas/count.txt +47 -0
  31. package/editor/assets/sfx/licencas/data.txt +31 -0
  32. package/editor/assets/sfx/licencas/error.txt +32 -0
  33. package/editor/assets/sfx/licencas/flash.txt +31 -0
  34. package/editor/assets/sfx/licencas/gears.txt +82 -0
  35. package/editor/assets/sfx/licencas/keyboard.txt +48 -0
  36. package/editor/assets/sfx/licencas/metal_hit.txt +62 -0
  37. package/editor/assets/sfx/licencas/metal_riser.txt +61 -0
  38. package/editor/assets/sfx/licencas/mouse_click.txt +50 -0
  39. package/editor/assets/sfx/licencas/notification.txt +54 -0
  40. package/editor/assets/sfx/licencas/pop.txt +38 -0
  41. package/editor/assets/sfx/licencas/rewind.txt +32 -0
  42. package/editor/assets/sfx/licencas/rise.txt +46 -0
  43. package/editor/assets/sfx/licencas/sinteticos.txt +21 -0
  44. package/editor/assets/sfx/licencas/snap.txt +50 -0
  45. package/editor/assets/sfx/licencas/success.txt +40 -0
  46. package/editor/assets/sfx/licencas/synth_hit.txt +32 -0
  47. package/editor/assets/sfx/licencas/tick.txt +14 -0
  48. package/editor/assets/sfx/licencas/whoosh.txt +47 -0
  49. package/editor/assets/sfx/licencas/wind.txt +31 -0
  50. package/editor/assets/sfx/sfx.json +832 -0
  51. package/editor/assets/sfx/sfx_sinteticos.json +317 -0
  52. package/editor/assets/sfx/sfx_woven.json +387 -0
  53. package/editor/assets/sfx/woven/LICENCA.md +16 -0
  54. package/editor/fichas/briefing-do-video.md +45 -0
  55. package/editor/fichas/conferencia-da-amostra.md +56 -0
  56. package/editor/fichas/matriz-de-ganchos.csv +3 -0
  57. package/editor/fichas/padrao.json +16 -0
  58. package/editor/fichas/planilha-de-cenas.csv +4 -0
  59. package/editor/fichas/planilha-de-versoes.csv +4 -0
  60. package/editor/fichas/plano-em-blocos.md +32 -0
  61. package/editor/fichas/registro-de-materiais.json +27 -0
  62. package/editor/helpers/assets_ocr/ocr_vision.swift +41 -0
  63. package/editor/helpers/bordas_precisas.py +272 -0
  64. package/editor/helpers/camera_viva.py +426 -0
  65. package/editor/helpers/captions.py +601 -0
  66. package/editor/helpers/common.py +308 -0
  67. package/editor/helpers/compose_final.py +3555 -0
  68. package/editor/helpers/conferir_corte.py +234 -0
  69. package/editor/helpers/conferir_dados.py +405 -0
  70. package/editor/helpers/contact_sheet.py +282 -0
  71. package/editor/helpers/corte_por_onda.py +433 -0
  72. package/editor/helpers/corte_seco.py +595 -0
  73. package/editor/helpers/denoise.py +971 -0
  74. package/editor/helpers/efeitos.py +408 -0
  75. package/editor/helpers/efeitos_gerar.py +159 -0
  76. package/editor/helpers/elevenlabs_api.py +442 -0
  77. package/editor/helpers/face_layout.py +570 -0
  78. package/editor/helpers/fetch_images.py +423 -0
  79. package/editor/helpers/ganho_por_trecho.py +214 -0
  80. package/editor/helpers/gen_image.py +312 -0
  81. package/editor/helpers/gen_music.py +316 -0
  82. package/editor/helpers/gen_sfx.py +148 -0
  83. package/editor/helpers/grade.py +307 -0
  84. package/editor/helpers/icloud.py +119 -0
  85. package/editor/helpers/make_sfx.py +940 -0
  86. package/editor/helpers/matte.py +1342 -0
  87. package/editor/helpers/medir_referencia.py +2232 -0
  88. package/editor/helpers/mixar_trilha.py +354 -0
  89. package/editor/helpers/montar_corte.py +295 -0
  90. package/editor/helpers/motion/__init__.py +13 -0
  91. package/editor/helpers/motion/engine.py +1915 -0
  92. package/editor/helpers/motion/registry.py +510 -0
  93. package/editor/helpers/motion/render.py +665 -0
  94. package/editor/helpers/motion/templates/barra_progresso.py +370 -0
  95. package/editor/helpers/motion/templates/carimbo.py +132 -0
  96. package/editor/helpers/motion/templates/checklist.py +271 -0
  97. package/editor/helpers/motion/templates/comentario_cta.py +380 -0
  98. package/editor/helpers/motion/templates/contador.py +222 -0
  99. package/editor/helpers/motion/templates/destaque.py +263 -0
  100. package/editor/helpers/motion/templates/etiqueta_preco.py +461 -0
  101. package/editor/helpers/motion/templates/grafico_barras.py +510 -0
  102. package/editor/helpers/motion/templates/grafico_linha.py +462 -0
  103. package/editor/helpers/motion/templates/notificacao.py +266 -0
  104. package/editor/helpers/motion/templates/palavra_impacto.py +410 -0
  105. package/editor/helpers/motion/templates/passos.py +321 -0
  106. package/editor/helpers/motion/templates/riscado.py +298 -0
  107. package/editor/helpers/motion/templates/selo_garantia.py +150 -0
  108. package/editor/helpers/motion_render.py +241 -0
  109. package/editor/helpers/motion_sugerir.py +961 -0
  110. package/editor/helpers/noise_check.py +134 -0
  111. package/editor/helpers/pack_transcripts.py +223 -0
  112. package/editor/helpers/palavras_na_onda.py +176 -0
  113. package/editor/helpers/plano_sfx.py +839 -0
  114. package/editor/helpers/portao.py +427 -0
  115. package/editor/helpers/preview_server.py +1177 -0
  116. package/editor/helpers/rastrear_rosto.py +298 -0
  117. package/editor/helpers/render_cut.py +1256 -0
  118. package/editor/helpers/respiros.py +89 -0
  119. package/editor/helpers/sincronizar_cameras.py +571 -0
  120. package/editor/helpers/speech_regions.py +423 -0
  121. package/editor/helpers/style_catalog.json +231 -0
  122. package/editor/helpers/style_samples.py +246 -0
  123. package/editor/helpers/tela_verde.py +2113 -0
  124. package/editor/helpers/text_render.py +2059 -0
  125. package/editor/helpers/texto_na_tela.py +366 -0
  126. package/editor/helpers/timeline_view.py +292 -0
  127. package/editor/helpers/tira_de_quadros.py +113 -0
  128. package/editor/helpers/transcribe.py +734 -0
  129. package/editor/helpers/transcribe_batch.py +129 -0
  130. package/editor/helpers/trilhas.py +1146 -0
  131. package/editor/helpers/trilhas_humores.json +66 -0
  132. package/editor/helpers/valores.py +187 -0
  133. package/editor/helpers/verify_cut.py +820 -0
  134. package/editor/helpers/voice_levels.py +233 -0
  135. package/editor/helpers/voz_check.py +386 -0
  136. package/editor/helpers/voz_limpa.py +81 -0
  137. package/editor/helpers/watch_preview.py +372 -0
  138. package/editor/modelo-projeto/LEIA.md +402 -0
  139. package/editor/modelo-projeto/assets/fontes/OFL-Caveat.txt +93 -0
  140. package/editor/modelo-projeto/assets/fontes/OFL-JetBrainsMono.txt +93 -0
  141. package/editor/modelo-projeto/assets/fontes/OFL-Montserrat.txt +93 -0
  142. package/editor/modelo-projeto/assets/fontes/larguras.json +1 -0
  143. package/editor/modelo-projeto/assets/three/BufferGeometryUtils.js +1438 -0
  144. package/editor/modelo-projeto/assets/three/GLTFLoader.js +4895 -0
  145. package/editor/modelo-projeto/assets/three/LICENSE +21 -0
  146. package/editor/modelo-projeto/assets/three/ORIGEM.txt +17 -0
  147. package/editor/modelo-projeto/assets/three/RoomEnvironment.js +185 -0
  148. package/editor/modelo-projeto/assets/three/three.core.min.js +6 -0
  149. package/editor/modelo-projeto/assets/three/three.module.min.js +6 -0
  150. package/editor/modelo-projeto/build.py +4828 -0
  151. package/editor/modelo-projeto/compositions/cenas/2d/k2d_antes_depois.html +199 -0
  152. package/editor/modelo-projeto/compositions/cenas/2d/k2d_arquivo.html +232 -0
  153. package/editor/modelo-projeto/compositions/cenas/2d/k2d_busca.html +315 -0
  154. package/editor/modelo-projeto/compositions/cenas/2d/k2d_comando.html +304 -0
  155. package/editor/modelo-projeto/compositions/cenas/2d/k2d_conversa.html +217 -0
  156. package/editor/modelo-projeto/compositions/cenas/2d/k2d_esquema.html +289 -0
  157. package/editor/modelo-projeto/compositions/cenas/2d/k2d_medidor.html +249 -0
  158. package/editor/modelo-projeto/compositions/cenas/2d/k2d_notas.html +233 -0
  159. package/editor/modelo-projeto/compositions/cenas/3d/k3d_caminho.html +197 -0
  160. package/editor/modelo-projeto/compositions/cenas/3d/k3d_explodida.html +152 -0
  161. package/editor/modelo-projeto/compositions/cenas/3d/k3d_tela.html +167 -0
  162. package/editor/modelo-projeto/compositions/cenas/3d/k3d_volume.html +124 -0
  163. package/editor/modelo-projeto/compositions/cenas/3d/motor-three.js +728 -0
  164. package/editor/modelo-projeto/compositions/cenas/LEIA.md +177 -0
  165. package/editor/modelo-projeto/ferramentas/medir_fontes.py +65 -0
  166. package/editor/modelo-projeto/ferramentas/pessoa_recortada.py +176 -0
  167. package/editor/modelo-projeto/ferramentas/rastrear_maos.py +189 -0
  168. package/editor/modelo-projeto/hyperframes.json +12 -0
  169. package/editor/modelo-projeto/package.json +11 -0
  170. package/editor/modelo-projeto/projeto.json +16 -0
  171. package/editor/preview/app.css +1009 -0
  172. package/editor/preview/app.js +2122 -0
  173. package/editor/preview/index.html +307 -0
  174. package/editor/pyproject.toml +23 -0
  175. package/editor/references/3d.md +236 -0
  176. package/editor/references/animacao-catalogo.md +672 -0
  177. package/editor/references/animacao.md +498 -0
  178. package/editor/references/comandos.md +92 -0
  179. package/editor/references/corte-seco-como-funciona.md +50 -0
  180. package/editor/references/corte-seco.md +88 -0
  181. package/editor/references/corte.md +290 -0
  182. package/editor/references/direcao-por-blocos.md +218 -0
  183. package/editor/references/enquadramento.md +654 -0
  184. package/editor/references/estilos-prontos.md +355 -0
  185. package/editor/references/estudio.md +100 -0
  186. package/editor/references/exemplo-eventos.json +67 -0
  187. package/editor/references/lettering.md +252 -0
  188. package/editor/references/modelos.md +494 -0
  189. package/editor/references/phase2.md +1007 -0
  190. package/editor/references/referencia-aplicar.md +203 -0
  191. package/editor/references/referencia-medir.md +375 -0
  192. package/editor/references/revisao.md +335 -0
  193. package/editor/references/som-e-trilha.md +146 -0
  194. package/editor/references/tabela-de-sons.md +130 -0
  195. package/editor/references/variacoes.md +234 -0
  196. package/editor/uv.lock +1141 -0
  197. package/lib/act.js +36 -8
  198. package/lib/catalogo.js +4 -0
  199. package/lib/chamada-torta.js +81 -0
  200. package/lib/editor-pro.js +786 -0
  201. package/lib/entrega.js +58 -0
  202. package/lib/estudio/conferencia-visual.js +76 -0
  203. package/lib/estudio/diretor.js +6 -1
  204. package/lib/estudio/exportar.js +3 -1
  205. package/lib/estudio/gosto.js +45 -4
  206. package/lib/estudio/index.js +8 -5
  207. package/lib/estudio/kit-ae/base.jsx +119 -13
  208. package/lib/estudio/kit-ae/cenas.jsx +47 -15
  209. package/lib/estudio/kit-ae/guarda.jsx +274 -0
  210. package/lib/estudio/kit-ae/primitivas.jsx +180 -24
  211. package/lib/estudio/maquina-diretor.js +61 -7
  212. package/lib/estudio/maquina-foto.js +177 -0
  213. package/lib/estudio/maquina-guarda.js +207 -0
  214. package/lib/estudio/maquina-layout.js +22 -1
  215. package/lib/estudio/maquina.js +60 -11
  216. package/lib/estudio/referencias.js +1 -1
  217. package/lib/estudio/visao/visao.swift +97 -0
  218. package/lib/estudio/visao.js +60 -0
  219. package/lib/local/cerebro.json +192 -6
  220. package/lib/local/motor.js +5 -2
  221. package/lib/nuvem.js +11 -1
  222. package/lib/passagem.js +50 -0
  223. package/lib/perigo.js +19 -11
  224. package/lib/protecao.js +134 -0
  225. package/lib/titulo-conversa.js +46 -0
  226. package/lib/tools.js +3 -0
  227. package/lib/ui.js +1 -1
  228. package/package.json +3 -2
  229. package/skills/editar-meu-video/SKILL.md +6 -2
  230. package/skills/editar-video/SKILL.md +113 -0
  231. package/studio/pessoa.py +52 -0
  232. package/voz/primo_voz/app.py +43 -4
  233. package/voz/primo_voz/chat.html +17 -6
  234. package/voz/primo_voz/painel_dados.py +134 -0
package/editor/preview/index.html ADDED
@@ -0,0 +1,307 @@
1
+ <!doctype html>
2
+ <html lang="pt-BR">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
6
+ <meta name="color-scheme" content="dark">
7
+ <meta name="referrer" content="no-referrer">
8
+ <title>Preview da edição</title>
9
+ <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='8' fill='%23121418'/%3E%3Cpath d='M9 8h4v16H9zM19 8l7 8-7 8z' fill='%2350D6AE'/%3E%3C/svg%3E">
10
+ <link rel="stylesheet" href="/app.css">
11
+ </head>
12
+ <body>
13
+ <div class="app" id="app">
14
+ <header class="topbar">
15
+ <div class="brand">
16
+ <svg class="brand-mark" viewBox="0 0 32 32" aria-hidden="true"><rect width="32" height="32" rx="8"/><path d="M9 8h4v16H9zM19 8l7 8-7 8z"/></svg>
17
+ <div class="brand-text">
18
+ <span class="brand-name">Preview da edição</span>
19
+ <span class="project" id="project-name"></span>
20
+ </div>
21
+ </div>
22
+ <nav class="tabs" role="tablist" aria-label="Etapas">
23
+ <button class="tab" role="tab" id="tab-cut" data-tab="cut" aria-controls="view-cut" aria-selected="true">Corte<span class="tab-dot" aria-hidden="true"></span></button>
24
+ <button class="tab" role="tab" id="tab-style" data-tab="style" aria-controls="view-style" aria-selected="false">Estilo<span class="tab-dot" aria-hidden="true"></span></button>
25
+ <button class="tab" role="tab" id="tab-final" data-tab="final" aria-controls="view-final" aria-selected="false">Final<span class="tab-dot" aria-hidden="true"></span></button>
26
+ </nav>
27
+ <button class="icon-btn help-btn" id="help-btn" type="button" aria-label="Atalhos do teclado" title="Atalhos do teclado (?)">?</button>
28
+ </header>
29
+
30
+ <div class="statusline" id="statusline" role="status" aria-live="polite">
31
+ <span class="status-dot" aria-hidden="true"></span>
32
+ <span class="status-badge" id="status-badge" hidden>Sua vez</span>
33
+ <span class="status-text" id="status-text">Conectando ao preview…</span>
34
+ <span class="status-meta" id="status-meta"></span>
35
+ </div>
36
+
37
+ <main class="main">
38
+ <section class="view" id="view-cut" role="tabpanel" aria-labelledby="tab-cut"></section>
39
+ <section class="view" id="view-style" role="tabpanel" aria-labelledby="tab-style" hidden>
40
+ <div class="empty" data-style-empty hidden>
41
+ <div class="empty-visual" aria-hidden="true"><span class="pulse"></span></div>
42
+ <h2>Os estilos ainda não chegaram</h2>
43
+ <p>Assim que o agente preparar as opções de estilo, elas aparecem aqui sozinhas.</p>
44
+ </div>
45
+ <div class="style-layout" data-style-main hidden>
46
+ <div class="style-form">
47
+ <section class="style-section">
48
+ <header class="section-head"><span class="step">1</span><div><h3>Tipo de edição</h3><p>Como você aparece na tela.</p></div></header>
49
+ <div class="type-grid" data-edit-types role="radiogroup" aria-label="Tipo de edição"></div>
50
+ <div class="tv-pos" data-tv-pos hidden>
51
+ <p class="field-label">Onde você aparece na tela verde</p>
52
+ <div class="tv-pos-grid" data-tv-pos-list role="radiogroup" aria-label="Posição na tela verde"></div>
53
+ <p class="tv-note" data-tv-note></p>
54
+ <p class="field-help">Imagem em cima ou embaixo não aparece dividida: vira o fundo atrás de você. Tela cheia e janela continuam por cima. O recorte leva uns 3 minutos por minuto de vídeo.</p>
55
+ </div>
56
+ </section>
57
+
58
+ <section class="style-section">
59
+ <header class="section-head"><span class="step">2</span><div><h3>Cor de destaque</h3><p>Usada nas legendas, no gancho e na chamada.</p></div></header>
60
+ <div class="accent-row">
61
+ <label class="color-well" title="Escolher cor">
62
+ <input type="color" data-accent-picker value="#ffc400" aria-label="Seletor de cor">
63
+ </label>
64
+ <label class="hex-field">
65
+ <span class="sr-only">Código da cor</span>
66
+ <input type="text" data-accent-hex value="#FFC400" maxlength="7" spellcheck="false" autocomplete="off" inputmode="text" aria-describedby="hex-help">
67
+ </label>
68
+ <div class="swatches" data-swatches aria-label="Cores prontas"></div>
69
+ </div>
70
+ <p class="field-help" id="hex-help" data-hex-help>Formato #RRGGBB.</p>
71
+ </section>
72
+
73
+ <section class="style-section">
74
+ <header class="section-head"><span class="step">3</span><div><h3>Gancho</h3><p>A frase que aparece nos primeiros segundos.</p></div></header>
75
+ <label class="field">
76
+ <span class="field-label">Texto do gancho <span class="counter" data-hook-count></span></span>
77
+ <input type="text" data-hook-text maxlength="90" placeholder="Ex.: Você está perdendo venda assim">
78
+ <span class="field-help">Deixe vazio para o agente sugerir.</span>
79
+ </label>
80
+ <div class="card-grid" data-hook-styles role="radiogroup" aria-label="Estilo do gancho"></div>
81
+ </section>
82
+
83
+ <section class="style-section">
84
+ <header class="section-head"><span class="step">4</span><div><h3>Legendas</h3><p>Pensadas para quem assiste sem som.</p></div></header>
85
+ <div class="card-grid" data-caption-styles role="radiogroup" aria-label="Estilo da legenda"></div>
86
+ </section>
87
+
88
+ <section class="style-section">
89
+ <header class="section-head"><span class="step">5</span><div><h3>Elementos</h3><p>Ligue só o que combina com o seu vídeo.</p></div></header>
90
+ <div class="toggle-list" data-elements></div>
91
+ </section>
92
+
93
+ <section class="style-section">
94
+ <header class="section-head"><span class="step">6</span><div><h3>Trilha de fundo</h3><p>Escolha o clima da música. A trilha sai da sua biblioteca, sem gerar de novo.</p></div></header>
95
+ <div class="music-grid" data-music role="radiogroup" aria-label="Trilha de fundo"></div>
96
+ <p class="field-help" data-music-help>Carregando a sua biblioteca de trilhas…</p>
97
+ </section>
98
+
99
+ <section class="style-section">
100
+ <header class="section-head"><span class="step">7</span><div><h3>Remover ruído de fundo</h3><p>Limpa chiado, ventilador e barulho de rua atrás da sua voz.</p></div></header>
101
+ <div class="noise-grid" data-denoise role="radiogroup" aria-label="Remover ruído de fundo"></div>
102
+ <p class="field-help">Vale só para o vídeo final. O corte que você aprovou não muda.</p>
103
+ </section>
104
+
105
+ <section class="style-section">
106
+ <header class="section-head"><span class="step">8</span><div><h3>Chamada no final</h3><p>O card que pede a ação nos últimos segundos.</p></div></header>
107
+ <label class="field">
108
+ <span class="field-label">Texto da chamada</span>
109
+ <input type="text" data-cta-text maxlength="80" placeholder="Ex.: Toque em Saiba Mais">
110
+ <span class="field-help" data-cta-help>Deixe vazio para o agente sugerir.</span>
111
+ </label>
112
+ </section>
113
+
114
+ <section class="style-section">
115
+ <header class="section-head"><span class="step">9</span><div><h3>Recado para o agente</h3><p>Opcional. Qualquer detalhe que ajude.</p></div></header>
116
+ <label class="field">
117
+ <span class="sr-only">Recado</span>
118
+ <textarea data-style-note rows="3" maxlength="1500" placeholder="Ex.: quero algo mais sóbrio, sem muita animação"></textarea>
119
+ </label>
120
+ </section>
121
+ </div>
122
+
123
+ <aside class="style-aside">
124
+ <div class="card preview-card">
125
+ <div class="seg-toggle" role="tablist" aria-label="Amostra">
126
+ <button type="button" class="seg on" data-pv="hook" aria-pressed="true">Gancho</button>
127
+ <button type="button" class="seg" data-pv="caption" aria-pressed="false">Legenda</button>
128
+ </div>
129
+ <div class="pv-frame">
130
+ <img data-pv-img alt="" hidden>
131
+ <div class="pv-placeholder" data-pv-placeholder><span data-pv-label></span><small>Sem amostra ainda</small></div>
132
+ </div>
133
+ <p class="hint" data-sample-note></p>
134
+ </div>
135
+ <div class="card summary-card">
136
+ <dl class="summary" data-summary></dl>
137
+ <div class="save-row">
138
+ <span class="save-state" data-style-saved></span>
139
+ <button type="button" class="btn primary block" data-save-style>Salvar estilo</button>
140
+ </div>
141
+ </div>
142
+ </aside>
143
+ </div>
144
+ </section>
145
+ <section class="view" id="view-final" role="tabpanel" aria-labelledby="tab-final" hidden></section>
146
+ </main>
147
+ </div>
148
+
149
+ <template id="review-template">
150
+ <div class="empty" data-empty hidden>
151
+ <div class="empty-visual" aria-hidden="true"><span class="pulse"></span></div>
152
+ <h2 data-empty-title></h2>
153
+ <p data-empty-text></p>
154
+ </div>
155
+ <div class="review" data-review hidden>
156
+ <div class="player-col">
157
+ <div class="player-frame" data-frame>
158
+ <video data-video playsinline preload="auto"></video>
159
+ <button class="big-play" type="button" data-bigplay aria-label="Reproduzir">
160
+ <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5.5v13l10.5-6.5z"/></svg>
161
+ </button>
162
+ <div class="video-msg" data-video-msg hidden></div>
163
+ </div>
164
+ <div class="transport">
165
+ <button class="icon-btn play-btn" type="button" data-play aria-label="Reproduzir ou pausar (Espaço)" title="Reproduzir ou pausar (Espaço)">
166
+ <svg class="i-play" viewBox="0 0 24 24" aria-hidden="true"><path d="M8 5.5v13l10.5-6.5z"/></svg>
167
+ <svg class="i-pause" viewBox="0 0 24 24" aria-hidden="true"><path d="M7 5h3.5v14H7zM13.5 5H17v14h-3.5z"/></svg>
168
+ </button>
169
+ <div class="timecode" aria-label="Tempo"><span data-time>00:00.00</span><span class="tc-sep">/</span><span class="tc-total" data-duration>00:00.00</span></div>
170
+ <div class="transport-steps">
171
+ <button class="icon-btn small" type="button" data-jump="-1" aria-label="Voltar 1 segundo" title="Voltar 1 segundo (Shift + ←)">
172
+ <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M11 6 5 12l6 6M18 6l-6 6 6 6"/></svg>
173
+ </button>
174
+ <button class="icon-btn small" type="button" data-step="-1" aria-label="Voltar 1 quadro" title="Voltar 1 quadro (←)">
175
+ <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m15 6-6 6 6 6"/></svg>
176
+ </button>
177
+ <button class="icon-btn small" type="button" data-step="1" aria-label="Avançar 1 quadro" title="Avançar 1 quadro (→)">
178
+ <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg>
179
+ </button>
180
+ <button class="icon-btn small" type="button" data-jump="1" aria-label="Avançar 1 segundo" title="Avançar 1 segundo (Shift + →)">
181
+ <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 6 6 6-6 6M13 6l6 6-6 6"/></svg>
182
+ </button>
183
+ </div>
184
+ </div>
185
+ <div class="now-playing" data-now></div>
186
+ </div>
187
+
188
+ <div class="work-col">
189
+ <div class="card timeline-card">
190
+ <div class="card-head">
191
+ <h3>Linha do tempo</h3>
192
+ <div class="tl-zoom">
193
+ <span class="hint">Arraste para navegar · 2 cliques marcam o trecho</span>
194
+ <button class="icon-btn small" type="button" data-zoom="out" aria-label="Diminuir o zoom" title="Diminuir o zoom (tecla -)">
195
+ <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="M8 11h6M20 20l-3.6-3.6"/></svg>
196
+ </button>
197
+ <span class="zoom-level" data-zoom-level title="Zoom da linha do tempo">1x</span>
198
+ <button class="icon-btn small" type="button" data-zoom="in" aria-label="Aumentar o zoom" title="Aumentar o zoom (tecla +)">
199
+ <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="M8 11h6M11 8v6M20 20l-3.6-3.6"/></svg>
200
+ </button>
201
+ <button class="btn zoom-fit" type="button" data-zoom="fit" title="Mostrar o vídeo inteiro (tecla 0)">Tudo</button>
202
+ </div>
203
+ </div>
204
+ <div class="tl-scroll" data-tl-scroll>
205
+ <div class="timeline" data-timeline>
206
+ <div class="tl-ruler" data-ruler></div>
207
+ <div class="tl-layers" data-layers hidden></div>
208
+ <div class="tl-segments" data-segments></div>
209
+ <div class="tl-strip" data-filmstrip><img alt="" data-filmstrip-img draggable="false"></div>
210
+ <div class="tl-wave" data-wave></div>
211
+ <div class="tl-overlay" data-marks-overlay></div>
212
+ <div class="tl-selection" data-selection hidden></div>
213
+ <div class="tl-playhead" data-playhead><span class="ph-knob"></span></div>
214
+ </div>
215
+ </div>
216
+ </div>
217
+
218
+ <div class="card trims-card" data-trims-card hidden>
219
+ <div class="card-head">
220
+ <h3>Esticar trechos <span class="count" data-trim-count></span></h3>
221
+ <span class="save-state" data-trims-state></span>
222
+ </div>
223
+ <p class="hint">Cortou o fim de uma palavra? Puxe a alça da borda do trecho na linha do tempo. O agente estica no bruto e renderiza de novo.</p>
224
+ <ul class="trims-list" data-trims-list></ul>
225
+ <div class="trims-actions">
226
+ <button class="btn ghost" type="button" data-clear-trims>Desfazer tudo</button>
227
+ <button class="btn secondary" type="button" data-save-trims>Enviar ajustes</button>
228
+ </div>
229
+ </div>
230
+
231
+ <div class="card marks-card">
232
+ <div class="card-head">
233
+ <h3>Marcações <span class="count" data-mark-count></span></h3>
234
+ <span class="save-state" data-marks-state></span>
235
+ </div>
236
+ <p class="hint">Achou algo para mudar? Marque o começo e o fim do trecho e diga o que fazer.</p>
237
+ <div class="mark-tools">
238
+ <button class="btn" type="button" data-set-in>Marcar início <kbd>I</kbd></button>
239
+ <button class="btn" type="button" data-set-out>Marcar fim <kbd>O</kbd></button>
240
+ <button class="btn motion-btn" type="button" data-motion-here title="Pede uma animação neste ponto do vídeo">✦ Motion aqui <kbd>M</kbd></button>
241
+ <span class="pending" data-pending hidden></span>
242
+ </div>
243
+ <form class="note-box" data-note-box hidden>
244
+ <div class="note-range" data-note-range></div>
245
+ <input type="text" data-note-input maxlength="500" placeholder="O que mudar neste trecho? Ex.: tira essa parte" aria-label="O que mudar neste trecho">
246
+ <div class="note-actions">
247
+ <button type="button" class="btn ghost" data-note-cancel>Cancelar</button>
248
+ <button type="submit" class="btn accent-soft">Adicionar marcação</button>
249
+ </div>
250
+ </form>
251
+ <ul class="marks-list" data-marks-list></ul>
252
+ <p class="marks-empty" data-marks-empty>Nenhuma marcação ainda.</p>
253
+ </div>
254
+
255
+ <div class="actions-bar">
256
+ <div class="banner" data-banner hidden></div>
257
+ <label class="approve-note-wrap">
258
+ <span class="sr-only">Comentário para o agente (opcional)</span>
259
+ <input type="text" class="approve-note" data-approve-note maxlength="500" placeholder="Comentário para o agente (opcional)">
260
+ </label>
261
+ <div class="actions">
262
+ <a class="btn ghost download" data-download hidden download>Baixar vídeo</a>
263
+ <button class="btn secondary" type="button" data-save-marks>Salvar marcações</button>
264
+ <button class="btn primary" type="button" data-approve>Aprovar</button>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </template>
270
+
271
+ <div class="toasts" id="toasts" aria-live="polite"></div>
272
+
273
+ <dialog class="dialog" id="help-dialog" aria-labelledby="help-title">
274
+ <form method="dialog">
275
+ <h2 id="help-title">Atalhos do teclado</h2>
276
+ <ul class="shortcuts">
277
+ <li><span><kbd>Espaço</kbd></span>Tocar ou pausar</li>
278
+ <li><span><kbd>←</kbd> <kbd>→</kbd></span>Voltar ou avançar 1 quadro</li>
279
+ <li><span><kbd>Shift</kbd> + <kbd>←</kbd> <kbd>→</kbd></span>Voltar ou avançar 1 segundo</li>
280
+ <li><span><kbd>I</kbd></span>Marcar o início do trecho</li>
281
+ <li><span><kbd>O</kbd></span>Marcar o fim e escrever o que mudar</li>
282
+ <li><span>2 cliques num trecho</span>Marcar aquele trecho inteiro de uma vez</li>
283
+ <li><span><kbd>Esc</kbd></span>Cancelar a marcação</li>
284
+ <li><span><kbd>+</kbd> <kbd>−</kbd></span>Aproximar ou afastar a linha do tempo</li>
285
+ <li><span><kbd>0</kbd></span>Voltar a linha do tempo pro vídeo inteiro</li>
286
+ <li><span><kbd>Ctrl</kbd> ou <kbd>⌘</kbd> + roda do mouse</span>Zoom no ponto onde o cursor está</li>
287
+ <li><span><kbd>?</kbd></span>Abrir esta ajuda</li>
288
+ </ul>
289
+ <p class="hint">Os atalhos funcionam nas abas Corte e Final, fora das caixas de texto.</p>
290
+ <div class="dialog-actions"><button class="btn primary" value="close">Entendi</button></div>
291
+ </form>
292
+ </dialog>
293
+
294
+ <dialog class="dialog" id="confirm-dialog" aria-labelledby="confirm-title">
295
+ <form method="dialog">
296
+ <h2 id="confirm-title" data-confirm-title></h2>
297
+ <p data-confirm-text></p>
298
+ <div class="dialog-actions">
299
+ <button class="btn ghost" value="cancel">Voltar</button>
300
+ <button class="btn primary" value="ok" data-confirm-ok>Confirmar</button>
301
+ </div>
302
+ </form>
303
+ </dialog>
304
+
305
+ <script src="/app.js"></script>
306
+ </body>
307
+ </html>
package/editor/pyproject.toml ADDED
@@ -0,0 +1,23 @@
1
+ [project]
2
+ name = "editor-video"
3
+ version = "0.1.0"
4
+ description = "Skill de edição de vídeo por conversa para Claude Code e Codex, focada em criativos verticais de venda"
5
+ requires-python = ">=3.10,<3.14"
6
+ dependencies = [
7
+ "numpy>=1.26",
8
+ "pillow>=10.3",
9
+ "requests>=2.31",
10
+ # Detecção de rosto (YuNet) para posicionar texto sem cobrir a cara.
11
+ "opencv-python-headless>=5.0",
12
+ # Transcrição local: GPU (mlx) no Mac com chip Apple e macOS 14+ (Darwin 23+), CPU nos outros.
13
+ "mlx-whisper>=0.4; sys_platform == 'darwin' and platform_machine == 'arm64' and platform_release >= '23'",
14
+ "faster-whisper>=1.1; sys_platform != 'darwin' or platform_machine != 'arm64' or platform_release < '23'",
15
+ # Recorte da pessoa (tela verde): modelo selfie_multiclass em ONNX, em todos os sistemas.
16
+ "onnxruntime>=1.17",
17
+ # onnxruntime (usado pelo faster-whisper e pela tela verde) parou de publicar pacote para Mac Intel e
18
+ # macOS 13 na 1.24.
19
+ "onnxruntime<1.24; sys_platform == 'darwin' and (platform_machine == 'x86_64' or platform_release < '23')",
20
+ ]
21
+
22
+ [tool.uv]
23
+ package = false
package/editor/references/3d.md ADDED
@@ -0,0 +1,236 @@
1
+ # 3D de verdade
2
+
3
+ Cena com geometria, câmera e luz calculadas a cada quadro, feita em Three.js dentro do projeto HyperFrames
4
+ (`modelo-projeto`). As peças têm lateral, espessura e interior; a luz reage quando giram; a sombra cai no chão.
5
+ Não é a mesma coisa que camadas planas inclinadas ou texto atrás da pessoa: isso é 2,5D e é chamado assim.
6
+
7
+ O projeto já traz tudo o que o 3D precisa, sem baixar nada na hora do render:
8
+
9
+ - `assets/three/`: o three.js r181 (licença MIT em `LICENSE`, origem e conferência em `ORIGEM.txt`), com o
10
+ leitor de modelo `.glb`/`.gltf` (`GLTFLoader.js`) e a luz de estúdio (`RoomEnvironment.js`).
11
+ - `compositions/cenas/3d/motor-three.js`: o motor comum (palco, luz, sombra, sólidos, texto em volume, modelo,
12
+ vídeo como textura, rótulos, enquadramento e conferências).
13
+ - `compositions/cenas/3d/k3d_*.html`: o kit, quatro cenas prontas para adaptar (tabela abaixo).
14
+
15
+ ## Como falar com a pessoa
16
+
17
+ - Português simples. Nada de código nem nome de biblioteca na conversa; "3D de verdade" e "o teste de 5
18
+ segundos" bastam.
19
+ - Antes de montar, conte o plano da cena em 3 ou 4 linhas (modelo abaixo) e espere o ok se ela pediu para
20
+ aprovar. Depois do teste de 5 s, mostre o arquivo e diga o que conferiu.
21
+ - Qualquer troca de técnica (3D virou desenho em 2D, por exemplo) é dita com todas as letras e com o nome certo.
22
+
23
+ ## Quando usar e quando não usar
24
+
25
+ Pergunte primeiro: que relação some numa vista plana? Use 3D quando a resposta for uma destas:
26
+
27
+ - **volume**: o objeto tem corpo e isso importa (espessura, lateral, o que tem dentro);
28
+ - **ponto de vista que muda**: girar mostra algo que de frente não aparece;
29
+ - **peças que se separam e voltam**: camadas de um produto, partes de um método que se encaixam;
30
+ - **interior**: o que fica por dentro de uma caixa, de um aparelho, de um lugar;
31
+ - **caminho**: percurso que contorna obstáculos, circulação, ordem de lugares;
32
+ - **disposição**: onde as coisas ficam umas em relação às outras, o que tampa o quê.
33
+
34
+ Não use quando:
35
+
36
+ - a ideia é plana (lista, número, comparação lado a lado, passo a passo): 2D explica melhor
37
+ (`references/animacao.md`);
38
+ - o motivo é só "parecer caro" ou "ficar moderno";
39
+ - não há tempo de fala para mostrar a mudança com calma (menos de uns 3 s para a cena);
40
+ - a relação depende de medida que ninguém conferiu e a pessoa quer escala: sem medida conferida, a cena é
41
+ esquemática e não escreve tamanho nem escala.
42
+
43
+ Honestidade:
44
+
45
+ - Vídeo ou imagem numa tela 3D é um plano chapado. O aparelho tem volume; a pessoa na tela não ganha volume
46
+ quando gira. Diga isso na entrega.
47
+ - Texto atrás da pessoa e camadas inclinadas são 2,5D. Não chame de 3D.
48
+ - Modelo `.glb`/`.gltf` só da pessoa ou liberado para uso. Nada de modelo comprado, gerado fora ou baixado sem
49
+ autorização.
50
+
51
+ ## O plano da cena (antes de escrever qualquer coisa)
52
+
53
+ Escreva e mostre, curto:
54
+
55
+ ```
56
+ Cena 3D de 12,5 a 16,9 s ("Primeiro, ela ouviu tudo... palavra por palavra")
57
+ Objetos: 4 placas empilhadas (Vídeo bruto, Áudio da fala, Cada palavra, Os cortes), esquemático, sem escala.
58
+ Começa: parado, de 3/4 um pouco de cima, peças encaixadas.
59
+ Revela: em "ouviu" as placas se afastam e a câmera gira uns 20 graus; os rótulos aparecem presos a cada uma;
60
+ em "palavra" (a segunda) elas voltam ao encaixe. Termina parado nesse ângulo.
61
+ Render: HyperFrames neste Mac, com placa de vídeo; teste de 5 s antes do resto.
62
+ ```
63
+
64
+ As quatro perguntas que o plano responde: quais objetos (sólidos simples ou o modelo da pessoa), de onde a
65
+ câmera começa, o que se quer revelar e em que frase, e como vai ser renderizado de fato.
66
+
67
+ ## O kit
68
+
69
+ Cada cena é uma sub-composição do HyperFrames com os PARÂMETROS no topo do `<script>`, comentados. Tempo é
70
+ palavra da fala (`{palavra: "ouviu", depois: 0, padrao: 0.9}`) ou segundos da cena. Cores `null` usam as do
71
+ estilo do projeto (`papelaria`, `noite` ou `laranja`). Todas têm `fundo` (`"papel"`, `"#rrggbb"` ou `null` =
72
+ transparente), `area` (onde o 3D fica, em px; `null` = zona segura), `recorte` (com `area`, o 3D só aparece
73
+ dentro dela, numa janela de cantos redondos), `sombras` (false deixa o render mais leve; a sombra de contato
74
+ fica), `entrada` e `saida` (segundos do surgir e do sumir).
75
+
76
+ | cena | o que faz | parâmetros principais |
77
+ |---|---|---|
78
+ | `k3d_explodida` | peças empilhadas se separam na palavra, com um giro curto da câmera, ganham rótulos presos a cada uma e voltam ao encaixe | `pecas` (nome, altura, forma `placa`/`caixa`/`cilindro`/`modelo` com `arquivo`, cor), `largura`, `profundidade`, `encolhe`, `afastamento`, `separa`, `duracaoSepara`, `junta` (null = ficam abertas), `duracaoJunta`, `cameraInicio`, `cameraFim`, `rotulos` (`dir`, `esq` ou null) |
79
+ | `k3d_caminho` | chão com blocos e um caminho que contorna os blocos; a câmera abre parada no primeiro ponto, anda com o caminho (que vai sendo desenhado), chega em cada parada na palavra e termina parada numa visão geral | `pontos` (x, z; com `nome` e `chega` = parada rotulada; sem nome = curva), `obstaculos` (x, z, largura, profundidade, altura), `base` (maquete embaixo), `seguir` (azim, elev, janela), `acompanha`, `final` (azim, elev, duracao; null = fica no último ponto) |
80
+ | `k3d_volume` | uma palavra (ou uma caixa, ou o modelo da pessoa) em volume, parada, que gira um pouco na palavra para mostrar espessura e laterais, com luz e sombra; termina parada | `objeto` (`texto`, `caixa`, `modelo`), `texto` (`\n` quebra a linha), `modelo`, `cor`, `corLados`, `espessura`, `gira`, `duracaoGiro`, `anguloInicio`, `anguloFim`, `elevacao`, `rotulo` |
81
+ | `k3d_tela` | um notebook ou celular de verdade em 3D com o vídeo (ou uma imagem) da pessoa na tela; abre de frente, gira na palavra e mostra o corpo do aparelho. A tela é plano chapado | `aparelho` (`notebook`, `celular`), `encaixe` (`conter`, `cobrir`), `foco`, `corCorpo`, `gira`, `duracaoGiro`, `cameraInicio`, `cameraFim`, `rotulo`; e o `<video id="k3dt-midia">` (ou `<img>` com o mesmo id) |
82
+
83
+ O que o motor faz sozinho (não precisa escrever): luz de estúdio com sombra suave, chão com grade que some nas
84
+ bordas (só com fundo), sombra de contato embaixo das peças, enquadramento medido (projeta os cantos da peça e
85
+ acha a distância em que ela cabe na área), rótulos presos por projeção (seguem a peça, desviam um do outro,
86
+ ficam dentro da área e somem se a peça sair da área), texto em volume desenhado na fonte do projeto (acento
87
+ serve), e duas conferências que acusam erro no `check`: a câmera entrando num objeto e o caminho passando por
88
+ dentro de um bloco.
89
+
90
+ Funções do motor para uma cena nova (dentro de `construir(K, P)`): `P.placa`, `P.caixa`, `P.cilindro`,
91
+ `P.material`, `P.textoEmVolume`, `P.carregarModelo`, `P.texturaDeMidia`, `P.luzes`, `P.chao`,
92
+ `P.sombraDeContato`, `P.rotulos`, `P.orbita`, `P.distanciaQueCabe`, `P.solido` (registra o objeto para a
93
+ conferência da câmera); e no tempo `K.momento`, `K.palavra`, `K.trecho`, `K.mistura`, `K.misturaPose`,
94
+ `K.suave`, `K.freia`. A cena devolve `atualizar(t)`, que põe tudo no lugar para aquele `t`.
95
+
96
+ ## Como ligar no projeto
97
+
98
+ 1. Copie a cena do kit para `compositions/cenas/<nome>.html` (por exemplo `s05_camadas.html`). Troque, no
99
+ arquivo inteiro, o id da cena (`k3d_explodida` vira `s05_camadas`: no `<template id>`, no
100
+ `data-composition-id` da raiz, no `ID` e em `window.__timelines[...]`) e o prefixo dos ids (`k3de-` vira
101
+ `s05-`). Pode também usar a cena direto em `compositions/cenas/3d/`, se ela aparecer uma vez só no vídeo.
102
+ 2. Mude os PARÂMETROS. Não mexa no bloco "ligação com o HyperFrames".
103
+ 3. No `projeto.json`:
104
+
105
+ ```json
106
+ "cenas_proprias": [
107
+ {"arquivo": "compositions/cenas/s05_camadas.html", "de": 12.5, "ate": 16.9, "esconde_legenda": true}
108
+ ]
109
+ ```
110
+
111
+ 4. Formato 16:9: troque `data-width="1080" data-height="1920"` da raiz e do `<canvas>` para 1920 e 1080.
112
+ 5. `k3d_tela` com vídeo: no `<video id="...-midia">`, ponha em `data-media-start` o `de` da cena (o segundo do
113
+ corte em que ela começa, para a boca bater com a voz) e em `data-duration` a duração da cena. Com imagem,
114
+ troque a tag por `<img id="...-midia" src="assets/foto.jpg" alt=""/>`.
115
+
116
+ Vídeo com a pessoa falando: antes e depois do 3D a tela é toda dela. Se ela precisa continuar à vista enquanto a
117
+ cena roda, ela desce para a moldura e o 3D fica com o espaço de cima (ele explicando as camadas do Chip Editor
118
+ lá embaixo, e as camadas se abrindo em cima, por exemplo). No projeto são duas coisas no mesmo trecho: um bloco
119
+ `moldura` no trecho e a cena, com `recorte: true` e `area`
120
+ apontando para o retângulo livre acima da moldura (`[140, 230, 940, 950]` no 9:16). O `fundo` decide o que se vê
121
+ atrás dos objetos: `null` deixa aparecer o papel da moldura, `"papel"` deixa a janela lisa. Nenhum rótulo sai da
122
+ `area` nem encosta na pessoa.
123
+
124
+ A moldura leva uns 0,7 s para fechar, e enquanto fecha a pessoa ainda ocupa a parte de cima. Comece a cena
125
+ quando a moldura termina de fechar (a cena recebe `moldura.fechada_em`), não no mesmo segundo do bloco: se a cena
126
+ entrar junto, os objetos passam por cima do rosto nesse meio segundo. Com fim parado (`segura_fim`), deixe o
127
+ `ate` da cena no fim do corte: a cena continua até o fim do vídeo.
128
+
129
+ ## Regras do movimento
130
+
131
+ 1. Abre parado: a vista de partida fica um instante sem mexer antes da primeira mudança.
132
+ 2. Mexe só o que revela a relação: um giro curto (15 a 40 graus), um avanço, ou as peças se afastando. Uma
133
+ mudança em destaque por vez.
134
+ 3. Preso à fala: cada movimento começa na palavra que ele explica (`separa`, `junta`, `gira`, `chega`).
135
+ 4. Termina parado no ângulo que mais explica, por pelo menos uns 0,3 s antes de voltar para a pessoa.
136
+ 5. A câmera nunca atravessa um objeto (o motor confere em todos os quadros e dá erro no `check`).
137
+ 6. Rótulos curtos (1 a 3 palavras), legíveis, presos ao que descrevem, sem medida inventada.
138
+ 7. Sombra de contato e oclusão separam os planos: não desligue a sombra sem motivo.
139
+ 8. Tudo em função do tempo: nada de `Math.random`, `Date.now`, contador de quadros, física ou qualquer coisa
140
+ que dependa do quadro anterior. Animação que vem dentro do modelo é posta no tempo (`noTempo(t)`).
141
+
142
+ ## O portão: teste de 5 s
143
+
144
+ Antes do resto do vídeo, um trecho de uns 5 s com o ângulo mais difícil, o momento em que uma peça esconde a
145
+ outra e a transformação principal, renderizado como vídeo do mesmo jeito do final. Imagem parada e prévia do
146
+ estúdio não provam nada. Na pasta do projeto:
147
+
148
+ ```bash
149
+ python3 build.py amostra 12.2 17.2
150
+ python3 build.py hf lint
151
+ python3 build.py hf check
152
+ python3 build.py hf render --quality draft --output renders/teste-3d.mp4
153
+ ```
154
+
155
+ (`12.2 17.2`: segundos do corte, cobrindo a transformação principal; o `amostra` pode começar no meio de uma
156
+ cena, ela continua do ponto certo.) Depois tire quadros do arquivo para olhar parado, por exemplo antes, no
157
+ meio e depois do giro:
158
+
159
+ ```bash
160
+ for t in 0.8 1.5 2.6 4.4; do ffmpeg -v error -y -ss $t -i renders/teste-3d.mp4 -frames:v 1 renders/q_$t.png; done
161
+ ```
162
+
163
+ Opcional, para provar que o render se repete: renderize de novo com outro nome e compare só a área do 3D (a
164
+ moldura e o vídeo do corte podem variar 1 ou 2 pixels entre dois renders, então o arquivo inteiro não sai byte a
165
+ byte igual quando há moldura): tire o mesmo quadro dos dois e recorte a `area` da cena antes de comparar.
166
+
167
+ ## O que conferir no arquivo
168
+
169
+ - Ao girar, aparecem as laterais e a espessura; a luz muda nas faces conforme o ângulo.
170
+ - Sombra no chão e sombra de contato embaixo das peças; a peça de cima escurece a de baixo.
171
+ - Uma peça passa na frente da outra do jeito certo (a de trás some atrás da da frente).
172
+ - Rótulos legíveis no tamanho do celular, presos ao que descrevem enquanto tudo se mexe, sem cobrir a peça,
173
+ a pessoa ou a legenda.
174
+ - Peças que se separam voltam exatamente ao encaixe, sem trocar de lugar entre si.
175
+ - Abre parado, mexe na palavra certa, termina parado; nada pula nem pisca.
176
+ - A câmera não entra em nada e nada é cortado pela borda sem querer.
177
+ - Na tela 3D, o vídeo mexe junto com a voz (se não, `data-media-start`).
178
+ - O `check` sem erro. O aviso "Runtime did not become render-ready within 3000ms" com o Mac ocupado não é erro:
179
+ o render espera a cena montar.
180
+
181
+ ## Se o teste falhar: em que camada está o problema
182
+
183
+ | o que aparece | camada | o que fazer |
184
+ |---|---|---|
185
+ | caixa vermelha "Cena 3D ... não montou: o WebGL não abriu" e `console_error` no `check` | WebGL / placa de vídeo | O navegador do render não abriu o WebGL. Veja no log do render a linha `GPU:` ou `browserGpuMode probe` (`hardware` é a placa; `software` é o SwiftShader). Tente `python3 build.py hf render ... --browser-gpu`. Se nem assim abrir, use a alternativa declarada (abaixo). |
186
+ | render muito lento, log diz `software gpu` | placa de vídeo | Sem placa, o 3D roda em software: funcionou igual, mas levou uns 5 min 40 s para 5 s de cena (com placa, 6 a 36 s). Force `--browser-gpu`; se a máquina não tiver placa, simplifique (menos peças, `sombras: false`, cena mais curta) ou avise quanto vai demorar. |
187
+ | `[cena 3D ...] não carreguei o motor 3D` | pacotes / carregamento | Falta `compositions/cenas/3d/motor-three.js` ou `assets/three/` no projeto (copie de `<SKILL>/modelo-projeto`). A cena precisa estar dentro de `compositions/`. |
188
+ | `erro ao montar os objetos: ...` | sólidos / modelo | Parâmetro errado, modelo `.glb` quebrado ou fora de `assets/`, texto vazio. A mensagem diz qual. |
189
+ | `a câmera entra em "..." em 2.40 s` | câmera | Afaste a câmera (`elev` maior, `dist`/`janela` maior) ou mude o caminho. |
190
+ | `o caminho passa por dentro do bloco N` | sólidos | Ponha um ponto de curva (sem nome) antes do bloco. |
191
+ | peça pula ou volta diferente ao arrastar a agulha para trás | tempo | Algo depende do quadro anterior. Tudo tem de sair de `t`. |
192
+ | dois renders dão quadros diferentes | tempo / desenho | Procure `Math.random`, `Date.now`, `performance.now` na decisão do quadro, filtro `blur()` de canvas ou sombra desfocada de CSS (`box-shadow` com desfoque) em cima do 3D: os dois variam um tico de um render para outro. O motor borra por redução e ampliação e usa sombra dura nos rótulos. |
193
+ | vídeo parado ou fora de sincronia na tela 3D | carregamento | `data-media-start` e `data-duration` do `<video>` da cena. |
194
+ | lento, mas com placa | lentidão | Menos peças, `tamanhoPx` menor no texto, sem vídeo na textura, cena mais curta. |
195
+
196
+ Simplifique sem perder a relação que precisa ser explicada: menos peças, superfícies mais simples (placa no
197
+ lugar de modelo), malha mais leve, sombra só de contato. O que não pode sair é o que a fala afirma (as peças se
198
+ separando, o caminho contornando, o volume aparecendo no giro).
199
+
200
+ ## A alternativa declarada
201
+
202
+ Só quando este computador não roda o 3D de jeito nenhum. Conte o que travou, em uma linha, e ofereça uma
203
+ alternativa sempre rotulada:
204
+
205
+ - **vista explodida em 2D** (as peças em desenho plano, afastadas, com os rótulos: `references/animacao.md`);
206
+ - **desenho em corte** (o objeto cortado mostrando o interior, plano);
207
+ - **camadas planas inclinadas** (2,5D: dá profundidade, não dá volume).
208
+
209
+ Frase de exemplo: "O 3D não abriu neste computador (o navegador do render ficou sem placa de vídeo). Posso
210
+ fazer uma vista explodida em 2D com os mesmos rótulos; não é 3D. Quer assim ou prefere tentar em outra
211
+ máquina?" Se a pessoa pediu 3D com todas as letras, a troca é decisão dela. Nunca troque em silêncio e nunca
212
+ contrate render pago para contornar.
213
+
214
+ ## Números medidos (Mac M4 Pro, render draft, 5 s de cena)
215
+
216
+ - Montagem de cada cena: 0,1 a 0,3 s (até 1,6 s com o Mac ocupado).
217
+ - Render com placa de vídeo: 6 a 9 s com o Mac livre (volume, explodida, caminho, celular com imagem); a tela
218
+ com vídeo, 13 a 33 s. Com o Mac ocupado por outros renders: 19 a 36 s (o mesmo trecho sem 3D, 12 a 31 s).
219
+ - Render em software (`--no-browser-gpu`): 5 min 43 s, mesma imagem.
220
+ - Dois renders do mesmo trecho: a área do 3D sai idêntica pixel a pixel nas quatro cenas (a cena sozinha, sem
221
+ moldura, sai byte a byte igual).
222
+
223
+ ## Como funciona por dentro (para mexer no motor)
224
+
225
+ - O relógio da cena é a timeline GSAP dela (`relogio.t` vai de 0 à duração). O desenho acontece no
226
+ `onUpdate` da timeline (estúdio tocando) e no evento `hf-seek` do HyperFrames (render e agulha). Os dois
227
+ desenham o mesmo quadro para o mesmo `t`.
228
+ - O motor é carregado com `import()` a partir da pasta do projeto; o `window.__hf.buildReady[id]` segura o
229
+ render até a cena montar.
230
+ - `preserveDrawingBuffer` ligado e `pixelRatio` 1: a captura pega o quadro desenhado, no tamanho do vídeo.
231
+ - Vídeo como textura: no render o HyperFrames põe um `<img class="__render_frame__">` ao lado do `<video>` com
232
+ o quadro certo e manda desenhar de novo; a textura lê dali. O canvas da textura fica na CPU
233
+ (`willReadFrequently`) e o fundo borrado é feito por redução e ampliação, nunca por `filter: blur()`. Os
234
+ rótulos usam sombra dura (sem desfoque) pelo mesmo motivo.
235
+ - `window.__cena3d["<id>"]` no console do estúdio: `pronto`, `erro`, `avisos`, `montagemMs`, `placa` (o
236
+ renderizador do WebGL) e `t` (o último tempo desenhado).