dsh-hyperframes 0.3.2 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (375) hide show
  1. package/README.en.md +4 -3
  2. package/README.md +5 -4
  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/kinetic-letter-in/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,31 +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
- .hero {
46
- font-weight: 900;
47
- font-size: 280px;
48
- letter-spacing: -0.04em;
49
- line-height: 0.95;
50
- color: var(--hg-fg);
51
- white-space: nowrap;
52
- }
53
- .char {
54
- display: inline-block;
55
- will-change: transform, opacity;
56
- }
57
27
  </style>
58
28
  </head>
59
29
  <body>
@@ -65,34 +35,19 @@
65
35
  data-width="1920"
66
36
  data-height="1080"
67
37
  >
68
- <div id="scene" class="clip" data-start="0" data-duration="2" data-track-index="1">
69
- <div class="stage">
70
- <div class="hero" id="hero">
71
- <span class="char">K</span><span class="char">I</span><span class="char">N</span
72
- ><span class="char">E</span><span class="char">T</span><span class="char">I</span
73
- ><span class="char">C</span>
74
- </div>
75
- </div>
76
- </div>
38
+ <div
39
+ id="scene"
40
+ class="clip"
41
+ data-composition-id="kinetic-letter-in"
42
+ data-composition-src="scene.html"
43
+ data-start="0"
44
+ data-duration="2"
45
+ data-track-index="1"
46
+ ></div>
77
47
  </div>
78
48
  <script>
79
49
  window.__timelines = window.__timelines || {};
80
- const tl = gsap.timeline({ paused: true });
81
-
82
- tl.from(
83
- ".char",
84
- { y: 80, opacity: 0, stagger: 0.045, ease: "back.out(2)", duration: 0.55 },
85
- 0.05,
86
- );
87
- // Letters loosen apart as they settle. Animate each glyph's x (a transform), NOT the
88
- // word's letter-spacing: animating letter-spacing reflows text and snaps glyph positions
89
- // to the pixel grid, which micro-stutters on a slow settle under the seek-by-frame
90
- // capture engine (the gsap_non_transform_motion lint rule flags it). The chars are
91
- // already per-glyph spans, so spread them directly: (0.04em − (−0.04em)) × 280px = 22.4px
92
- // per gap, centered about index 3 of the 7-letter word.
93
- tl.to(".char", { x: (i) => (i - 3) * 22.4, duration: 0.6, ease: "power2.out" }, 0.7);
94
-
95
- window.__timelines["main"] = tl;
50
+ window.__timelines["main"] = gsap.timeline({ paused: true });
96
51
  </script>
97
52
  </body>
98
53
  </html>
