@amg555/frameforge-mcp 2.7.3 → 2.7.7

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 (565) hide show
  1. package/.claude-plugin/marketplace.json +3 -3
  2. package/AGENTS.md +33 -0
  3. package/CHANGELOG.md +49 -0
  4. package/CLAUDE.md +17 -6
  5. package/GEMINI.md +63 -0
  6. package/README.md +216 -426
  7. package/START_HERE.md +4 -2
  8. package/package.json +5 -3
  9. package/plugins/ai-video-editor/README.md +32 -0
  10. package/plugins/ai-video-editor/SKILL.md +152 -0
  11. package/plugins/ai-video-editor/assets/fonts/fonts.css +2409 -0
  12. package/plugins/ai-video-editor/assets/fonts/ttf/anton-400.ttf +0 -0
  13. package/plugins/ai-video-editor/assets/fonts/ttf/archivo-800.ttf +0 -0
  14. package/plugins/ai-video-editor/assets/fonts/ttf/cabin-sketch-700.ttf +0 -0
  15. package/plugins/ai-video-editor/assets/fonts/ttf/dm-sans-700.ttf +0 -0
  16. package/plugins/ai-video-editor/assets/fonts/ttf/fraunces-600.ttf +0 -0
  17. package/plugins/ai-video-editor/assets/fonts/ttf/fraunces-700.ttf +0 -0
  18. package/plugins/ai-video-editor/assets/fonts/ttf/fredoka-700.ttf +0 -0
  19. package/plugins/ai-video-editor/assets/fonts/ttf/inter-700.ttf +0 -0
  20. package/plugins/ai-video-editor/assets/fonts/ttf/inter-800.ttf +0 -0
  21. package/plugins/ai-video-editor/assets/fonts/ttf/inter-tight-800.ttf +0 -0
  22. package/plugins/ai-video-editor/assets/fonts/ttf/kalam-700.ttf +0 -0
  23. package/plugins/ai-video-editor/assets/fonts/ttf/noto-sans-devanagari-700.ttf +0 -0
  24. package/plugins/ai-video-editor/assets/fonts/web/noto-sans-devanagari-devanagari-400-normal.woff2 +0 -0
  25. package/plugins/ai-video-editor/assets/fonts/web/noto-sans-devanagari-devanagari-500-normal.woff2 +0 -0
  26. package/plugins/ai-video-editor/assets/fonts/web/noto-sans-devanagari-devanagari-600-normal.woff2 +0 -0
  27. package/plugins/ai-video-editor/assets/fonts/web/noto-sans-devanagari-devanagari-700-normal.woff2 +0 -0
  28. package/plugins/ai-video-editor/assets/fonts/web/noto-sans-devanagari-devanagari-800-normal.woff2 +0 -0
  29. package/plugins/ai-video-editor/engine/hidpi.js +117 -0
  30. package/plugins/ai-video-editor/engine/page.html +43 -0
  31. package/plugins/ai-video-editor/engine/player.js +145 -0
  32. package/plugins/ai-video-editor/references/example-story-warm-canvas.js +95 -0
  33. package/plugins/ai-video-editor/references/story-guide.md +112 -0
  34. package/plugins/ai-video-editor/requirements.txt +4 -0
  35. package/plugins/ai-video-editor/styles/chalk-talk/base.js +490 -0
  36. package/plugins/ai-video-editor/styles/chalk-talk/style.json +14 -0
  37. package/plugins/ai-video-editor/styles/chalk-talk/style.md +41 -0
  38. package/plugins/ai-video-editor/styles/clean-tech/base.js +447 -0
  39. package/plugins/ai-video-editor/styles/clean-tech/style.json +15 -0
  40. package/plugins/ai-video-editor/styles/clean-tech/style.md +38 -0
  41. package/plugins/ai-video-editor/styles/creator-motion-graphics/base.js +698 -0
  42. package/plugins/ai-video-editor/styles/creator-motion-graphics/style.json +16 -0
  43. package/plugins/ai-video-editor/styles/creator-motion-graphics/style.md +39 -0
  44. package/plugins/ai-video-editor/styles/data-story/base.js +432 -0
  45. package/plugins/ai-video-editor/styles/data-story/style.json +14 -0
  46. package/plugins/ai-video-editor/styles/data-story/style.md +38 -0
  47. package/plugins/ai-video-editor/styles/index.json +103 -0
  48. package/plugins/ai-video-editor/styles/pop-info/base.js +570 -0
  49. package/plugins/ai-video-editor/styles/pop-info/style.json +13 -0
  50. package/plugins/ai-video-editor/styles/pop-info/style.md +37 -0
  51. package/plugins/ai-video-editor/styles/software-walkthrough/base.js +544 -0
  52. package/plugins/ai-video-editor/styles/software-walkthrough/style.json +15 -0
  53. package/plugins/ai-video-editor/styles/software-walkthrough/style.md +38 -0
  54. package/plugins/ai-video-editor/styles/warm-canvas/base.js +610 -0
  55. package/plugins/ai-video-editor/styles/warm-canvas/style.json +14 -0
  56. package/plugins/ai-video-editor/styles/warm-canvas/style.md +37 -0
  57. package/plugins/aiinsight-shorts/CHANGELOG.md +6 -0
  58. package/plugins/aiinsight-shorts/README.md +43 -0
  59. package/plugins/aiinsight-shorts/SKILL.md +138 -0
  60. package/plugins/aiinsight-shorts/styles/deep-dive/STYLE.md +58 -0
  61. package/plugins/aiinsight-shorts/styles/deep-dive/example/data/cues.json +140 -0
  62. package/plugins/aiinsight-shorts/styles/deep-dive/example/data/lines.json +67 -0
  63. package/plugins/aiinsight-shorts/styles/deep-dive/example/data/words.json +614 -0
  64. package/plugins/aiinsight-shorts/styles/deep-dive/example/data/words.txt +102 -0
  65. package/plugins/aiinsight-shorts/styles/deep-dive/example/fonts/Inter-Black.otf +0 -0
  66. package/plugins/aiinsight-shorts/styles/deep-dive/example/fonts/Inter-ExtraBold.otf +0 -0
  67. package/plugins/aiinsight-shorts/styles/deep-dive/example/index.html +17 -0
  68. package/plugins/aiinsight-shorts/styles/deep-dive/example/script.json +27 -0
  69. package/plugins/aiinsight-shorts/styles/deep-dive/example/sheet.html +11 -0
  70. package/plugins/aiinsight-shorts/styles/deep-dive/example/src/core/board.js +62 -0
  71. package/plugins/aiinsight-shorts/styles/deep-dive/example/src/core/captions.js +68 -0
  72. package/plugins/aiinsight-shorts/styles/deep-dive/example/src/core/engine.js +65 -0
  73. package/plugins/aiinsight-shorts/styles/deep-dive/example/src/core/human.js +128 -0
  74. package/plugins/aiinsight-shorts/styles/deep-dive/example/src/core/lib.js +44 -0
  75. package/plugins/aiinsight-shorts/styles/deep-dive/example/src/core/look2d.js +33 -0
  76. package/plugins/aiinsight-shorts/styles/deep-dive/example/src/core/sdf.js +79 -0
  77. package/plugins/aiinsight-shorts/styles/deep-dive/example/src/core/sets.js +107 -0
  78. package/plugins/aiinsight-shorts/styles/deep-dive/example/src/core/timing.js +23 -0
  79. package/plugins/aiinsight-shorts/styles/deep-dive/example/src/main.js +56 -0
  80. package/plugins/aiinsight-shorts/styles/deep-dive/example/src/sheet.js +79 -0
  81. package/plugins/aiinsight-shorts/styles/deep-dive/example/src/shots.js +136 -0
  82. package/plugins/aiinsight-shorts/styles/deep-dive/example/tools/capture.mjs +122 -0
  83. package/plugins/aiinsight-shorts/styles/deep-dive/example/tools/mix.py +172 -0
  84. package/plugins/aiinsight-shorts/styles/deep-dive/example/vendor/LICENSE-three.txt +21 -0
  85. package/plugins/aiinsight-shorts/styles/deep-dive/example/vendor/addons/environments/RoomEnvironment.js +144 -0
  86. package/plugins/aiinsight-shorts/styles/deep-dive/example/vendor/addons/postprocessing/BokehPass.js +141 -0
  87. package/plugins/aiinsight-shorts/styles/deep-dive/example/vendor/addons/postprocessing/EffectComposer.js +231 -0
  88. package/plugins/aiinsight-shorts/styles/deep-dive/example/vendor/addons/postprocessing/MaskPass.js +104 -0
  89. package/plugins/aiinsight-shorts/styles/deep-dive/example/vendor/addons/postprocessing/OutputPass.js +97 -0
  90. package/plugins/aiinsight-shorts/styles/deep-dive/example/vendor/addons/postprocessing/Pass.js +95 -0
  91. package/plugins/aiinsight-shorts/styles/deep-dive/example/vendor/addons/postprocessing/RenderPass.js +99 -0
  92. package/plugins/aiinsight-shorts/styles/deep-dive/example/vendor/addons/postprocessing/ShaderPass.js +77 -0
  93. package/plugins/aiinsight-shorts/styles/deep-dive/example/vendor/addons/postprocessing/UnrealBloomPass.js +415 -0
  94. package/plugins/aiinsight-shorts/styles/deep-dive/example/vendor/addons/shaders/BokehShader.js +145 -0
  95. package/plugins/aiinsight-shorts/styles/deep-dive/example/vendor/addons/shaders/CopyShader.js +45 -0
  96. package/plugins/aiinsight-shorts/styles/deep-dive/example/vendor/addons/shaders/LuminosityHighPassShader.js +64 -0
  97. package/plugins/aiinsight-shorts/styles/deep-dive/example/vendor/addons/shaders/OutputShader.js +85 -0
  98. package/plugins/aiinsight-shorts/styles/deep-dive/example/vendor/three.module.js +6 -0
  99. package/plugins/aiinsight-shorts/styles/deep-dive/style-sheet.png +0 -0
  100. package/plugins/aiinsight-shorts/styles/inside-out/STYLE.md +97 -0
  101. package/plugins/aiinsight-shorts/styles/inside-out/example/data/cues.json +178 -0
  102. package/plugins/aiinsight-shorts/styles/inside-out/example/data/lines.json +73 -0
  103. package/plugins/aiinsight-shorts/styles/inside-out/example/data/words.json +662 -0
  104. package/plugins/aiinsight-shorts/styles/inside-out/example/fonts/Inter-Black.otf +0 -0
  105. package/plugins/aiinsight-shorts/styles/inside-out/example/index.html +17 -0
  106. package/plugins/aiinsight-shorts/styles/inside-out/example/script.json +26 -0
  107. package/plugins/aiinsight-shorts/styles/inside-out/example/src/core/captions.js +68 -0
  108. package/plugins/aiinsight-shorts/styles/inside-out/example/src/core/kit.js +345 -0
  109. package/plugins/aiinsight-shorts/styles/inside-out/example/src/core/lib.js +44 -0
  110. package/plugins/aiinsight-shorts/styles/inside-out/example/src/core/timing.js +23 -0
  111. package/plugins/aiinsight-shorts/styles/inside-out/example/src/main.js +62 -0
  112. package/plugins/aiinsight-shorts/styles/inside-out/example/src/shots.js +195 -0
  113. package/plugins/aiinsight-shorts/styles/inside-out/example/tools/capture.mjs +122 -0
  114. package/plugins/aiinsight-shorts/styles/inside-out/example/tools/mix.py +172 -0
  115. package/plugins/aiinsight-shorts/styles/inside-out/style-sheet.png +0 -0
  116. package/plugins/aiinsight-shorts/styles/night-file/STYLE.md +36 -0
  117. package/plugins/aiinsight-shorts/styles/night-file/example/data/cues.json +146 -0
  118. package/plugins/aiinsight-shorts/styles/night-file/example/data/lines.json +73 -0
  119. package/plugins/aiinsight-shorts/styles/night-file/example/data/words.json +572 -0
  120. package/plugins/aiinsight-shorts/styles/night-file/example/data/words.txt +95 -0
  121. package/plugins/aiinsight-shorts/styles/night-file/example/fonts/FreeMonoBold.ttf +0 -0
  122. package/plugins/aiinsight-shorts/styles/night-file/example/fonts/Inter-Black.otf +0 -0
  123. package/plugins/aiinsight-shorts/styles/night-file/example/index.html +18 -0
  124. package/plugins/aiinsight-shorts/styles/night-file/example/script.json +26 -0
  125. package/plugins/aiinsight-shorts/styles/night-file/example/sheet.html +13 -0
  126. package/plugins/aiinsight-shorts/styles/night-file/example/src/core/board.js +62 -0
  127. package/plugins/aiinsight-shorts/styles/night-file/example/src/core/captions.js +49 -0
  128. package/plugins/aiinsight-shorts/styles/night-file/example/src/core/engine.js +65 -0
  129. package/plugins/aiinsight-shorts/styles/night-file/example/src/core/human.js +128 -0
  130. package/plugins/aiinsight-shorts/styles/night-file/example/src/core/kit.js +151 -0
  131. package/plugins/aiinsight-shorts/styles/night-file/example/src/core/lib.js +44 -0
  132. package/plugins/aiinsight-shorts/styles/night-file/example/src/core/sdf.js +79 -0
  133. package/plugins/aiinsight-shorts/styles/night-file/example/src/core/sets3d.js +106 -0
  134. package/plugins/aiinsight-shorts/styles/night-file/example/src/core/timing.js +23 -0
  135. package/plugins/aiinsight-shorts/styles/night-file/example/src/main.js +56 -0
  136. package/plugins/aiinsight-shorts/styles/night-file/example/src/sheet.js +86 -0
  137. package/plugins/aiinsight-shorts/styles/night-file/example/src/shots.js +130 -0
  138. package/plugins/aiinsight-shorts/styles/night-file/example/tools/capture.mjs +122 -0
  139. package/plugins/aiinsight-shorts/styles/night-file/example/tools/mix.py +172 -0
  140. package/plugins/aiinsight-shorts/styles/night-file/example/vendor/LICENSE-three.txt +21 -0
  141. package/plugins/aiinsight-shorts/styles/night-file/example/vendor/addons/environments/RoomEnvironment.js +144 -0
  142. package/plugins/aiinsight-shorts/styles/night-file/example/vendor/addons/postprocessing/BokehPass.js +141 -0
  143. package/plugins/aiinsight-shorts/styles/night-file/example/vendor/addons/postprocessing/EffectComposer.js +231 -0
  144. package/plugins/aiinsight-shorts/styles/night-file/example/vendor/addons/postprocessing/MaskPass.js +104 -0
  145. package/plugins/aiinsight-shorts/styles/night-file/example/vendor/addons/postprocessing/OutputPass.js +97 -0
  146. package/plugins/aiinsight-shorts/styles/night-file/example/vendor/addons/postprocessing/Pass.js +95 -0
  147. package/plugins/aiinsight-shorts/styles/night-file/example/vendor/addons/postprocessing/RenderPass.js +99 -0
  148. package/plugins/aiinsight-shorts/styles/night-file/example/vendor/addons/postprocessing/ShaderPass.js +77 -0
  149. package/plugins/aiinsight-shorts/styles/night-file/example/vendor/addons/postprocessing/UnrealBloomPass.js +415 -0
  150. package/plugins/aiinsight-shorts/styles/night-file/example/vendor/addons/shaders/BokehShader.js +145 -0
  151. package/plugins/aiinsight-shorts/styles/night-file/example/vendor/addons/shaders/CopyShader.js +45 -0
  152. package/plugins/aiinsight-shorts/styles/night-file/example/vendor/addons/shaders/LuminosityHighPassShader.js +64 -0
  153. package/plugins/aiinsight-shorts/styles/night-file/example/vendor/addons/shaders/OutputShader.js +85 -0
  154. package/plugins/aiinsight-shorts/styles/night-file/example/vendor/three.module.js +6 -0
  155. package/plugins/aiinsight-shorts/styles/night-file/style-sheet.png +0 -0
  156. package/plugins/aiinsight-shorts/styles/paper-atlas/STYLE.md +30 -0
  157. package/plugins/aiinsight-shorts/styles/paper-atlas/example/data/cues.json +167 -0
  158. package/plugins/aiinsight-shorts/styles/paper-atlas/example/data/lines.json +67 -0
  159. package/plugins/aiinsight-shorts/styles/paper-atlas/example/data/words.json +614 -0
  160. package/plugins/aiinsight-shorts/styles/paper-atlas/example/data/words.txt +102 -0
  161. package/plugins/aiinsight-shorts/styles/paper-atlas/example/fonts/Caladea-Bold.ttf +0 -0
  162. package/plugins/aiinsight-shorts/styles/paper-atlas/example/fonts/Inter-Black.otf +0 -0
  163. package/plugins/aiinsight-shorts/styles/paper-atlas/example/index.html +15 -0
  164. package/plugins/aiinsight-shorts/styles/paper-atlas/example/script.json +26 -0
  165. package/plugins/aiinsight-shorts/styles/paper-atlas/example/sheet.html +12 -0
  166. package/plugins/aiinsight-shorts/styles/paper-atlas/example/src/core/board.js +62 -0
  167. package/plugins/aiinsight-shorts/styles/paper-atlas/example/src/core/captions.js +47 -0
  168. package/plugins/aiinsight-shorts/styles/paper-atlas/example/src/core/kit.js +152 -0
  169. package/plugins/aiinsight-shorts/styles/paper-atlas/example/src/core/lib.js +44 -0
  170. package/plugins/aiinsight-shorts/styles/paper-atlas/example/src/core/timing.js +23 -0
  171. package/plugins/aiinsight-shorts/styles/paper-atlas/example/src/main.js +62 -0
  172. package/plugins/aiinsight-shorts/styles/paper-atlas/example/src/sheet.js +61 -0
  173. package/plugins/aiinsight-shorts/styles/paper-atlas/example/src/shots.js +139 -0
  174. package/plugins/aiinsight-shorts/styles/paper-atlas/example/tools/capture.mjs +122 -0
  175. package/plugins/aiinsight-shorts/styles/paper-atlas/example/tools/mix.py +172 -0
  176. package/plugins/aiinsight-shorts/styles/paper-atlas/style-sheet.png +0 -0
  177. package/plugins/aiinsight-shorts/styles/stick-story/STYLE.md +32 -0
  178. package/plugins/aiinsight-shorts/styles/stick-story/example/data/cues.json +182 -0
  179. package/plugins/aiinsight-shorts/styles/stick-story/example/data/lines.json +79 -0
  180. package/plugins/aiinsight-shorts/styles/stick-story/example/data/words.json +662 -0
  181. package/plugins/aiinsight-shorts/styles/stick-story/example/data/words.txt +110 -0
  182. package/plugins/aiinsight-shorts/styles/stick-story/example/fonts/Inter-Black.otf +0 -0
  183. package/plugins/aiinsight-shorts/styles/stick-story/example/fonts/Inter-ExtraBold.otf +0 -0
  184. package/plugins/aiinsight-shorts/styles/stick-story/example/index.html +13 -0
  185. package/plugins/aiinsight-shorts/styles/stick-story/example/script.json +27 -0
  186. package/plugins/aiinsight-shorts/styles/stick-story/example/sheet.html +10 -0
  187. package/plugins/aiinsight-shorts/styles/stick-story/example/src/core/board.js +62 -0
  188. package/plugins/aiinsight-shorts/styles/stick-story/example/src/core/captions.js +47 -0
  189. package/plugins/aiinsight-shorts/styles/stick-story/example/src/core/kit.js +166 -0
  190. package/plugins/aiinsight-shorts/styles/stick-story/example/src/core/lib.js +44 -0
  191. package/plugins/aiinsight-shorts/styles/stick-story/example/src/core/timing.js +23 -0
  192. package/plugins/aiinsight-shorts/styles/stick-story/example/src/main.js +62 -0
  193. package/plugins/aiinsight-shorts/styles/stick-story/example/src/sheet.js +64 -0
  194. package/plugins/aiinsight-shorts/styles/stick-story/example/src/shots.js +148 -0
  195. package/plugins/aiinsight-shorts/styles/stick-story/example/tools/capture.mjs +122 -0
  196. package/plugins/aiinsight-shorts/styles/stick-story/example/tools/mix.py +172 -0
  197. package/plugins/aiinsight-shorts/styles/stick-story/style-sheet.png +0 -0
  198. package/plugins/aiinsight-shorts/styles/tall-tale/STYLE.md +51 -0
  199. package/plugins/aiinsight-shorts/styles/tall-tale/example/data/cues.json +271 -0
  200. package/plugins/aiinsight-shorts/styles/tall-tale/example/data/lines.json +127 -0
  201. package/plugins/aiinsight-shorts/styles/tall-tale/example/data/words.json +908 -0
  202. package/plugins/aiinsight-shorts/styles/tall-tale/example/data/words.txt +151 -0
  203. package/plugins/aiinsight-shorts/styles/tall-tale/example/fonts/Caladea-Bold.ttf +0 -0
  204. package/plugins/aiinsight-shorts/styles/tall-tale/example/fonts/Inter-Black.otf +0 -0
  205. package/plugins/aiinsight-shorts/styles/tall-tale/example/fonts/Inter-ExtraBold.otf +0 -0
  206. package/plugins/aiinsight-shorts/styles/tall-tale/example/index.html +19 -0
  207. package/plugins/aiinsight-shorts/styles/tall-tale/example/script.json +37 -0
  208. package/plugins/aiinsight-shorts/styles/tall-tale/example/sheet.html +13 -0
  209. package/plugins/aiinsight-shorts/styles/tall-tale/example/src/core/board.js +62 -0
  210. package/plugins/aiinsight-shorts/styles/tall-tale/example/src/core/captions.js +56 -0
  211. package/plugins/aiinsight-shorts/styles/tall-tale/example/src/core/engine.js +65 -0
  212. package/plugins/aiinsight-shorts/styles/tall-tale/example/src/core/lib.js +44 -0
  213. package/plugins/aiinsight-shorts/styles/tall-tale/example/src/core/props.js +166 -0
  214. package/plugins/aiinsight-shorts/styles/tall-tale/example/src/core/timing.js +23 -0
  215. package/plugins/aiinsight-shorts/styles/tall-tale/example/src/core/toon.js +352 -0
  216. package/plugins/aiinsight-shorts/styles/tall-tale/example/src/core/world.js +340 -0
  217. package/plugins/aiinsight-shorts/styles/tall-tale/example/src/main.js +56 -0
  218. package/plugins/aiinsight-shorts/styles/tall-tale/example/src/sheet.js +99 -0
  219. package/plugins/aiinsight-shorts/styles/tall-tale/example/src/shots.js +377 -0
  220. package/plugins/aiinsight-shorts/styles/tall-tale/example/tools/capture.mjs +122 -0
  221. package/plugins/aiinsight-shorts/styles/tall-tale/example/tools/mix.py +204 -0
  222. package/plugins/aiinsight-shorts/styles/tall-tale/example/vendor/LICENSE-three.txt +21 -0
  223. package/plugins/aiinsight-shorts/styles/tall-tale/example/vendor/addons/environments/RoomEnvironment.js +144 -0
  224. package/plugins/aiinsight-shorts/styles/tall-tale/example/vendor/addons/postprocessing/BokehPass.js +141 -0
  225. package/plugins/aiinsight-shorts/styles/tall-tale/example/vendor/addons/postprocessing/EffectComposer.js +231 -0
  226. package/plugins/aiinsight-shorts/styles/tall-tale/example/vendor/addons/postprocessing/MaskPass.js +104 -0
  227. package/plugins/aiinsight-shorts/styles/tall-tale/example/vendor/addons/postprocessing/OutputPass.js +97 -0
  228. package/plugins/aiinsight-shorts/styles/tall-tale/example/vendor/addons/postprocessing/Pass.js +95 -0
  229. package/plugins/aiinsight-shorts/styles/tall-tale/example/vendor/addons/postprocessing/RenderPass.js +99 -0
  230. package/plugins/aiinsight-shorts/styles/tall-tale/example/vendor/addons/postprocessing/ShaderPass.js +77 -0
  231. package/plugins/aiinsight-shorts/styles/tall-tale/example/vendor/addons/postprocessing/UnrealBloomPass.js +415 -0
  232. package/plugins/aiinsight-shorts/styles/tall-tale/example/vendor/addons/shaders/BokehShader.js +145 -0
  233. package/plugins/aiinsight-shorts/styles/tall-tale/example/vendor/addons/shaders/CopyShader.js +45 -0
  234. package/plugins/aiinsight-shorts/styles/tall-tale/example/vendor/addons/shaders/LuminosityHighPassShader.js +64 -0
  235. package/plugins/aiinsight-shorts/styles/tall-tale/example/vendor/addons/shaders/OutputShader.js +85 -0
  236. package/plugins/aiinsight-shorts/styles/tall-tale/example/vendor/three.module.js +6 -0
  237. package/plugins/aiinsight-shorts/styles/tall-tale/style-sheet.png +0 -0
  238. package/plugins/faceless-shorts/README.md +34 -0
  239. package/plugins/faceless-shorts/SKILL.md +124 -0
  240. package/plugins/faceless-shorts/styles/deep-dive/STYLE.md +58 -0
  241. package/plugins/faceless-shorts/styles/deep-dive/example/data/cues.json +140 -0
  242. package/plugins/faceless-shorts/styles/deep-dive/example/data/lines.json +67 -0
  243. package/plugins/faceless-shorts/styles/deep-dive/example/data/words.json +614 -0
  244. package/plugins/faceless-shorts/styles/deep-dive/example/data/words.txt +102 -0
  245. package/plugins/faceless-shorts/styles/deep-dive/example/fonts/Inter-Black.otf +0 -0
  246. package/plugins/faceless-shorts/styles/deep-dive/example/fonts/Inter-ExtraBold.otf +0 -0
  247. package/plugins/faceless-shorts/styles/deep-dive/example/index.html +16 -0
  248. package/plugins/faceless-shorts/styles/deep-dive/example/script.json +27 -0
  249. package/plugins/faceless-shorts/styles/deep-dive/example/sheet.html +10 -0
  250. package/plugins/faceless-shorts/styles/deep-dive/example/src/core/board.js +62 -0
  251. package/plugins/faceless-shorts/styles/deep-dive/example/src/core/captions.js +68 -0
  252. package/plugins/faceless-shorts/styles/deep-dive/example/src/core/engine.js +65 -0
  253. package/plugins/faceless-shorts/styles/deep-dive/example/src/core/human.js +128 -0
  254. package/plugins/faceless-shorts/styles/deep-dive/example/src/core/lib.js +44 -0
  255. package/plugins/faceless-shorts/styles/deep-dive/example/src/core/look2d.js +33 -0
  256. package/plugins/faceless-shorts/styles/deep-dive/example/src/core/sdf.js +79 -0
  257. package/plugins/faceless-shorts/styles/deep-dive/example/src/core/sets.js +107 -0
  258. package/plugins/faceless-shorts/styles/deep-dive/example/src/core/timing.js +23 -0
  259. package/plugins/faceless-shorts/styles/deep-dive/example/src/main.js +56 -0
  260. package/plugins/faceless-shorts/styles/deep-dive/example/src/sheet.js +79 -0
  261. package/plugins/faceless-shorts/styles/deep-dive/example/src/shots.js +136 -0
  262. package/plugins/faceless-shorts/styles/deep-dive/example/tools/capture.mjs +122 -0
  263. package/plugins/faceless-shorts/styles/deep-dive/example/tools/mix.py +172 -0
  264. package/plugins/faceless-shorts/styles/deep-dive/example/vendor/LICENSE-three.txt +21 -0
  265. package/plugins/faceless-shorts/styles/deep-dive/example/vendor/addons/environments/RoomEnvironment.js +144 -0
  266. package/plugins/faceless-shorts/styles/deep-dive/example/vendor/addons/postprocessing/BokehPass.js +141 -0
  267. package/plugins/faceless-shorts/styles/deep-dive/example/vendor/addons/postprocessing/EffectComposer.js +231 -0
  268. package/plugins/faceless-shorts/styles/deep-dive/example/vendor/addons/postprocessing/MaskPass.js +104 -0
  269. package/plugins/faceless-shorts/styles/deep-dive/example/vendor/addons/postprocessing/OutputPass.js +97 -0
  270. package/plugins/faceless-shorts/styles/deep-dive/example/vendor/addons/postprocessing/Pass.js +95 -0
  271. package/plugins/faceless-shorts/styles/deep-dive/example/vendor/addons/postprocessing/RenderPass.js +99 -0
  272. package/plugins/faceless-shorts/styles/deep-dive/example/vendor/addons/postprocessing/ShaderPass.js +77 -0
  273. package/plugins/faceless-shorts/styles/deep-dive/example/vendor/addons/postprocessing/UnrealBloomPass.js +415 -0
  274. package/plugins/faceless-shorts/styles/deep-dive/example/vendor/addons/shaders/BokehShader.js +145 -0
  275. package/plugins/faceless-shorts/styles/deep-dive/example/vendor/addons/shaders/CopyShader.js +45 -0
  276. package/plugins/faceless-shorts/styles/deep-dive/example/vendor/addons/shaders/LuminosityHighPassShader.js +64 -0
  277. package/plugins/faceless-shorts/styles/deep-dive/example/vendor/addons/shaders/OutputShader.js +85 -0
  278. package/plugins/faceless-shorts/styles/deep-dive/example/vendor/three.module.js +6 -0
  279. package/plugins/faceless-shorts/styles/deep-dive/style-sheet.png +0 -0
  280. package/plugins/faceless-shorts/styles/inside-out/STYLE.md +97 -0
  281. package/plugins/faceless-shorts/styles/inside-out/example/data/cues.json +178 -0
  282. package/plugins/faceless-shorts/styles/inside-out/example/data/lines.json +73 -0
  283. package/plugins/faceless-shorts/styles/inside-out/example/data/words.json +662 -0
  284. package/plugins/faceless-shorts/styles/inside-out/example/fonts/Inter-Black.otf +0 -0
  285. package/plugins/faceless-shorts/styles/inside-out/example/index.html +16 -0
  286. package/plugins/faceless-shorts/styles/inside-out/example/script.json +26 -0
  287. package/plugins/faceless-shorts/styles/inside-out/example/src/core/captions.js +68 -0
  288. package/plugins/faceless-shorts/styles/inside-out/example/src/core/kit.js +345 -0
  289. package/plugins/faceless-shorts/styles/inside-out/example/src/core/lib.js +44 -0
  290. package/plugins/faceless-shorts/styles/inside-out/example/src/core/timing.js +23 -0
  291. package/plugins/faceless-shorts/styles/inside-out/example/src/main.js +62 -0
  292. package/plugins/faceless-shorts/styles/inside-out/example/src/shots.js +195 -0
  293. package/plugins/faceless-shorts/styles/inside-out/example/tools/capture.mjs +122 -0
  294. package/plugins/faceless-shorts/styles/inside-out/example/tools/mix.py +172 -0
  295. package/plugins/faceless-shorts/styles/inside-out/style-sheet.png +0 -0
  296. package/plugins/faceless-shorts/styles/night-file/STYLE.md +36 -0
  297. package/plugins/faceless-shorts/styles/night-file/example/data/cues.json +146 -0
  298. package/plugins/faceless-shorts/styles/night-file/example/data/lines.json +73 -0
  299. package/plugins/faceless-shorts/styles/night-file/example/data/words.json +572 -0
  300. package/plugins/faceless-shorts/styles/night-file/example/data/words.txt +95 -0
  301. package/plugins/faceless-shorts/styles/night-file/example/fonts/FreeMonoBold.ttf +0 -0
  302. package/plugins/faceless-shorts/styles/night-file/example/fonts/Inter-Black.otf +0 -0
  303. package/plugins/faceless-shorts/styles/night-file/example/index.html +16 -0
  304. package/plugins/faceless-shorts/styles/night-file/example/script.json +26 -0
  305. package/plugins/faceless-shorts/styles/night-file/example/sheet.html +11 -0
  306. package/plugins/faceless-shorts/styles/night-file/example/src/core/board.js +62 -0
  307. package/plugins/faceless-shorts/styles/night-file/example/src/core/captions.js +49 -0
  308. package/plugins/faceless-shorts/styles/night-file/example/src/core/engine.js +65 -0
  309. package/plugins/faceless-shorts/styles/night-file/example/src/core/human.js +128 -0
  310. package/plugins/faceless-shorts/styles/night-file/example/src/core/kit.js +151 -0
  311. package/plugins/faceless-shorts/styles/night-file/example/src/core/lib.js +44 -0
  312. package/plugins/faceless-shorts/styles/night-file/example/src/core/sdf.js +79 -0
  313. package/plugins/faceless-shorts/styles/night-file/example/src/core/sets3d.js +106 -0
  314. package/plugins/faceless-shorts/styles/night-file/example/src/core/timing.js +23 -0
  315. package/plugins/faceless-shorts/styles/night-file/example/src/main.js +56 -0
  316. package/plugins/faceless-shorts/styles/night-file/example/src/sheet.js +86 -0
  317. package/plugins/faceless-shorts/styles/night-file/example/src/shots.js +130 -0
  318. package/plugins/faceless-shorts/styles/night-file/example/tools/capture.mjs +122 -0
  319. package/plugins/faceless-shorts/styles/night-file/example/tools/mix.py +172 -0
  320. package/plugins/faceless-shorts/styles/night-file/example/vendor/LICENSE-three.txt +21 -0
  321. package/plugins/faceless-shorts/styles/night-file/example/vendor/addons/environments/RoomEnvironment.js +144 -0
  322. package/plugins/faceless-shorts/styles/night-file/example/vendor/addons/postprocessing/BokehPass.js +141 -0
  323. package/plugins/faceless-shorts/styles/night-file/example/vendor/addons/postprocessing/EffectComposer.js +231 -0
  324. package/plugins/faceless-shorts/styles/night-file/example/vendor/addons/postprocessing/MaskPass.js +104 -0
  325. package/plugins/faceless-shorts/styles/night-file/example/vendor/addons/postprocessing/OutputPass.js +97 -0
  326. package/plugins/faceless-shorts/styles/night-file/example/vendor/addons/postprocessing/Pass.js +95 -0
  327. package/plugins/faceless-shorts/styles/night-file/example/vendor/addons/postprocessing/RenderPass.js +99 -0
  328. package/plugins/faceless-shorts/styles/night-file/example/vendor/addons/postprocessing/ShaderPass.js +77 -0
  329. package/plugins/faceless-shorts/styles/night-file/example/vendor/addons/postprocessing/UnrealBloomPass.js +415 -0
  330. package/plugins/faceless-shorts/styles/night-file/example/vendor/addons/shaders/BokehShader.js +145 -0
  331. package/plugins/faceless-shorts/styles/night-file/example/vendor/addons/shaders/CopyShader.js +45 -0
  332. package/plugins/faceless-shorts/styles/night-file/example/vendor/addons/shaders/LuminosityHighPassShader.js +64 -0
  333. package/plugins/faceless-shorts/styles/night-file/example/vendor/addons/shaders/OutputShader.js +85 -0
  334. package/plugins/faceless-shorts/styles/night-file/example/vendor/three.module.js +6 -0
  335. package/plugins/faceless-shorts/styles/night-file/style-sheet.png +0 -0
  336. package/plugins/faceless-shorts/styles/paper-atlas/STYLE.md +30 -0
  337. package/plugins/faceless-shorts/styles/paper-atlas/example/data/cues.json +167 -0
  338. package/plugins/faceless-shorts/styles/paper-atlas/example/data/lines.json +67 -0
  339. package/plugins/faceless-shorts/styles/paper-atlas/example/data/words.json +614 -0
  340. package/plugins/faceless-shorts/styles/paper-atlas/example/data/words.txt +102 -0
  341. package/plugins/faceless-shorts/styles/paper-atlas/example/fonts/Caladea-Bold.ttf +0 -0
  342. package/plugins/faceless-shorts/styles/paper-atlas/example/fonts/Inter-Black.otf +0 -0
  343. package/plugins/faceless-shorts/styles/paper-atlas/example/index.html +13 -0
  344. package/plugins/faceless-shorts/styles/paper-atlas/example/script.json +26 -0
  345. package/plugins/faceless-shorts/styles/paper-atlas/example/sheet.html +10 -0
  346. package/plugins/faceless-shorts/styles/paper-atlas/example/src/core/board.js +62 -0
  347. package/plugins/faceless-shorts/styles/paper-atlas/example/src/core/captions.js +47 -0
  348. package/plugins/faceless-shorts/styles/paper-atlas/example/src/core/kit.js +152 -0
  349. package/plugins/faceless-shorts/styles/paper-atlas/example/src/core/lib.js +44 -0
  350. package/plugins/faceless-shorts/styles/paper-atlas/example/src/core/timing.js +23 -0
  351. package/plugins/faceless-shorts/styles/paper-atlas/example/src/main.js +62 -0
  352. package/plugins/faceless-shorts/styles/paper-atlas/example/src/sheet.js +61 -0
  353. package/plugins/faceless-shorts/styles/paper-atlas/example/src/shots.js +139 -0
  354. package/plugins/faceless-shorts/styles/paper-atlas/example/tools/capture.mjs +122 -0
  355. package/plugins/faceless-shorts/styles/paper-atlas/example/tools/mix.py +172 -0
  356. package/plugins/faceless-shorts/styles/paper-atlas/style-sheet.png +0 -0
  357. package/plugins/faceless-shorts/styles/stick-story/STYLE.md +32 -0
  358. package/plugins/faceless-shorts/styles/stick-story/example/data/cues.json +182 -0
  359. package/plugins/faceless-shorts/styles/stick-story/example/data/lines.json +79 -0
  360. package/plugins/faceless-shorts/styles/stick-story/example/data/words.json +662 -0
  361. package/plugins/faceless-shorts/styles/stick-story/example/data/words.txt +110 -0
  362. package/plugins/faceless-shorts/styles/stick-story/example/fonts/Inter-Black.otf +0 -0
  363. package/plugins/faceless-shorts/styles/stick-story/example/fonts/Inter-ExtraBold.otf +0 -0
  364. package/plugins/faceless-shorts/styles/stick-story/example/index.html +12 -0
  365. package/plugins/faceless-shorts/styles/stick-story/example/script.json +27 -0
  366. package/plugins/faceless-shorts/styles/stick-story/example/sheet.html +9 -0
  367. package/plugins/faceless-shorts/styles/stick-story/example/src/core/board.js +62 -0
  368. package/plugins/faceless-shorts/styles/stick-story/example/src/core/captions.js +47 -0
  369. package/plugins/faceless-shorts/styles/stick-story/example/src/core/kit.js +166 -0
  370. package/plugins/faceless-shorts/styles/stick-story/example/src/core/lib.js +44 -0
  371. package/plugins/faceless-shorts/styles/stick-story/example/src/core/timing.js +23 -0
  372. package/plugins/faceless-shorts/styles/stick-story/example/src/main.js +62 -0
  373. package/plugins/faceless-shorts/styles/stick-story/example/src/sheet.js +64 -0
  374. package/plugins/faceless-shorts/styles/stick-story/example/src/shots.js +148 -0
  375. package/plugins/faceless-shorts/styles/stick-story/example/tools/capture.mjs +122 -0
  376. package/plugins/faceless-shorts/styles/stick-story/example/tools/mix.py +172 -0
  377. package/plugins/faceless-shorts/styles/stick-story/style-sheet.png +0 -0
  378. package/plugins/faceless-shorts/styles/tall-tale/STYLE.md +51 -0
  379. package/plugins/faceless-shorts/styles/tall-tale/example/data/cues.json +271 -0
  380. package/plugins/faceless-shorts/styles/tall-tale/example/data/lines.json +127 -0
  381. package/plugins/faceless-shorts/styles/tall-tale/example/data/words.json +908 -0
  382. package/plugins/faceless-shorts/styles/tall-tale/example/data/words.txt +151 -0
  383. package/plugins/faceless-shorts/styles/tall-tale/example/fonts/Caladea-Bold.ttf +0 -0
  384. package/plugins/faceless-shorts/styles/tall-tale/example/fonts/Inter-Black.otf +0 -0
  385. package/plugins/faceless-shorts/styles/tall-tale/example/fonts/Inter-ExtraBold.otf +0 -0
  386. package/plugins/faceless-shorts/styles/tall-tale/example/index.html +17 -0
  387. package/plugins/faceless-shorts/styles/tall-tale/example/script.json +37 -0
  388. package/plugins/faceless-shorts/styles/tall-tale/example/sheet.html +11 -0
  389. package/plugins/faceless-shorts/styles/tall-tale/example/src/core/board.js +62 -0
  390. package/plugins/faceless-shorts/styles/tall-tale/example/src/core/captions.js +56 -0
  391. package/plugins/faceless-shorts/styles/tall-tale/example/src/core/engine.js +65 -0
  392. package/plugins/faceless-shorts/styles/tall-tale/example/src/core/lib.js +44 -0
  393. package/plugins/faceless-shorts/styles/tall-tale/example/src/core/props.js +166 -0
  394. package/plugins/faceless-shorts/styles/tall-tale/example/src/core/timing.js +23 -0
  395. package/plugins/faceless-shorts/styles/tall-tale/example/src/core/toon.js +352 -0
  396. package/plugins/faceless-shorts/styles/tall-tale/example/src/core/world.js +340 -0
  397. package/plugins/faceless-shorts/styles/tall-tale/example/src/main.js +56 -0
  398. package/plugins/faceless-shorts/styles/tall-tale/example/src/sheet.js +99 -0
  399. package/plugins/faceless-shorts/styles/tall-tale/example/src/shots.js +377 -0
  400. package/plugins/faceless-shorts/styles/tall-tale/example/tools/capture.mjs +122 -0
  401. package/plugins/faceless-shorts/styles/tall-tale/example/tools/mix.py +204 -0
  402. package/plugins/faceless-shorts/styles/tall-tale/example/vendor/LICENSE-three.txt +21 -0
  403. package/plugins/faceless-shorts/styles/tall-tale/example/vendor/addons/environments/RoomEnvironment.js +144 -0
  404. package/plugins/faceless-shorts/styles/tall-tale/example/vendor/addons/postprocessing/BokehPass.js +141 -0
  405. package/plugins/faceless-shorts/styles/tall-tale/example/vendor/addons/postprocessing/EffectComposer.js +231 -0
  406. package/plugins/faceless-shorts/styles/tall-tale/example/vendor/addons/postprocessing/MaskPass.js +104 -0
  407. package/plugins/faceless-shorts/styles/tall-tale/example/vendor/addons/postprocessing/OutputPass.js +97 -0
  408. package/plugins/faceless-shorts/styles/tall-tale/example/vendor/addons/postprocessing/Pass.js +95 -0
  409. package/plugins/faceless-shorts/styles/tall-tale/example/vendor/addons/postprocessing/RenderPass.js +99 -0
  410. package/plugins/faceless-shorts/styles/tall-tale/example/vendor/addons/postprocessing/ShaderPass.js +77 -0
  411. package/plugins/faceless-shorts/styles/tall-tale/example/vendor/addons/postprocessing/UnrealBloomPass.js +415 -0
  412. package/plugins/faceless-shorts/styles/tall-tale/example/vendor/addons/shaders/BokehShader.js +145 -0
  413. package/plugins/faceless-shorts/styles/tall-tale/example/vendor/addons/shaders/CopyShader.js +45 -0
  414. package/plugins/faceless-shorts/styles/tall-tale/example/vendor/addons/shaders/LuminosityHighPassShader.js +64 -0
  415. package/plugins/faceless-shorts/styles/tall-tale/example/vendor/addons/shaders/OutputShader.js +85 -0
  416. package/plugins/faceless-shorts/styles/tall-tale/example/vendor/three.module.js +6 -0
  417. package/plugins/faceless-shorts/styles/tall-tale/style-sheet.png +0 -0
  418. package/plugins/motion-styles/LIBRARY.md +896 -0
  419. package/plugins/motion-styles/README.md +29 -0
  420. package/plugins/motion-styles/SKILL.md +70 -0
  421. package/plugins/motion-styles/catalog.json +2253 -0
  422. package/plugins/motion-styles/prompts/bio-glow.md +149 -0
  423. package/plugins/motion-styles/prompts/blueprint.md +145 -0
  424. package/plugins/motion-styles/prompts/breaking-desk.md +147 -0
  425. package/plugins/motion-styles/prompts/callout-kit.md +147 -0
  426. package/plugins/motion-styles/prompts/chalk-talk.md +153 -0
  427. package/plugins/motion-styles/prompts/chat-story.md +143 -0
  428. package/plugins/motion-styles/prompts/clay-diorama.md +149 -0
  429. package/plugins/motion-styles/prompts/clean-tech.md +147 -0
  430. package/plugins/motion-styles/prompts/comic-panels.md +145 -0
  431. package/plugins/motion-styles/prompts/cosmic-scale.md +147 -0
  432. package/plugins/motion-styles/prompts/creator-motion.md +149 -0
  433. package/plugins/motion-styles/prompts/data-city.md +149 -0
  434. package/plugins/motion-styles/prompts/data-story.md +147 -0
  435. package/plugins/motion-styles/prompts/deep-layers.md +147 -0
  436. package/plugins/motion-styles/prompts/doc-cinema.md +145 -0
  437. package/plugins/motion-styles/prompts/evidence-board.md +145 -0
  438. package/plugins/motion-styles/prompts/exploded-view.md +149 -0
  439. package/plugins/motion-styles/prompts/glass-icons.md +147 -0
  440. package/plugins/motion-styles/prompts/glitch-pack.md +145 -0
  441. package/plugins/motion-styles/prompts/globe-arcs.md +147 -0
  442. package/plugins/motion-styles/prompts/headline-backdrop.md +145 -0
  443. package/plugins/motion-styles/prompts/iso-cutaway.md +147 -0
  444. package/plugins/motion-styles/prompts/isotype.md +145 -0
  445. package/plugins/motion-styles/prompts/karaoke-subs.md +145 -0
  446. package/plugins/motion-styles/prompts/low-poly-atlas.md +149 -0
  447. package/plugins/motion-styles/prompts/lower-thirds.md +147 -0
  448. package/plugins/motion-styles/prompts/marker-board.md +145 -0
  449. package/plugins/motion-styles/prompts/market-tape.md +145 -0
  450. package/plugins/motion-styles/prompts/math-canvas.md +145 -0
  451. package/plugins/motion-styles/prompts/myth-or-fact.md +145 -0
  452. package/plugins/motion-styles/prompts/neon-line.md +145 -0
  453. package/plugins/motion-styles/prompts/paper-craft.md +145 -0
  454. package/plugins/motion-styles/prompts/parchment-map.md +147 -0
  455. package/plugins/motion-styles/prompts/physics-toybox.md +147 -0
  456. package/plugins/motion-styles/prompts/pixel-quest.md +145 -0
  457. package/plugins/motion-styles/prompts/podcast-clip.md +147 -0
  458. package/plugins/motion-styles/prompts/pop-info.md +145 -0
  459. package/plugins/motion-styles/prompts/product-turntable.md +149 -0
  460. package/plugins/motion-styles/prompts/punch-captions.md +145 -0
  461. package/plugins/motion-styles/prompts/quiz-countdown.md +145 -0
  462. package/plugins/motion-styles/prompts/quote-cinema.md +145 -0
  463. package/plugins/motion-styles/prompts/recipe-steps.md +145 -0
  464. package/plugins/motion-styles/prompts/rubber-hose-reel.md +145 -0
  465. package/plugins/motion-styles/prompts/shadow-puppets.md +145 -0
  466. package/plugins/motion-styles/prompts/size-lineup.md +149 -0
  467. package/plugins/motion-styles/prompts/software-walkthrough.md +147 -0
  468. package/plugins/motion-styles/prompts/stack-split.md +145 -0
  469. package/plugins/motion-styles/prompts/sticker-pop.md +145 -0
  470. package/plugins/motion-styles/prompts/storybook.md +145 -0
  471. package/plugins/motion-styles/prompts/swiss-grid.md +145 -0
  472. package/plugins/motion-styles/prompts/synth-grid.md +147 -0
  473. package/plugins/motion-styles/prompts/tactics-board.md +145 -0
  474. package/plugins/motion-styles/prompts/terminal.md +145 -0
  475. package/plugins/motion-styles/prompts/tier-list.md +143 -0
  476. package/plugins/motion-styles/prompts/timeline-rail.md +145 -0
  477. package/plugins/motion-styles/prompts/top-5-countdown.md +145 -0
  478. package/plugins/motion-styles/prompts/versus-split.md +145 -0
  479. package/plugins/motion-styles/prompts/vhs-camcorder.md +145 -0
  480. package/plugins/motion-styles/prompts/visual-novel.md +145 -0
  481. package/plugins/motion-styles/prompts/warm-canvas.md +145 -0
  482. package/plugins/motion-styles/prompts/woodcut-tale.md +145 -0
  483. package/plugins/motion-styles/prompts/zine-collage.md +145 -0
  484. package/plugins/motion-styles/sources/bio-glow.html +639 -0
  485. package/plugins/motion-styles/sources/blueprint.html +617 -0
  486. package/plugins/motion-styles/sources/breaking-desk.html +585 -0
  487. package/plugins/motion-styles/sources/callout-kit.html +586 -0
  488. package/plugins/motion-styles/sources/chalk-talk.html +597 -0
  489. package/plugins/motion-styles/sources/chat-story.html +597 -0
  490. package/plugins/motion-styles/sources/clay-diorama.html +681 -0
  491. package/plugins/motion-styles/sources/clean-tech.html +554 -0
  492. package/plugins/motion-styles/sources/comic-panels.html +608 -0
  493. package/plugins/motion-styles/sources/cosmic-scale.html +628 -0
  494. package/plugins/motion-styles/sources/creator-motion.html +805 -0
  495. package/plugins/motion-styles/sources/data-city.html +613 -0
  496. package/plugins/motion-styles/sources/data-story.html +539 -0
  497. package/plugins/motion-styles/sources/deep-layers.html +624 -0
  498. package/plugins/motion-styles/sources/doc-cinema.html +590 -0
  499. package/plugins/motion-styles/sources/evidence-board.html +610 -0
  500. package/plugins/motion-styles/sources/exploded-view.html +618 -0
  501. package/plugins/motion-styles/sources/glass-icons.html +612 -0
  502. package/plugins/motion-styles/sources/glitch-pack.html +583 -0
  503. package/plugins/motion-styles/sources/globe-arcs.html +621 -0
  504. package/plugins/motion-styles/sources/headline-backdrop.html +584 -0
  505. package/plugins/motion-styles/sources/iso-cutaway.html +621 -0
  506. package/plugins/motion-styles/sources/isotype.html +588 -0
  507. package/plugins/motion-styles/sources/karaoke-subs.html +577 -0
  508. package/plugins/motion-styles/sources/low-poly-atlas.html +621 -0
  509. package/plugins/motion-styles/sources/lower-thirds.html +582 -0
  510. package/plugins/motion-styles/sources/marker-board.html +598 -0
  511. package/plugins/motion-styles/sources/market-tape.html +598 -0
  512. package/plugins/motion-styles/sources/math-canvas.html +592 -0
  513. package/plugins/motion-styles/sources/myth-or-fact.html +587 -0
  514. package/plugins/motion-styles/sources/neon-line.html +597 -0
  515. package/plugins/motion-styles/sources/paper-craft.html +612 -0
  516. package/plugins/motion-styles/sources/parchment-map.html +624 -0
  517. package/plugins/motion-styles/sources/physics-toybox.html +617 -0
  518. package/plugins/motion-styles/sources/pixel-quest.html +609 -0
  519. package/plugins/motion-styles/sources/podcast-clip.html +585 -0
  520. package/plugins/motion-styles/sources/pop-info.html +677 -0
  521. package/plugins/motion-styles/sources/product-turntable.html +611 -0
  522. package/plugins/motion-styles/sources/punch-captions.html +583 -0
  523. package/plugins/motion-styles/sources/quiz-countdown.html +593 -0
  524. package/plugins/motion-styles/sources/quote-cinema.html +581 -0
  525. package/plugins/motion-styles/sources/recipe-steps.html +599 -0
  526. package/plugins/motion-styles/sources/rubber-hose-reel.html +627 -0
  527. package/plugins/motion-styles/sources/shadow-puppets.html +609 -0
  528. package/plugins/motion-styles/sources/size-lineup.html +620 -0
  529. package/plugins/motion-styles/sources/software-walkthrough.html +651 -0
  530. package/plugins/motion-styles/sources/stack-split.html +588 -0
  531. package/plugins/motion-styles/sources/sticker-pop.html +587 -0
  532. package/plugins/motion-styles/sources/storybook.html +600 -0
  533. package/plugins/motion-styles/sources/swiss-grid.html +590 -0
  534. package/plugins/motion-styles/sources/synth-grid.html +614 -0
  535. package/plugins/motion-styles/sources/tactics-board.html +608 -0
  536. package/plugins/motion-styles/sources/terminal.html +593 -0
  537. package/plugins/motion-styles/sources/tier-list.html +600 -0
  538. package/plugins/motion-styles/sources/timeline-rail.html +598 -0
  539. package/plugins/motion-styles/sources/top-5-countdown.html +589 -0
  540. package/plugins/motion-styles/sources/versus-split.html +592 -0
  541. package/plugins/motion-styles/sources/vhs-camcorder.html +587 -0
  542. package/plugins/motion-styles/sources/visual-novel.html +623 -0
  543. package/plugins/motion-styles/sources/warm-canvas.html +742 -0
  544. package/plugins/motion-styles/sources/woodcut-tale.html +598 -0
  545. package/plugins/motion-styles/sources/zine-collage.html +594 -0
  546. package/plugins/video-pipeline/.claude-plugin/plugin.json +2 -2
  547. package/plugins/video-pipeline/skills/.upstream-skills.json +156 -143
  548. package/plugins/video-pipeline/skills/video-pipeline/references/mcp-tools.md +3 -3
  549. package/scripts/deep-validate.js +3 -2
  550. package/src/audio-mixer/mixer.js +69 -0
  551. package/src/cli/make.js +19 -0
  552. package/src/harness/lib/browser.mjs +22 -1
  553. package/src/harness/lib/capture.mjs +33 -11
  554. package/src/harness/lib/jobs.mjs +16 -1
  555. package/src/mcp-server/server.js +726 -10
  556. package/src/pipeline/providers.js +77 -17
  557. package/src/skills/sync-upstream.js +15 -3
  558. package/src/utils/media-downloader.js +7 -0
  559. package/src/utils/tool-installer.js +212 -0
  560. package/src/utils/transcribe.js +9 -1
  561. package/src/video-renderer/renderer.js +68 -38
  562. package/src/video-renderer/scene-animator.js +50 -15
  563. package/src/workflows/assets.js +49 -5
  564. package/src/workflows/render.js +2 -0
  565. package/src/workflows/script.js +14 -3
