dsh-hyperframes 0.3.2 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (375) hide show
  1. package/README.en.md +5 -4
  2. package/README.md +6 -5
  3. package/lib/index.d.ts +1 -1
  4. package/lib/index.js +1 -0
  5. package/package.json +2 -2
  6. package/skills/embedded-captions/SKILL.md +28 -3
  7. package/skills/embedded-captions/references/aesthetic-principles.md +2 -3
  8. package/skills/embedded-captions/references/rail.md +1 -1
  9. package/skills/embedded-captions/scripts/check-occlusion.cjs +4 -1
  10. package/skills/embedded-captions/scripts/check-overflow.cjs +1 -0
  11. package/skills/embedded-captions/scripts/check-rail-climax.cjs +5 -1
  12. package/skills/embedded-captions/scripts/fixtures/heroless/theme.json +11 -0
  13. package/skills/embedded-captions/scripts/hf-cli.cjs +33 -0
  14. package/skills/embedded-captions/scripts/make-theme.cjs +95 -57
  15. package/skills/embedded-captions/scripts/make-theme.test.mjs +131 -0
  16. package/skills/embedded-captions/scripts/matte.cjs +1 -13
  17. package/skills/embedded-captions/scripts/measure-layout.cjs +2 -1
  18. package/skills/embedded-captions/scripts/preview-frames.cjs +39 -11
  19. package/skills/embedded-captions/scripts/preview-frames.test.mjs +24 -0
  20. package/skills/embedded-captions/scripts/render-and-composite.sh +8 -52
  21. package/skills/embedded-captions/scripts/safe-zones.cjs +4 -1
  22. package/skills/embedded-captions/scripts/transcribe.cjs +5 -14
  23. package/skills/embedded-captions/scripts/transcribe.test.mjs +41 -0
  24. package/skills/faceless-explainer/SKILL.md +20 -16
  25. package/skills/faceless-explainer/references/story-design.md +1 -1
  26. package/skills/faceless-explainer/scripts/assemble-index.mjs +6 -4
  27. package/skills/faceless-explainer/scripts/assemble-index.test.mjs +57 -2
  28. package/skills/faceless-explainer/scripts/audio.mjs +2 -0
  29. package/skills/faceless-explainer/scripts/build-frame.mjs +6 -3
  30. package/skills/faceless-explainer/scripts/captions.mjs +7 -4
  31. package/skills/faceless-explainer/scripts/frame-packets.mjs +4 -4
  32. package/skills/faceless-explainer/scripts/lib/bgm-volume.mjs +4 -0
  33. package/skills/faceless-explainer/scripts/lib/captured-fonts.mjs +58 -0
  34. package/skills/{hyperframes-core → faceless-explainer}/scripts/lib/frame-packets-core.mjs +5 -23
  35. package/skills/faceless-explainer/scripts/lib/storyboard.mjs +1 -1
  36. package/skills/faceless-explainer/scripts/lib/transitions.json +3 -3
  37. package/skills/faceless-explainer/scripts/transitions.mjs +1 -0
  38. package/skills/faceless-explainer/scripts/transitions.test.mjs +2 -0
  39. package/skills/faceless-explainer/sub-agents/frame-worker.md +1 -1
  40. package/skills/figma/SKILL.md +2 -0
  41. package/skills/general-video/SKILL.md +13 -11
  42. package/skills/general-video/scripts/frame-packets.mjs +4 -4
  43. package/skills/general-video/scripts/lib/frame-packets-core.mjs +194 -0
  44. package/skills/general-video/sub-agents/frame-worker.md +1 -1
  45. package/skills/hyperframes/SKILL.md +40 -30
  46. package/skills/{hyperframes-core → hyperframes}/references/brief-contract.md +15 -15
  47. package/skills/{hyperframes-core → hyperframes}/references/brief-format.md +8 -8
  48. package/skills/hyperframes/references/capability-menu.md +2 -2
  49. package/skills/{hyperframes-core → hyperframes}/references/frame-worker-core.md +1 -1
  50. package/skills/hyperframes/references/intent-interview.md +16 -16
  51. package/skills/hyperframes/references/plugin-installation.md +43 -0
  52. package/skills/{hyperframes-core → hyperframes}/references/production-loop.md +11 -11
  53. package/skills/hyperframes/references/review-loop.md +37 -0
  54. package/skills/hyperframes/references/route-briefs.md +1 -1
  55. package/skills/hyperframes/references/routes/motion-graphics.md +1 -1
  56. package/skills/{hyperframes-core → hyperframes}/references/script-format.md +3 -3
  57. package/skills/hyperframes/references/skill-lifecycle.md +2 -0
  58. package/skills/{hyperframes-core → hyperframes}/references/storyboard-format.md +3 -34
  59. package/skills/hyperframes/scripts/lib/frame-packets-core.mjs +194 -0
  60. package/skills/hyperframes/scripts/plugin-cli.mjs +88 -0
  61. package/skills/hyperframes/scripts/plugin-cli.test.mjs +117 -0
  62. package/skills/hyperframes-animation/SKILL.md +5 -1
  63. package/skills/hyperframes-animation/adapters/gsap.md +1 -1
  64. package/skills/hyperframes-animation/adapters/lottie.md +15 -2
  65. package/skills/hyperframes-animation/adapters/three.md +14 -0
  66. package/skills/hyperframes-animation/blueprints/titlecard-reveal.md +1 -1
  67. package/skills/hyperframes-animation/references/motion-blur.md +133 -0
  68. package/skills/hyperframes-animation/rules/cursor-click-ripple.md +1 -1
  69. package/skills/hyperframes-animation/rules/dynamic-content-sequencing.md +1 -1
  70. package/skills/hyperframes-animation/rules/hacker-flip-3d.md +1 -1
  71. package/skills/hyperframes-animation/rules/kinetic-beat-slam.md +2 -2
  72. package/skills/hyperframes-animation/rules/motion-blur-streak.md +1 -1
  73. package/skills/hyperframes-animation/rules/vertical-spring-ticker.md +1 -1
  74. package/skills/hyperframes-animation/scripts/package-loader.mjs +47 -16
  75. package/skills/hyperframes-animation/scripts/package-loader.test.mjs +52 -0
  76. package/skills/hyperframes-animation/techniques.md +1 -1
  77. package/skills/hyperframes-animation/transitions/TRANSITION-REGISTRY.md +3 -3
  78. package/skills/hyperframes-animation/transitions/css-push.md +4 -4
  79. package/skills/hyperframes-audio/SKILL.md +30 -22
  80. package/skills/hyperframes-audio/scripts/carve.mjs +6 -3
  81. package/skills/hyperframes-audio/scripts/carve.test.mjs +16 -1
  82. package/skills/hyperframes-cli/SKILL.md +44 -35
  83. package/skills/hyperframes-cli/references/init-and-scaffold.md +8 -6
  84. package/skills/hyperframes-cli/references/lint-validate-inspect.md +3 -3
  85. package/skills/hyperframes-cli/references/preview-render.md +35 -32
  86. package/skills/hyperframes-cli/references/upgrade-info-misc.md +50 -1
  87. package/skills/hyperframes-core/SKILL.md +30 -24
  88. package/skills/hyperframes-core/references/composition-patterns.md +3 -42
  89. package/skills/hyperframes-core/references/creator-editing-recipes.md +131 -7
  90. package/skills/hyperframes-core/references/data-attributes.md +11 -11
  91. package/skills/hyperframes-core/references/determinism-rules.md +2 -19
  92. package/skills/hyperframes-core/references/full-screen-motion.md +0 -9
  93. package/skills/hyperframes-core/references/minimal-composition.md +2 -2
  94. package/skills/hyperframes-core/references/sub-compositions.md +3 -66
  95. package/skills/hyperframes-core/references/tailwind.md +1 -20
  96. package/skills/hyperframes-core/references/tracks-and-clips.md +2 -6
  97. package/skills/hyperframes-core/references/variables-and-media.md +3 -3
  98. package/skills/hyperframes-creative/SKILL.md +2 -0
  99. package/skills/hyperframes-creative/references/house-style.md +15 -15
  100. package/skills/hyperframes-creative/references/story-spine.md +3 -1
  101. package/skills/hyperframes-creative/references/storyboard-recipe.md +57 -0
  102. package/skills/hyperframes-creative/references/typography.md +1 -1
  103. package/skills/hyperframes-creative/scripts/package-loader.mjs +47 -16
  104. package/skills/hyperframes-creative/scripts/package-loader.test.mjs +52 -0
  105. package/skills/hyperframes-keyframes/SKILL.md +4 -2
  106. package/skills/hyperframes-registry/SKILL.md +3 -1
  107. package/skills/hyperframes-registry/references/contributing.md +8 -2
  108. package/skills/hyperframes-registry/references/discovery.md +20 -34
  109. package/skills/hyperframes-studio/SKILL.md +77 -0
  110. package/skills/media-use/SKILL.md +14 -12
  111. package/skills/media-use/audio/references/captions/authoring.md +4 -0
  112. package/skills/media-use/audio/references/remove-background.md +1 -1
  113. package/skills/media-use/audio/references/tts-to-captions.md +11 -2
  114. package/skills/media-use/audio/references/tts.md +84 -6
  115. package/skills/media-use/audio/scripts/audio.mjs +15 -6
  116. package/skills/media-use/audio/scripts/gemini-pipeline.test.mjs +113 -0
  117. package/skills/media-use/audio/scripts/lib/audio-meta.mjs +39 -0
  118. package/skills/media-use/audio/scripts/lib/audio-meta.test.mjs +136 -0
  119. package/skills/media-use/audio/scripts/lib/bgm-volume.mjs +4 -0
  120. package/skills/media-use/audio/scripts/lib/bgm.mjs +2 -6
  121. package/skills/media-use/audio/scripts/lib/gemini-auth.mjs +43 -0
  122. package/skills/media-use/audio/scripts/lib/gemini-auth.py +52 -0
  123. package/skills/media-use/audio/scripts/lib/gemini-auth.test.mjs +86 -0
  124. package/skills/media-use/audio/scripts/lib/gemini-auth_test.py +90 -0
  125. package/skills/media-use/audio/scripts/lib/gemini-tts.mjs +122 -0
  126. package/skills/media-use/audio/scripts/lib/gemini-tts.test.mjs +243 -0
  127. package/skills/media-use/audio/scripts/lib/heygen.mjs +2 -1
  128. package/skills/media-use/audio/scripts/lib/tts.mjs +15 -3
  129. package/skills/media-use/audio/scripts/wait-bgm.mjs +8 -4
  130. package/skills/media-use/audio/scripts/wait-bgm.test.mjs +65 -0
  131. package/skills/media-use/references/audio.md +3 -2
  132. package/skills/media-use/references/grading.md +7 -7
  133. package/skills/media-use/references/media-treatment-recipes.md +1 -1
  134. package/skills/media-use/references/memory.md +2 -2
  135. package/skills/media-use/references/meta.md +2 -2
  136. package/skills/media-use/references/operations.md +15 -13
  137. package/skills/media-use/references/resolve.md +22 -11
  138. package/skills/media-use/references/setup-providers.md +11 -11
  139. package/skills/media-use/scripts/audio-duck.mjs +19 -27
  140. package/skills/media-use/scripts/compatibility.test.mjs +96 -0
  141. package/skills/media-use/scripts/lib/config-lock.mjs +45 -0
  142. package/skills/media-use/scripts/lib/duck.mjs +16 -10
  143. package/skills/media-use/scripts/lib/media-fetch.mjs +85 -0
  144. package/skills/media-use/scripts/lib/media-home.mjs +20 -0
  145. package/skills/media-use/scripts/lib/npx-sync.mjs +28 -2
  146. package/skills/media-use/scripts/lib/prefs-store.mjs +2 -2
  147. package/skills/media-use/scripts/lib/recipe-store.mjs +2 -2
  148. package/skills/media-use/scripts/lib/telemetry.mjs +29 -41
  149. package/skills/media-use/scripts/lib/transcriptCutFade.mjs +21 -0
  150. package/skills/media-use/scripts/prefs.mjs +1 -1
  151. package/skills/media-use/scripts/recipe.mjs +1 -1
  152. package/skills/media-use/scripts/resolve-plugin.test.mjs +62 -0
  153. package/skills/media-use/scripts/resolve.mjs +27 -1267
  154. package/skills/media-use/scripts/transcribe.mjs +39 -25
  155. package/skills/media-use/scripts/transcribe.test.mjs +112 -0
  156. package/skills/media-use/scripts/transcript-cut.mjs +39 -8
  157. package/skills/media-use/scripts/transcript-cut.test.mjs +117 -0
  158. package/skills/motion-graphics/SKILL.md +3 -1
  159. package/skills/motion-graphics/agents/builder.md +1 -0
  160. package/skills/motion-graphics/agents/director.md +2 -1
  161. package/skills/motion-graphics/catalog-map.md +25 -13
  162. package/skills/motion-graphics/categories/charts/module.md +2 -1
  163. package/skills/motion-graphics/categories/lower-thirds/module.md +4 -0
  164. package/skills/motion-graphics/categories/news/module.md +1 -1
  165. package/skills/motion-graphics/references/motion-vocabulary.md +4 -0
  166. package/skills/music-to-video/SKILL.md +8 -6
  167. package/skills/music-to-video/references/montage.md +3 -6
  168. package/skills/music-to-video/references/motion-primitives/3d-card-flip/index.html +10 -111
  169. package/skills/music-to-video/references/motion-primitives/3d-card-flip/scene.html +119 -0
  170. package/skills/music-to-video/references/motion-primitives/bg-flow-field/index.html +11 -284
  171. package/skills/music-to-video/references/motion-primitives/bg-flow-field/scene.html +294 -0
  172. package/skills/music-to-video/references/motion-primitives/binary-decrypt/index.html +10 -76
  173. package/skills/music-to-video/references/motion-primitives/binary-decrypt/scene.html +85 -0
  174. package/skills/music-to-video/references/motion-primitives/blur-resolve/index.html +10 -52
  175. package/skills/music-to-video/references/motion-primitives/blur-resolve/scene.html +60 -0
  176. package/skills/music-to-video/references/motion-primitives/braam-punch/index.html +10 -92
  177. package/skills/music-to-video/references/motion-primitives/braam-punch/scene.html +100 -0
  178. package/skills/music-to-video/references/motion-primitives/chromatic-split/index.html +10 -103
  179. package/skills/music-to-video/references/motion-primitives/chromatic-split/scene.html +111 -0
  180. package/skills/music-to-video/references/motion-primitives/chrome-sweep/index.html +10 -60
  181. package/skills/music-to-video/references/motion-primitives/chrome-sweep/scene.html +68 -0
  182. package/skills/music-to-video/references/motion-primitives/counting-punch/index.html +10 -110
  183. package/skills/music-to-video/references/motion-primitives/counting-punch/scene.html +119 -0
  184. package/skills/music-to-video/references/motion-primitives/crash-zoom-in/index.html +10 -112
  185. package/skills/music-to-video/references/motion-primitives/crash-zoom-in/scene.html +120 -0
  186. package/skills/music-to-video/references/motion-primitives/datamosh-smear/index.html +10 -121
  187. package/skills/music-to-video/references/motion-primitives/datamosh-smear/scene.html +131 -0
  188. package/skills/music-to-video/references/motion-primitives/directional-fill/index.html +10 -90
  189. package/skills/music-to-video/references/motion-primitives/directional-fill/scene.html +103 -0
  190. package/skills/music-to-video/references/motion-primitives/dolly-zoom/index.html +10 -94
  191. package/skills/music-to-video/references/motion-primitives/dolly-zoom/scene.html +102 -0
  192. package/skills/music-to-video/references/motion-primitives/electric-arc/index.html +10 -100
  193. package/skills/music-to-video/references/motion-primitives/electric-arc/scene.html +105 -0
  194. package/skills/music-to-video/references/motion-primitives/flash-cut/index.html +10 -89
  195. package/skills/music-to-video/references/motion-primitives/flash-cut/scene.html +97 -0
  196. package/skills/music-to-video/references/motion-primitives/gooey-metaball/index.html +10 -197
  197. package/skills/music-to-video/references/motion-primitives/gooey-metaball/scene.html +206 -0
  198. package/skills/music-to-video/references/motion-primitives/hard-cut/index.html +10 -74
  199. package/skills/music-to-video/references/motion-primitives/hard-cut/scene.html +82 -0
  200. package/skills/music-to-video/references/motion-primitives/hypercut-whip/index.html +10 -36
  201. package/skills/music-to-video/references/motion-primitives/hypercut-whip/scene.html +44 -0
  202. package/skills/music-to-video/references/motion-primitives/iris-open/index.html +10 -61
  203. package/skills/music-to-video/references/motion-primitives/iris-open/scene.html +69 -0
  204. package/skills/music-to-video/references/motion-primitives/kinetic-letter-in/index.html +10 -55
  205. package/skills/music-to-video/references/motion-primitives/kinetic-letter-in/scene.html +64 -0
  206. package/skills/music-to-video/references/motion-primitives/liquid-morph/index.html +10 -88
  207. package/skills/music-to-video/references/motion-primitives/liquid-morph/scene.html +96 -0
  208. package/skills/music-to-video/references/motion-primitives/mask-reveal/index.html +10 -66
  209. package/skills/music-to-video/references/motion-primitives/mask-reveal/scene.html +74 -0
  210. package/skills/music-to-video/references/motion-primitives/mosaic-pack/index.html +10 -81
  211. package/skills/music-to-video/references/motion-primitives/mosaic-pack/scene.html +89 -0
  212. package/skills/music-to-video/references/motion-primitives/neon-flicker/index.html +10 -65
  213. package/skills/music-to-video/references/motion-primitives/neon-flicker/scene.html +73 -0
  214. package/skills/music-to-video/references/motion-primitives/outline-to-fill/index.html +10 -74
  215. package/skills/music-to-video/references/motion-primitives/outline-to-fill/scene.html +82 -0
  216. package/skills/music-to-video/references/motion-primitives/palette-flip/index.html +10 -89
  217. package/skills/music-to-video/references/motion-primitives/palette-flip/scene.html +97 -0
  218. package/skills/music-to-video/references/motion-primitives/particle-burst/index.html +10 -98
  219. package/skills/music-to-video/references/motion-primitives/particle-burst/scene.html +106 -0
  220. package/skills/music-to-video/references/motion-primitives/pixel-dissolve/index.html +10 -78
  221. package/skills/music-to-video/references/motion-primitives/pixel-dissolve/scene.html +86 -0
  222. package/skills/music-to-video/references/motion-primitives/radial-burst-lines/index.html +10 -117
  223. package/skills/music-to-video/references/motion-primitives/radial-burst-lines/scene.html +130 -0
  224. package/skills/music-to-video/references/motion-primitives/screen-shake/index.html +10 -70
  225. package/skills/music-to-video/references/motion-primitives/screen-shake/scene.html +78 -0
  226. package/skills/music-to-video/references/motion-primitives/slot-machine-reveal/index.html +10 -87
  227. package/skills/music-to-video/references/motion-primitives/slot-machine-reveal/scene.html +100 -0
  228. package/skills/music-to-video/references/motion-primitives/spotlight-sweep/index.html +10 -94
  229. package/skills/music-to-video/references/motion-primitives/spotlight-sweep/scene.html +102 -0
  230. package/skills/music-to-video/references/motion-primitives/staggered-exit/index.html +10 -74
  231. package/skills/music-to-video/references/motion-primitives/staggered-exit/scene.html +82 -0
  232. package/skills/music-to-video/references/motion-primitives/text-spectral-rays/index.html +11 -271
  233. package/skills/music-to-video/references/motion-primitives/text-spectral-rays/scene.html +280 -0
  234. package/skills/music-to-video/references/motion-primitives/text-wave-distort/index.html +10 -92
  235. package/skills/music-to-video/references/motion-primitives/text-wave-distort/scene.html +106 -0
  236. package/skills/music-to-video/references/motion-primitives/tile-mosaic/index.html +10 -101
  237. package/skills/music-to-video/references/motion-primitives/tile-mosaic/scene.html +109 -0
  238. package/skills/music-to-video/references/motion-primitives/typewriter-reveal/index.html +10 -79
  239. package/skills/music-to-video/references/motion-primitives/typewriter-reveal/scene.html +91 -0
  240. package/skills/music-to-video/references/motion-primitives/word-grid-burst/index.html +10 -83
  241. package/skills/music-to-video/references/motion-primitives/word-grid-burst/scene.html +96 -0
  242. package/skills/music-to-video/references/planning.md +2 -2
  243. package/skills/music-to-video/scripts/lib/storyboard.mjs +1 -1
  244. package/skills/music-to-video/sub-agents/frame-worker.md +2 -2
  245. package/skills/pr-to-video/SKILL.md +20 -16
  246. package/skills/pr-to-video/references/code-vocabulary.md +14 -12
  247. package/skills/pr-to-video/references/story-design.md +1 -1
  248. package/skills/pr-to-video/scripts/assemble-index.mjs +6 -4
  249. package/skills/pr-to-video/scripts/assemble-index.test.mjs +57 -2
  250. package/skills/pr-to-video/scripts/audio.mjs +2 -0
  251. package/skills/pr-to-video/scripts/build-frame.mjs +6 -3
  252. package/skills/pr-to-video/scripts/captions.mjs +7 -4
  253. package/skills/pr-to-video/scripts/captions.test.mjs +41 -0
  254. package/skills/pr-to-video/scripts/frame-packets.mjs +4 -4
  255. package/skills/pr-to-video/scripts/lib/bgm-volume.mjs +4 -0
  256. package/skills/pr-to-video/scripts/lib/captured-fonts.mjs +58 -0
  257. package/skills/pr-to-video/scripts/lib/frame-packets-core.mjs +194 -0
  258. package/skills/pr-to-video/scripts/lib/storyboard.mjs +1 -1
  259. package/skills/pr-to-video/scripts/lib/transitions.json +3 -3
  260. package/skills/pr-to-video/scripts/transitions.mjs +7 -5
  261. package/skills/pr-to-video/sub-agents/frame-worker.md +1 -1
  262. package/skills/product-launch-video/SKILL.md +20 -16
  263. package/skills/product-launch-video/references/story-design.md +1 -1
  264. package/skills/product-launch-video/scripts/assemble-index.mjs +6 -4
  265. package/skills/product-launch-video/scripts/assemble-index.test.mjs +57 -2
  266. package/skills/product-launch-video/scripts/audio.mjs +2 -0
  267. package/skills/product-launch-video/scripts/audio.test.mjs +16 -0
  268. package/skills/product-launch-video/scripts/build-frame-subsets.test.mjs +152 -0
  269. package/skills/product-launch-video/scripts/build-frame.mjs +6 -3
  270. package/skills/product-launch-video/scripts/captions.mjs +7 -4
  271. package/skills/product-launch-video/scripts/frame-packets.mjs +4 -4
  272. package/skills/product-launch-video/scripts/lib/bgm-volume.mjs +4 -0
  273. package/skills/product-launch-video/scripts/lib/captured-fonts.mjs +58 -0
  274. package/skills/product-launch-video/scripts/lib/frame-packets-core.mjs +194 -0
  275. package/skills/product-launch-video/scripts/lib/storyboard.mjs +1 -1
  276. package/skills/product-launch-video/scripts/lib/transitions.json +3 -3
  277. package/skills/product-launch-video/scripts/transitions.mjs +7 -5
  278. package/skills/product-launch-video/scripts/transitions.test.mjs +68 -0
  279. package/skills/product-launch-video/sub-agents/frame-worker.md +1 -1
  280. package/skills/remotion-to-hyperframes/SKILL.md +7 -4
  281. package/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/expected.json +5 -5
  282. package/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/hf-src/compositions/title.html +31 -0
  283. package/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/hf-src/index.html +10 -25
  284. package/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/README.md +8 -8
  285. package/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/expected.json +9 -9
  286. package/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/hf-src/compositions/scene-1.html +35 -0
  287. package/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/hf-src/compositions/scene-2.html +35 -0
  288. package/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/hf-src/compositions/scene-3.html +36 -0
  289. package/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/hf-src/index.html +28 -71
  290. package/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/expected.json +3 -3
  291. package/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/hf-src/compositions/scene-1.html +52 -0
  292. package/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/hf-src/compositions/scene-2.html +99 -0
  293. package/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/hf-src/compositions/scene-3.html +55 -0
  294. package/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/hf-src/index.html +13 -212
  295. package/skills/remotion-to-hyperframes/references/api-map.md +16 -16
  296. package/skills/remotion-to-hyperframes/references/limitations.md +7 -7
  297. package/skills/remotion-to-hyperframes/references/lottie.md +5 -7
  298. package/skills/remotion-to-hyperframes/references/media.md +3 -3
  299. package/skills/remotion-to-hyperframes/references/parameters.md +5 -0
  300. package/skills/remotion-to-hyperframes/references/sequencing.md +71 -18
  301. package/skills/slideshow/SKILL.md +4 -1
  302. package/skills/slideshow/references/standalone-harness.md +0 -3
  303. package/skills/talking-head-recut/SKILL.md +10 -1
  304. package/skills/hyperframes-core/references/review-loop.md +0 -41
  305. package/skills/media-use/scripts/lib/adopt.mjs +0 -128
  306. package/skills/media-use/scripts/lib/adopt.test.mjs +0 -95
  307. package/skills/media-use/scripts/lib/bgm-provider.mjs +0 -20
  308. package/skills/media-use/scripts/lib/brand-provider.mjs +0 -59
  309. package/skills/media-use/scripts/lib/bundled-sfx-provider.mjs +0 -108
  310. package/skills/media-use/scripts/lib/bundled-sfx-provider.test.mjs +0 -85
  311. package/skills/media-use/scripts/lib/cache.mjs +0 -150
  312. package/skills/media-use/scripts/lib/candidates.mjs +0 -91
  313. package/skills/media-use/scripts/lib/candidates.test.mjs +0 -155
  314. package/skills/media-use/scripts/lib/codex-provider.mjs +0 -161
  315. package/skills/media-use/scripts/lib/codex-provider.test.mjs +0 -34
  316. package/skills/media-use/scripts/lib/coverage.test.mjs +0 -117
  317. package/skills/media-use/scripts/lib/cube-build.mjs +0 -181
  318. package/skills/media-use/scripts/lib/cube-build.test.mjs +0 -80
  319. package/skills/media-use/scripts/lib/cube-validate.mjs +0 -198
  320. package/skills/media-use/scripts/lib/cube-validate.test.mjs +0 -125
  321. package/skills/media-use/scripts/lib/cutlist.test.mjs +0 -148
  322. package/skills/media-use/scripts/lib/duck.test.mjs +0 -118
  323. package/skills/media-use/scripts/lib/error-diffusion.test.mjs +0 -102
  324. package/skills/media-use/scripts/lib/freeze.mjs +0 -70
  325. package/skills/media-use/scripts/lib/freeze.test.mjs +0 -46
  326. package/skills/media-use/scripts/lib/grade-analyzer.mjs +0 -264
  327. package/skills/media-use/scripts/lib/grade-analyzer.test.mjs +0 -285
  328. package/skills/media-use/scripts/lib/heygen-cli.mjs +0 -191
  329. package/skills/media-use/scripts/lib/heygen-cli.test.mjs +0 -301
  330. package/skills/media-use/scripts/lib/heygen-search.mjs +0 -45
  331. package/skills/media-use/scripts/lib/heygen-search.test.mjs +0 -49
  332. package/skills/media-use/scripts/lib/heygen-video-provider.mjs +0 -127
  333. package/skills/media-use/scripts/lib/heygen-video-provider.test.mjs +0 -344
  334. package/skills/media-use/scripts/lib/image-provider.mjs +0 -44
  335. package/skills/media-use/scripts/lib/local-models.mjs +0 -318
  336. package/skills/media-use/scripts/lib/local-models.test.mjs +0 -220
  337. package/skills/media-use/scripts/lib/local-run.mjs +0 -78
  338. package/skills/media-use/scripts/lib/local-run.test.mjs +0 -121
  339. package/skills/media-use/scripts/lib/logo-provider.mjs +0 -222
  340. package/skills/media-use/scripts/lib/logo-provider.test.mjs +0 -137
  341. package/skills/media-use/scripts/lib/ltx-video-provider.mjs +0 -94
  342. package/skills/media-use/scripts/lib/ltx-video-provider.test.mjs +0 -316
  343. package/skills/media-use/scripts/lib/lut-preset-provider.mjs +0 -266
  344. package/skills/media-use/scripts/lib/lut-preset-provider.test.mjs +0 -176
  345. package/skills/media-use/scripts/lib/manifest.test.mjs +0 -388
  346. package/skills/media-use/scripts/lib/match.mjs +0 -47
  347. package/skills/media-use/scripts/lib/mflux-provider.mjs +0 -128
  348. package/skills/media-use/scripts/lib/mflux-provider.test.mjs +0 -174
  349. package/skills/media-use/scripts/lib/misses.mjs +0 -49
  350. package/skills/media-use/scripts/lib/misses.test.mjs +0 -78
  351. package/skills/media-use/scripts/lib/npx-sync.test.mjs +0 -50
  352. package/skills/media-use/scripts/lib/parakeet-words.test.mjs +0 -44
  353. package/skills/media-use/scripts/lib/prefs-store.test.mjs +0 -189
  354. package/skills/media-use/scripts/lib/probe.mjs +0 -39
  355. package/skills/media-use/scripts/lib/probe.test.mjs +0 -31
  356. package/skills/media-use/scripts/lib/providers.mjs +0 -5
  357. package/skills/media-use/scripts/lib/recipe-store.test.mjs +0 -367
  358. package/skills/media-use/scripts/lib/registry.mjs +0 -218
  359. package/skills/media-use/scripts/lib/registry.test.mjs +0 -261
  360. package/skills/media-use/scripts/lib/search.mjs +0 -24
  361. package/skills/media-use/scripts/lib/search.test.mjs +0 -32
  362. package/skills/media-use/scripts/lib/sfx-provider.mjs +0 -23
  363. package/skills/media-use/scripts/lib/specs.mjs +0 -132
  364. package/skills/media-use/scripts/lib/specs.test.mjs +0 -157
  365. package/skills/media-use/scripts/lib/stats.mjs +0 -117
  366. package/skills/media-use/scripts/lib/stats.test.mjs +0 -165
  367. package/skills/media-use/scripts/lib/telemetry.test.mjs +0 -373
  368. package/skills/media-use/scripts/lib/tts-local-provider.mjs +0 -92
  369. package/skills/media-use/scripts/lib/tts-local-provider.test.mjs +0 -72
  370. package/skills/media-use/scripts/lib/usage.mjs +0 -57
  371. package/skills/media-use/scripts/lib/usage.test.mjs +0 -54
  372. package/skills/media-use/scripts/lib/voice-provider.mjs +0 -57
  373. package/skills/media-use/scripts/lib/voice-provider.test.mjs +0 -46
  374. package/skills/media-use/scripts/resolve.test.mjs +0 -1120
  375. /package/skills/{hyperframes-core → hyperframes}/references/subagent-dispatch.md +0 -0