package/skills/music-to-video/references/motion-primitives/kinetic-letter-in/scene.html ADDED
@@ -0,0 +1,64 @@
1
+ <template id="kinetic-letter-in-template">
2
+ <div
3
+ data-composition-id="kinetic-letter-in"
4
+ data-width="1920"
5
+ data-height="1080"
6
+ data-duration="2"
7
+ >
8
+ <style>
9
+ :root {
10
+ --hg-violet: #7c3aed;
11
+ --hg-violet-2: #a855f7;
12
+ --hg-bg: #0a0a0f;
13
+ --hg-fg: #f5f5fa;
14
+ --hg-dim: #6b6b78;
15
+ }
16
+ * {
17
+ margin: 0;
18
+ padding: 0;
19
+ box-sizing: border-box;
20
+ }
21
+ .stage {
22
+ position: absolute;
23
+ inset: 0;
24
+ display: flex;
25
+ align-items: center;
26
+ justify-content: center;
27
+ }
28
+ .hero {
29
+ font-weight: 900;
30
+ font-size: 280px;
31
+ letter-spacing: -0.04em;
32
+ line-height: 0.95;
33
+ color: var(--hg-fg);
34
+ white-space: nowrap;
35
+ }
36
+ .char {
37
+ display: inline-block;
38
+ will-change: transform, opacity;
39
+ }
40
+ </style>
41
+ <div class="stage">
42
+ <div class="hero" id="hero">
43
+ <span class="char">K</span><span class="char">I</span><span class="char">N</span
44
+ ><span class="char">E</span><span class="char">T</span><span class="char">I</span
45
+ ><span class="char">C</span>
46
+ </div>
47
+ </div>
48
+ <script>
49
+ window.__timelines = window.__timelines || {};
50
+ const tl = gsap.timeline({ paused: true });
51
+
52
+ tl.from(
53
+ ".char",
54
+ { y: 80, opacity: 0, stagger: 0.045, ease: "back.out(2)", duration: 0.55 },
55
+ 0.05,
56
+ );
57
+ // Loosen the letters with a per-glyph x transform; animating letter-spacing reflows text
58
+ // and stutters under seek-by-frame capture.
59
+ tl.to(".char", { x: (i) => (i - 3) * 22.4, duration: 0.6, ease: "power2.out" }, 0.7);
60
+
61
+ window.__timelines["kinetic-letter-in"] = tl;
62
+ </script>
63
+ </div>
64
+ </template>
package/skills/music-to-video/references/motion-primitives/liquid-morph/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,64 +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
- .blob-wrap {
46
- position: absolute;
47
- inset: 0;
48
- display: flex;
49
- align-items: center;
50
- justify-content: center;
51
- }
52
- .blob {
53
- position: absolute;
54
- width: 1100px;
55
- height: 800px;
56
- background: linear-gradient(135deg, #7c3aed 0%, #a855f7 60%, #d946ef 100%);
57
- clip-path: polygon(
58
- 50% 5%,
59
- 65% 8%,
60
- 78% 16%,
61
- 88% 30%,
62
- 92% 50%,
63
- 88% 70%,
64
- 78% 84%,
65
- 65% 92%,
66
- 50% 95%,
67
- 35% 92%,
68
- 22% 84%,
69
- 12% 70%,
70
- 8% 50%,
71
- 12% 30%,
72
- 22% 16%,
73
- 35% 8%
74
- );
75
- will-change: clip-path, transform;
76
- filter: blur(0.5px);
77
- }
78
- .hero {
79
- font-family: "Playfair Display", serif;
80
- font-style: italic;
81
- font-weight: 900;
82
- font-size: 280px;
83
- letter-spacing: -0.04em;
84
- color: var(--hg-fg);
85
- white-space: nowrap;
86
- position: relative;
87
- z-index: 2;
88
- mix-blend-mode: difference;
89
- }
90
27
  </style>
91
28
  </head>
92
29
  <body>
@@ -98,34 +35,19 @@
98
35
  data-width="1920"
99
36
  data-height="1080"
100
37
  >
101
- <div id="scene" class="clip" data-start="0" data-duration="2" data-track-index="1">
102
- <div class="blob-wrap"><div class="blob"></div></div>
103
- <div class="stage"><div class="hero">liquid</div></div>
104
- </div>
38
+ <div
39
+ id="scene"
40
+ class="clip"
41
+ data-composition-id="liquid-morph"
42
+ data-composition-src="scene.html"
43
+ data-start="0"
44
+ data-duration="2"
45
+ data-track-index="1"
46
+ ></div>
105
47
  </div>
106
48
  <script>
107
49
  window.__timelines = window.__timelines || {};
108
- const tl = gsap.timeline({ paused: true });
109
-
110
- const BLOB_A =
111
- "polygon(50% 5%, 65% 8%, 78% 16%, 88% 30%, 92% 50%, 88% 70%, 78% 84%, 65% 92%, 50% 95%, 35% 92%, 22% 84%, 12% 70%, 8% 50%, 12% 30%, 22% 16%, 35% 8%)";
112
- const BLOB_B =
113
- "polygon(38% 10%, 58% 4%, 75% 14%, 90% 28%, 95% 46%, 86% 60%, 80% 78%, 62% 88%, 46% 94%, 30% 86%, 16% 74%, 6% 58%, 10% 40%, 20% 22%, 30% 14%, 38% 10%)";
114
- const BLOB_C =
115
- "polygon(46% 8%, 62% 10%, 80% 20%, 92% 36%, 90% 52%, 92% 70%, 76% 86%, 58% 90%, 44% 94%, 28% 88%, 14% 76%, 10% 60%, 12% 44%, 18% 26%, 30% 12%, 38% 8%)";
116
-
117
- tl.set(".blob", { clipPath: BLOB_A, scale: 0.95 }, 0);
118
- tl.to(".blob", { clipPath: BLOB_B, scale: 1.05, duration: 0.7, ease: "power2.inOut" }, 0.2);
119
- tl.to(".blob", { clipPath: BLOB_C, scale: 1.0, duration: 0.7, ease: "power2.inOut" }, 0.9);
120
- tl.fromTo(
121
- ".hero",
122
- { opacity: 0, y: 30 },
123
- { opacity: 1, y: 0, duration: 0.6, ease: "power3.out" },
124
- 0.4,
125
- );
126
- tl.to(".blob", { rotation: 6, duration: 1.5, ease: "sine.inOut" }, 0.2);
127
-
128
- window.__timelines["main"] = tl;
50
+ window.__timelines["main"] = gsap.timeline({ paused: true });
129
51
  </script>
130
52
  </body>
131
53
  </html>
package/skills/music-to-video/references/motion-primitives/liquid-morph/scene.html ADDED
@@ -0,0 +1,96 @@
1
+ <template id="liquid-morph-template">
2
+ <div data-composition-id="liquid-morph" data-width="1920" data-height="1080" data-duration="2">
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
+ .blob-wrap {
24
+ position: absolute;
25
+ inset: 0;
26
+ display: flex;
27
+ align-items: center;
28
+ justify-content: center;
29
+ }
30
+ .blob {
31
+ position: absolute;
32
+ width: 1100px;
33
+ height: 800px;
34
+ background: linear-gradient(135deg, #7c3aed 0%, #a855f7 60%, #d946ef 100%);
35
+ clip-path: polygon(
36
+ 50% 5%,
37
+ 65% 8%,
38
+ 78% 16%,
39
+ 88% 30%,
40
+ 92% 50%,
41
+ 88% 70%,
42
+ 78% 84%,
43
+ 65% 92%,
44
+ 50% 95%,
45
+ 35% 92%,
46
+ 22% 84%,
47
+ 12% 70%,
48
+ 8% 50%,
49
+ 12% 30%,
50
+ 22% 16%,
51
+ 35% 8%
52
+ );
53
+ will-change: clip-path, transform;
54
+ filter: blur(0.5px);
55
+ }
56
+ .hero {
57
+ font-family: "Playfair Display", serif;
58
+ font-style: italic;
59
+ font-weight: 900;
60
+ font-size: 280px;
61
+ letter-spacing: -0.04em;
62
+ color: var(--hg-fg);
63
+ white-space: nowrap;
64
+ position: relative;
65
+ z-index: 2;
66
+ mix-blend-mode: difference;
67
+ }
68
+ </style>
69
+ <div class="blob-wrap"><div class="blob"></div></div>
70
+ <div class="stage"><div class="hero">liquid</div></div>
71
+ <script>
72
+ window.__timelines = window.__timelines || {};
73
+ const tl = gsap.timeline({ paused: true });
74
+
75
+ const BLOB_A =
76
+ "polygon(50% 5%, 65% 8%, 78% 16%, 88% 30%, 92% 50%, 88% 70%, 78% 84%, 65% 92%, 50% 95%, 35% 92%, 22% 84%, 12% 70%, 8% 50%, 12% 30%, 22% 16%, 35% 8%)";
77
+ const BLOB_B =
78
+ "polygon(38% 10%, 58% 4%, 75% 14%, 90% 28%, 95% 46%, 86% 60%, 80% 78%, 62% 88%, 46% 94%, 30% 86%, 16% 74%, 6% 58%, 10% 40%, 20% 22%, 30% 14%, 38% 10%)";
79
+ const BLOB_C =
80
+ "polygon(46% 8%, 62% 10%, 80% 20%, 92% 36%, 90% 52%, 92% 70%, 76% 86%, 58% 90%, 44% 94%, 28% 88%, 14% 76%, 10% 60%, 12% 44%, 18% 26%, 30% 12%, 38% 8%)";
81
+
82
+ tl.set(".blob", { clipPath: BLOB_A, scale: 0.95 }, 0);
83
+ tl.to(".blob", { clipPath: BLOB_B, scale: 1.05, duration: 0.7, ease: "power2.inOut" }, 0.2);
84
+ tl.to(".blob", { clipPath: BLOB_C, scale: 1.0, duration: 0.7, ease: "power2.inOut" }, 0.9);
85
+ tl.fromTo(
86
+ ".hero",
87
+ { opacity: 0, y: 30 },
88
+ { opacity: 1, y: 0, duration: 0.6, ease: "power3.out" },
89
+ 0.4,
90
+ );
91
+ tl.to(".blob", { rotation: 6, duration: 1.5, ease: "sine.inOut" }, 0.2);
92
+
93
+ window.__timelines["liquid-morph"] = tl;
94
+ </script>
95
+ </div>
96
+ </template>
package/skills/music-to-video/references/motion-primitives/mask-reveal/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,49 +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
- .hero {
46
- font-weight: 900;
47
- font-size: 280px;
48
- letter-spacing: -0.04em;
49
- line-height: 0.95;
50
- color: var(--hg-fg);
51
- white-space: nowrap;
52
- }
53
- .mask-wrap {
54
- position: relative;
55
- overflow: hidden;
56
- padding: 0 60px;
57
- }
58
- .mask-clip {
59
- clip-path: inset(0 100% 0 0);
60
- will-change: clip-path;
61
- }
62
- .sweep {
63
- position: absolute;
64
- top: 0;
65
- bottom: 0;
66
- width: 8px;
67
- background: var(--hg-violet);
68
- box-shadow:
69
- 0 0 40px var(--hg-violet),
70
- 0 0 80px var(--hg-violet);
71
- left: 0;
72
- opacity: 0;
73
- will-change: transform, opacity;
74
- }
75
27
  </style>
76
28
  </head>
77
29
  <body>
@@ -83,27 +35,19 @@
83
35
  data-width="1920"
84
36
  data-height="1080"
85
37
  >
86
- <div id="scene" class="clip" data-start="0" data-duration="2" data-track-index="1">
87
- <div class="stage">
88
- <div class="mask-wrap">
89
- <div class="hero mask-clip">REVEAL</div>
90
- <div class="sweep"></div>
91
- </div>
92
- </div>
93
- </div>
38
+ <div
39
+ id="scene"
40
+ class="clip"
41
+ data-composition-id="mask-reveal"
42
+ data-composition-src="scene.html"
43
+ data-start="0"
44
+ data-duration="2"
45
+ data-track-index="1"
46
+ ></div>
94
47
  </div>
95
48
  <script>
96
49
  window.__timelines = window.__timelines || {};
97
- const tl = gsap.timeline({ paused: true });
98
-
99
- tl.set(".mask-clip", { clipPath: "inset(0 100% 0 0)" }, 0);
100
- tl.set(".sweep", { x: 0, opacity: 0 }, 0);
101
- tl.to(".sweep", { opacity: 1, duration: 0.08, ease: "power2.out" }, 0.1);
102
- tl.to(".sweep", { x: 1300, duration: 0.75, ease: "expo.out" }, 0.15);
103
- tl.to(".mask-clip", { clipPath: "inset(0 0% 0 0)", duration: 0.75, ease: "expo.out" }, 0.18);
104
- tl.to(".sweep", { opacity: 0, duration: 0.3, ease: "power2.in" }, 0.85);
105
-
106
- window.__timelines["main"] = tl;
50
+ window.__timelines["main"] = gsap.timeline({ paused: true });
107
51
  </script>
108
52
  </body>
109
53
  </html>
package/skills/music-to-video/references/motion-primitives/mask-reveal/scene.html ADDED
@@ -0,0 +1,74 @@
1
+ <template id="mask-reveal-template">
2
+ <div data-composition-id="mask-reveal" data-width="1920" data-height="1080" data-duration="2">
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
+ .hero {
24
+ font-weight: 900;
25
+ font-size: 280px;
26
+ letter-spacing: -0.04em;
27
+ line-height: 0.95;
28
+ color: var(--hg-fg);
29
+ white-space: nowrap;
30
+ }
31
+ .mask-wrap {
32
+ position: relative;
33
+ overflow: hidden;
34
+ padding: 0 60px;
35
+ }
36
+ .mask-clip {
37
+ clip-path: inset(0 100% 0 0);
38
+ will-change: clip-path;
39
+ }
40
+ .sweep {
41
+ position: absolute;
42
+ top: 0;
43
+ bottom: 0;
44
+ width: 8px;
45
+ background: var(--hg-violet);
46
+ box-shadow:
47
+ 0 0 40px var(--hg-violet),
48
+ 0 0 80px var(--hg-violet);
49
+ left: 0;
50
+ opacity: 0;
51
+ will-change: transform, opacity;
52
+ }
53
+ </style>
54
+ <div class="stage">
55
+ <div class="mask-wrap">
56
+ <div class="hero mask-clip">REVEAL</div>
57
+ <div class="sweep"></div>
58
+ </div>
59
+ </div>
60
+ <script>
61
+ window.__timelines = window.__timelines || {};
62
+ const tl = gsap.timeline({ paused: true });
63
+
64
+ tl.set(".mask-clip", { clipPath: "inset(0 100% 0 0)" }, 0);
65
+ tl.set(".sweep", { x: 0, opacity: 0 }, 0);
66
+ tl.to(".sweep", { opacity: 1, duration: 0.08, ease: "power2.out" }, 0.1);
67
+ tl.to(".sweep", { x: 1300, duration: 0.75, ease: "expo.out" }, 0.15);
68
+ tl.to(".mask-clip", { clipPath: "inset(0 0% 0 0)", duration: 0.75, ease: "expo.out" }, 0.18);
69
+ tl.to(".sweep", { opacity: 0, duration: 0.3, ease: "power2.in" }, 0.85);
70
+
71
+ window.__timelines["mask-reveal"] = tl;
72
+ </script>
73
+ </div>
74
+ </template>
package/skills/music-to-video/references/motion-primitives/mosaic-pack/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,29 +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
- .grid {
46
- display: grid;
47
- grid-template-columns: repeat(6, 200px);
48
- grid-template-rows: repeat(4, 200px);
49
- gap: 18px;
50
- }
51
- .tile {
52
- border-radius: 14px;
53
- will-change: transform, opacity;
54
- }
55
27
  </style>
56
28
  </head>
57
29
  <body>
@@ -63,62 +35,19 @@
63
35
  data-width="1920"
64
36
  data-height="1080"
65
37
  >
66
- <div id="scene" class="clip" data-start="0" data-duration="2.4" data-track-index="1">
67
- <div class="stage">
68
- <div class="grid" id="grid"></div>
69
- </div>
70
- </div>
38
+ <div
39
+ id="scene"
40
+ class="clip"
41
+ data-composition-id="mosaic-pack"
42
+ data-composition-src="scene.html"
43
+ data-start="0"
44
+ data-duration="2.4"
45
+ data-track-index="1"
46
+ ></div>
71
47
  </div>
72
48
  <script>
73
49
  window.__timelines = window.__timelines || {};
74
- const tl = gsap.timeline({ paused: true });
75
-
76
- // Deterministic palette + grid build (6x4 = 24 cells).
77
- const PALETTE = ["#7c3aed", "#a855f7", "#f5f5fa", "#2a2a3a", "#b56dff", "#6b6b78"];
78
- const COLS = 6;
79
- const ROWS = 4;
80
- const COUNT = COLS * ROWS;
81
- const grid = document.getElementById("grid");
82
- const tiles = [];
83
- for (let i = 0; i < COUNT; i++) {
84
- const tile = document.createElement("div");
85
- tile.className = "tile";
86
- tile.style.background = PALETTE[i % PALETTE.length];
87
- grid.appendChild(tile);
88
- tiles.push(tile);
89
- }
90
-
91
- // Scatter each tile from a deterministic offset/rotation, then pack into place.
92
- // Land order ripples diagonally (col + row) for a deterministic "assembling" feel.
93
- const STEP = 0.07;
94
- for (let i = 0; i < COUNT; i++) {
95
- const col = i % COLS;
96
- const row = Math.floor(i / COLS);
97
- const dx = (((i * 53) % 200) - 100) * 9; // far-flung scatter X
98
- const dy = (((i * 89) % 200) - 100) * 7; // far-flung scatter Y
99
- const rot = ((i * 37) % 80) - 40; // deterministic tilt
100
- const order = col + row; // diagonal land sequence
101
- tl.fromTo(
102
- tiles[i],
103
- { x: dx, y: dy, rotation: rot, scale: 0.6, autoAlpha: 0.15 },
104
- {
105
- x: 0,
106
- y: 0,
107
- rotation: 0,
108
- scale: 1,
109
- autoAlpha: 1,
110
- duration: 0.6,
111
- ease: "back.out(1.6)",
112
- },
113
- 0.1 + order * STEP,
114
- );
115
- }
116
-
117
- // Settle the packed poster with a tiny breath so the loop seats cleanly.
118
- tl.to("#grid", { scale: 1.02, duration: 0.18, ease: "power2.out" }, 1.9);
119
- tl.to("#grid", { scale: 1, duration: 0.32, ease: "power2.inOut" }, 2.08);
120
-
121
- window.__timelines["main"] = tl;
50
+ window.__timelines["main"] = gsap.timeline({ paused: true });
122
51
  </script>
123
52
  </body>
124
53
  </html>