package/plugins/motion-styles/sources/warm-canvas.html ADDED
@@ -0,0 +1,742 @@
1
+ <!doctype html><html><head><meta charset=utf8><meta name=viewport content="width=device-width,initial-scale=1,viewport-fit=cover"><style>:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}html{scroll-padding-top:env(safe-area-inset-top,0px)}body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}img{max-width:100%}[hidden]:not([hidden=until-found i]){display:none!important}</style></head><body>
2
+ <meta charset="utf-8">
3
+ <title>Warm Canvas</title>
4
+ <meta name="claude:viewport-fit-sides" content="cover">
5
+ <link rel="preconnect" href="https://fonts.googleapis.com">
6
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
7
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:wght@400..700&family=Inter:wght@400;500;600;700&family=Anton&family=Instrument+Serif:ital@0;1&display=block">
8
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@24,400..700,100,0&display=block">
9
+ <style>
10
+ /* Layout: an editing-suite player. One dark look by choice: the stage, then the transport bar under it. */
11
+ :root {
12
+ color-scheme: dark;
13
+ --bg: #0b0b0d;
14
+ --panel: #141417;
15
+ --ink: #f2f0ea;
16
+ --dim: #8d8c93;
17
+ --line: #26262c;
18
+ --accent: #ffd60a;
19
+ --display: "Anton", "Bebas Neue", Impact, "Arial Narrow", sans-serif;
20
+ --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
21
+ --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
22
+ }
23
+ html, body { height: 100%; }
24
+ body {
25
+ background: var(--bg); color: var(--ink); font-family: var(--body);
26
+ padding-left: max(16px, env(safe-area-inset-left, 0px));
27
+ padding-right: max(16px, env(safe-area-inset-right, 0px));
28
+ padding-block: 20px 28px;
29
+ }
30
+ .wrap { max-width: 1180px; margin: 0 auto; display: grid; gap: 14px; }
31
+ .top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 18px; }
32
+ .name { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 4vw, 40px); letter-spacing: 0.02em; text-transform: uppercase; margin: 0; line-height: 1; }
33
+ .name em { font-family: var(--serif); font-style: italic; text-transform: none; color: var(--accent); letter-spacing: 0; font-size: 1.12em; }
34
+ .meta { color: var(--dim); font-size: 14px; margin: 0; }
35
+ .stage { position: relative; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); }
36
+ .stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
37
+ .bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
38
+ .bar button, .bar label.btn {
39
+ font: 600 14px var(--body); color: var(--ink); background: transparent; border: 1px solid var(--line);
40
+ border-radius: 7px; padding: 8px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
41
+ }
42
+ .bar button:hover, .bar label.btn:hover { border-color: var(--dim); }
43
+ .bar button:focus-visible, .bar label.btn:focus-within, #scrub:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
44
+ .bar button[aria-pressed="true"] { background: var(--accent); color: #0b0b0d; border-color: var(--accent); }
45
+ #play { min-width: 82px; justify-content: center; background: var(--ink); color: #0b0b0d; border-color: var(--ink); }
46
+ #scrub { flex: 1 1 220px; min-width: 0; accent-color: var(--accent); }
47
+ #time { font: 600 14px var(--body); font-variant-numeric: tabular-nums; color: var(--dim); min-width: 92px; text-align: right; }
48
+ #vofile { position: absolute; width: 1px; height: 1px; opacity: 0; }
49
+ .note { color: var(--dim); font-size: 13px; margin: 0; max-width: 70ch; }
50
+ </style>
51
+
52
+ <div class="wrap">
53
+ <div class="top">
54
+ <h1 class="name">Warm <em>Canvas</em></h1>
55
+ <p class="meta">Reference edit · 32.6 s · graphics drawn in code over your A-roll</p>
56
+ </div>
57
+ <div class="stage"><canvas id="stage" width="1280" height="720" aria-label="Warm Canvas reference edit"></canvas></div>
58
+ <div class="bar">
59
+ <button id="play" type="button">Play</button>
60
+ <input id="scrub" type="range" min="0" max="32.6" step="0.01" value="0" aria-label="Scrub timeline">
61
+ <span id="time">0.00 / 32.60</span>
62
+ <button id="sound" type="button" aria-pressed="true">Sound on</button>
63
+ <button id="loop" type="button" aria-pressed="true">Loop</button>
64
+ <label class="btn" for="vofile">Load voiceover<input id="vofile" type="file" accept="audio/*"></label>
65
+ <label class="btn" for="arfile">Load A-roll<input id="arfile" type="file" accept="video/*" style="position:absolute;width:1px;height:1px;opacity:0"></label>
66
+ <button id="overlay" type="button" aria-pressed="false">Overlay</button>
67
+ </div>
68
+ <p class="note" id="vonote">The talking head is a stand-in. Load your A-roll clip to see the edit on your own footage (it plays from 0:00 in sync). Overlay hides the footage, so the graphics can be exported with a transparent background.</p>
69
+ </div>
70
+
71
+ <script>
72
+ // =====================================================================================================
73
+ // CREATOR MOTION GRAPHICS · core helpers (CM), sound kit (SFX), style, player
74
+ // Every frame is a pure function of t. All randomness is seeded. Times are seconds.
75
+ // =====================================================================================================
76
+ const CM = (() => {
77
+ const clamp = (v, a = 0, b = 1) => (v < a ? a : v > b ? b : v);
78
+ const lerp = (a, b, u) => a + (b - a) * u;
79
+ const span = (t, a, b) => clamp((t - a) / (b - a));
80
+ const rotl = (x, k) => (x << k) | (x >>> (32 - k));
81
+ const hash = (s) => { s = String(s); let h = 0x9e3779b1; for (let i = 0; i < s.length; i++) { h = Math.imul(h ^ s.charCodeAt(i), 0x85ebca6b); h ^= h >>> 13; } return h >>> 0; };
82
+ // xoshiro128** style generator, seeded from a number or string
83
+ const rng = (seed) => {
84
+ const s = typeof seed === 'number' ? seed >>> 0 : hash(seed);
85
+ let a = (s ^ 0xa5a5a5a5) >>> 0, b = (Math.imul(s, 0x27d4eb2d) >>> 0) || 1, c = (0x165667b1 ^ s) >>> 0, d = (rotl(s, 7) >>> 0) || 7;
86
+ const r = () => { const res = Math.imul(rotl(Math.imul(b, 5), 7), 9) >>> 0; const t = b << 9; c ^= a; d ^= b; b ^= c; a ^= d; c ^= t; d = rotl(d, 11); return res / 4294967296; };
87
+ for (let i = 0; i < 8; i++) r();
88
+ r.in = (lo, hi) => lo + r() * (hi - lo);
89
+ r.pick = (arr) => arr[(r() * arr.length) | 0];
90
+ return r;
91
+ };
92
+ // smooth 1D value noise, roughly -1..1
93
+ const noise1 = (seed) => { const r = rng(seed), v = Float32Array.from({ length: 256 }, () => r() * 2 - 1); return (x) => { const i = Math.floor(x), f = x - i, u = f * f * (3 - 2 * f); return lerp(v[i & 255], v[(i + 1) & 255], u); }; };
94
+ const ez = {
95
+ out3: (u) => 1 - Math.pow(1 - u, 3),
96
+ in3: (u) => u * u * u,
97
+ inout3: (u) => (u < 0.5 ? 4 * u * u * u : 1 - Math.pow(-2 * u + 2, 3) / 2),
98
+ outExpo: (u) => (u >= 1 ? 1 : 1 - Math.pow(2, -10 * u)),
99
+ back: (u, s = 1.7) => (u <= 0 ? 0 : u >= 1 ? 1 : 1 + (s + 1) * Math.pow(u - 1, 3) + s * Math.pow(u - 1, 2)),
100
+ spring: (u) => (u <= 0 ? 0 : u >= 1 ? 1 : 1 - Math.exp(-6 * u) * Math.cos(13 * u)),
101
+ };
102
+ const layer = (w, h) => { const c = document.createElement('canvas'); c.width = w; c.height = h; return c; };
103
+ return { clamp, lerp, span, hash, rng, noise1, ez, layer };
104
+ })();
105
+
106
+ // =====================================================================================================
107
+ // SFX: synthesized creator-edit sound kit. Plain Web Audio, no files.
108
+ // voiceover mode keeps the music low under narration and plays sounds marked `soft` at 55%.
109
+ // =====================================================================================================
110
+ const SFX = (() => {
111
+ const SEMI = { C: -9, D: -7, E: -5, F: -4, G: -2, A: 0, B: 2 };
112
+ const hz = (n) => { if (typeof n === 'number') return n; const m = /^([A-G])(#|b)?(-?\d)$/.exec(n); return 440 * Math.pow(2, (SEMI[m[1]] + (m[2] === '#' ? 1 : m[2] === 'b' ? -1 : 0) + (+m[3] - 4) * 12) / 12); };
113
+
114
+ function kit(ac, o = {}) {
115
+ const VO = !!o.voiceover, SR = ac.sampleRate, T0 = o.from || 0, base = ac.currentTime + (o.lead || 0);
116
+ // snap every start a little past the sample grid (avoids level spikes on some browsers)
117
+ const at = (t) => (Math.round((base + (t - T0)) * SR) + 0.3) / SR;
118
+ const skip = (t, dur) => at(t) + dur < ac.currentTime || (t < T0 - 0.005 && dur < 1.2);
119
+
120
+ const comp = ac.createDynamicsCompressor();
121
+ comp.threshold.value = -14; comp.knee.value = 6; comp.ratio.value = 4; comp.attack.value = 0.003; comp.release.value = 0.15;
122
+ const master = ac.createGain(); master.gain.value = o.master == null ? 0.85 : o.master;
123
+ comp.connect(master); master.connect(o.dest || ac.destination);
124
+ const mk = (g) => { const n = ac.createGain(); n.gain.value = g; n.connect(comp); return n; };
125
+ const bus = { fx: mk(VO ? 0.78 : 0.95), music: mk(VO ? 0.3 : 0.62), amb: mk(0.45) };
126
+ const duckIn = ac.createGain(); duckIn.connect(bus.music);
127
+ const DUCKS = [];
128
+
129
+ // generated plate-style reverb
130
+ const verb = ac.createConvolver();
131
+ { const n = Math.floor(1.5 * SR), ir = ac.createBuffer(2, n, SR);
132
+ for (let ch = 0; ch < 2; ch++) { const r = CM.rng('plate' + ch), d = ir.getChannelData(ch); let lp = 0; for (let i = 0; i < n; i++) { const u = i / n; lp += (0.7 - 0.5 * u) * ((r() * 2 - 1) - lp); d[i] = lp * Math.pow(1 - u, 2.6) * 0.9; } }
133
+ verb.buffer = ir; }
134
+ const verbIn = ac.createGain(); verbIn.gain.value = 0.8; verbIn.connect(verb); verb.connect(comp);
135
+
136
+ // seeded noise buffers
137
+ const NB = {};
138
+ { const n = Math.floor(2 * SR);
139
+ for (const kind of ['white', 'pink', 'brown']) {
140
+ const b = ac.createBuffer(1, n, SR), d = b.getChannelData(0), r = CM.rng('nz' + kind); let b0 = 0, b1 = 0, b2 = 0, br = 0;
141
+ for (let i = 0; i < n; i++) { const w = r() * 2 - 1;
142
+ if (kind === 'white') d[i] = w;
143
+ else if (kind === 'pink') { b0 = 0.99765 * b0 + w * 0.099; b1 = 0.963 * b1 + w * 0.2965; b2 = 0.57 * b2 + w * 1.0527; d[i] = (b0 + b1 + b2 + w * 0.1848) * 0.18; }
144
+ else { br = (br + 0.02 * w) / 1.02; d[i] = br * 3.4; } }
145
+ NB[kind] = b; } }
146
+
147
+ const ramp = (param, v, t) => { if (!Array.isArray(v)) { param.setValueAtTime(v, t); return; } param.setValueAtTime(v[0][1], t + v[0][0]); for (let i = 1; i < v.length; i++) param.exponentialRampToValueAtTime(Math.max(1e-3, v[i][1]), t + v[i][0]); };
148
+ const env = (g, t, peak, dur, a = 0.004, hold = 0) => {
149
+ a = Math.min(a, dur * 0.9); hold = Math.min(hold, dur - a);
150
+ g.gain.setValueAtTime(0, t); g.gain.linearRampToValueAtTime(peak, t + a);
151
+ if (hold > 0) g.gain.setValueAtTime(peak, t + a + hold);
152
+ g.gain.exponentialRampToValueAtTime(1e-4, t + dur); g.gain.setValueAtTime(0, t + dur + 0.002);
153
+ };
154
+ const level = (p, d) => (p.gain == null ? d : p.gain) * (VO && p.soft ? 0.55 : 1);
155
+ const route = (node, p, t) => {
156
+ const pan = ac.createStereoPanner();
157
+ if (Array.isArray(p.pan)) { pan.pan.setValueAtTime(p.pan[0], t); pan.pan.linearRampToValueAtTime(p.pan[1], t + (p.dur || 0.2)); } else pan.pan.value = CM.clamp(p.pan || 0, -1, 1);
158
+ node.connect(pan); pan.connect(p.bus === 'music' ? duckIn : bus[p.bus || 'fx']);
159
+ if (p.verb) { const s = ac.createGain(); s.gain.value = p.verb; pan.connect(s); s.connect(verbIn); }
160
+ };
161
+ const filt = (p, t) => { if (!p.filter) return null; const f = ac.createBiquadFilter(); f.type = p.filter; f.Q.value = p.q == null ? 0.9 : p.q; ramp(f.frequency, p.ff == null ? 1200 : p.ff, t); return f; };
162
+
163
+ // primitive: oscillator voice. f may be a value or [[dt, hz], ...]
164
+ function voice(time, p) {
165
+ const dur = p.dur || 0.2; if (skip(time, dur)) return; const t = at(time);
166
+ const osc = ac.createOscillator(); osc.type = p.type || 'sine';
167
+ ramp(osc.frequency, Array.isArray(p.f) ? p.f.map(([d, v]) => [d, hz(v)]) : hz(p.f || 440), t);
168
+ const g = ac.createGain(); env(g, t, level(p, 0.3), dur, p.a, p.hold);
169
+ const f = filt(p, t); if (f) { osc.connect(f); f.connect(g); } else osc.connect(g);
170
+ route(g, p, t); osc.start(t); osc.stop(t + dur + 0.03);
171
+ }
172
+ // primitive: noise voice
173
+ function hiss(time, p) {
174
+ const dur = p.dur || 0.2; if (skip(time, dur)) return; const t = at(time);
175
+ const src = ac.createBufferSource(); src.buffer = NB[p.color || 'white']; src.loop = true; if (p.rate) src.playbackRate.value = p.rate;
176
+ const g = ac.createGain(); env(g, t, level(p, 0.3), dur, p.a, p.hold);
177
+ const f = filt(p, t); if (f) { src.connect(f); f.connect(g); } else src.connect(g);
178
+ route(g, p, t); src.start(t, CM.rng('off' + time)() * 1.5); src.stop(t + dur + 0.03);
179
+ }
180
+ function duck(t, depth = 0.5, hold = 0.25) { DUCKS.push({ t, depth, hold }); }
181
+
182
+ // ---------------- named sounds (creator-edit palette) ----------------
183
+ const S = {
184
+ // text slam: a tight low thump with a short papery crack
185
+ slam: (t, o) => { voice(t, { f: [[0, 150], [0.12, 52]], dur: 0.2, gain: 0.42 * o.g, pan: o.pan, soft: o.soft }); hiss(t, { dur: 0.07, filter: 'lowpass', ff: 2600, gain: 0.22 * o.g, pan: o.pan, soft: o.soft }); hiss(t, { dur: 0.012, filter: 'highpass', ff: 5000, gain: 0.12 * o.g, pan: o.pan, soft: o.soft }); },
186
+ // big drop: sub boom with a dark tail
187
+ boom: (t, o) => { voice(t, { f: [[0, 90], [0.08, 52], [1.6, 34]], dur: 1.7, gain: 0.7 * o.g, a: 0.006, hold: 0.12 }); hiss(t, { color: 'brown', dur: 0.6, filter: 'lowpass', ff: [[0, 600], [0.5, 90]], gain: 0.35 * o.g, verb: 0.3 }); duck(t, 0.7, 0.35); },
188
+ pop: (t, o) => { const f = o.f || 760; voice(t, { f: [[0, f * 1.7], [0.05, f]], dur: 0.08, gain: 0.22 * o.g, pan: o.pan, soft: o.soft }); hiss(t, { dur: 0.01, filter: 'highpass', ff: 4500, gain: 0.08 * o.g, pan: o.pan, soft: o.soft }); },
189
+ tick: (t, o) => hiss(t, { dur: 0.016, filter: 'bandpass', ff: o.f || 3800, q: 3, gain: 0.32 * o.g, pan: o.pan, soft: o.soft }),
190
+ click: (t, o) => { hiss(t, { dur: 0.012, filter: 'bandpass', ff: 3200, q: 2, gain: 0.35 * o.g, pan: o.pan }); hiss(t + 0.045, { dur: 0.01, filter: 'bandpass', ff: 2400, q: 2, gain: 0.22 * o.g, pan: o.pan }); },
191
+ whoosh: (t, o) => { const d = o.dur || 0.35, dir = o.dir || 1; hiss(t, { color: 'pink', dur: d, filter: 'bandpass', ff: [[0, 260], [d * 0.55, o.top || 3200], [d, 520]], q: 0.75, gain: 0.5 * o.g, a: d * 0.55, pan: [-0.7 * dir, 0.7 * dir], verb: 0.12, soft: o.soft }); hiss(t + d * 0.2, { dur: d * 0.6, filter: 'highpass', ff: [[0, 3000], [d * 0.6, 7000]], gain: 0.08 * o.g, a: d * 0.3, pan: [-0.4 * dir, 0.5 * dir], soft: o.soft }); },
192
+ riser: (t, o) => { const d = o.dur || 0.8; hiss(t, { color: 'pink', dur: d, filter: 'bandpass', ff: [[0, 300], [d, 5200]], q: 1.1, gain: 0.32 * o.g, a: d * 0.96, verb: 0.2, soft: o.soft }); voice(t, { type: 'sawtooth', f: [[0, 110], [d, 440]], dur: d, gain: 0.06 * o.g, a: d * 0.95, filter: 'lowpass', ff: [[0, 400], [d, 2400]], soft: o.soft }); },
193
+ glitch: (t, o) => { const r = CM.rng('gl' + t); for (let i = 0; i < 9; i++) voice(t + i * 0.021, { type: 'square', f: 180 + r() * 2200, dur: 0.018, gain: 0.07 * o.g, a: 0.001, hold: 0.012, pan: r() * 1.4 - 0.7 }); hiss(t, { dur: 0.2, filter: 'bandpass', ff: [[0, 4000], [0.2, 900]], q: 0.7, gain: 0.18 * o.g }); hiss(t + 0.1, { dur: 0.05, color: 'brown', gain: 0.25 * o.g }); },
194
+ ping: (t, o) => { voice(t, { f: 'E6', dur: 0.5, gain: 0.16 * o.g, a: 0.003, verb: 0.3, pan: o.pan }); voice(t + 0.11, { f: 'B6', dur: 0.7, gain: 0.14 * o.g, a: 0.003, verb: 0.35, pan: o.pan }); },
195
+ send: (t, o) => { voice(t, { f: [[0, 520], [0.11, 1500]], dur: 0.13, gain: 0.14 * o.g, pan: o.pan }); hiss(t, { dur: 0.1, filter: 'highpass', ff: [[0, 2000], [0.1, 6000]], gain: 0.07 * o.g, pan: o.pan }); },
196
+ keys: (t, o) => { const r = CM.rng('k' + t), end = t + (o.dur || 0.4); for (let x = t; x < end; x += 0.055 + r() * 0.035) { hiss(x, { dur: 0.014, filter: 'bandpass', ff: 3200 + r() * 900, q: 3, gain: 0.2 * o.g, pan: o.pan, soft: true }); voice(x, { f: 1900 + r() * 300, dur: 0.012, gain: 0.025 * o.g, pan: o.pan, soft: true }); } },
197
+ // highlighter / marker swipe: grainy felt drag
198
+ marker: (t, o) => { const d = o.dur || 0.25, r = CM.rng('m' + t); for (let x = 0; x < d; x += 0.022 + r() * 0.012) hiss(t + x, { dur: 0.03, filter: 'bandpass', ff: 1700 + r() * 900, q: 1.4, gain: 0.16 * o.g * (0.6 + r() * 0.5), pan: o.pan, soft: o.soft }); },
199
+ strike: (t, o) => { hiss(t, { dur: 0.15, filter: 'bandpass', ff: [[0, 1200], [0.15, 3200]], q: 1.2, gain: 0.3 * o.g, a: 0.02, pan: o.pan }); },
200
+ tapeStop: (t, o) => { voice(t, { type: 'sawtooth', f: [[0, 196], [0.62, 18]], dur: 0.66, gain: 0.22 * o.g, a: 0.004, hold: 0.3, filter: 'lowpass', ff: [[0, 1800], [0.6, 160]] }); voice(t, { f: [[0, 98], [0.62, 12]], dur: 0.66, gain: 0.3 * o.g, a: 0.004, hold: 0.3 }); hiss(t, { color: 'brown', dur: 0.5, filter: 'lowpass', ff: [[0, 900], [0.5, 120]], gain: 0.18 * o.g }); },
201
+ stamp: (t, o) => { voice(t, { f: [[0, 160], [0.18, 48]], dur: 0.28, gain: 0.6 * o.g }); hiss(t, { dur: 0.06, filter: 'bandpass', ff: 1300, q: 1.1, gain: 0.4 * o.g }); hiss(t + 0.004, { dur: 0.014, filter: 'highpass', ff: 4200, gain: 0.25 * o.g }); },
202
+ shimmer: (t, o) => { ['C6', 'E6', 'G6', 'B6', 'D7', 'E7'].forEach((n, i) => voice(t + i * 0.035, { f: n, dur: 0.75, gain: 0.045 * o.g, a: 0.003, verb: 0.45, pan: (i % 2 ? 0.35 : -0.35) })); },
203
+ sparkle: (t, o) => { const r = CM.rng('sp' + t); for (let i = 0; i < 5; i++) voice(t + i * 0.05, { f: 2400 + r() * 2400, dur: 0.25, gain: 0.03 * o.g, a: 0.002, verb: 0.4, pan: r() * 1.2 - 0.6 }); },
204
+ };
205
+ function play(name, t, opts = {}) { const fn = S[name]; if (!fn) throw new Error('unknown sound ' + name); fn(t, Object.assign({}, opts, { g: opts.gain == null ? 1 : opts.gain })); }
206
+
207
+ // ---------------- music: half-time beat with bass and soft pad ----------------
208
+ function music(t0, t1, p = {}) {
209
+ const bpm = p.bpm || 98, step = 60 / bpm / 4, bar = step * 16, g = p.gain == null ? 1 : p.gain;
210
+ const roots = p.roots || ['A1', 'F1', 'C2', 'G1'];
211
+ const pads = p.pads || [['A3', 'C4', 'E4'], ['F3', 'A3', 'C4'], ['C4', 'E4', 'G4'], ['G3', 'B3', 'D4']];
212
+ let bi = 0;
213
+ for (let tb = t0; tb < t1 - 0.05; tb += bar, bi++) {
214
+ const root = roots[bi % roots.length], pad = pads[bi % pads.length], blen = Math.min(bar, t1 - tb);
215
+ pad.forEach((n, k) => voice(tb, { type: 'triangle', f: n, dur: blen + 0.2, gain: 0.03 * g, a: 0.3, hold: blen - 0.5, filter: 'lowpass', ff: 1100, pan: (k - 1) * 0.35, verb: 0.3, bus: 'music' }));
216
+ for (let s = 0; s < 16; s++) {
217
+ const ts = tb + s * step; if (ts >= t1 - 0.02) break;
218
+ if (s === 0 || s === 10) { voice(ts, { f: [[0, 150], [0.09, 46]], dur: 0.32, gain: 0.5 * g, bus: 'music' }); hiss(ts, { dur: 0.012, filter: 'highpass', ff: 3000, gain: 0.05 * g, bus: 'music' }); }
219
+ if (s === 4 || s === 12) { hiss(ts, { dur: 0.16, filter: 'bandpass', ff: 1700, q: 0.8, gain: 0.26 * g, verb: 0.25, bus: 'music' }); hiss(ts + 0.008, { dur: 0.05, filter: 'highpass', ff: 4500, gain: 0.1 * g, bus: 'music' }); }
220
+ if (s % 2 === 0) hiss(ts, { dur: s % 4 === 2 ? 0.05 : 0.028, filter: 'highpass', ff: 7500, gain: (s % 4 === 2 ? 0.06 : 0.035) * g, bus: 'music' });
221
+ if ([0, 3, 6, 10, 14].includes(s)) voice(ts, { type: 'triangle', f: root, dur: step * 2.6, gain: 0.2 * g, a: 0.006, hold: step, filter: 'lowpass', ff: 380, bus: 'music' });
222
+ }
223
+ }
224
+ }
225
+ function drone(t0, t1, p = {}) { const d = t1 - t0, g = p.gain == null ? 1 : p.gain; voice(t0, { f: p.note || 'A1', dur: d, gain: 0.12 * g, a: d * 0.4, hold: d * 0.4, bus: 'music' }); hiss(t0, { color: 'pink', dur: d, filter: 'bandpass', ff: 900, q: 0.5, gain: 0.03 * g, a: d * 0.5, hold: d * 0.3, bus: 'amb' }); }
226
+ function finish() {
227
+ DUCKS.sort((a, b) => a.t - b.t);
228
+ for (const e of DUCKS) { const s = at(e.t); if (s + e.hold < ac.currentTime) continue; duckIn.gain.setTargetAtTime(1 - e.depth, Math.max(s, ac.currentTime), 0.008); duckIn.gain.setTargetAtTime(1, s + e.hold, 0.14); }
229
+ }
230
+ return { play, voice, hiss, music, drone, duck, finish, hz, vo: VO };
231
+ }
232
+ function live(score, from, opts = {}) {
233
+ const ac = new (window.AudioContext || window.webkitAudioContext)();
234
+ const k = kit(ac, Object.assign({}, opts, { from: from || 0, lead: 0.04 })); score(k); k.finish();
235
+ return () => { try { ac.close(); } catch (e) {} };
236
+ }
237
+ async function render(score, dur, sr = 48000, opts = {}) {
238
+ const len = Math.ceil(dur * sr), ac = new OfflineAudioContext(2, len, sr);
239
+ const k = kit(ac, Object.assign({}, opts, { from: 0 })); score(k); k.finish();
240
+ const buf = await ac.startRendering(), L = buf.getChannelData(0), R = buf.getChannelData(1), inter = new Float32Array(len * 2);
241
+ let peak = 0; for (let i = 0; i < len; i++) { inter[2 * i] = L[i]; inter[2 * i + 1] = R[i]; peak = Math.max(peak, Math.abs(L[i]), Math.abs(R[i])); }
242
+ return { inter, peak, sr, frames: len };
243
+ }
244
+ return { kit, live, render, hz };
245
+ })();
246
+
247
+
248
+ // ---------- shared UI-style helpers (Clean Tech, Software Walkthrough, Data Story) ----------
249
+ const W = 1280, HH = 720;
250
+ const { clamp, lerp, span, rng, noise1, ez } = CM;
251
+ const rr = (c, x, y, w, h, r) => { c.beginPath(); c.roundRect(x, y, w, h, r); };
252
+ // keyframe track: K = [[t, v1, v2, ...], ...], eased in-out between keys
253
+ function track(K, t) {
254
+ if (t <= K[0][0]) return K[0].slice(1);
255
+ for (let i = 0; i < K.length - 1; i++) { const a = K[i], b = K[i + 1]; if (t <= b[0]) { const e = ez.inout3((t - a[0]) / Math.max(1e-6, b[0] - a[0])); return a.slice(1).map((v, j) => lerp(v, b[j + 1], e)); } }
256
+ return K[K.length - 1].slice(1);
257
+ }
258
+ const textW = (c, s, font) => { c.save(); c.font = font; const w = c.measureText(s).width; c.restore(); return w; };
259
+ const pxOf = (font) => parseFloat(/(\d+)px/.exec(font)[1]);
260
+ // a word rises from behind a mask line into place; returns its width
261
+ function rise(c, s, x, y, font, color, t0, t, o = {}) {
262
+ const w = textW(c, s, font); if (t < t0) return w;
263
+ const px = pxOf(font), X = o.align === 'center' ? x - w / 2 : o.align === 'right' ? x - w : x, e = ez.outExpo(span(t, t0, t0 + (o.dur || 0.5)));
264
+ c.save(); c.beginPath(); c.rect(X - 12, y - px * 1.0, w + 24, px * 1.32); c.clip();
265
+ c.globalAlpha *= Math.min(1, e * 1.6) * (o.alpha == null ? 1 : o.alpha); c.font = font; c.fillStyle = color; c.textBaseline = 'alphabetic'; c.textAlign = 'left';
266
+ c.fillText(s, X, y + (1 - e) * px * 0.9); c.restore(); return w;
267
+ }
268
+ // a line of words, each rising on its own time. words: [[text, t0, color?]]
269
+ function riseLine(c, words, x, y, font, color, t, o = {}) {
270
+ const sp = textW(c, ' ', font), ws = words.map(([s]) => textW(c, s, font)), tot = ws.reduce((a, b) => a + b, 0) + sp * (words.length - 1);
271
+ let cx = o.align === 'center' ? x - tot / 2 : x; const boxes = [];
272
+ words.forEach(([s, t0, col], i) => { boxes.push({ x: cx, w: ws[i], y }); rise(c, s, cx, y, font, col || color, t0, t, { alpha: o.alpha }); cx += ws[i] + sp; });
273
+ return boxes;
274
+ }
275
+ // pill highlight behind a word box, growing from the left
276
+ function pillBehind(c, box, font, p, color, pad = 16) {
277
+ if (p <= 0) return; const px = pxOf(font); c.save(); c.fillStyle = color; rr(c, box.x - pad, box.y - px * 0.88, (box.w + pad * 2) * ez.outExpo(p), px * 1.12, px * 0.26); c.fill(); c.restore();
278
+ }
279
+ const typed = (full, t, a, b) => full.slice(0, Math.floor(full.length * span(t, a, b)));
280
+ function softCard(c, x, y, w, h, r, o = {}) {
281
+ c.save(); c.shadowColor = o.shadow || 'rgba(13,15,40,0.13)'; c.shadowBlur = o.blur == null ? 44 : o.blur; c.shadowOffsetY = o.offY == null ? 16 : o.offY;
282
+ c.fillStyle = o.fill || '#ffffff'; rr(c, x, y, w, h, r); c.fill(); c.restore();
283
+ if (o.border !== false) { c.save(); c.strokeStyle = o.border || 'rgba(13,15,20,0.08)'; c.lineWidth = 1.5; rr(c, x, y, w, h, r); c.stroke(); c.restore(); }
284
+ }
285
+ function cursorArrow(c, x, y, s = 1.3) {
286
+ c.save(); c.translate(x, y); c.scale(s, s); c.shadowColor = 'rgba(0,0,0,0.3)'; c.shadowBlur = 6; c.shadowOffsetY = 2;
287
+ c.fillStyle = '#111'; c.strokeStyle = '#fff'; c.lineWidth = 1.6; c.beginPath(); c.moveTo(0, 0); c.lineTo(0, 22); c.lineTo(5.5, 17); c.lineTo(9.5, 26); c.lineTo(13, 24.5); c.lineTo(9, 15.5); c.lineTo(16, 15.5); c.closePath(); c.fill(); c.shadowColor = 'transparent'; c.stroke(); c.restore();
288
+ }
289
+ function checkMark(c, x, y, r, p, fill = '#18b46b') {
290
+ if (p <= 0) return; const s = ez.back(clamp(p), 2.2); c.save(); c.translate(x, y); c.scale(s, s); c.fillStyle = fill; c.beginPath(); c.arc(0, 0, r, 0, 7); c.fill();
291
+ c.strokeStyle = '#fff'; c.lineWidth = r * 0.24; c.lineCap = 'round'; c.lineJoin = 'round'; c.beginPath(); c.moveTo(-r * 0.42, 0.02 * r); c.lineTo(-r * 0.1, r * 0.32); c.lineTo(r * 0.45, -r * 0.3); c.stroke(); c.restore();
292
+ }
293
+ // scenes on transparent layers, with cuts between them
294
+ const LA = CM.layer(W, HH), LB = CM.layer(W, HH);
295
+ function sceneLayer(L, draw, t) { const x = L.getContext('2d'); x.setTransform(1, 0, 0, 1, 0, 0); x.globalAlpha = 1; x.globalCompositeOperation = 'source-over'; x.filter = 'none'; x.clearRect(0, 0, W, HH); draw(x, t); return L; }
296
+ function composite(ctx, t, SCENES, CUTS, background) {
297
+ ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.globalAlpha = 1; ctx.globalCompositeOperation = 'source-over'; ctx.filter = 'none';
298
+ background(ctx, t);
299
+ let idx = 0; for (const c of CUTS) if (t >= c.t) idx++;
300
+ const cut = CUTS.find((c) => t >= c.t && t < c.t + c.d);
301
+ if (!cut) { ctx.drawImage(sceneLayer(LA, SCENES[idx], t), 0, 0); return; }
302
+ const u = (t - cut.t) / cut.d, e = ez.inout3(u), A = sceneLayer(LA, SCENES[idx - 1], t), B = sceneLayer(LB, SCENES[idx], t);
303
+ if (cut.type === 'push') {
304
+ const dir = cut.dir || 1, s = 1 - 0.05 * Math.sin(Math.PI * u);
305
+ for (const [L, off] of [[A, -e * W * dir], [B, (1 - e) * W * dir]]) { ctx.save(); ctx.translate(640 + off, 360); ctx.scale(s, s); ctx.drawImage(L, -640, -360); ctx.restore(); }
306
+ } else if (cut.type === 'zoom') {
307
+ const z = lerp(1, 3.2, ez.in3(clamp(u / 0.65))); ctx.save(); ctx.globalAlpha = 1 - span(u, 0.38, 0.65); ctx.translate(cut.x, cut.y); ctx.scale(z, z); ctx.drawImage(A, -cut.x, -cut.y); ctx.restore();
308
+ const zb = lerp(1.1, 1, ez.out3(span(u, 0.35, 1))); ctx.save(); ctx.globalAlpha = span(u, 0.35, 0.72); ctx.translate(640, 360); ctx.scale(zb, zb); ctx.drawImage(B, -640, -360); ctx.restore();
309
+ } else if (cut.type === 'up') {
310
+ ctx.save(); ctx.globalAlpha = 1 - e; ctx.drawImage(A, 0, -60 * e); ctx.restore(); ctx.save(); ctx.globalAlpha = e; ctx.drawImage(B, 0, 70 * (1 - e)); ctx.restore();
311
+ } else { ctx.save(); ctx.globalAlpha = 1 - e; ctx.drawImage(A, 0, 0); ctx.globalAlpha = e; ctx.drawImage(B, 0, 0); ctx.restore(); }
312
+ }
313
+ // a soft synth pad and light percussion on the music bus (for scores)
314
+ function padBed(k, t0, t1, o = {}) {
315
+ const bpm = o.bpm || 90, beat = 60 / bpm, bar = beat * 4, chords = o.chords, g = o.gain == null ? 1 : o.gain;
316
+ let i = 0;
317
+ for (let tb = t0; tb < t1 - 0.1; tb += bar, i++) {
318
+ const ch = chords[i % chords.length], len = Math.min(bar, t1 - tb);
319
+ ch.forEach((n, j) => { k.voice(tb, { type: 'triangle', f: n, dur: len + 0.4, gain: 0.026 * g, a: 0.5, hold: Math.max(0, len - 0.9), filter: 'lowpass', ff: o.cut || 1300, pan: (j - (ch.length - 1) / 2) * 0.3, verb: 0.3, bus: 'music' }); });
320
+ k.voice(tb, { f: k.hz(ch[0]) / 2, dur: len + 0.2, gain: 0.05 * g, a: 0.3, hold: Math.max(0, len - 0.6), bus: 'music' });
321
+ for (let b = 0; b < 8; b++) {
322
+ const ts = tb + b * beat / 2; if (ts >= t1 - 0.05) break;
323
+ if (o.hats && ts >= o.hats[0] && ts < o.hats[1]) k.hiss(ts, { dur: b % 2 ? 0.03 : 0.045, filter: 'highpass', ff: 8000, gain: (b % 2 ? 0.014 : 0.022) * g, bus: 'music' });
324
+ if (o.kick && ts >= o.kick[0] && ts < o.kick[1] && (b === 0 || b === 4)) k.voice(ts, { f: [[0, 120], [0.09, 46]], dur: 0.26, gain: 0.16 * g, bus: 'music' });
325
+ }
326
+ }
327
+ }
328
+
329
+ // =====================================================================================================
330
+ // STYLE: Warm Canvas (family: Talking-Head Explainer)
331
+ // A calm, editorial creator-edit look built around the speaker's own footage (A-roll).
332
+ // Two modes and nothing else: full-frame A-roll with a few clean overlays, and a warm off-white canvas
333
+ // with a big soft swoosh, where white cards explain the idea while the speaker stays in a picture-in-picture.
334
+ // Soft serif headlines (two tones: ink + sky blue), quiet Inter UI text, pastel tinted chips, gentle fades.
335
+ // Demo topic: "Can AI really plan my week?"
336
+ // =====================================================================================================
337
+ const C = {
338
+ bg: '#f7f5f4', swoosh: '#ebe6e2', ink: '#111111', sub: '#2b2826', mute: '#8f8a87', faint: '#c9c1bb', line: '#ece8e1',
339
+ card: '#ffffff', head: '#f2ede9', labelCol: '#f9f6f5', dashOff: '#ddd4ce', pipRing: '#a7cbf3',
340
+ sky: '#4f9cf0', skyDeep: '#2a78d8', skyTint: '#e4f0fd', skyLine: '#9cc5f3',
341
+ purple: '#7a62c9', purpleSoft: '#b9a3ef', purpleTint: '#f0ebfb', purpleLine: '#c3b5e6',
342
+ teal: '#1690b2', tealTint: '#e0f4fb', tealLine: '#8fd0e6',
343
+ green: '#74ca82', greenDeep: '#379645', greenTint: '#e5f5e7', greenLine: '#97cc9e', greenWave: '#86c991',
344
+ yellowTint: '#fdf3d0', yellowLine: '#efd37f', yellowDeep: '#b58a14',
345
+ blue: '#3869f3', red: '#e5484d', redTint: '#fde4e4',
346
+ };
347
+ const SERIF = (px, w = 560) => `${w} ${px}px "Fraunces", Georgia, serif`;
348
+ const SANS = (px, w = 600) => `${w} ${px}px "Inter", system-ui, sans-serif`;
349
+ const LS = (px) => (-0.02 * px).toFixed(2) + 'px'; // serif tracking: -2%
350
+ const PIP = { x: 986, y: 168, w: 272, h: 384, r: 22 };
351
+ const COLX = 492; // centre of the content column when the PiP is on screen
352
+ const outC = ez.out3, inout = ez.inout3;
353
+ let OVERLAY = false; // overlay export: no A-roll, transparent where footage goes
354
+
355
+ // ---------- the timeline: picture (and later the sound) read these ----------
356
+ const TL = {
357
+ D: 32.6,
358
+ ch1: { title: 0.15, tile: 0.7, dash: 0.95 },
359
+ talk1: { chips: [3.75, 4.25, 4.75], chipsOut: 6.9, cap: [7.55, 7.75, 7.95, 8.35, 8.55, 8.75, 8.95], capOut: 10.25 },
360
+ old: { title: 11.0, cardA: 11.45, footA: 12.05, arrow: 12.6, cardB: 13.0, footB: 13.65, out: 15.7 },
361
+ cmp: { title: 16.2, table: 16.55, rows: [16.85, 17.0, 17.15], cnt: [17.35, 18.6], r2: 19.2, r3: 19.8, out: 21.2 },
362
+ week: { title: 21.7, win: 22.0, clips: 22.35, flag: 23.75, cut: [24.35, 24.85], pills: [25.05, 25.3, 25.55] },
363
+ talk2: { cap: [26.85, 27.05, 27.25, 27.4, 27.75, 27.95, 28.15, 28.35], capOut: 29.3 },
364
+ ch2: { title: 29.95, tile: 30.4, dash: 30.6 },
365
+ };
366
+ // cuts: vertical pushes in and out of chapter cards, hard cuts everywhere else
367
+ const CUTS = [{ t: 3.0, d: 0.45, type: 'vpush' }, { t: 10.6, d: 0, type: 'cut' }, { t: 26.4, d: 0, type: 'cut' }, { t: 29.55, d: 0.45, type: 'vpush' }];
368
+ // jump cuts inside the A-roll: [time, zoom, face x (0..1), face y (0..1)]
369
+ const PUNCH = [[3.0, 1.0, 0.5, 0.36], [7.2, 1.16, 0.5, 0.34], [26.4, 1.08, 0.46, 0.36]];
370
+
371
+ // ---------- primitives ----------
372
+ function tw(c, s, font, ls = '0px') { c.save(); c.font = font; c.letterSpacing = ls; const w = c.measureText(s).width; c.restore(); return w; }
373
+ // a line of mixed-colour serif text: parts = [[text, colour], ...]; returns its width
374
+ function toneText(c, parts, x, y, px, o = {}) {
375
+ const font = SERIF(px, o.w || 560), ls = LS(px), ws = parts.map(([s]) => tw(c, s, font, ls)), tot = ws.reduce((a, b) => a + b, 0);
376
+ let cx = o.align === 'left' ? x : x - tot / 2;
377
+ c.save(); c.font = font; c.letterSpacing = ls; c.textBaseline = 'alphabetic'; c.textAlign = 'left';
378
+ parts.forEach(([s, col], i) => { c.fillStyle = col; c.fillText(s, cx, y); cx += ws[i]; }); c.restore(); return tot;
379
+ }
380
+ function shadowCard(c, x, y, w, h, r, o = {}) {
381
+ c.save(); c.shadowColor = o.shadow || 'rgba(96,64,44,0.11)'; c.shadowBlur = o.blur == null ? 34 : o.blur; c.shadowOffsetY = o.offY == null ? 12 : o.offY;
382
+ c.fillStyle = o.fill || C.card; rr(c, x, y, w, h, r); c.fill(); c.restore();
383
+ }
384
+ function tag(c, x, y, text, bg, fg = '#fff', px = 19) {
385
+ const f = SANS(px, 600), w = tw(c, text, f) + 24, h = px + 16;
386
+ c.save(); c.fillStyle = bg; rr(c, x, y, w, h, 8); c.fill(); c.font = f; c.fillStyle = fg; c.textBaseline = 'middle'; c.fillText(text, x + 13, y + h / 2 + 1); c.restore(); return w;
387
+ }
388
+ // entrance: fade + small rise. returns eased progress
389
+ function enter(c, t, t0, dur = 0.35, dy = 18) { const e = outC(span(t, t0, t0 + dur)); c.globalAlpha *= e; c.translate(0, (1 - e) * dy); return e; }
390
+ const fadeOut = (t, t0, d = 0.22) => 1 - span(t, t0, t0 + d);
391
+
392
+ // ---------- icons (generic, drawn in code) ----------
393
+ function iconSpark(c, x, y, s, col) { c.save(); c.translate(x, y); c.fillStyle = col; c.beginPath(); for (let i = 0; i < 8; i++) { const a = i * Math.PI / 4 - Math.PI / 2, r = i % 2 ? s * 0.28 : s; c.lineTo(Math.cos(a) * r, Math.sin(a) * r); } c.closePath(); c.fill(); c.restore(); }
394
+ function iconCheck(c, x, y, r, col = C.greenDeep) { c.save(); c.fillStyle = col; c.beginPath(); c.arc(x, y, r, 0, 7); c.fill(); c.strokeStyle = '#fff'; c.lineWidth = r * 0.26; c.lineCap = 'round'; c.lineJoin = 'round'; c.beginPath(); c.moveTo(x - r * 0.42, y + r * 0.02); c.lineTo(x - r * 0.1, y + r * 0.32); c.lineTo(x + r * 0.44, y - r * 0.3); c.stroke(); c.restore(); }
395
+ function iconX(c, x, y, r, col = C.red) { c.save(); c.fillStyle = col; c.beginPath(); c.arc(x, y, r, 0, 7); c.fill(); c.strokeStyle = '#fff'; c.lineWidth = r * 0.24; c.lineCap = 'round'; const k = r * 0.36; c.beginPath(); c.moveTo(x - k, y - k); c.lineTo(x + k, y + k); c.moveTo(x + k, y - k); c.lineTo(x - k, y + k); c.stroke(); c.restore(); }
396
+ function iconMinus(c, x, y, r, col) { c.save(); c.strokeStyle = col; c.lineWidth = 2; c.beginPath(); c.arc(x, y, r, 0, 7); c.stroke(); c.lineCap = 'round'; c.beginPath(); c.moveTo(x - r * 0.45, y); c.lineTo(x + r * 0.45, y); c.stroke(); c.restore(); }
397
+ function iconOk(c, x, y, r, col) { c.save(); c.strokeStyle = col; c.lineWidth = 2; c.beginPath(); c.arc(x, y, r, 0, 7); c.stroke(); c.lineCap = 'round'; c.lineJoin = 'round'; c.beginPath(); c.moveTo(x - r * 0.42, y); c.lineTo(x - r * 0.1, y + r * 0.32); c.lineTo(x + r * 0.42, y - r * 0.3); c.stroke(); c.restore(); }
398
+ function iconBook(c, x, y, s, col) { c.save(); c.strokeStyle = col; c.lineWidth = 2; c.lineJoin = 'round'; rr(c, x - s, y - s * 0.75, s * 2, s * 1.5, 3); c.stroke(); c.beginPath(); c.moveTo(x, y - s * 0.75); c.lineTo(x, y + s * 0.75); c.stroke(); c.restore(); }
399
+ function iconNotes(c, x, y, s) { c.save(); c.fillStyle = '#fff4cf'; rr(c, x - s, y - s, s * 2, s * 2, s * 0.3); c.fill(); c.strokeStyle = '#d9b44a'; c.lineWidth = 2.4; c.lineCap = 'round'; for (let i = 0; i < 3; i++) { c.beginPath(); c.moveTo(x - s * 0.55, y - s * 0.4 + i * s * 0.42); c.lineTo(x + s * (i === 2 ? 0.15 : 0.55), y - s * 0.4 + i * s * 0.42); c.stroke(); } c.restore(); }
400
+ function iconCal(c, x, y, s) { c.save(); c.fillStyle = '#fff'; c.strokeStyle = '#d9d2cc'; c.lineWidth = 1.5; rr(c, x - s, y - s, s * 2, s * 2, s * 0.32); c.fill(); c.stroke(); c.fillStyle = C.red; c.beginPath(); c.roundRect(x - s, y - s, s * 2, s * 0.62, [s * 0.32, s * 0.32, 0, 0]); c.fill(); c.fillStyle = C.ink; c.font = SERIF(s * 1.05, 600); c.textAlign = 'center'; c.fillText('7', x, y + s * 0.78); c.restore(); }
401
+ function avatar(c, x, y, s, tint, col) { c.save(); c.fillStyle = tint; rr(c, x, y, s, s, s * 0.22); c.fill(); c.beginPath(); rr(c, x, y, s, s, s * 0.22); c.clip(); c.fillStyle = col; c.beginPath(); c.arc(x + s / 2, y + s * 0.42, s * 0.19, 0, 7); c.fill(); c.beginPath(); c.ellipse(x + s / 2, y + s * 1.02, s * 0.36, s * 0.32, 0, 0, 7); c.fill(); c.restore(); }
402
+
403
+ // ---------- surfaces ----------
404
+ // the warm canvas: off-white with one big soft swoosh (static, it never moves)
405
+ function canvasBG(c) {
406
+ c.fillStyle = C.bg; c.fillRect(0, 0, W, HH);
407
+ c.fillStyle = C.swoosh; c.beginPath(); c.moveTo(372, HH); c.bezierCurveTo(640, 600, 760, 170, 1280, 102); c.lineTo(1280, 418); c.bezierCurveTo(1150, 500, 1040, 640, 948, HH); c.closePath(); c.fill();
408
+ }
409
+ // A-roll stand-in: a defocused talking-head frame, rendered once. Load real footage with "Load A-roll".
410
+ const PH = CM.layer(W, HH);
411
+ (function makePlaceholder() {
412
+ const x = PH.getContext('2d'), b = CM.layer(W, HH), bc = b.getContext('2d');
413
+ let g = bc.createLinearGradient(0, 0, W, 0); g.addColorStop(0, '#59605d'); g.addColorStop(0.45, '#8d918b'); g.addColorStop(0.7, '#d7d2c9'); g.addColorStop(1, '#e4ded4'); bc.fillStyle = g; bc.fillRect(0, 0, W, HH);
414
+ bc.fillStyle = '#9fb0ab'; bc.fillRect(90, 140, 330, 210); bc.fillStyle = '#b8c6c1'; bc.fillRect(110, 160, 140, 170); bc.fillRect(270, 160, 130, 170);
415
+ bc.fillStyle = 'rgba(255,255,250,0.85)'; [[150, 175], [220, 172], [330, 178], [380, 210]].forEach(([a, d]) => { bc.beginPath(); bc.arc(a, d, 9, 0, 7); bc.fill(); });
416
+ bc.fillStyle = '#efc1b4'; for (let i = 0; i < 28; i++) { const r = CM.rng('note' + i); bc.fillRect(900 + (i % 7) * 34 + r() * 6, 120 + Math.floor(i / 7) * 34 + r() * 6, 26, 26); }
417
+ bc.fillStyle = '#c69a6a'; bc.fillRect(1170, 200, 110, 14); bc.fillStyle = '#5c8a5a'; bc.beginPath(); bc.ellipse(1150, 640, 140, 120, -0.4, 0, 7); bc.fill();
418
+ bc.fillStyle = '#6b6f6c'; bc.fillRect(0, 600, 380, 120);
419
+ x.filter = 'blur(16px)'; x.drawImage(b, 0, 0);
420
+ // a soft, featureless figure: it only marks where the speaker sits in frame
421
+ const f = CM.layer(W, HH), fc = f.getContext('2d');
422
+ fc.fillStyle = '#d3d4d1'; fc.beginPath(); fc.moveTo(420, HH); fc.bezierCurveTo(430, 470, 520, 392, 640, 388); fc.bezierCurveTo(760, 392, 850, 470, 860, HH); fc.closePath(); fc.fill();
423
+ fc.fillStyle = '#9c7660'; fc.fillRect(606, 300, 68, 100);
424
+ fc.fillStyle = '#ad8670'; fc.beginPath(); fc.ellipse(640, 232, 82, 104, 0, 0, 7); fc.fill();
425
+ fc.fillStyle = '#2e2724'; fc.beginPath(); fc.ellipse(640, 160, 90, 62, 0, Math.PI, 0); fc.fill();
426
+ x.filter = 'blur(9px)'; x.drawImage(f, 0, 0);
427
+ x.filter = 'blur(10px)'; x.fillStyle = 'rgba(70,120,70,0.75)'; x.beginPath(); x.ellipse(1190, 600, 120, 70, -0.7, 0, 7); x.fill(); x.filter = 'none';
428
+ x.font = '600 15px "Inter", system-ui, sans-serif'; x.fillStyle = 'rgba(255,255,255,0.55)'; x.fillText('A-ROLL STAND-IN', 24, 700);
429
+ })();
430
+ let AR = null; // loaded A-roll video { el }
431
+ // draw the A-roll into a rect, cover-fit, zoomed around the face point
432
+ function arollFeed(c, t, x, y, w, h, z = 1, fx = 0.5, fy = 0.36) {
433
+ if (OVERLAY) return;
434
+ const src = AR ? AR.el : PH, sw = AR ? AR.el.videoWidth : W, sh = AR ? AR.el.videoHeight : HH; if (!sw) return;
435
+ const s = Math.max(w / sw, h / sh) * z, dw = sw * s, dh = sh * s;
436
+ let dx = x + w / 2 - fx * dw, dy = y + h * 0.42 - fy * dh;
437
+ dx = clamp(dx, x + w - dw, x); dy = clamp(dy, y + h - dh, y);
438
+ c.save(); c.beginPath(); c.rect(x, y, w, h); c.clip(); c.drawImage(src, dx, dy, dw, dh); c.restore();
439
+ }
440
+ function punchAt(t) { let p = PUNCH[0]; for (const q of PUNCH) if (t >= q[0]) p = q; return p; }
441
+ function fullARoll(c, t) { if (OVERLAY) return; c.fillStyle = '#000'; c.fillRect(0, 0, W, HH); const [, z, fx, fy] = punchAt(t); arollFeed(c, t, 0, 0, W, HH, z, fx, fy); }
442
+ // picture-in-picture: portrait crop of the same A-roll, soft lavender ring
443
+ function pip(c, t) {
444
+ const { x, y, w, h, r } = PIP;
445
+ c.save(); c.shadowColor = 'rgba(80,90,170,0.18)'; c.shadowBlur = 22; c.shadowOffsetY = 6; c.fillStyle = '#d9dce6'; rr(c, x, y, w, h, r); c.fill(); c.restore();
446
+ if (OVERLAY) { c.save(); c.globalCompositeOperation = 'destination-out'; rr(c, x, y, w, h, r); c.fill(); c.restore(); }
447
+ else { c.save(); rr(c, x, y, w, h, r); c.clip(); arollFeed(c, t, x, y, w, h, 1.0, 0.5, 0.33); c.restore(); }
448
+ c.save(); c.strokeStyle = C.pipRing; c.lineWidth = 2.5; rr(c, x + 1, y + 1, w - 2, h - 2, r - 1); c.stroke(); c.restore();
449
+ }
450
+
451
+ // ---------- components ----------
452
+ // title chip: white pill with a two-tone serif line, sits above the content
453
+ function titleChip(c, parts, t, t0, out, cx = COLX, y = 112) {
454
+ const a = span(t, t0, t0 + 0.3) * fadeOut(t, out); if (a <= 0) return;
455
+ const px = 38, w = tw(c, parts.map((p) => p[0]).join(''), SERIF(px), LS(px)) + 56, h = 70;
456
+ c.save(); c.globalAlpha *= outC(a); c.translate(0, (1 - outC(span(t, t0, t0 + 0.3))) * -8);
457
+ shadowCard(c, cx - w / 2, y, w, h, 18, { shadow: 'rgba(96,64,44,0.06)', blur: 26, offY: 6 });
458
+ toneText(c, parts, cx, y + 48, px); c.restore();
459
+ }
460
+ // chapter card: number tile, two-tone title, chapter dashes
461
+ function chapterCard(c, t, n, parts, T0, total = 11) {
462
+ canvasBG(c);
463
+ const te = outC(span(t, T0.title, T0.title + 0.55));
464
+ c.save(); c.globalAlpha = te; toneText(c, parts, 640, 425 + (1 - te) * 46, 78); c.restore();
465
+ const p = span(t, T0.tile, T0.tile + 0.32);
466
+ if (p > 0) { const s = 0.7 + 0.3 * ez.back(p, 1.6); c.save(); c.globalAlpha = Math.min(1, p * 1.6); c.translate(640, 254); c.scale(s, s);
467
+ c.shadowColor = 'rgba(79,156,240,0.35)'; c.shadowBlur = 22; c.shadowOffsetY = 8; c.fillStyle = C.sky; rr(c, -58, -58, 116, 116, 26); c.fill(); c.shadowColor = 'transparent';
468
+ c.font = SERIF(66, 600); c.fillStyle = '#fff'; c.textAlign = 'center'; c.fillText(String(n), 0, 24); c.restore(); }
469
+ const dw = 40, gap = 8, x0 = 640 - (total * dw + (total - 1) * gap) / 2, da = te;
470
+ for (let i = 0; i < total; i++) { const x = x0 + i * (dw + gap); c.save(); c.globalAlpha = da; c.fillStyle = C.dashOff; rr(c, x, 489, dw, 6, 3); c.fill();
471
+ if (i === n - 1) { c.fillStyle = C.sky; rr(c, x, 489, dw * outC(span(t, T0.dash, T0.dash + 0.35)), 6, 3); c.fill(); } c.restore(); }
472
+ }
473
+ // overlay chip on the A-roll (left stack): icon tile, small overline, serif label
474
+ function sideChip(c, t, t0, out, y, icon, over, label) {
475
+ const e = outC(span(t, t0, t0 + 0.32)), a = e * fadeOut(t, out, 0.2); if (a <= 0) return;
476
+ const x = 40 - (1 - e) * 36, w = 374, h = 108;
477
+ c.save(); c.globalAlpha = a; shadowCard(c, x, y, w, h, 16, { shadow: 'rgba(0,0,0,0.16)', blur: 24, offY: 6 });
478
+ c.fillStyle = '#fff'; c.strokeStyle = '#ece8e4'; c.lineWidth = 1.5; rr(c, x + 18, y + 22, 64, 64, 15); c.fill(); c.stroke(); icon(c, x + 50, y + 54);
479
+ c.font = SANS(16, 500); c.fillStyle = '#5f5b58'; c.fillText(over, x + 100, y + 44); c.font = SERIF(31, 600); c.letterSpacing = LS(31); c.fillStyle = C.ink; c.fillText(label, x + 98, y + 80); c.restore();
480
+ }
481
+ // caption words are pre-rendered once (text + soft shadow) so captions stay fast
482
+ const SPRITES = new Map();
483
+ function wordSprite(s, font, ls, col, px) {
484
+ const key = s + '|' + font + '|' + col; let L = SPRITES.get(key); if (L) return L;
485
+ const w = Math.ceil(tw(ctxProbe, s, font, ls)) + 80, h = Math.ceil(px * 1.5) + 80; L = CM.layer(w, h); const x = L.getContext('2d');
486
+ x.font = font; x.letterSpacing = ls; x.fillStyle = col; x.shadowColor = 'rgba(0,0,0,0.30)'; x.shadowBlur = 18; x.shadowOffsetY = 2; x.fillText(s, 40, 40 + px * 1.1);
487
+ if (document.fonts.status === 'loaded') SPRITES.set(key, L); return L;
488
+ }
489
+ const ctxProbe = CM.layer(4, 4).getContext('2d');
490
+ // caption on the A-roll: centred, white serif, key words in sky blue, each word fades up as it is spoken
491
+ function caption(c, t, lines, out) {
492
+ const fa = fadeOut(t, out, 0.16); if (fa <= 0 || t < lines[0][0][1] - 0.01) return;
493
+ const px = 104, font = SERIF(px), ls = LS(px), gap = 114, y0 = 650 - (lines.length - 1) * gap, sp = tw(c, ' ', font, ls);
494
+ lines.forEach((ln, li) => {
495
+ const ws = ln.map(([s]) => tw(c, s, font, ls)), tot = ws.reduce((a, b) => a + b, 0) + sp * (ln.length - 1); let x = 640 - tot / 2;
496
+ ln.forEach(([s, t0, col], i) => {
497
+ const e = outC(span(t, t0, t0 + 0.3));
498
+ if (e > 0) { const sp0 = wordSprite(s, font, ls, col || '#fff', px); c.save(); c.globalAlpha = e * fa; if (e < 1) c.filter = `blur(${((1 - e) * 5).toFixed(2)}px)`;
499
+ c.drawImage(sp0, x - 40, y0 + li * gap + (1 - e) * 12 - px * 1.1 - 40); c.restore(); }
500
+ x += ws[i] + sp;
501
+ });
502
+ });
503
+ }
504
+ // dashed arrow "- ->" drawn left to right
505
+ function dashArrow(c, x, y, len, p) {
506
+ if (p <= 0) return; c.save(); c.strokeStyle = C.ink; c.lineWidth = 4.5; c.lineCap = 'round'; c.lineJoin = 'round'; const end = x + len * outC(p);
507
+ for (let s = x; s < end - 10; s += 22) { c.beginPath(); c.moveTo(s, y); c.lineTo(Math.min(s + 10, end - 10), y); c.stroke(); }
508
+ if (p > 0.5) { const a = outC(span(p, 0.5, 1)); c.globalAlpha = a; c.beginPath(); c.moveTo(end - 18, y - 9); c.lineTo(end - 8, y); c.lineTo(end - 18, y + 9); c.moveTo(end - 22, y); c.lineTo(end - 8, y); c.stroke(); }
509
+ c.restore();
510
+ }
511
+ // mini week grid used as a "thumbnail" inside cards
512
+ function weekThumb(c, x, y, w, h, blur) {
513
+ c.save(); c.beginPath(); rr(c, x, y, w, h, 12); c.clip(); c.fillStyle = '#f4efe9'; c.fillRect(x, y, w, h);
514
+ if (blur) c.filter = 'blur(5px)';
515
+ const cw = (w - 24) / 5; for (let i = 0; i < 5; i++) { c.fillStyle = '#ffffff'; rr(c, x + 12 + i * cw + 2, y + 12, cw - 4, h - 24, 6); c.fill();
516
+ const r = CM.rng('wk' + i); let yy = y + 20; while (yy < y + h - 34) { const bh = 14 + r() * 24; c.fillStyle = r.pick([C.purpleTint, C.skyTint, C.greenTint, C.tealTint, C.yellowTint]); rr(c, x + 12 + i * cw + 6, yy, cw - 12, bh, 4); c.fill(); yy += bh + 6; } }
517
+ c.restore();
518
+ }
519
+ function personCard(c, x, y, o) {
520
+ const w = 346, h = 436; shadowCard(c, x, y, w, h, 22);
521
+ tag(c, x + 26, y + 26, o.tag, o.tagBg);
522
+ if (o.ai) { c.save(); c.fillStyle = '#fff'; c.strokeStyle = '#efe9e4'; c.lineWidth = 1.5; rr(c, x + 26, y + 86, 76, 76, 18); c.fill(); c.stroke(); iconSpark(c, x + 64, y + 124, 24, C.purple); c.restore(); }
523
+ else avatar(c, x + 26, y + 86, 76, C.skyTint, C.sky);
524
+ c.font = SERIF(32, 600); c.letterSpacing = LS(32); c.fillStyle = C.ink; c.fillText(o.name, x + 122, y + 120); c.letterSpacing = '0px';
525
+ c.font = SANS(19, 500); c.fillStyle = C.sub; c.fillText(o.sub, x + 122, y + 148);
526
+ weekThumb(c, x + 26, y + 190, w - 52, 166, o.ai);
527
+ if (o.ai) { c.save(); c.fillStyle = '#fff'; c.beginPath(); c.arc(x + w / 2, y + 273, 30, 0, 7); c.fill(); c.font = SERIF(40, 700); c.fillStyle = C.purple; c.textAlign = 'center'; c.fillText('?', x + w / 2, y + 287); c.restore(); }
528
+ }
529
+ function cardFooter(c, x, y, w, ok, text, p) {
530
+ if (p <= 0) return; c.save(); c.globalAlpha *= outC(p); const f = SERIF(25, 600), tw0 = tw(c, text, f, LS(25)) + 36, sx = x + w / 2 - tw0 / 2;
531
+ (ok ? iconCheck : iconX)(c, sx + 12, y - 8, 13); c.font = f; c.letterSpacing = LS(25); c.fillStyle = C.ink; c.fillText(text, sx + 36, y); c.restore();
532
+ }
533
+ // segmented meter (white segments on a tinted column)
534
+ function segBar(c, x, y, w, v, segs = 22) { const g = 2.6, sw = (w - g * (segs - 1)) / segs; for (let i = 0; i < segs; i++) { const f = clamp(v * segs - i); c.fillStyle = `rgba(255,255,255,${0.45 + 0.55 * f})`; rr(c, x + i * (sw + g), y, sw, 11, 3); c.fill(); } }
535
+ function rowPill(c, xr, y, text, bg, fg) { const f = SERIF(26), w = tw(c, text, f, LS(26)) + 34; c.save(); c.fillStyle = bg; rr(c, xr - w, y - 21, w, 42, 11); c.fill(); c.font = f; c.letterSpacing = LS(26); c.fillStyle = fg; c.textBaseline = 'middle'; c.fillText(text, xr - w + 17, y + 1); c.restore(); }
536
+ const WV = CM.noise1('wv');
537
+ // a clip on the week timeline
538
+ function clip(c, x, y, w, h, kind, label, o = {}) {
539
+ if (w < 2) return; const K = { deep: [C.purpleTint, C.purpleLine], meet: [C.skyTint, C.skyLine], call: [C.greenTint, C.greenLine], gym: [C.tealTint, C.tealLine], admin: [C.yellowTint, C.yellowLine], bad: [C.redTint, C.red] }[kind];
540
+ c.save(); c.fillStyle = K[0]; rr(c, x, y, w, h, 8); c.fill(); c.strokeStyle = K[1]; c.lineWidth = o.flag ? 2.2 : 1.5; rr(c, x, y, w, h, 8); c.stroke();
541
+ c.beginPath(); rr(c, x, y, w, h, 8); c.clip();
542
+ if (kind === 'meet' || kind === 'bad') { c.strokeStyle = K[1]; c.globalAlpha = 0.45; c.lineWidth = 1; for (let s = x + 40; s < x + w - 4; s += 40) { c.beginPath(); c.moveTo(s, y); c.lineTo(s, y + h); c.stroke(); } c.globalAlpha = 1; }
543
+ if (kind === 'call') { c.strokeStyle = C.greenWave; c.lineWidth = 2; const r = CM.rng('wave' + Math.round(x)); for (let s = x + 7; s < x + w - 6; s += 4.5) { const a = (0.2 + 0.8 * Math.abs(WV(s * 0.07)) * (0.6 + r() * 0.6)) * h * 0.36; c.beginPath(); c.moveTo(s, y + h / 2 - a); c.lineTo(s, y + h / 2 + a); c.stroke(); } }
544
+ if (label) { c.font = SANS(13.5, 600); c.fillStyle = kind === 'bad' ? C.red : kind === 'admin' ? C.yellowDeep : kind === 'gym' ? C.teal : kind === 'deep' ? C.purple : C.skyDeep; c.textBaseline = 'middle';
545
+ if (kind === 'deep') { c.save(); c.fillStyle = '#fff'; rr(c, x + 8, y + 9, 30, h - 18, 4); c.fill(); c.fillStyle = C.purpleLine; c.fillRect(x + 12, y + 14, 22, 3); c.fillRect(x + 12, y + 20, 15, 3); c.restore(); c.fillText(label, x + 46, y + h / 2 + 1); }
546
+ else c.fillText(label, x + (kind === 'admin' ? 0 : 10) + (kind === 'admin' ? (w - c.measureText(label).width) / 2 : 0), y + h / 2 + 1); }
547
+ c.restore();
548
+ }
549
+
550
+ // ---------- scene 0: chapter 1 ----------
551
+ function sceneCh1(c, t) { chapterCard(c, t, 1, [['Can AI ', C.ink], ['Really Plan?', C.sky]], TL.ch1); }
552
+
553
+ // ---------- scene 1: talking head with side chips and a caption ----------
554
+ function sceneTalk1(c, t) {
555
+ const T1 = TL.talk1; fullARoll(c, t);
556
+ sideChip(c, t, T1.chips[0], T1.chipsOut, 174, (c, x, y) => iconNotes(c, x, y, 20), 'Old school', 'Paper planner');
557
+ sideChip(c, t, T1.chips[1], T1.chipsOut, 298, (c, x, y) => iconCal(c, x, y, 20), 'Built in', 'Calendar app');
558
+ sideChip(c, t, T1.chips[2], T1.chipsOut, 422, (c, x, y) => iconSpark(c, x, y, 21, C.sky), 'New', 'AI assistant');
559
+ const k = T1.cap;
560
+ caption(c, t, [[['This', k[0]], ['one', k[1]], ['can', k[2]]], [['now', k[3]], ['plan', k[4], C.sky], ['your', k[5], C.sky], ['week', k[6], C.sky]]], T1.capOut);
561
+ }
562
+
563
+ // ---------- scene 2: the board (canvas + PiP), three beats ----------
564
+ function sceneBoard(c, t) {
565
+ canvasBG(c); pip(c, t);
566
+ const O = TL.old, M = TL.cmp, K = TL.week;
567
+ // beat 1: two cards and a dashed arrow
568
+ titleChip(c, [['The ', C.ink], ['old', C.sky], [' way', C.ink]], t, O.title, O.out);
569
+ if (t < O.out + 0.3) {
570
+ const a = fadeOut(t, O.out);
571
+ if (t > O.cardA) { c.save(); c.globalAlpha = a; enter(c, t, O.cardA); personCard(c, 96, 210, { tag: 'Done by hand', tagBg: C.sky, name: 'Me, on paper', sub: 'Every Sunday, 2 hours' }); cardFooter(c, 96, 210 + 412, 346, true, 'It works', span(t, O.footA, O.footA + 0.3)); c.restore(); }
572
+ c.save(); c.globalAlpha = a; dashArrow(c, 466, 418, 64, span(t, O.arrow, O.arrow + 0.35)); c.restore();
573
+ if (t > O.cardB) { c.save(); c.globalAlpha = a; enter(c, t, O.cardB); personCard(c, 554, 210, { tag: 'With AI', tagBg: C.purpleSoft, name: 'With AI', sub: 'Never tried it', ai: true }); cardFooter(c, 554, 210 + 412, 346, false, 'Not sure yet', span(t, O.footB, O.footB + 0.3)); c.restore(); }
574
+ }
575
+ // beat 2: comparison table with counters
576
+ titleChip(c, [['How close can ', C.ink], ['AI', C.sky], [' get?', C.ink]], t, M.title, M.out);
577
+ if (t > M.table && t < M.out + 0.3) {
578
+ c.save(); c.globalAlpha = fadeOut(t, M.out); enter(c, t, M.table, 0.4, 22);
579
+ const x = 92, y = 210, w = 780, h = 398, c1 = 220, cw = 280;
580
+ shadowCard(c, x, y, w, h, 22); c.save(); c.beginPath(); rr(c, x, y, w, h, 22); c.clip();
581
+ c.fillStyle = C.skyTint; c.fillRect(x + c1, y, cw, h); c.fillStyle = C.purpleTint; c.fillRect(x + c1 + cw, y, cw, h);
582
+ c.fillStyle = C.line; [98, 198, 298].forEach((ry) => c.fillRect(x, y + ry, w, 1.5)); c.restore();
583
+ avatar(c, x + c1 + 28, y + 22, 56, '#fff', C.sky); c.font = SERIF(31, 600); c.letterSpacing = LS(31); c.fillStyle = C.ink; c.fillText('By hand', x + c1 + 100, y + 60);
584
+ c.fillStyle = '#fff'; rr(c, x + c1 + cw + 34, y + 22, 56, 56, 14); c.fill(); iconSpark(c, x + c1 + cw + 62, y + 50, 18, C.purple); c.fillStyle = C.ink; c.fillText('With AI', x + c1 + cw + 106, y + 60); c.letterSpacing = '0px';
585
+ const rows = [['How close', C.skyTint, C.skyDeep], ['Time spent', '#ece6fb', C.purple], ['Tools', C.tealTint, C.teal]];
586
+ rows.forEach(([s, bg, fg], i) => { const p = outC(span(t, M.rows[i], M.rows[i] + 0.3)); if (p <= 0) return; c.save(); c.globalAlpha *= p; rowPill(c, x + c1 - 24, y + 148 + i * 100, s, bg, fg); c.restore(); });
587
+ const u = outC(span(t, M.cnt[0], M.cnt[1])), vals = [100, 82];
588
+ vals.forEach((v, j) => { const cx = x + c1 + j * cw + cw / 2, n = Math.round(v * (j === 0 ? Math.min(1, u * 1.15) : u));
589
+ c.save(); c.globalAlpha *= span(t, M.cnt[0] - 0.2, M.cnt[0]); const f = SERIF(66, 600), nw = tw(c, String(n), f, LS(66)), pw = tw(c, '%', SERIF(30, 600));
590
+ c.font = f; c.letterSpacing = LS(66); c.fillStyle = C.ink; c.fillText(String(n), cx - (nw + pw + 4) / 2, y + 168); c.font = SERIF(30, 600); c.letterSpacing = '0px'; c.fillStyle = j ? C.purple : C.skyDeep; c.fillText('%', cx - (nw + pw + 4) / 2 + nw + 4, y + 168);
591
+ segBar(c, x + c1 + j * cw + 22, y + 182, cw - 44, n / 100); c.restore(); });
592
+ [[M.r2, ['2 hours', '4 minutes']], [M.r3, ['Paper + pen', 'Calendar + AI']]].forEach(([t0, vv], i) => { const p = outC(span(t, t0, t0 + 0.3)); if (p <= 0) return;
593
+ vv.forEach((s, j) => { c.save(); c.globalAlpha *= p; c.font = SANS(22, 500); c.fillStyle = C.sub; c.textAlign = 'center'; c.fillText(s, x + c1 + j * cw + cw / 2, y + 256 + i * 100 + (1 - p) * 8); c.restore(); }); });
594
+ c.restore();
595
+ }
596
+ // beat 3: the week as an editing timeline, with a ripple delete
597
+ titleChip(c, [['What does AI ', C.ink], ['actually change?', C.sky]], t, K.title, 99, COLX, 88);
598
+ if (t > K.win) {
599
+ c.save(); enter(c, t, K.win, 0.4, 22);
600
+ const x = 72, y = 182, w = 840, h = 362, lc = 138, th = 58, ty = 248;
601
+ shadowCard(c, x, y, w, h, 20); c.save(); c.beginPath(); rr(c, x, y, w, h, 20); c.clip();
602
+ c.fillStyle = C.head; c.fillRect(x, y, w, 40); c.fillStyle = C.labelCol; c.fillRect(x, y + 40, lc, h); c.fillStyle = C.line; c.fillRect(x + lc, y + 40, 1.5, h);
603
+ ['#ddd5cf', '#ddd5cf', '#ddd5cf'].forEach((col, i) => { c.fillStyle = col; c.beginPath(); c.arc(x + 20 + i * 16, y + 20, 5, 0, 7); c.fill(); });
604
+ c.fillStyle = '#fff'; rr(c, x + 78, y + 9, 22, 22, 6); c.fill(); iconSpark(c, x + 89, y + 20, 8, C.sky); c.font = SANS(15, 500); c.fillStyle = C.sub; c.fillText('Week planner', x + 108, y + 25);
605
+ c.fillStyle = C.faint; for (let i = 0; i < 11; i++) c.fillRect(x + lc + 12 + i * 67, y + 52, 1.5, 9);
606
+ c.font = SANS(12, 600); c.fillStyle = C.mute; ['MON', 'TUE', 'WED', 'THU', 'FRI'].forEach((d, i) => c.fillText(d, x + lc + 20 + i * 134, y + 60));
607
+ const tracks = [['Deep work', C.purpleSoft, C.purpleTint], ['Meetings', C.sky, C.skyTint], ['Calls', C.green, C.greenTint], ['Gym', '#56b8d6', C.tealTint], ['Admin', '#e8c45a', C.yellowTint]];
608
+ const cutU = inout(span(t, K.cut[0], K.cut[1])), flag = t > K.flag;
609
+ tracks.forEach(([n, dot, tint], i) => { const yy = ty + i * th + th / 2, act = i === 1 && flag && cutU < 1;
610
+ if (act) { c.fillStyle = C.redTint; rr(c, x + 12, yy - 15, lc - 24, 30, 8); c.fill(); }
611
+ c.fillStyle = dot; c.beginPath(); c.arc(x + 26, yy, 4.5, 0, 7); c.fill(); c.font = SANS(16, 600); c.fillStyle = act ? C.red : C.sub; c.fillText(n, x + 38, yy + 6); });
612
+ const X0 = x + lc + 12, cy = (i) => ty + i * th + 9, ch = 40, ap = (k) => outC(span(t, K.clips + k * 0.07, K.clips + k * 0.07 + 0.3));
613
+ const put = (k, fn) => { const p = ap(k); if (p <= 0) return; c.save(); c.globalAlpha *= p; c.translate(0, (1 - p) * 6); fn(); c.restore(); };
614
+ put(0, () => clip(c, X0 + 8, cy(0), 230, ch, 'deep', 'Write script')); put(1, () => clip(c, X0 + 290, cy(0), 200, ch, 'deep', 'Edit video'));
615
+ // meetings row: two "Doomscroll" blocks get flagged, then removed; the rest slides together
616
+ const segs = [[110, 'meet', 'Team sync'], [104, 'bad', 'Doomscroll'], [120, 'meet', 'Client call'], [100, 'bad', 'Doomscroll'], [100, 'meet', 'Review']];
617
+ let mx = X0 + 8; segs.forEach(([sw, kind, lab], k) => { const bad = kind === 'bad', ww = bad ? sw * (1 - cutU) : sw, kk = bad && flag ? 'bad' : bad ? 'meet' : kind, lb = bad && !flag ? 'Scrolling' : lab;
618
+ put(2 + k, () => clip(c, mx, cy(1), Math.max(0, ww - 4), ch, kk, ww > 60 ? lb : '', { flag: bad && flag })); mx += ww; });
619
+ put(7, () => clip(c, X0 + 8, cy(2), 150, ch, 'call', '')); put(8, () => clip(c, X0 + 170, cy(2), 210, ch, 'call', '')); put(9, () => clip(c, X0 + 392, cy(2), 120, ch, 'call', ''));
620
+ put(10, () => clip(c, X0 + 30, cy(3), 90, ch, 'gym', 'Gym')); put(11, () => clip(c, X0 + 300, cy(3), 90, ch, 'gym', 'Gym')); put(12, () => clip(c, X0 + 560, cy(3), 90, ch, 'gym', 'Gym'));
621
+ [60, 240, 420, 600].forEach((ax, i) => put(13 + i, () => clip(c, X0 + ax, cy(4) + 6, 66, 28, 'admin', 'Inbox')));
622
+ // playhead ("now")
623
+ const px = x + 409; c.fillStyle = '#1b1b1b'; c.fillRect(px - 1, y + 48, 2, h - 48); c.beginPath(); c.moveTo(px - 7, y + 44); c.lineTo(px + 7, y + 44); c.lineTo(px, y + 53); c.closePath(); c.fill();
624
+ c.restore(); c.restore();
625
+ // takeaway pills under the window
626
+ const pills = [[iconBook, 'Protect deep work', C.purple], [iconMinus, 'Cut what drains you', C.red], [iconOk, 'Keep what matters', C.greenDeep]];
627
+ const pw = pills.map(([, s]) => tw(c, s, SANS(16, 600)) + 56), tot = pw.reduce((a, b) => a + b, 0) + 14 * 2; let px0 = x + w / 2 - tot / 2;
628
+ pills.forEach(([ic, s, col], i) => { const p = outC(span(t, K.pills[i], K.pills[i] + 0.3)); if (p > 0) { c.save(); c.globalAlpha *= p; c.translate(0, (1 - p) * 10);
629
+ shadowCard(c, px0, 566, pw[i], 40, 12, { shadow: 'rgba(96,64,44,0.08)', blur: 16, offY: 4 }); ic(c, px0 + 22, 586, 8, col); c.font = SANS(16, 600); c.fillStyle = C.sub; c.fillText(s, px0 + 40, 592); c.restore(); } px0 += pw[i] + 14; });
630
+ }
631
+ }
632
+
633
+ // ---------- scene 3: talking head again, one caption ----------
634
+ function sceneTalk2(c, t) {
635
+ fullARoll(c, t); const k = TL.talk2.cap;
636
+ caption(c, t, [[['So', k[0]], ['what', k[1]], ['does', k[2]], ['a', k[3]]], [['good', k[4], C.sky], ['week', k[5], C.sky], ['look', k[6]], ['like?', k[7]]]], TL.talk2.capOut);
637
+ }
638
+ // ---------- scene 4: chapter 2 ----------
639
+ function sceneCh2(c, t) { chapterCard(c, t, 2, [['What Makes A ', C.ink], ['Good Week?', C.sky]], TL.ch2); }
640
+
641
+ const SCENES = [sceneCh1, sceneTalk1, sceneBoard, sceneTalk2, sceneCh2];
642
+ // compositor: hard cuts, and a vertical push (old frame slides up and out, new frame follows from below)
643
+ function explainer(ctx, t) {
644
+ ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.globalAlpha = 1; ctx.globalCompositeOperation = 'source-over'; ctx.filter = 'none';
645
+ ctx.clearRect(0, 0, W, HH); if (!OVERLAY) { ctx.fillStyle = '#000'; ctx.fillRect(0, 0, W, HH); }
646
+ let idx = 0; for (const cu of CUTS) if (t >= cu.t) idx++;
647
+ const cut = CUTS.find((cu) => cu.d > 0 && t >= cu.t && t < cu.t + cu.d);
648
+ if (!cut) { ctx.drawImage(sceneLayer(LA, SCENES[idx], t), 0, 0); return; }
649
+ const e = inout((t - cut.t) / cut.d), A = sceneLayer(LA, SCENES[idx - 1], t), B = sceneLayer(LB, SCENES[idx], t);
650
+ ctx.drawImage(A, 0, -e * HH); ctx.drawImage(B, 0, (1 - e) * HH);
651
+ }
652
+
653
+ // =================================== SOUND SCORE ===================================
654
+ // Quiet and tactile: soft paper slides for cards and chips, low wooden taps for list items,
655
+ // a breathy swell for the vertical pushes, a light keyboard patter and one warm pad under the board.
656
+ // Built to sit under a real voice: no chimes, bells or pings, never more than two sounds at once.
657
+ function scoreSound(k) {
658
+ const O = TL.old, M = TL.cmp, K = TL.week, T1 = TL.talk1;
659
+ const tap = (t, g = 1, pan = 0) => { k.voice(t, { f: [[0, 120], [0.12, 60]], dur: 0.2, gain: 0.16 * g, pan, soft: true }); k.hiss(t, { color: 'brown', dur: 0.06, filter: 'lowpass', ff: 650, gain: 0.06 * g, pan, soft: true }); };
660
+ const slide = (t, g = 1, pan = 0) => k.hiss(t, { color: 'pink', dur: 0.32, filter: 'bandpass', ff: [[0, 380], [0.3, 1100]], q: 0.8, gain: 0.08 * g, a: 0.12, pan, soft: true });
661
+ const swell = (t, g = 1) => k.hiss(t - 0.05, { color: 'pink', dur: 0.6, filter: 'bandpass', ff: [[0, 300], [0.35, 1300], [0.6, 380]], q: 0.7, gain: 0.13 * g, a: 0.32 });
662
+ // chapter card 1, then the vertical push into the A-roll
663
+ slide(TL.ch1.title, 0.8); tap(TL.ch1.tile, 0.8); slide(TL.ch1.dash, 0.5); swell(CUTS[0].t);
664
+ T1.chips.forEach((t, i) => slide(t, 0.9, -0.5 + i * 0.1));
665
+ // the board: one quiet pad from the first title to the last pill
666
+ k.voice(O.title - 0.2, { type: 'triangle', f: 'D3', dur: K.pills[2] - O.title + 1.4, gain: 0.025, a: 1.2, hold: K.pills[2] - O.title - 0.6, filter: 'lowpass', ff: 700, verb: 0.3, bus: 'music' });
667
+ k.voice(O.title - 0.2, { type: 'triangle', f: 'A3', dur: K.pills[2] - O.title + 1.4, gain: 0.018, a: 1.2, hold: K.pills[2] - O.title - 0.6, filter: 'lowpass', ff: 700, verb: 0.3, pan: 0.3, bus: 'music' });
668
+ slide(O.title, 0.7); slide(O.cardA, 0.9, -0.4); tap(O.footA, 0.6, -0.4); slide(O.arrow, 0.5); slide(O.cardB, 0.9, 0.4); tap(O.footB, 0.6, 0.4);
669
+ slide(M.title, 0.7); slide(M.table, 0.9); M.rows.forEach((t, i) => tap(t, 0.5, -0.2 + i * 0.2));
670
+ const r = CM.rng('cnt'); for (let x = M.cnt[0]; x < M.cnt[1]; x += 0.07 + r() * 0.05) k.hiss(x, { dur: 0.014, filter: 'bandpass', ff: 1500 + r() * 500, q: 1.8, gain: 0.05, soft: true });
671
+ tap(M.cnt[1], 0.8); tap(M.r2, 0.6); tap(M.r3, 0.6);
672
+ slide(K.title, 0.7); slide(K.win, 0.9); slide(K.clips, 0.5); tap(K.flag, 0.8, -0.2);
673
+ k.hiss(K.cut[0], { color: 'pink', dur: K.cut[1] - K.cut[0], filter: 'bandpass', ff: [[0, 1200], [K.cut[1] - K.cut[0], 420]], q: 0.9, gain: 0.07, a: 0.1 });
674
+ K.pills.forEach((t, i) => tap(t, 0.55, -0.3 + i * 0.3));
675
+ // chapter card 2
676
+ swell(CUTS[3].t); slide(TL.ch2.title, 0.8); tap(TL.ch2.tile, 0.8); slide(TL.ch2.dash, 0.5);
677
+ }
678
+
679
+
680
+ // =================================== PLAYER ===================================
681
+ const cvs = document.getElementById('stage'), ctx = cvs.getContext('2d');
682
+ const DURATION = TL.D;
683
+ // seek(t) draws frame t. With an A-roll loaded and the player paused, it returns a promise that resolves once the video frame is ready.
684
+ window.seek = (t) => {
685
+ t = clamp(t, 0, DURATION);
686
+ if (AR && !playing) return new Promise((res) => { const v = AR.el, target = Math.min(t, Math.max(0, v.duration - 0.02));
687
+ if (Math.abs(v.currentTime - target) < 0.004) { explainer(ctx, t); res(); return; }
688
+ v.addEventListener('seeked', () => { explainer(ctx, t); res(); }, { once: true }); v.currentTime = target; });
689
+ explainer(ctx, t);
690
+ };
691
+ window.DURATION = DURATION;
692
+ window.scoreSound = scoreSound;
693
+ window.SFX = SFX;
694
+ window.loadARoll = (url) => new Promise((res, rej) => { const v = document.createElement('video'); v.muted = true; v.playsInline = true; v.preload = 'auto'; v.crossOrigin = 'anonymous';
695
+ v.addEventListener('loadeddata', () => { AR = { el: v }; res(); }, { once: true }); v.addEventListener('error', rej, { once: true }); v.src = url; });
696
+ window.setOverlay = (on) => { OVERLAY = !!on; };
697
+ window.PIP = PIP;
698
+
699
+ const ui = { play: document.getElementById('play'), scrub: document.getElementById('scrub'), time: document.getElementById('time'), sound: document.getElementById('sound'), loop: document.getElementById('loop'), vo: document.getElementById('vofile'), note: document.getElementById('vonote'), ar: document.getElementById('arfile'), ov: document.getElementById('overlay') };
700
+ let T = 0, playing = false, last = 0, soundOn = true, loopOn = true, stopSound = null, voAudio = null;
701
+ const fmt = (t) => t.toFixed(2) + ' / ' + DURATION.toFixed(2);
702
+ function draw() { const r = window.seek(T); ui.scrub.value = T; ui.time.textContent = fmt(T); return r; }
703
+ function startAudio() {
704
+ stopAudio(); if (!playing) return;
705
+ if (soundOn) stopSound = SFX.live(scoreSound, T, { voiceover: !!voAudio });
706
+ if (voAudio) { try { voAudio.currentTime = T; voAudio.play().catch(() => {}); } catch (e) {} }
707
+ if (AR) { try { AR.el.currentTime = Math.min(T, AR.el.duration - 0.02); AR.el.play().catch(() => {}); } catch (e) {} }
708
+ }
709
+ function stopAudio() { if (stopSound) { stopSound(); stopSound = null; } if (voAudio) voAudio.pause(); if (AR) AR.el.pause(); }
710
+ function setPlaying(p) { playing = p; ui.play.textContent = p ? 'Pause' : 'Play'; last = performance.now(); if (p) startAudio(); else stopAudio(); }
711
+ function tick(now) {
712
+ if (playing) {
713
+ T += (now - last) / 1000; last = now;
714
+ if (T >= DURATION) { if (loopOn) { T = 0; startAudio(); } else { T = DURATION; setPlaying(false); } }
715
+ draw();
716
+ }
717
+ requestAnimationFrame(tick);
718
+ }
719
+ ui.play.addEventListener('click', () => { if (!playing && T >= DURATION) T = 0; setPlaying(!playing); });
720
+ ui.scrub.addEventListener('input', () => { T = parseFloat(ui.scrub.value); draw(); if (playing) startAudio(); });
721
+ ui.sound.addEventListener('click', () => { soundOn = !soundOn; ui.sound.setAttribute('aria-pressed', soundOn); ui.sound.textContent = soundOn ? 'Sound on' : 'Sound off'; if (playing) startAudio(); });
722
+ ui.loop.addEventListener('click', () => { loopOn = !loopOn; ui.loop.setAttribute('aria-pressed', loopOn); });
723
+ ui.vo.addEventListener('change', () => {
724
+ const f = ui.vo.files && ui.vo.files[0]; if (!f) return;
725
+ if (voAudio) { voAudio.pause(); URL.revokeObjectURL(voAudio.src); }
726
+ voAudio = new Audio(URL.createObjectURL(f)); ui.note.textContent = 'Voiceover loaded: ' + f.name + '. Effects use the lighter mix.';
727
+ if (playing) startAudio();
728
+ });
729
+ ui.ar.addEventListener('change', async () => {
730
+ const f = ui.ar.files && ui.ar.files[0]; if (!f) return;
731
+ try { await window.loadARoll(URL.createObjectURL(f)); ui.note.textContent = 'A-roll loaded: ' + f.name + '. It plays from 0:00, in sync with the timeline.'; draw(); if (playing) startAudio(); }
732
+ catch (e) { ui.note.textContent = 'That clip could not be read here. Try an MP4 (H.264).'; }
733
+ });
734
+ ui.ov.addEventListener('click', () => { OVERLAY = !OVERLAY; ui.ov.setAttribute('aria-pressed', OVERLAY); cvs.parentElement.style.background = OVERLAY ? 'repeating-conic-gradient(#2a2a2e 0 25%, #1d1d21 0 50%) 0 0 / 24px 24px' : '#000'; draw(); });
735
+ (async () => {
736
+ try { await Promise.all(['560 60px "Fraunces"', '600 30px "Fraunces"', '500 20px "Inter"', '600 20px "Inter"'].map((f) => document.fonts.load(f, 'AaZz09'))); await document.fonts.ready; } catch (e) {}
737
+ T = 18.9; draw(); window.__ready = true;
738
+ requestAnimationFrame((n) => { last = n; tick(n); });
739
+ })();
740
+ </script>
741
+
742
+ </body></html>