package/skills/music-to-video/references/motion-primitives/electric-arc/index.html CHANGED
@@ -14,11 +14,6 @@
14
14
  --hg-fg: #f5f5fa;
15
15
  --hg-dim: #6b6b78;
16
16
  }
17
- * {
18
- margin: 0;
19
- padding: 0;
20
- box-sizing: border-box;
21
- }
22
17
  html,
23
18
  body {
24
19
  margin: 0;
@@ -30,48 +25,6 @@
30
25
  color: var(--hg-fg);
31
26
  -webkit-font-smoothing: antialiased;
32
27
  }
33
- #scene {
34
- position: absolute;
35
- inset: 0;
36
- width: 1920px;
37
- height: 1080px;
38
- }
39
- .stage {
40
- position: absolute;
41
- inset: 0;
42
- display: flex;
43
- align-items: center;
44
- justify-content: center;
45
- }
46
- .arc-svg {
47
- position: absolute;
48
- inset: 0;
49
- }
50
- .arc-path {
51
- fill: none;
52
- stroke: var(--hg-fg);
53
- stroke-width: 3;
54
- stroke-linecap: round;
55
- filter: drop-shadow(0 0 8px var(--hg-cyan)) drop-shadow(0 0 16px var(--hg-cyan));
56
- stroke-dasharray: 1200;
57
- stroke-dashoffset: 1200;
58
- will-change: stroke-dashoffset, opacity;
59
- }
60
- .arc-flash {
61
- position: absolute;
62
- inset: 0;
63
- background: radial-gradient(circle at 50% 50%, rgba(42, 255, 240, 0.3) 0%, transparent 40%);
64
- opacity: 0;
65
- will-change: opacity;
66
- }
67
- .arc-label {
68
- font-weight: 900;
69
- font-size: 240px;
70
- letter-spacing: -0.04em;
71
- color: var(--hg-fg);
72
- position: relative;
73
- z-index: 2;
74
- }
75
28
  </style>
76
29
  </head>
77
30
  <body>
@@ -83,62 +36,19 @@
83
36
  data-width="1920"
84
37
  data-height="1080"
85
38
  >
86
- <div id="scene" class="clip" data-start="0" data-duration="2" data-track-index="1">
87
- <div class="stage">
88
- <svg class="arc-svg" viewBox="0 0 1920 1080" preserveAspectRatio="none">
89
- <path
90
- class="arc-path"
91
- id="arc1"
92
- d="M 200 540 L 380 480 L 440 580 L 620 500 L 720 600 L 880 510 L 960 540"
93
- />
94
- <path
95
- class="arc-path"
96
- id="arc2"
97
- d="M 1720 540 L 1540 600 L 1480 500 L 1300 580 L 1200 480 L 1040 570 L 960 540"
98
- />
99
- <path
100
- class="arc-path"
101
- id="arc3"
102
- d="M 960 200 L 920 360 L 1040 420 L 940 520 L 960 540"
103
- />
104
- </svg>
105
- <div class="arc-flash"></div>
106
- <div class="arc-label">CHARGE</div>
107
- </div>
108
- </div>
39
+ <div
40
+ id="scene"
41
+ class="clip"
42
+ data-composition-id="electric-arc"
43
+ data-composition-src="scene.html"
44
+ data-start="0"
45
+ data-duration="2"
46
+ data-track-index="1"
47
+ ></div>
109
48
  </div>
110
49
  <script>
111
50
  window.__timelines = window.__timelines || {};
112
- const tl = gsap.timeline({ paused: true });
113
-
114
- tl.fromTo(
115
- ".arc-label",
116
- { opacity: 0, scale: 0.9 },
117
- { opacity: 1, scale: 1, duration: 0.3, ease: "power3.out" },
118
- 0.5,
119
- );
120
- const arcs = ["#arc1", "#arc2", "#arc3"];
121
- arcs.forEach((p, i) => {
122
- tl.fromTo(
123
- p,
124
- { strokeDashoffset: 1200, opacity: 0 },
125
- { strokeDashoffset: 0, opacity: 1, duration: 0.18, ease: "power4.out" },
126
- 0.15 + i * 0.05,
127
- );
128
- });
129
- tl.to(arcs.join(","), { opacity: 0.3, duration: 0.04, ease: "steps(1)" }, 0.55);
130
- tl.to(arcs.join(","), { opacity: 1, duration: 0.04, ease: "steps(1)" }, 0.6);
131
- tl.to(arcs.join(","), { opacity: 0.5, duration: 0.04, ease: "steps(1)" }, 0.7);
132
- tl.to(arcs.join(","), { opacity: 1, duration: 0.04, ease: "steps(1)" }, 0.78);
133
- tl.fromTo(
134
- ".arc-flash",
135
- { opacity: 0 },
136
- { opacity: 1, duration: 0.06, ease: "steps(1)" },
137
- 0.5,
138
- );
139
- tl.to(".arc-flash", { opacity: 0, duration: 0.5, ease: "power2.out" }, 0.6);
140
-
141
- window.__timelines["main"] = tl;
51
+ window.__timelines["main"] = gsap.timeline({ paused: true });
142
52
  </script>
143
53
  </body>
144
54
  </html>
package/skills/music-to-video/references/motion-primitives/electric-arc/scene.html ADDED
@@ -0,0 +1,105 @@
1
+ <template id="electric-arc-template">
2
+ <div data-composition-id="electric-arc" data-width="1920" data-height="1080" data-duration="2">
3
+ <style>
4
+ :root {
5
+ --hg-violet: #7c3aed;
6
+ --hg-violet-2: #a855f7;
7
+ --hg-cyan: #2afff0;
8
+ --hg-bg: #0a0a0f;
9
+ --hg-fg: #f5f5fa;
10
+ --hg-dim: #6b6b78;
11
+ }
12
+ * {
13
+ margin: 0;
14
+ padding: 0;
15
+ box-sizing: border-box;
16
+ }
17
+ .stage {
18
+ position: absolute;
19
+ inset: 0;
20
+ display: flex;
21
+ align-items: center;
22
+ justify-content: center;
23
+ }
24
+ .arc-svg {
25
+ position: absolute;
26
+ inset: 0;
27
+ }
28
+ .arc-path {
29
+ fill: none;
30
+ stroke: var(--hg-fg);
31
+ stroke-width: 3;
32
+ stroke-linecap: round;
33
+ filter: drop-shadow(0 0 8px var(--hg-cyan)) drop-shadow(0 0 16px var(--hg-cyan));
34
+ stroke-dasharray: 1200;
35
+ stroke-dashoffset: 1200;
36
+ will-change: stroke-dashoffset, opacity;
37
+ }
38
+ .arc-flash {
39
+ position: absolute;
40
+ inset: 0;
41
+ background: radial-gradient(circle at 50% 50%, rgba(42, 255, 240, 0.3) 0%, transparent 40%);
42
+ opacity: 0;
43
+ will-change: opacity;
44
+ }
45
+ .arc-label {
46
+ font-weight: 900;
47
+ font-size: 240px;
48
+ letter-spacing: -0.04em;
49
+ color: var(--hg-fg);
50
+ position: relative;
51
+ z-index: 2;
52
+ }
53
+ </style>
54
+ <div class="stage">
55
+ <svg class="arc-svg" viewBox="0 0 1920 1080" preserveAspectRatio="none">
56
+ <path
57
+ class="arc-path"
58
+ id="arc1"
59
+ d="M 200 540 L 380 480 L 440 580 L 620 500 L 720 600 L 880 510 L 960 540"
60
+ />
61
+ <path
62
+ class="arc-path"
63
+ id="arc2"
64
+ d="M 1720 540 L 1540 600 L 1480 500 L 1300 580 L 1200 480 L 1040 570 L 960 540"
65
+ />
66
+ <path class="arc-path" id="arc3" d="M 960 200 L 920 360 L 1040 420 L 940 520 L 960 540" />
67
+ </svg>
68
+ <div class="arc-flash"></div>
69
+ <div class="arc-label">CHARGE</div>
70
+ </div>
71
+ <script>
72
+ window.__timelines = window.__timelines || {};
73
+ const tl = gsap.timeline({ paused: true });
74
+
75
+ tl.fromTo(
76
+ ".arc-label",
77
+ { opacity: 0, scale: 0.9 },
78
+ { opacity: 1, scale: 1, duration: 0.3, ease: "power3.out" },
79
+ 0.5,
80
+ );
81
+ const arcs = ["#arc1", "#arc2", "#arc3"];
82
+ arcs.forEach((p, i) => {
83
+ tl.fromTo(
84
+ p,
85
+ { strokeDashoffset: 1200, opacity: 0 },
86
+ { strokeDashoffset: 0, opacity: 1, duration: 0.18, ease: "power4.out" },
87
+ 0.15 + i * 0.05,
88
+ );
89
+ });
90
+ tl.to(arcs.join(","), { opacity: 0.3, duration: 0.04, ease: "steps(1)" }, 0.55);
91
+ tl.to(arcs.join(","), { opacity: 1, duration: 0.04, ease: "steps(1)" }, 0.6);
92
+ tl.to(arcs.join(","), { opacity: 0.5, duration: 0.04, ease: "steps(1)" }, 0.7);
93
+ tl.to(arcs.join(","), { opacity: 1, duration: 0.04, ease: "steps(1)" }, 0.78);
94
+ tl.fromTo(
95
+ ".arc-flash",
96
+ { opacity: 0 },
97
+ { opacity: 1, duration: 0.06, ease: "steps(1)" },
98
+ 0.5,
99
+ );
100
+ tl.to(".arc-flash", { opacity: 0, duration: 0.5, ease: "power2.out" }, 0.6);
101
+
102
+ window.__timelines["electric-arc"] = tl;
103
+ </script>
104
+ </div>
105
+ </template>
package/skills/music-to-video/references/motion-primitives/flash-cut/index.html CHANGED
@@ -13,11 +13,6 @@
13
13
  --hg-fg: #f5f5fa;
14
14
  --hg-dim: #6b6b78;
15
15
  }
16
- * {
17
- margin: 0;
18
- padding: 0;
19
- box-sizing: border-box;
20
- }
21
16
  html,
22
17
  body {
23
18
  margin: 0;
@@ -29,46 +24,6 @@
29
24
  color: var(--hg-fg);
30
25
  -webkit-font-smoothing: antialiased;
31
26
  }
32
- #scene {
33
- position: absolute;
34
- inset: 0;
35
- width: 1920px;
36
- height: 1080px;
37
- }
38
- .stage {
39
- position: absolute;
40
- inset: 0;
41
- display: flex;
42
- align-items: center;
43
- justify-content: center;
44
- }
45
- .word {
46
- position: absolute;
47
- font-weight: 900;
48
- font-size: 260px;
49
- letter-spacing: -0.04em;
50
- line-height: 0.95;
51
- white-space: nowrap;
52
- color: var(--hg-fg);
53
- will-change: opacity;
54
- }
55
- .accent {
56
- position: absolute;
57
- bottom: 360px;
58
- width: 220px;
59
- height: 14px;
60
- border-radius: 999px;
61
- background: var(--hg-violet);
62
- will-change: background, transform;
63
- }
64
- .flash {
65
- position: absolute;
66
- inset: 0;
67
- background: #ffffff;
68
- opacity: 0;
69
- pointer-events: none;
70
- will-change: opacity;
71
- }
72
27
  </style>
73
28
  </head>
74
29
  <body>
@@ -80,53 +35,19 @@
80
35
  data-width="1920"
81
36
  data-height="1080"
82
37
  >
83
- <div id="scene" class="clip" data-start="0" data-duration="1.8" data-track-index="1">
84
- <div class="stage">
85
- <div class="accent" id="accent"></div>
86
- <div class="word" id="w0">READY</div>
87
- <div class="word" id="w1">IMPACT</div>
88
- <div class="word" id="w2">DONE</div>
89
- </div>
90
- <div class="flash" id="flash"></div>
91
- </div>
38
+ <div
39
+ id="scene"
40
+ class="clip"
41
+ data-composition-id="flash-cut"
42
+ data-composition-src="scene.html"
43
+ data-start="0"
44
+ data-duration="1.8"
45
+ data-track-index="1"
46
+ ></div>
92
47
  </div>
93
48
  <script>
94
49
  window.__timelines = window.__timelines || {};
95
- const tl = gsap.timeline({ paused: true });
96
-
97
- // Initial state: first word visible, others hidden, accent violet.
98
- tl.set("#w0", { opacity: 1 }, 0);
99
- tl.set("#w1", { opacity: 0 }, 0);
100
- tl.set("#w2", { opacity: 0 }, 0);
101
- tl.set("#accent", { backgroundColor: "#7c3aed", scaleX: 1 }, 0);
102
- tl.set("#flash", { opacity: 0 }, 0);
103
-
104
- // Two hits; during each white frame, swap underlying word + accent colour.
105
- const hits = [
106
- { t: 0.5, from: "#w0", to: "#w1", color: "#a855f7", scaleX: 1.45 },
107
- { t: 1.2, from: "#w1", to: "#w2", color: "#f5f5fa", scaleX: 0.7 },
108
- ];
109
-
110
- hits.forEach((h) => {
111
- // Instant full-frame white flash on the hit.
112
- tl.set("#flash", { opacity: 1 }, h.t);
113
- // While white (~2 frames at 30fps), swap the revealed state.
114
- tl.set(h.from, { opacity: 0 }, h.t + 0.03);
115
- tl.set(h.to, { opacity: 1 }, h.t + 0.03);
116
- tl.set("#accent", { backgroundColor: h.color, scaleX: h.scaleX }, h.t + 0.03);
117
- // Snap the flash back out within ~3 frames.
118
- tl.set("#flash", { opacity: 0 }, h.t + 0.06);
119
- });
120
-
121
- // Graceful loop: dip back to white at the very end and restore the start
122
- // state so the cycle re-enters cleanly on the next pass.
123
- tl.set("#flash", { opacity: 1 }, 1.74);
124
- tl.set("#w2", { opacity: 0 }, 1.77);
125
- tl.set("#w0", { opacity: 1 }, 1.77);
126
- tl.set("#accent", { backgroundColor: "#7c3aed", scaleX: 1 }, 1.77);
127
- tl.set("#flash", { opacity: 0 }, 1.8);
128
-
129
- window.__timelines["main"] = tl;
50
+ window.__timelines["main"] = gsap.timeline({ paused: true });
130
51
  </script>
131
52
  </body>
132
53
  </html>
package/skills/music-to-video/references/motion-primitives/flash-cut/scene.html ADDED
@@ -0,0 +1,97 @@
1
+ <template id="flash-cut-template">
2
+ <div data-composition-id="flash-cut" data-width="1920" data-height="1080" data-duration="1.8">
3
+ <style>
4
+ :root {
5
+ --hg-violet: #7c3aed;
6
+ --hg-violet-2: #a855f7;
7
+ --hg-bg: #0a0a0f;
8
+ --hg-fg: #f5f5fa;
9
+ --hg-dim: #6b6b78;
10
+ }
11
+ * {
12
+ margin: 0;
13
+ padding: 0;
14
+ box-sizing: border-box;
15
+ }
16
+ .stage {
17
+ position: absolute;
18
+ inset: 0;
19
+ display: flex;
20
+ align-items: center;
21
+ justify-content: center;
22
+ }
23
+ .word {
24
+ position: absolute;
25
+ font-weight: 900;
26
+ font-size: 260px;
27
+ letter-spacing: -0.04em;
28
+ line-height: 0.95;
29
+ white-space: nowrap;
30
+ color: var(--hg-fg);
31
+ will-change: opacity;
32
+ }
33
+ .accent {
34
+ position: absolute;
35
+ bottom: 360px;
36
+ width: 220px;
37
+ height: 14px;
38
+ border-radius: 999px;
39
+ background: var(--hg-violet);
40
+ will-change: background, transform;
41
+ }
42
+ .flash {
43
+ position: absolute;
44
+ inset: 0;
45
+ background: #ffffff;
46
+ opacity: 0;
47
+ pointer-events: none;
48
+ will-change: opacity;
49
+ }
50
+ </style>
51
+ <div class="stage">
52
+ <div class="accent" id="accent"></div>
53
+ <div class="word" id="w0">READY</div>
54
+ <div class="word" id="w1">IMPACT</div>
55
+ <div class="word" id="w2">DONE</div>
56
+ </div>
57
+ <div class="flash" id="flash"></div>
58
+ <script>
59
+ window.__timelines = window.__timelines || {};
60
+ const tl = gsap.timeline({ paused: true });
61
+
62
+ // Initial state: first word visible, others hidden, accent violet.
63
+ tl.set("#w0", { opacity: 1 }, 0);
64
+ tl.set("#w1", { opacity: 0 }, 0);
65
+ tl.set("#w2", { opacity: 0 }, 0);
66
+ tl.set("#accent", { backgroundColor: "#7c3aed", scaleX: 1 }, 0);
67
+ tl.set("#flash", { opacity: 0 }, 0);
68
+
69
+ // Two hits; during each white frame, swap underlying word + accent colour.
70
+ const hits = [
71
+ { t: 0.5, from: "#w0", to: "#w1", color: "#a855f7", scaleX: 1.45 },
72
+ { t: 1.2, from: "#w1", to: "#w2", color: "#f5f5fa", scaleX: 0.7 },
73
+ ];
74
+
75
+ hits.forEach((h) => {
76
+ // Instant full-frame white flash on the hit.
77
+ tl.set("#flash", { opacity: 1 }, h.t);
78
+ // While white (~2 frames at 30fps), swap the revealed state.
79
+ tl.set(h.from, { opacity: 0 }, h.t + 0.03);
80
+ tl.set(h.to, { opacity: 1 }, h.t + 0.03);
81
+ tl.set("#accent", { backgroundColor: h.color, scaleX: h.scaleX }, h.t + 0.03);
82
+ // Snap the flash back out within ~3 frames.
83
+ tl.set("#flash", { opacity: 0 }, h.t + 0.06);
84
+ });
85
+
86
+ // Graceful loop: dip back to white at the very end and restore the start
87
+ // state so the cycle re-enters cleanly on the next pass.
88
+ tl.set("#flash", { opacity: 1 }, 1.74);
89
+ tl.set("#w2", { opacity: 0 }, 1.77);
90
+ tl.set("#w0", { opacity: 1 }, 1.77);
91
+ tl.set("#accent", { backgroundColor: "#7c3aed", scaleX: 1 }, 1.77);
92
+ tl.set("#flash", { opacity: 0 }, 1.8);
93
+
94
+ window.__timelines["flash-cut"] = tl;
95
+ </script>
96
+ </div>
97
+ </template>
package/skills/music-to-video/references/motion-primitives/gooey-metaball/index.html CHANGED
@@ -14,11 +14,6 @@
14
14
  --hg-fg: #f5f5fa;
15
15
  --hg-dim: #6b6b78;
16
16
  }
17
- * {
18
- margin: 0;
19
- padding: 0;
20
- box-sizing: border-box;
21
- }
22
17
  html,
23
18
  body {
24
19
  margin: 0;
@@ -30,64 +25,6 @@
30
25
  color: var(--hg-fg);
31
26
  -webkit-font-smoothing: antialiased;
32
27
  }
33
- #scene {
34
- position: absolute;
35
- inset: 0;
36
- width: 1920px;
37
- height: 1080px;
38
- }
39
- .hero {
40
- position: absolute;
41
- inset: 0;
42
- display: flex;
43
- align-items: center;
44
- justify-content: center;
45
- font-weight: 900;
46
- font-size: 280px;
47
- letter-spacing: -0.04em;
48
- color: var(--hg-fg);
49
- z-index: 5;
50
- pointer-events: none;
51
- }
52
- .gooey-stage {
53
- position: absolute;
54
- inset: 0;
55
- filter: url(#gooey-filter);
56
- }
57
- .ball {
58
- position: absolute;
59
- border-radius: 50%;
60
- background: var(--hg-violet-2);
61
- top: 50%;
62
- left: 50%;
63
- will-change: transform;
64
- opacity: 0;
65
- }
66
- .ball.a {
67
- width: 280px;
68
- height: 280px;
69
- background: #7c3aed;
70
- }
71
- .ball.b {
72
- width: 240px;
73
- height: 240px;
74
- background: #a855f7;
75
- }
76
- .ball.c {
77
- width: 200px;
78
- height: 200px;
79
- background: #d946ef;
80
- }
81
- .ball.d {
82
- width: 320px;
83
- height: 320px;
84
- background: #8b5cf6;
85
- }
86
- .ball.e {
87
- width: 180px;
88
- height: 180px;
89
- background: #c084fc;
90
- }
91
28
  </style>
92
29
  </head>
93
30
  <body>
@@ -99,143 +36,19 @@
99
36
  data-width="1920"
100
37
  data-height="1080"
101
38
  >
102
- <div id="scene" class="clip" data-start="0" data-duration="2" data-track-index="1">
103
- <svg style="position: absolute; width: 0; height: 0">
104
- <defs>
105
- <filter id="gooey-filter">
106
- <feGaussianBlur in="SourceGraphic" stdDeviation="20" result="blur" />
107
- <feColorMatrix
108
- in="blur"
109
- mode="matrix"
110
- values="
111
- 1 0 0 0 0
112
- 0 1 0 0 0
113
- 0 0 1 0 0
114
- 0 0 0 22 -10"
115
- result="gooey"
116
- />
117
- <feComposite in="SourceGraphic" in2="gooey" operator="atop" />
118
- </filter>
119
- </defs>
120
- </svg>
121
-
122
- <div class="gooey-stage">
123
- <div class="ball a" id="ballA"></div>
124
- <div class="ball b" id="ballB"></div>
125
- <div class="ball c" id="ballC"></div>
126
- <div class="ball d" id="ballD"></div>
127
- <div class="ball e" id="ballE"></div>
128
- </div>
129
-
130
- <div class="hero">GOOEY</div>
131
- </div>
39
+ <div
40
+ id="scene"
41
+ class="clip"
42
+ data-composition-id="gooey-metaball"
43
+ data-composition-src="scene.html"
44
+ data-start="0"
45
+ data-duration="2"
46
+ data-track-index="1"
47
+ ></div>
132
48
  </div>
133
49
  <script>
134
50
  window.__timelines = window.__timelines || {};
135
- const tl = gsap.timeline({ paused: true });
136
-
137
- // Initial: all balls collapsed at center
138
- ["#ballA", "#ballB", "#ballC", "#ballD", "#ballE"].forEach((id) => {
139
- tl.set(id, { xPercent: -50, yPercent: -50, scale: 0, opacity: 0 }, 0);
140
- });
141
- // Spawn outward
142
- tl.to(
143
- "#ballA",
144
- {
145
- xPercent: -50 - 120,
146
- yPercent: -50 + 20,
147
- scale: 1,
148
- opacity: 1,
149
- duration: 0.5,
150
- ease: "back.out(1.6)",
151
- },
152
- 0.15,
153
- );
154
- tl.to(
155
- "#ballB",
156
- {
157
- xPercent: -50 + 100,
158
- yPercent: -50 + 50,
159
- scale: 1,
160
- opacity: 1,
161
- duration: 0.55,
162
- ease: "back.out(1.6)",
163
- },
164
- 0.2,
165
- );
166
- tl.to(
167
- "#ballC",
168
- {
169
- xPercent: -50 + 30,
170
- yPercent: -50 - 80,
171
- scale: 1,
172
- opacity: 1,
173
- duration: 0.55,
174
- ease: "back.out(1.6)",
175
- },
176
- 0.25,
177
- );
178
- tl.to(
179
- "#ballD",
180
- {
181
- xPercent: -50 - 50,
182
- yPercent: -50 - 30,
183
- scale: 1,
184
- opacity: 1,
185
- duration: 0.55,
186
- ease: "back.out(1.6)",
187
- },
188
- 0.3,
189
- );
190
- tl.to(
191
- "#ballE",
192
- {
193
- xPercent: -50 + 80,
194
- yPercent: -50 - 40,
195
- scale: 1,
196
- opacity: 1,
197
- duration: 0.55,
198
- ease: "back.out(1.6)",
199
- },
200
- 0.18,
201
- );
202
-
203
- // Idle drift
204
- tl.to(
205
- "#ballA",
206
- { xPercent: "+=20", yPercent: "+=12", duration: 1.0, ease: "sine.inOut" },
207
- 0.7,
208
- );
209
- tl.to(
210
- "#ballB",
211
- { xPercent: "-=18", yPercent: "-=10", duration: 1.0, ease: "sine.inOut" },
212
- 0.7,
213
- );
214
- tl.to(
215
- "#ballC",
216
- { xPercent: "-=15", yPercent: "+=20", duration: 1.0, ease: "sine.inOut" },
217
- 0.7,
218
- );
219
- tl.to(
220
- "#ballD",
221
- { xPercent: "+=25", yPercent: "+=8", duration: 1.0, ease: "sine.inOut" },
222
- 0.7,
223
- );
224
- tl.to(
225
- "#ballE",
226
- { xPercent: "-=22", yPercent: "+=18", duration: 1.0, ease: "sine.inOut" },
227
- 0.7,
228
- );
229
-
230
- // Reveal text behind
231
- tl.fromTo(
232
- ".hero",
233
- { opacity: 0, scale: 0.95 },
234
- { opacity: 1, scale: 1, duration: 0.5, ease: "power3.out" },
235
- 0.6,
236
- );
237
-
238
- window.__timelines["main"] = tl;
51
+ window.__timelines["main"] = gsap.timeline({ paused: true });
239
52
  </script>
240
53
  </body>
241
54
  </html>