dsh-hyperframes 0.9.0 → 0.9.2

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 (837) hide show
  1. package/CHANGELOG.md +12 -1
  2. package/README.en.md +3 -1
  3. package/README.md +3 -1
  4. package/docs/USAGE.en.md +2 -2
  5. package/docs/USAGE.md +2 -2
  6. package/lib/client.js +74 -54
  7. package/lib/index.js +1 -1
  8. package/lib/media-templates.d.ts +3 -3
  9. package/lib/media-templates.js +1 -1
  10. package/package.json +4 -3
  11. package/plugin.json +5 -0
  12. package/skills/NOTICE.md +3 -0
  13. package/skills/UPSTREAM-LICENSE.txt +190 -0
  14. package/skills/UPSTREAM.json +355 -0
  15. package/skills/embedded-captions/SKILL.md +4 -277
  16. package/skills/faceless-explainer/SKILL.md +4 -231
  17. package/skills/figma/SKILL.md +34 -113
  18. package/skills/general-video/SKILL.md +4 -161
  19. package/skills/hyperframes/SKILL.md +52 -115
  20. package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/biennale-yellow/caption-skin.html +7 -8
  21. package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/blockframe/caption-skin.html +7 -8
  22. package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/blue-professional/caption-skin.html +7 -8
  23. package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/bold-poster/caption-skin.html +7 -8
  24. package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/broadside/caption-skin.html +7 -8
  25. package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/capsule/caption-skin.html +7 -8
  26. package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/cartesian/caption-skin.html +7 -8
  27. package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/cobalt-grid/caption-skin.html +7 -8
  28. package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/code-editorial/FRAME.md +2 -2
  29. package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/code-editorial/caption-skin.html +7 -8
  30. package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/coral/caption-skin.html +7 -8
  31. package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/creative-mode/caption-skin.html +7 -8
  32. package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/daisy-days/caption-skin.html +7 -8
  33. package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/editorial-forest/caption-skin.html +7 -8
  34. package/skills/hyperframes/references/captions.md +46 -0
  35. package/skills/hyperframes/references/film.md +48 -0
  36. package/skills/hyperframes/references/format.md +158 -0
  37. package/skills/hyperframes/references/look.md +69 -0
  38. package/skills/hyperframes/references/motion.md +95 -0
  39. package/skills/hyperframes/references/overlays.md +39 -0
  40. package/skills/hyperframes/references/plugin-installation.md +3 -3
  41. package/skills/hyperframes/references/review.md +51 -0
  42. package/skills/hyperframes/references/runtimes.md +69 -0
  43. package/skills/hyperframes/references/skill-lifecycle.md +28 -14
  44. package/skills/hyperframes/references/sound.md +43 -0
  45. package/skills/hyperframes/references/spec.md +76 -0
  46. package/skills/hyperframes/references/story.md +103 -0
  47. package/skills/hyperframes/references/storyboard-format.md +30 -22
  48. package/skills/hyperframes/references/storyboard.md +36 -0
  49. package/skills/hyperframes/references/types/3d.md +25 -0
  50. package/skills/hyperframes/references/types/character.md +20 -0
  51. package/skills/hyperframes/references/types/data.md +19 -0
  52. package/skills/hyperframes/references/types/explainer.md +34 -0
  53. package/skills/hyperframes/references/types/launch.md +41 -0
  54. package/skills/hyperframes/references/types/music.md +24 -0
  55. package/skills/hyperframes/references/types/vertical.md +23 -0
  56. package/skills/{motion-graphics/categories/maps → hyperframes/scripts}/bake-basemap.mjs +71 -20
  57. package/skills/hyperframes/scripts/lib/main-module.mjs +13 -0
  58. package/skills/hyperframes/scripts/lib/main-module.test.mjs +46 -0
  59. package/skills/{motion-graphics/grounding → hyperframes/scripts}/locate.mjs +1 -1
  60. package/skills/hyperframes/scripts/plugin-cli.mjs +4 -3
  61. package/skills/hyperframes/scripts/plugin-cli.test.mjs +5 -1
  62. package/skills/hyperframes-animation/SKILL.md +4 -82
  63. package/skills/hyperframes-audio/SKILL.md +4 -472
  64. package/skills/hyperframes-cli/SKILL.md +76 -158
  65. package/skills/hyperframes-cli/references/beats.md +3 -7
  66. package/skills/hyperframes-cli/references/cloud.md +4 -4
  67. package/skills/hyperframes-cli/references/cloudrun.md +2 -2
  68. package/skills/hyperframes-cli/references/conventions.md +17 -0
  69. package/skills/hyperframes-cli/references/doctor-browser.md +24 -1
  70. package/skills/hyperframes-cli/references/feedback.md +14 -0
  71. package/skills/hyperframes-cli/references/init-and-scaffold.md +13 -8
  72. package/skills/hyperframes-cli/references/lambda.md +6 -2
  73. package/skills/hyperframes-cli/references/lint-validate-inspect.md +34 -11
  74. package/skills/hyperframes-cli/references/preview-render.md +13 -4
  75. package/skills/hyperframes-cli/references/upgrade-info-misc.md +8 -0
  76. package/skills/hyperframes-core/SKILL.md +4 -94
  77. package/skills/hyperframes-creative/SKILL.md +4 -67
  78. package/skills/hyperframes-keyframes/SKILL.md +4 -258
  79. package/skills/hyperframes-registry/SKILL.md +37 -128
  80. package/skills/hyperframes-registry/references/discovery.md +2 -2
  81. package/skills/hyperframes-registry/references/search.md +67 -0
  82. package/skills/hyperframes-studio/SKILL.md +4 -71
  83. package/skills/media-use/SKILL.md +50 -88
  84. package/skills/media-use/audio/references/bgm.md +4 -2
  85. package/skills/media-use/audio/references/captions/authoring.md +1 -2
  86. package/skills/media-use/audio/references/captions/motion.md +5 -5
  87. package/skills/media-use/audio/references/requirements.md +7 -7
  88. package/skills/media-use/audio/references/sfx.md +20 -14
  89. package/skills/media-use/audio/references/transcribe.md +2 -2
  90. package/skills/media-use/audio/references/tts.md +26 -12
  91. package/skills/media-use/audio/scripts/audio.mjs +25 -17
  92. package/skills/media-use/audio/scripts/audio.test.mjs +121 -4
  93. package/skills/{hyperframes-audio → media-use/audio}/scripts/carve.mjs +2 -14
  94. package/skills/media-use/audio/scripts/gemini-pipeline.test.mjs +20 -2
  95. package/skills/media-use/audio/scripts/heygen-tts.mjs +3 -2
  96. package/skills/media-use/audio/scripts/heygen-tts.test.mjs +38 -0
  97. package/skills/media-use/audio/scripts/heygen-voice.mjs +98 -0
  98. package/skills/media-use/audio/scripts/heygen-voice.test.mjs +233 -0
  99. package/skills/media-use/audio/scripts/lib/bgm.mjs +8 -4
  100. package/skills/media-use/audio/scripts/lib/bgm.test.mjs +45 -1
  101. package/skills/media-use/audio/scripts/lib/heygen.mjs +100 -16
  102. package/skills/media-use/audio/scripts/lib/heygen.test.mjs +205 -16
  103. package/skills/media-use/audio/scripts/lib/main-module.mjs +13 -0
  104. package/skills/media-use/audio/scripts/lib/media-record.mjs +118 -0
  105. package/skills/media-use/audio/scripts/lib/media-record.test.mjs +224 -0
  106. package/skills/media-use/audio/scripts/lib/openverse.mjs +134 -0
  107. package/skills/media-use/audio/scripts/lib/python.mjs +19 -5
  108. package/skills/media-use/audio/scripts/lib/python.test.mjs +69 -1
  109. package/skills/media-use/audio/scripts/lib/sfx.mjs +141 -88
  110. package/skills/media-use/audio/scripts/lib/sfx.test.mjs +270 -8
  111. package/skills/media-use/audio/scripts/lib/tts.cleanup.test.mjs +175 -0
  112. package/skills/media-use/audio/scripts/lib/tts.mjs +28 -24
  113. package/skills/media-use/audio/scripts/lib/tts.test.mjs +74 -1
  114. package/skills/media-use/audio/scripts/wait-bgm.mjs +4 -0
  115. package/skills/media-use/audio/scripts/wait-bgm.test.mjs +44 -1
  116. package/skills/media-use/references/audio.md +2 -2
  117. package/skills/media-use/references/grading.md +5 -4
  118. package/skills/media-use/references/local.md +24 -0
  119. package/skills/media-use/references/media-treatments.md +5 -1
  120. package/skills/media-use/references/memory.md +10 -5
  121. package/skills/media-use/references/meta.md +17 -17
  122. package/skills/media-use/references/mixing.md +72 -0
  123. package/skills/media-use/references/operations.md +10 -8
  124. package/skills/media-use/references/resolve.md +1 -1
  125. package/skills/media-use/references/setup-providers.md +31 -17
  126. package/skills/media-use/scripts/compatibility.test.mjs +1 -56
  127. package/skills/media-use/scripts/lib/cutlist.mjs +9 -2
  128. package/skills/media-use/scripts/lib/duck.mjs +20 -3
  129. package/skills/media-use/scripts/lib/index-gen.mjs +2 -2
  130. package/skills/media-use/scripts/lib/manifest.mjs +85 -32
  131. package/skills/media-use/scripts/lib/prefs-store.mjs +47 -29
  132. package/skills/media-use/scripts/lib/recipe-store.mjs +7 -3
  133. package/skills/media-use/scripts/lib/telemetry.mjs +4 -1
  134. package/skills/media-use/scripts/lib/telemetry.test.mjs +73 -0
  135. package/skills/media-use/scripts/lib/words.mjs +1 -1
  136. package/skills/media-use/scripts/prefs.mjs +2 -3
  137. package/skills/media-use/scripts/recipe.mjs +1 -3
  138. package/skills/media-use/scripts/transcript-cut.mjs +23 -4
  139. package/skills/media-use/scripts/transcript-cut.test.mjs +224 -0
  140. package/skills/motion-graphics/SKILL.md +4 -172
  141. package/skills/music-to-video/SKILL.md +4 -204
  142. package/skills/pr-to-video/SKILL.md +4 -267
  143. package/skills/product-launch-video/SKILL.md +4 -258
  144. package/skills/remotion-to-hyperframes/SKILL.md +32 -115
  145. package/skills/remotion-to-hyperframes/assets/test-corpus/tier-1-title-card/hf-src/index.html +3 -0
  146. package/skills/remotion-to-hyperframes/assets/test-corpus/tier-2-multi-scene/hf-src/index.html +3 -0
  147. package/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/README.md +8 -7
  148. package/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/expected.json +3 -3
  149. package/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/hf-src/compositions/scene-1.html +6 -2
  150. package/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/hf-src/compositions/scene-2.html +3 -4
  151. package/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/hf-src/compositions/scene-3.html +2 -2
  152. package/skills/remotion-to-hyperframes/assets/test-corpus/tier-3-data-driven/hf-src/index.html +3 -0
  153. package/skills/remotion-to-hyperframes/references/api-map.md +41 -29
  154. package/skills/remotion-to-hyperframes/references/limitations.md +3 -3
  155. package/skills/remotion-to-hyperframes/references/lottie.md +21 -8
  156. package/skills/remotion-to-hyperframes/references/media.md +23 -6
  157. package/skills/remotion-to-hyperframes/references/timing.md +20 -8
  158. package/skills/remotion-to-hyperframes/scripts/tests/boxSizing.test.mjs +21 -0
  159. package/skills/slideshow/SKILL.md +42 -512
  160. package/skills/slideshow/references/standalone-harness.md +1 -1
  161. package/skills/talking-head-recut/SKILL.md +4 -1214
  162. package/skills/embedded-captions/CATALOG.md +0 -91
  163. package/skills/embedded-captions/assets/fonts/char-widths.json +0 -2211
  164. package/skills/embedded-captions/assets/strokefonts/HersheyScript1.svg +0 -242
  165. package/skills/embedded-captions/assets/strokefonts/HersheyScriptMed.svg +0 -242
  166. package/skills/embedded-captions/dna/README.md +0 -148
  167. package/skills/embedded-captions/dna/chrome.json +0 -68
  168. package/skills/embedded-captions/dna/cream.json +0 -69
  169. package/skills/embedded-captions/dna/documentary.json +0 -62
  170. package/skills/embedded-captions/dna/editorial.json +0 -70
  171. package/skills/embedded-captions/dna/glitch.json +0 -82
  172. package/skills/embedded-captions/dna/ink.json +0 -65
  173. package/skills/embedded-captions/dna/keynote.json +0 -62
  174. package/skills/embedded-captions/dna/loud.json +0 -75
  175. package/skills/embedded-captions/dna/neon.json +0 -58
  176. package/skills/embedded-captions/dna/velocity.json +0 -89
  177. package/skills/embedded-captions/modes/cinematic/README.md +0 -48
  178. package/skills/embedded-captions/modes/cinematic/_archive/champion/spec.md +0 -98
  179. package/skills/embedded-captions/modes/cinematic/_archive/champion/template.html +0 -188
  180. package/skills/embedded-captions/modes/cinematic/_archive/memory-wall/spec.md +0 -134
  181. package/skills/embedded-captions/modes/cinematic/_archive/memory-wall/template.html +0 -179
  182. package/skills/embedded-captions/modes/cinematic/_archive/portrait-header/spec.md +0 -81
  183. package/skills/embedded-captions/modes/cinematic/_archive/portrait-header/template.html +0 -170
  184. package/skills/embedded-captions/modes/cinematic/cinematic-cream/spec.md +0 -16
  185. package/skills/embedded-captions/modes/cinematic/cinematic-cream/template.html +0 -226
  186. package/skills/embedded-captions/modes/cinematic/engine.html +0 -355
  187. package/skills/embedded-captions/modes/standard/_anatomy.md +0 -233
  188. package/skills/embedded-captions/modes/standard/_motion.md +0 -192
  189. package/skills/embedded-captions/modes/standard/fonts/build-fonts-css.cjs +0 -97
  190. package/skills/embedded-captions/modes/standard/fonts/files/anton-latin-400-normal.woff2 +0 -0
  191. package/skills/embedded-captions/modes/standard/fonts/files/audiowide-latin-400-normal.woff2 +0 -0
  192. package/skills/embedded-captions/modes/standard/fonts/files/baloo-2-latin-400-normal.woff2 +0 -0
  193. package/skills/embedded-captions/modes/standard/fonts/files/baloo-2-latin-700-normal.woff2 +0 -0
  194. package/skills/embedded-captions/modes/standard/fonts/files/bangers-latin-400-normal.woff2 +0 -0
  195. package/skills/embedded-captions/modes/standard/fonts/files/bodoni-moda-latin-400-normal.woff2 +0 -0
  196. package/skills/embedded-captions/modes/standard/fonts/files/bodoni-moda-latin-700-normal.woff2 +0 -0
  197. package/skills/embedded-captions/modes/standard/fonts/files/caveat-latin-400-normal.woff2 +0 -0
  198. package/skills/embedded-captions/modes/standard/fonts/files/caveat-latin-700-normal.woff2 +0 -0
  199. package/skills/embedded-captions/modes/standard/fonts/files/chakra-petch-latin-500-normal.woff2 +0 -0
  200. package/skills/embedded-captions/modes/standard/fonts/files/chakra-petch-latin-700-normal.woff2 +0 -0
  201. package/skills/embedded-captions/modes/standard/fonts/files/cinzel-latin-400-normal.woff2 +0 -0
  202. package/skills/embedded-captions/modes/standard/fonts/files/cinzel-latin-700-normal.woff2 +0 -0
  203. package/skills/embedded-captions/modes/standard/fonts/files/cormorant-garamond-latin-400-normal.woff2 +0 -0
  204. package/skills/embedded-captions/modes/standard/fonts/files/cormorant-garamond-latin-700-normal.woff2 +0 -0
  205. package/skills/embedded-captions/modes/standard/fonts/files/creepster-latin-400-normal.woff2 +0 -0
  206. package/skills/embedded-captions/modes/standard/fonts/files/fredoka-latin-400-normal.woff2 +0 -0
  207. package/skills/embedded-captions/modes/standard/fonts/files/fredoka-latin-700-normal.woff2 +0 -0
  208. package/skills/embedded-captions/modes/standard/fonts/files/inter-latin-400-normal.woff2 +0 -0
  209. package/skills/embedded-captions/modes/standard/fonts/files/inter-latin-500-italic.woff2 +0 -0
  210. package/skills/embedded-captions/modes/standard/fonts/files/inter-latin-500-normal.woff2 +0 -0
  211. package/skills/embedded-captions/modes/standard/fonts/files/inter-latin-600-italic.woff2 +0 -0
  212. package/skills/embedded-captions/modes/standard/fonts/files/inter-latin-600-normal.woff2 +0 -0
  213. package/skills/embedded-captions/modes/standard/fonts/files/inter-latin-700-normal.woff2 +0 -0
  214. package/skills/embedded-captions/modes/standard/fonts/files/inter-latin-800-normal.woff2 +0 -0
  215. package/skills/embedded-captions/modes/standard/fonts/files/inter-latin-900-normal.woff2 +0 -0
  216. package/skills/embedded-captions/modes/standard/fonts/files/monoton-latin-400-normal.woff2 +0 -0
  217. package/skills/embedded-captions/modes/standard/fonts/files/orbitron-latin-400-normal.woff2 +0 -0
  218. package/skills/embedded-captions/modes/standard/fonts/files/orbitron-latin-700-normal.woff2 +0 -0
  219. package/skills/embedded-captions/modes/standard/fonts/files/permanent-marker-latin-400-normal.woff2 +0 -0
  220. package/skills/embedded-captions/modes/standard/fonts/files/press-start-2p-latin-400-normal.woff2 +0 -0
  221. package/skills/embedded-captions/modes/standard/fonts/files/rajdhani-latin-500-normal.woff2 +0 -0
  222. package/skills/embedded-captions/modes/standard/fonts/files/rajdhani-latin-700-normal.woff2 +0 -0
  223. package/skills/embedded-captions/modes/standard/fonts/files/saira-stencil-one-latin-400-normal.woff2 +0 -0
  224. package/skills/embedded-captions/modes/standard/fonts/files/shippori-mincho-latin-400-normal.woff2 +0 -0
  225. package/skills/embedded-captions/modes/standard/fonts/files/shippori-mincho-latin-700-normal.woff2 +0 -0
  226. package/skills/embedded-captions/modes/standard/fonts/files/sora-latin-400-normal.woff2 +0 -0
  227. package/skills/embedded-captions/modes/standard/fonts/files/sora-latin-700-normal.woff2 +0 -0
  228. package/skills/embedded-captions/modes/standard/fonts/files/space-grotesk-latin-400-normal.woff2 +0 -0
  229. package/skills/embedded-captions/modes/standard/fonts/files/space-grotesk-latin-700-normal.woff2 +0 -0
  230. package/skills/embedded-captions/modes/standard/fonts/files/special-elite-latin-400-normal.woff2 +0 -0
  231. package/skills/embedded-captions/modes/standard/fonts/files/teko-latin-400-normal.woff2 +0 -0
  232. package/skills/embedded-captions/modes/standard/fonts/files/teko-latin-700-normal.woff2 +0 -0
  233. package/skills/embedded-captions/modes/standard/fonts/files/vt323-latin-400-normal.woff2 +0 -0
  234. package/skills/embedded-captions/modes/standard/fonts/fonts.css +0 -401
  235. package/skills/embedded-captions/references/aesthetic-principles.md +0 -167
  236. package/skills/embedded-captions/references/anti-patterns.md +0 -188
  237. package/skills/embedded-captions/references/bespoke-vs-presets.md +0 -178
  238. package/skills/embedded-captions/references/caption-grouping.md +0 -130
  239. package/skills/embedded-captions/references/composition-craft.md +0 -522
  240. package/skills/embedded-captions/references/direction-catalog.md +0 -138
  241. package/skills/embedded-captions/references/example-renders/champion.html +0 -371
  242. package/skills/embedded-captions/references/example-renders/memory-wall.html +0 -334
  243. package/skills/embedded-captions/references/failure-modes.md +0 -145
  244. package/skills/embedded-captions/references/layout-heuristics.md +0 -238
  245. package/skills/embedded-captions/references/motion-vocabulary.md +0 -148
  246. package/skills/embedded-captions/references/rail.md +0 -68
  247. package/skills/embedded-captions/references/reference-bar.md +0 -47
  248. package/skills/embedded-captions/references/scene-types.md +0 -94
  249. package/skills/embedded-captions/references/typographic-moves.md +0 -266
  250. package/skills/embedded-captions/references/typography-presets.md +0 -63
  251. package/skills/embedded-captions/scripts/audio-envelope.cjs +0 -95
  252. package/skills/embedded-captions/scripts/check-occlusion.cjs +0 -253
  253. package/skills/embedded-captions/scripts/check-overflow.cjs +0 -195
  254. package/skills/embedded-captions/scripts/check-rail-climax.cjs +0 -237
  255. package/skills/embedded-captions/scripts/check-timing.cjs +0 -173
  256. package/skills/embedded-captions/scripts/fill-timings.cjs +0 -124
  257. package/skills/embedded-captions/scripts/fit-fonts.cjs +0 -158
  258. package/skills/embedded-captions/scripts/fixtures/heroless/theme.json +0 -11
  259. package/skills/embedded-captions/scripts/gen-stroke-path.py +0 -57
  260. package/skills/embedded-captions/scripts/hf-cli.cjs +0 -33
  261. package/skills/embedded-captions/scripts/inject-fonts.cjs +0 -169
  262. package/skills/embedded-captions/scripts/lib-dna.cjs +0 -201
  263. package/skills/embedded-captions/scripts/make-cinematic.cjs +0 -1206
  264. package/skills/embedded-captions/scripts/make-composition.cjs +0 -405
  265. package/skills/embedded-captions/scripts/make-theme.cjs +0 -8623
  266. package/skills/embedded-captions/scripts/make-theme.test.mjs +0 -131
  267. package/skills/embedded-captions/scripts/matte.cjs +0 -268
  268. package/skills/embedded-captions/scripts/measure-layout.cjs +0 -294
  269. package/skills/embedded-captions/scripts/prepare.sh +0 -39
  270. package/skills/embedded-captions/scripts/preview-frames.cjs +0 -296
  271. package/skills/embedded-captions/scripts/preview-frames.test.mjs +0 -24
  272. package/skills/embedded-captions/scripts/render-and-composite.sh +0 -425
  273. package/skills/embedded-captions/scripts/render-theme.sh +0 -34
  274. package/skills/embedded-captions/scripts/safe-zones.cjs +0 -816
  275. package/skills/embedded-captions/scripts/transcribe.cjs +0 -323
  276. package/skills/embedded-captions/scripts/transcribe.test.mjs +0 -41
  277. package/skills/embedded-captions/themes/README.md +0 -243
  278. package/skills/embedded-captions/themes/anchor.json +0 -27
  279. package/skills/embedded-captions/themes/arcade.json +0 -51
  280. package/skills/embedded-captions/themes/aurora.json +0 -41
  281. package/skills/embedded-captions/themes/biolume.json +0 -35
  282. package/skills/embedded-captions/themes/brush.json +0 -74
  283. package/skills/embedded-captions/themes/chalkboard.json +0 -52
  284. package/skills/embedded-captions/themes/dossier.json +0 -56
  285. package/skills/embedded-captions/themes/graffiti.json +0 -62
  286. package/skills/embedded-captions/themes/hologram.json +0 -41
  287. package/skills/embedded-captions/themes/inkwater.json +0 -43
  288. package/skills/embedded-captions/themes/laser.json +0 -46
  289. package/skills/embedded-captions/themes/lastpage.json +0 -33
  290. package/skills/embedded-captions/themes/neonsign.json +0 -53
  291. package/skills/embedded-captions/themes/ordnance.json +0 -54
  292. package/skills/embedded-captions/themes/papercut.json +0 -37
  293. package/skills/embedded-captions/themes/popup.json +0 -46
  294. package/skills/embedded-captions/themes/ransom.json +0 -62
  295. package/skills/embedded-captions/themes/scoreboard.json +0 -54
  296. package/skills/embedded-captions/themes/spectrum.json +0 -46
  297. package/skills/embedded-captions/themes/stardust.json +0 -29
  298. package/skills/embedded-captions/themes/stomp.json +0 -43
  299. package/skills/embedded-captions/themes/terminal.json +0 -49
  300. package/skills/embedded-captions/themes/thunder.json +0 -44
  301. package/skills/embedded-captions/themes/transit.json +0 -44
  302. package/skills/embedded-captions/themes/vhs.json +0 -47
  303. package/skills/faceless-explainer/references/cut-catalog.md +0 -215
  304. package/skills/faceless-explainer/references/motion-language.md +0 -156
  305. package/skills/faceless-explainer/references/story-design.md +0 -255
  306. package/skills/faceless-explainer/references/visual-design.md +0 -146
  307. package/skills/faceless-explainer/scripts/assemble-index.mjs +0 -625
  308. package/skills/faceless-explainer/scripts/assemble-index.test.mjs +0 -127
  309. package/skills/faceless-explainer/scripts/audio.mjs +0 -293
  310. package/skills/faceless-explainer/scripts/audio.test.mjs +0 -176
  311. package/skills/faceless-explainer/scripts/build-frame.mjs +0 -554
  312. package/skills/faceless-explainer/scripts/captions.mjs +0 -524
  313. package/skills/faceless-explainer/scripts/captions.test.mjs +0 -219
  314. package/skills/faceless-explainer/scripts/frame-packets.mjs +0 -27
  315. package/skills/faceless-explainer/scripts/frame-packets.test.mjs +0 -66
  316. package/skills/faceless-explainer/scripts/lib/assets.mjs +0 -56
  317. package/skills/faceless-explainer/scripts/lib/bgm-volume.mjs +0 -4
  318. package/skills/faceless-explainer/scripts/lib/captured-fonts.mjs +0 -58
  319. package/skills/faceless-explainer/scripts/lib/dimensions.mjs +0 -45
  320. package/skills/faceless-explainer/scripts/lib/frame-packets-core.mjs +0 -194
  321. package/skills/faceless-explainer/scripts/lib/pad-frame-duration.mjs +0 -36
  322. package/skills/faceless-explainer/scripts/lib/storyboard.mjs +0 -249
  323. package/skills/faceless-explainer/scripts/lib/tokens.mjs +0 -211
  324. package/skills/faceless-explainer/scripts/lib/transition-registry.mjs +0 -38
  325. package/skills/faceless-explainer/scripts/lib/transitions.json +0 -71
  326. package/skills/faceless-explainer/scripts/transitions.mjs +0 -384
  327. package/skills/faceless-explainer/scripts/transitions.test.mjs +0 -70
  328. package/skills/faceless-explainer/sub-agents/frame-worker.md +0 -12
  329. package/skills/general-video/scripts/frame-packets.mjs +0 -38
  330. package/skills/general-video/scripts/frame-packets.test.mjs +0 -80
  331. package/skills/general-video/scripts/lib/frame-packets-core.mjs +0 -194
  332. package/skills/general-video/sub-agents/frame-worker.md +0 -34
  333. package/skills/hyperframes/references/brief-contract.md +0 -108
  334. package/skills/hyperframes/references/brief-format.md +0 -72
  335. package/skills/hyperframes/references/capability-menu.md +0 -47
  336. package/skills/hyperframes/references/frame-worker-core.md +0 -80
  337. package/skills/hyperframes/references/intent-interview.md +0 -71
  338. package/skills/hyperframes/references/pitch-round.md +0 -40
  339. package/skills/hyperframes/references/production-loop.md +0 -26
  340. package/skills/hyperframes/references/review-loop.md +0 -37
  341. package/skills/hyperframes/references/route-briefs.md +0 -11
  342. package/skills/hyperframes/references/routes/embedded-captions.md +0 -11
  343. package/skills/hyperframes/references/routes/faceless-explainer.md +0 -12
  344. package/skills/hyperframes/references/routes/general-video.md +0 -12
  345. package/skills/hyperframes/references/routes/motion-graphics.md +0 -11
  346. package/skills/hyperframes/references/routes/music-to-video.md +0 -12
  347. package/skills/hyperframes/references/routes/pr-to-video.md +0 -28
  348. package/skills/hyperframes/references/routes/product-launch-video.md +0 -13
  349. package/skills/hyperframes/references/routes/remotion-to-hyperframes.md +0 -9
  350. package/skills/hyperframes/references/routes/slideshow.md +0 -11
  351. package/skills/hyperframes/references/routes/talking-head-recut.md +0 -11
  352. package/skills/hyperframes/references/script-format.md +0 -52
  353. package/skills/hyperframes/references/subagent-dispatch.md +0 -35
  354. package/skills/hyperframes/references/workflow-catalog.md +0 -10
  355. package/skills/hyperframes/scripts/lib/frame-packets-core.mjs +0 -194
  356. package/skills/hyperframes-animation/adapters/animate-text.md +0 -64
  357. package/skills/hyperframes-animation/adapters/animejs.md +0 -130
  358. package/skills/hyperframes-animation/adapters/css-animations.md +0 -143
  359. package/skills/hyperframes-animation/adapters/gsap-easing-and-stagger.md +0 -199
  360. package/skills/hyperframes-animation/adapters/gsap-timeline-and-labels.md +0 -96
  361. package/skills/hyperframes-animation/adapters/gsap-transforms-and-perf.md +0 -129
  362. package/skills/hyperframes-animation/adapters/gsap.md +0 -105
  363. package/skills/hyperframes-animation/adapters/html-in-canvas-patterns.md +0 -507
  364. package/skills/hyperframes-animation/adapters/lottie.md +0 -130
  365. package/skills/hyperframes-animation/adapters/three.md +0 -145
  366. package/skills/hyperframes-animation/adapters/typegpu.md +0 -182
  367. package/skills/hyperframes-animation/adapters/waapi.md +0 -101
  368. package/skills/hyperframes-animation/blueprints/agent-progress-theater.md +0 -76
  369. package/skills/hyperframes-animation/blueprints/camera-journey.md +0 -61
  370. package/skills/hyperframes-animation/blueprints/comparison-split.md +0 -27
  371. package/skills/hyperframes-animation/blueprints/constellation-hub.md +0 -63
  372. package/skills/hyperframes-animation/blueprints/cta-morph-press.md +0 -63
  373. package/skills/hyperframes-animation/blueprints/cursor-ui-demo.md +0 -89
  374. package/skills/hyperframes-animation/blueprints/dataviz-countup.md +0 -59
  375. package/skills/hyperframes-animation/blueprints/device-surface-showcase.md +0 -68
  376. package/skills/hyperframes-animation/blueprints/fixed-anchor-cycle.md +0 -46
  377. package/skills/hyperframes-animation/blueprints/grid-card-assemble.md +0 -81
  378. package/skills/hyperframes-animation/blueprints/kinetic-type-beats.md +0 -133
  379. package/skills/hyperframes-animation/blueprints/logo-assemble-lockup.md +0 -121
  380. package/skills/hyperframes-animation/blueprints/overwhelm-surround.md +0 -58
  381. package/skills/hyperframes-animation/blueprints/panel-edit-live-sync.md +0 -73
  382. package/skills/hyperframes-animation/blueprints/prompt-type-submit-generate.md +0 -85
  383. package/skills/hyperframes-animation/blueprints/spatial-pan-stations.md +0 -37
  384. package/skills/hyperframes-animation/blueprints/ticker-takeover.md +0 -29
  385. package/skills/hyperframes-animation/blueprints/titlecard-reveal.md +0 -80
  386. package/skills/hyperframes-animation/blueprints/transcript-scroll-artifact-reveal.md +0 -45
  387. package/skills/hyperframes-animation/blueprints/typewriter-reveal.md +0 -51
  388. package/skills/hyperframes-animation/blueprints/video-text-pivot.md +0 -30
  389. package/skills/hyperframes-animation/blueprints/zoom-out-workspace-reveal.md +0 -68
  390. package/skills/hyperframes-animation/blueprints-index.md +0 -202
  391. package/skills/hyperframes-animation/examples/brand-reveal-assemble-zoom.html +0 -382
  392. package/skills/hyperframes-animation/examples/comparison-split-cards.html +0 -649
  393. package/skills/hyperframes-animation/examples/concept-demo-decode-pan.html +0 -520
  394. package/skills/hyperframes-animation/examples/cta-morph-press.html +0 -468
  395. package/skills/hyperframes-animation/examples/cta-orbit-collapse.html +0 -1298
  396. package/skills/hyperframes-animation/examples/demo-page-scroll-spotlight.html +0 -759
  397. package/skills/hyperframes-animation/examples/hook-counter-burst.html +0 -729
  398. package/skills/hyperframes-animation/examples/messaging-multi-phrase.html +0 -352
  399. package/skills/hyperframes-animation/examples/metric-video-text-pivot.html +0 -779
  400. package/skills/hyperframes-animation/examples/problem-mockup-overwhelm.html +0 -1374
  401. package/skills/hyperframes-animation/examples/proof-logo-chain.html +0 -861
  402. package/skills/hyperframes-animation/examples/takeover-ticker-displace.html +0 -347
  403. package/skills/hyperframes-animation/examples/workflow-approve-press.html +0 -606
  404. package/skills/hyperframes-animation/references/motion-blur.md +0 -133
  405. package/skills/hyperframes-animation/rules/3d-camera-flight.md +0 -180
  406. package/skills/hyperframes-animation/rules/3d-page-scroll.md +0 -135
  407. package/skills/hyperframes-animation/rules/3d-text-depth-layers.md +0 -128
  408. package/skills/hyperframes-animation/rules/ai-tracking-box.md +0 -139
  409. package/skills/hyperframes-animation/rules/ambient-glow-bloom.md +0 -133
  410. package/skills/hyperframes-animation/rules/anchored-layout-expand.md +0 -148
  411. package/skills/hyperframes-animation/rules/asr-keyword-glow.md +0 -128
  412. package/skills/hyperframes-animation/rules/avatar-cloud-network.md +0 -145
  413. package/skills/hyperframes-animation/rules/camera-cursor-tracking.md +0 -133
  414. package/skills/hyperframes-animation/rules/card-morph-anchor.md +0 -134
  415. package/skills/hyperframes-animation/rules/center-outward-expansion.md +0 -88
  416. package/skills/hyperframes-animation/rules/chart-scrub-readout.md +0 -151
  417. package/skills/hyperframes-animation/rules/chromatic-glitch.md +0 -150
  418. package/skills/hyperframes-animation/rules/context-sensitive-cursor.md +0 -140
  419. package/skills/hyperframes-animation/rules/control-target-sync.md +0 -131
  420. package/skills/hyperframes-animation/rules/coordinate-target-zoom.md +0 -138
  421. package/skills/hyperframes-animation/rules/counting-dynamic-scale.md +0 -115
  422. package/skills/hyperframes-animation/rules/css-marker-patterns.md +0 -208
  423. package/skills/hyperframes-animation/rules/cursor-click-ripple.md +0 -104
  424. package/skills/hyperframes-animation/rules/cursor-drag.md +0 -141
  425. package/skills/hyperframes-animation/rules/depth-of-field-blur.md +0 -112
  426. package/skills/hyperframes-animation/rules/depth-scatter-assemble.md +0 -139
  427. package/skills/hyperframes-animation/rules/discrete-text-sequence.md +0 -146
  428. package/skills/hyperframes-animation/rules/dynamic-content-sequencing.md +0 -149
  429. package/skills/hyperframes-animation/rules/gradient-text-sweep.md +0 -136
  430. package/skills/hyperframes-animation/rules/gsap-effects.md +0 -196
  431. package/skills/hyperframes-animation/rules/hacker-flip-3d.md +0 -123
  432. package/skills/hyperframes-animation/rules/kinetic-beat-slam.md +0 -137
  433. package/skills/hyperframes-animation/rules/motion-blur-streak.md +0 -130
  434. package/skills/hyperframes-animation/rules/multi-cursor-choreography.md +0 -133
  435. package/skills/hyperframes-animation/rules/multi-phase-camera.md +0 -129
  436. package/skills/hyperframes-animation/rules/nudge-curve.md +0 -47
  437. package/skills/hyperframes-animation/rules/orbit-3d-entry.md +0 -148
  438. package/skills/hyperframes-animation/rules/particle-burst.md +0 -149
  439. package/skills/hyperframes-animation/rules/physics-press-reaction.md +0 -101
  440. package/skills/hyperframes-animation/rules/press-release-spring.md +0 -108
  441. package/skills/hyperframes-animation/rules/reactive-displacement.md +0 -92
  442. package/skills/hyperframes-animation/rules/scale-swap-transition.md +0 -88
  443. package/skills/hyperframes-animation/rules/sine-wave-loop.md +0 -85
  444. package/skills/hyperframes-animation/rules/split-tilt-cards.md +0 -123
  445. package/skills/hyperframes-animation/rules/spring-pop-entrance.md +0 -107
  446. package/skills/hyperframes-animation/rules/stat-bars-and-fills.md +0 -145
  447. package/skills/hyperframes-animation/rules/svg-icon-enrichment.md +0 -141
  448. package/skills/hyperframes-animation/rules/svg-path-draw.md +0 -122
  449. package/skills/hyperframes-animation/rules/theme-crossfade-morph.md +0 -126
  450. package/skills/hyperframes-animation/rules/vertical-spring-ticker.md +0 -104
  451. package/skills/hyperframes-animation/rules/viewport-change.md +0 -148
  452. package/skills/hyperframes-animation/rules/waterfall-entry.md +0 -81
  453. package/skills/hyperframes-animation/rules-index.md +0 -113
  454. package/skills/hyperframes-animation/scripts/animation-map-sampling.mjs +0 -40
  455. package/skills/hyperframes-animation/scripts/animation-map-sampling.test.mjs +0 -48
  456. package/skills/hyperframes-animation/scripts/animation-map.mjs +0 -659
  457. package/skills/hyperframes-animation/scripts/animation-map.test.mjs +0 -444
  458. package/skills/hyperframes-animation/scripts/package-loader.mjs +0 -415
  459. package/skills/hyperframes-animation/scripts/package-loader.test.mjs +0 -114
  460. package/skills/hyperframes-animation/techniques.md +0 -507
  461. package/skills/hyperframes-animation/transitions/TRANSITION-REGISTRY.md +0 -168
  462. package/skills/hyperframes-animation/transitions/catalog.md +0 -127
  463. package/skills/hyperframes-animation/transitions/css-3d.md +0 -12
  464. package/skills/hyperframes-animation/transitions/css-blur.md +0 -51
  465. package/skills/hyperframes-animation/transitions/css-cover.md +0 -43
  466. package/skills/hyperframes-animation/transitions/css-destruction.md +0 -95
  467. package/skills/hyperframes-animation/transitions/css-dissolve.md +0 -66
  468. package/skills/hyperframes-animation/transitions/css-distortion.md +0 -45
  469. package/skills/hyperframes-animation/transitions/css-grid.md +0 -10
  470. package/skills/hyperframes-animation/transitions/css-light.md +0 -49
  471. package/skills/hyperframes-animation/transitions/css-mechanical.md +0 -30
  472. package/skills/hyperframes-animation/transitions/css-other.md +0 -25
  473. package/skills/hyperframes-animation/transitions/css-push.md +0 -41
  474. package/skills/hyperframes-animation/transitions/css-radial.md +0 -37
  475. package/skills/hyperframes-animation/transitions/css-scale.md +0 -24
  476. package/skills/hyperframes-animation/transitions/overview.md +0 -153
  477. package/skills/hyperframes-audio/references/attributes.md +0 -138
  478. package/skills/hyperframes-audio/references/diagnosis.md +0 -276
  479. package/skills/hyperframes-audio/references/fx-registry.md +0 -84
  480. package/skills/hyperframes-audio/references/presets.md +0 -216
  481. package/skills/hyperframes-core/references/composition-patterns.md +0 -224
  482. package/skills/hyperframes-core/references/creator-editing-recipes.md +0 -491
  483. package/skills/hyperframes-core/references/data-attributes.md +0 -78
  484. package/skills/hyperframes-core/references/determinism-rules.md +0 -53
  485. package/skills/hyperframes-core/references/full-screen-motion.md +0 -67
  486. package/skills/hyperframes-core/references/minimal-composition.md +0 -69
  487. package/skills/hyperframes-core/references/sub-compositions.md +0 -176
  488. package/skills/hyperframes-core/references/tailwind.md +0 -104
  489. package/skills/hyperframes-core/references/tracks-and-clips.md +0 -87
  490. package/skills/hyperframes-core/references/variables-and-media.md +0 -107
  491. package/skills/hyperframes-creative/palettes/bold-energetic.md +0 -14
  492. package/skills/hyperframes-creative/palettes/clean-corporate.md +0 -14
  493. package/skills/hyperframes-creative/palettes/dark-premium.md +0 -14
  494. package/skills/hyperframes-creative/palettes/jewel-rich.md +0 -14
  495. package/skills/hyperframes-creative/palettes/monochrome.md +0 -14
  496. package/skills/hyperframes-creative/palettes/nature-earth.md +0 -14
  497. package/skills/hyperframes-creative/palettes/neon-electric.md +0 -14
  498. package/skills/hyperframes-creative/palettes/pastel-soft.md +0 -14
  499. package/skills/hyperframes-creative/palettes/warm-editorial.md +0 -14
  500. package/skills/hyperframes-creative/references/audio-reactive.md +0 -76
  501. package/skills/hyperframes-creative/references/beat-direction.md +0 -164
  502. package/skills/hyperframes-creative/references/composition-patterns.md +0 -199
  503. package/skills/hyperframes-creative/references/data-in-motion.md +0 -19
  504. package/skills/hyperframes-creative/references/design-adherence.md +0 -19
  505. package/skills/hyperframes-creative/references/design-picker.md +0 -123
  506. package/skills/hyperframes-creative/references/design-spec.md +0 -55
  507. package/skills/hyperframes-creative/references/house-style.md +0 -73
  508. package/skills/hyperframes-creative/references/motion-principles.md +0 -151
  509. package/skills/hyperframes-creative/references/narration.md +0 -92
  510. package/skills/hyperframes-creative/references/prompt-expansion.md +0 -68
  511. package/skills/hyperframes-creative/references/story-spine.md +0 -45
  512. package/skills/hyperframes-creative/references/storyboard-recipe.md +0 -57
  513. package/skills/hyperframes-creative/references/typography.md +0 -218
  514. package/skills/hyperframes-creative/references/video-composition.md +0 -63
  515. package/skills/hyperframes-creative/references/visual-styles.md +0 -457
  516. package/skills/hyperframes-creative/scripts/contrast-report.mjs +0 -538
  517. package/skills/hyperframes-creative/scripts/package-loader.mjs +0 -415
  518. package/skills/hyperframes-creative/scripts/package-loader.test.mjs +0 -114
  519. package/skills/hyperframes-creative/templates/design-picker.html +0 -1432
  520. package/skills/hyperframes-keyframes/agents/openai.yaml +0 -4
  521. package/skills/hyperframes-keyframes/references/keyframe-patterns.md +0 -108
  522. package/skills/motion-graphics/agents/builder.md +0 -41
  523. package/skills/motion-graphics/agents/director.md +0 -54
  524. package/skills/motion-graphics/agents/finalize.md +0 -17
  525. package/skills/motion-graphics/catalog-map.md +0 -52
  526. package/skills/motion-graphics/categories/asset-fusion/module.md +0 -37
  527. package/skills/motion-graphics/categories/charts/module.md +0 -22
  528. package/skills/motion-graphics/categories/kinetic-type/module.md +0 -19
  529. package/skills/motion-graphics/categories/logo-reveal/module.md +0 -17
  530. package/skills/motion-graphics/categories/lower-thirds/module.md +0 -20
  531. package/skills/motion-graphics/categories/maps/module.md +0 -61
  532. package/skills/motion-graphics/categories/news/module.md +0 -56
  533. package/skills/motion-graphics/categories/stat/module.md +0 -21
  534. package/skills/motion-graphics/categories/tweet/module.md +0 -16
  535. package/skills/motion-graphics/categories/webpage/module.md +0 -30
  536. package/skills/motion-graphics/grounding/PROTOCOL.md +0 -64
  537. package/skills/motion-graphics/phases/source/guide.md +0 -21
  538. package/skills/motion-graphics/references/builder-contract.md +0 -38
  539. package/skills/motion-graphics/references/motion-vocabulary.md +0 -47
  540. package/skills/motion-graphics/references/shot-plan-ir.md +0 -54
  541. package/skills/motion-graphics/samples/asset-fusion/_ref-circle-highlight.html +0 -306
  542. package/skills/music-to-video/references/frame-skeleton.md +0 -100
  543. package/skills/music-to-video/references/montage.md +0 -55
  544. package/skills/music-to-video/references/motion-primitive-catalog.md +0 -75
  545. package/skills/music-to-video/references/motion-primitives/3d-card-flip/index.html +0 -53
  546. package/skills/music-to-video/references/motion-primitives/3d-card-flip/scene.html +0 -119
  547. package/skills/music-to-video/references/motion-primitives/assets/gsap.min.js +0 -11
  548. package/skills/music-to-video/references/motion-primitives/bg-flow-field/index.html +0 -53
  549. package/skills/music-to-video/references/motion-primitives/bg-flow-field/scene.html +0 -294
  550. package/skills/music-to-video/references/motion-primitives/binary-decrypt/index.html +0 -54
  551. package/skills/music-to-video/references/motion-primitives/binary-decrypt/scene.html +0 -85
  552. package/skills/music-to-video/references/motion-primitives/blur-resolve/index.html +0 -53
  553. package/skills/music-to-video/references/motion-primitives/blur-resolve/scene.html +0 -60
  554. package/skills/music-to-video/references/motion-primitives/braam-punch/index.html +0 -53
  555. package/skills/music-to-video/references/motion-primitives/braam-punch/scene.html +0 -100
  556. package/skills/music-to-video/references/motion-primitives/chromatic-split/index.html +0 -53
  557. package/skills/music-to-video/references/motion-primitives/chromatic-split/scene.html +0 -111
  558. package/skills/music-to-video/references/motion-primitives/chrome-sweep/index.html +0 -53
  559. package/skills/music-to-video/references/motion-primitives/chrome-sweep/scene.html +0 -68
  560. package/skills/music-to-video/references/motion-primitives/counting-punch/index.html +0 -54
  561. package/skills/music-to-video/references/motion-primitives/counting-punch/scene.html +0 -119
  562. package/skills/music-to-video/references/motion-primitives/crash-zoom-in/index.html +0 -53
  563. package/skills/music-to-video/references/motion-primitives/crash-zoom-in/scene.html +0 -120
  564. package/skills/music-to-video/references/motion-primitives/datamosh-smear/index.html +0 -55
  565. package/skills/music-to-video/references/motion-primitives/datamosh-smear/scene.html +0 -131
  566. package/skills/music-to-video/references/motion-primitives/directional-fill/index.html +0 -53
  567. package/skills/music-to-video/references/motion-primitives/directional-fill/scene.html +0 -103
  568. package/skills/music-to-video/references/motion-primitives/dolly-zoom/index.html +0 -53
  569. package/skills/music-to-video/references/motion-primitives/dolly-zoom/scene.html +0 -102
  570. package/skills/music-to-video/references/motion-primitives/electric-arc/index.html +0 -54
  571. package/skills/music-to-video/references/motion-primitives/electric-arc/scene.html +0 -105
  572. package/skills/music-to-video/references/motion-primitives/flash-cut/index.html +0 -53
  573. package/skills/music-to-video/references/motion-primitives/flash-cut/scene.html +0 -97
  574. package/skills/music-to-video/references/motion-primitives/gooey-metaball/index.html +0 -54
  575. package/skills/music-to-video/references/motion-primitives/gooey-metaball/scene.html +0 -206
  576. package/skills/music-to-video/references/motion-primitives/hard-cut/index.html +0 -53
  577. package/skills/music-to-video/references/motion-primitives/hard-cut/scene.html +0 -82
  578. package/skills/music-to-video/references/motion-primitives/hypercut-whip/index.html +0 -53
  579. package/skills/music-to-video/references/motion-primitives/hypercut-whip/scene.html +0 -44
  580. package/skills/music-to-video/references/motion-primitives/iris-open/index.html +0 -53
  581. package/skills/music-to-video/references/motion-primitives/iris-open/scene.html +0 -69
  582. package/skills/music-to-video/references/motion-primitives/kinetic-letter-in/index.html +0 -53
  583. package/skills/music-to-video/references/motion-primitives/kinetic-letter-in/scene.html +0 -64
  584. package/skills/music-to-video/references/motion-primitives/liquid-morph/index.html +0 -53
  585. package/skills/music-to-video/references/motion-primitives/liquid-morph/scene.html +0 -96
  586. package/skills/music-to-video/references/motion-primitives/mask-reveal/index.html +0 -53
  587. package/skills/music-to-video/references/motion-primitives/mask-reveal/scene.html +0 -74
  588. package/skills/music-to-video/references/motion-primitives/mosaic-pack/index.html +0 -53
  589. package/skills/music-to-video/references/motion-primitives/mosaic-pack/scene.html +0 -89
  590. package/skills/music-to-video/references/motion-primitives/neon-flicker/index.html +0 -53
  591. package/skills/music-to-video/references/motion-primitives/neon-flicker/scene.html +0 -73
  592. package/skills/music-to-video/references/motion-primitives/outline-to-fill/index.html +0 -53
  593. package/skills/music-to-video/references/motion-primitives/outline-to-fill/scene.html +0 -82
  594. package/skills/music-to-video/references/motion-primitives/palette-flip/index.html +0 -53
  595. package/skills/music-to-video/references/motion-primitives/palette-flip/scene.html +0 -97
  596. package/skills/music-to-video/references/motion-primitives/particle-burst/index.html +0 -53
  597. package/skills/music-to-video/references/motion-primitives/particle-burst/scene.html +0 -106
  598. package/skills/music-to-video/references/motion-primitives/pixel-dissolve/index.html +0 -53
  599. package/skills/music-to-video/references/motion-primitives/pixel-dissolve/scene.html +0 -86
  600. package/skills/music-to-video/references/motion-primitives/radial-burst-lines/index.html +0 -53
  601. package/skills/music-to-video/references/motion-primitives/radial-burst-lines/scene.html +0 -130
  602. package/skills/music-to-video/references/motion-primitives/screen-shake/index.html +0 -53
  603. package/skills/music-to-video/references/motion-primitives/screen-shake/scene.html +0 -78
  604. package/skills/music-to-video/references/motion-primitives/slot-machine-reveal/index.html +0 -53
  605. package/skills/music-to-video/references/motion-primitives/slot-machine-reveal/scene.html +0 -100
  606. package/skills/music-to-video/references/motion-primitives/spotlight-sweep/index.html +0 -53
  607. package/skills/music-to-video/references/motion-primitives/spotlight-sweep/scene.html +0 -102
  608. package/skills/music-to-video/references/motion-primitives/staggered-exit/index.html +0 -53
  609. package/skills/music-to-video/references/motion-primitives/staggered-exit/scene.html +0 -82
  610. package/skills/music-to-video/references/motion-primitives/text-spectral-rays/USAGE.md +0 -42
  611. package/skills/music-to-video/references/motion-primitives/text-spectral-rays/index.html +0 -53
  612. package/skills/music-to-video/references/motion-primitives/text-spectral-rays/scene.html +0 -280
  613. package/skills/music-to-video/references/motion-primitives/text-wave-distort/index.html +0 -54
  614. package/skills/music-to-video/references/motion-primitives/text-wave-distort/scene.html +0 -106
  615. package/skills/music-to-video/references/motion-primitives/tile-mosaic/index.html +0 -53
  616. package/skills/music-to-video/references/motion-primitives/tile-mosaic/scene.html +0 -109
  617. package/skills/music-to-video/references/motion-primitives/typewriter-reveal/index.html +0 -53
  618. package/skills/music-to-video/references/motion-primitives/typewriter-reveal/scene.html +0 -91
  619. package/skills/music-to-video/references/motion-primitives/word-grid-burst/index.html +0 -53
  620. package/skills/music-to-video/references/motion-primitives/word-grid-burst/scene.html +0 -96
  621. package/skills/music-to-video/references/planning.md +0 -104
  622. package/skills/music-to-video/references/storyboard-format.md +0 -94
  623. package/skills/music-to-video/references/template-catalog.md +0 -106
  624. package/skills/music-to-video/references/templates/card-flyby/index.html +0 -527
  625. package/skills/music-to-video/references/templates/card-flyby/program.json +0 -13
  626. package/skills/music-to-video/references/templates/held-message-living-field/index.html +0 -485
  627. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/asphalt-031.png +0 -0
  628. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/bark-014.png +0 -0
  629. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/brick.png +0 -0
  630. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/bricks-075-a.png +0 -0
  631. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/bricks-101.png +0 -0
  632. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/bricks-102.png +0 -0
  633. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/bricks-104.png +0 -0
  634. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/carpet.png +0 -0
  635. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/concrete-034.png +0 -0
  636. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/concrete-042-a.png +0 -0
  637. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/concrete-046.png +0 -0
  638. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/concrete-047-a.png +0 -0
  639. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/concrete.png +0 -0
  640. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/diamond-plate-009.png +0 -0
  641. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/fabric-080.png +0 -0
  642. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/fabric-083.png +0 -0
  643. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/grass-001.png +0 -0
  644. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/grass-004.png +0 -0
  645. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/grass-005.png +0 -0
  646. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/ground-037.png +0 -0
  647. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/ground-054.png +0 -0
  648. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/ground-068.png +0 -0
  649. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/ground-080.png +0 -0
  650. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/ground-103.png +0 -0
  651. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/ground-104.png +0 -0
  652. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/lava.png +0 -0
  653. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/leather-037.png +0 -0
  654. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/marble-012.png +0 -0
  655. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/marble-016.png +0 -0
  656. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/metal-032.png +0 -0
  657. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/metal-038.png +0 -0
  658. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/metal-041-a.png +0 -0
  659. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/metal-046-b.png +0 -0
  660. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/metal-048-a.png +0 -0
  661. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/metal-049-a.png +0 -0
  662. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/metal-055-a.png +0 -0
  663. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/metal-061-b.png +0 -0
  664. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/metal.png +0 -0
  665. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/onyx.png +0 -0
  666. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/painted-plaster-017.png +0 -0
  667. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/paving-stones-138.png +0 -0
  668. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/paving-stones-150.png +0 -0
  669. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/plaster-001.png +0 -0
  670. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/road-007.png +0 -0
  671. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/road-008-a.png +0 -0
  672. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/road-009-c.png +0 -0
  673. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/road-012-a.png +0 -0
  674. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/road-012-b.png +0 -0
  675. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/road-013-a.png +0 -0
  676. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/rock-058.png +0 -0
  677. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/rock-063.png +0 -0
  678. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/rock.png +0 -0
  679. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/snow-015.png +0 -0
  680. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/snow.png +0 -0
  681. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/tiles-138.png +0 -0
  682. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/travertine-009.png +0 -0
  683. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/wood-049.png +0 -0
  684. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/wood-051.png +0 -0
  685. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/wood-058.png +0 -0
  686. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/wood-066.png +0 -0
  687. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/wood-092.png +0 -0
  688. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/wood-094.png +0 -0
  689. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/wood-floor-051.png +0 -0
  690. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/wood-floor-064.png +0 -0
  691. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/wood-floor-070.png +0 -0
  692. package/skills/music-to-video/references/templates/held-text-strobe-burst/assets/texture-mask-text/masks/wood.png +0 -0
  693. package/skills/music-to-video/references/templates/held-text-strobe-burst/index.html +0 -302
  694. package/skills/music-to-video/references/templates/intro-kinetic-cascade/index.html +0 -610
  695. package/skills/music-to-video/references/templates/intro-kinetic-cascade/program.json +0 -41
  696. package/skills/music-to-video/references/templates/logo-split-lockup-pulse/assets/fredoka-700.woff2 +0 -0
  697. package/skills/music-to-video/references/templates/logo-split-lockup-pulse/index.html +0 -596
  698. package/skills/music-to-video/references/templates/poster-tile-mosaic/index.html +0 -589
  699. package/skills/music-to-video/references/templates/poster-tile-mosaic/program.json +0 -25
  700. package/skills/music-to-video/references/templates/roll-flipbook-word-cycle/index.html +0 -267
  701. package/skills/music-to-video/references/templates/split-anchor-word-slot/index.html +0 -594
  702. package/skills/music-to-video/references/templates/split-anchor-word-slot/program.json +0 -39
  703. package/skills/music-to-video/references/templates/typewriter-phrase-keyword-shuffle/index.html +0 -238
  704. package/skills/music-to-video/scripts/analyze-beatgrid.py +0 -542
  705. package/skills/music-to-video/scripts/assemble-index.mjs +0 -220
  706. package/skills/music-to-video/scripts/lib/storyboard.mjs +0 -249
  707. package/skills/music-to-video/scripts/stage-assets.mjs +0 -58
  708. package/skills/music-to-video/scripts/validate-plan.mjs +0 -161
  709. package/skills/music-to-video/sub-agents/frame-worker.md +0 -49
  710. package/skills/pr-to-video/references/code-vocabulary.md +0 -113
  711. package/skills/pr-to-video/references/cut-catalog.md +0 -215
  712. package/skills/pr-to-video/references/motion-language.md +0 -156
  713. package/skills/pr-to-video/references/story-design.md +0 -230
  714. package/skills/pr-to-video/references/visual-design.md +0 -164
  715. package/skills/pr-to-video/scripts/assemble-index.mjs +0 -631
  716. package/skills/pr-to-video/scripts/assemble-index.test.mjs +0 -130
  717. package/skills/pr-to-video/scripts/audio.mjs +0 -293
  718. package/skills/pr-to-video/scripts/build-frame.mjs +0 -589
  719. package/skills/pr-to-video/scripts/captions.mjs +0 -524
  720. package/skills/pr-to-video/scripts/captions.test.mjs +0 -260
  721. package/skills/pr-to-video/scripts/fetch-people-avatars.mjs +0 -157
  722. package/skills/pr-to-video/scripts/fetch-pr.mjs +0 -234
  723. package/skills/pr-to-video/scripts/frame-contract.test.mjs +0 -209
  724. package/skills/pr-to-video/scripts/frame-packets.mjs +0 -62
  725. package/skills/pr-to-video/scripts/ingest.mjs +0 -561
  726. package/skills/pr-to-video/scripts/lib/assets.mjs +0 -56
  727. package/skills/pr-to-video/scripts/lib/bgm-volume.mjs +0 -4
  728. package/skills/pr-to-video/scripts/lib/captured-fonts.mjs +0 -58
  729. package/skills/pr-to-video/scripts/lib/dimensions.mjs +0 -45
  730. package/skills/pr-to-video/scripts/lib/frame-contract.mjs +0 -54
  731. package/skills/pr-to-video/scripts/lib/frame-packets-core.mjs +0 -194
  732. package/skills/pr-to-video/scripts/lib/pad-frame-duration.mjs +0 -36
  733. package/skills/pr-to-video/scripts/lib/storyboard.mjs +0 -249
  734. package/skills/pr-to-video/scripts/lib/tokens.mjs +0 -211
  735. package/skills/pr-to-video/scripts/lib/transition-registry.mjs +0 -38
  736. package/skills/pr-to-video/scripts/lib/transitions.json +0 -71
  737. package/skills/pr-to-video/scripts/preflight.mjs +0 -51
  738. package/skills/pr-to-video/scripts/project-dir.mjs +0 -92
  739. package/skills/pr-to-video/scripts/transitions.mjs +0 -383
  740. package/skills/pr-to-video/scripts/workflow-guardrails.test.mjs +0 -198
  741. package/skills/pr-to-video/sub-agents/frame-worker.md +0 -38
  742. package/skills/product-launch-video/references/cut-catalog.md +0 -220
  743. package/skills/product-launch-video/references/motion-language.md +0 -156
  744. package/skills/product-launch-video/references/story-design.md +0 -508
  745. package/skills/product-launch-video/references/visual-design.md +0 -126
  746. package/skills/product-launch-video/scripts/assemble-index.mjs +0 -773
  747. package/skills/product-launch-video/scripts/assemble-index.test.mjs +0 -127
  748. package/skills/product-launch-video/scripts/audio.mjs +0 -293
  749. package/skills/product-launch-video/scripts/audio.test.mjs +0 -234
  750. package/skills/product-launch-video/scripts/build-frame-subsets.test.mjs +0 -152
  751. package/skills/product-launch-video/scripts/build-frame.mjs +0 -552
  752. package/skills/product-launch-video/scripts/captions.mjs +0 -524
  753. package/skills/product-launch-video/scripts/captions.test.mjs +0 -219
  754. package/skills/product-launch-video/scripts/capture-skill-guardrails.test.mjs +0 -39
  755. package/skills/product-launch-video/scripts/frame-packets.mjs +0 -27
  756. package/skills/product-launch-video/scripts/frame-packets.test.mjs +0 -144
  757. package/skills/product-launch-video/scripts/lib/assets.mjs +0 -56
  758. package/skills/product-launch-video/scripts/lib/bgm-volume.mjs +0 -4
  759. package/skills/product-launch-video/scripts/lib/captured-fonts.mjs +0 -58
  760. package/skills/product-launch-video/scripts/lib/dimensions.mjs +0 -45
  761. package/skills/product-launch-video/scripts/lib/frame-packets-core.mjs +0 -194
  762. package/skills/product-launch-video/scripts/lib/pad-frame-duration.mjs +0 -36
  763. package/skills/product-launch-video/scripts/lib/pad-frame-duration.test.mjs +0 -76
  764. package/skills/product-launch-video/scripts/lib/storyboard.mjs +0 -249
  765. package/skills/product-launch-video/scripts/lib/tokens.mjs +0 -218
  766. package/skills/product-launch-video/scripts/lib/tokens.test.mjs +0 -57
  767. package/skills/product-launch-video/scripts/lib/transition-registry.mjs +0 -38
  768. package/skills/product-launch-video/scripts/lib/transitions.json +0 -71
  769. package/skills/product-launch-video/scripts/media-contract.test.mjs +0 -200
  770. package/skills/product-launch-video/scripts/stage-assets.mjs +0 -39
  771. package/skills/product-launch-video/scripts/stage-assets.test.mjs +0 -52
  772. package/skills/product-launch-video/scripts/transitions.mjs +0 -383
  773. package/skills/product-launch-video/scripts/transitions.test.mjs +0 -68
  774. package/skills/product-launch-video/sub-agents/frame-worker.md +0 -21
  775. package/skills/talking-head-recut/NOTICE.md +0 -39
  776. package/skills/talking-head-recut/assets/fonts/Caveat-400-latin.woff2 +0 -0
  777. package/skills/talking-head-recut/assets/fonts/Caveat-700-latin.woff2 +0 -0
  778. package/skills/talking-head-recut/assets/fonts/Inter-400-latin.woff2 +0 -0
  779. package/skills/talking-head-recut/assets/fonts/Inter-700-latin.woff2 +0 -0
  780. package/skills/talking-head-recut/assets/fonts/LXGWWenKaiTC-400-latin.woff2 +0 -0
  781. package/skills/talking-head-recut/assets/fonts/Virgil.woff2 +0 -0
  782. package/skills/talking-head-recut/assets/vendor/gsap.min.js +0 -10
  783. package/skills/talking-head-recut/media-contract.test.mjs +0 -35
  784. package/skills/talking-head-recut/references/DESIGN_INDEX.md +0 -145
  785. package/skills/talking-head-recut/references/frames/clean.html +0 -92
  786. package/skills/talking-head-recut/references/frames/hairline.html +0 -171
  787. package/skills/talking-head-recut/references/frames/polaroid.html +0 -131
  788. package/skills/talking-head-recut/references/layouts/overlay.html +0 -164
  789. package/skills/talking-head-recut/references/layouts/pip.html +0 -143
  790. package/skills/talking-head-recut/references/layouts/split.html +0 -121
  791. package/skills/talking-head-recut/references/layouts/stack.html +0 -109
  792. package/skills/talking-head-recut/references/styles/academic.html +0 -172
  793. package/skills/talking-head-recut/references/styles/audit.html +0 -170
  794. package/skills/talking-head-recut/references/styles/editorial.html +0 -189
  795. package/skills/talking-head-recut/references/styles/geom.html +0 -181
  796. package/skills/talking-head-recut/references/styles/minimal.html +0 -130
  797. package/skills/talking-head-recut/references/styles/spotlight.html +0 -142
  798. package/skills/talking-head-recut/references/styles/swiss.html +0 -188
  799. package/skills/talking-head-recut/references/styles/terminal.html +0 -196
  800. package/skills/talking-head-recut/references/styles/whiteboard.html +0 -170
  801. package/skills/talking-head-recut/references/styles/xhs.html +0 -206
  802. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/biennale-yellow/FRAME.md +0 -0
  803. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/biennale-yellow/frame-showcase.html +0 -0
  804. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/blockframe/FRAME.md +0 -0
  805. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/blockframe/frame-showcase.html +0 -0
  806. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/blue-professional/FRAME.md +0 -0
  807. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/blue-professional/frame-showcase.html +0 -0
  808. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/bold-poster/FRAME.md +0 -0
  809. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/bold-poster/frame-showcase.html +0 -0
  810. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/broadside/FRAME.md +0 -0
  811. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/broadside/frame-showcase.html +0 -0
  812. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/capsule/FRAME.md +0 -0
  813. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/capsule/frame-showcase.html +0 -0
  814. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/cartesian/FRAME.md +0 -0
  815. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/cartesian/frame-showcase.html +0 -0
  816. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/cobalt-grid/FRAME.md +0 -0
  817. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/cobalt-grid/frame-showcase.html +0 -0
  818. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/code-editorial/fonts/EBGaramond-400.woff2 +0 -0
  819. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/code-editorial/fonts/EBGaramond-700.woff2 +0 -0
  820. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/code-editorial/fonts/Inter-400.woff2 +0 -0
  821. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/code-editorial/fonts/Inter-700.woff2 +0 -0
  822. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/code-editorial/fonts/JetBrainsMono-400.woff2 +0 -0
  823. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/code-editorial/fonts/JetBrainsMono-700.woff2 +0 -0
  824. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/code-editorial/fonts/OFL-eb-garamond.txt +0 -0
  825. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/code-editorial/fonts/OFL-inter.txt +0 -0
  826. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/code-editorial/fonts/OFL-jetbrains-mono.txt +0 -0
  827. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/code-editorial/frame-showcase.html +0 -0
  828. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/coral/FRAME.md +0 -0
  829. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/coral/frame-showcase.html +0 -0
  830. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/creative-mode/FRAME.md +0 -0
  831. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/creative-mode/frame-showcase.html +0 -0
  832. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/daisy-days/FRAME.md +0 -0
  833. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/daisy-days/frame-showcase.html +0 -0
  834. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/editorial-forest/FRAME.md +0 -0
  835. /package/skills/{hyperframes-creative → hyperframes/assets}/frame-presets/editorial-forest/frame-showcase.html +0 -0
  836. /package/skills/{hyperframes-audio → media-use/audio}/scripts/carve.test.mjs +0 -0
  837. /package/skills/{hyperframes-creative → media-use/audio}/scripts/extract-audio-data.py +0 -0
package/skills/hyperframes-animation/examples/problem-mockup-overwhelm.html DELETED
@@ -1,1374 +0,0 @@
1
- <!doctype html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=1920, height=1080" />
6
- <title>Scene — HyperFrames Problem Mockup Overwhelm</title>
7
-
8
- <!--
9
- Blueprint: problem-mockup-overwhelm (HyperFrames preview)
10
- HyperFrames-native version of the scene-02-mockup-morph-overwhelm concept.
11
-
12
- Choreography (4 phases, 6 seconds total):
13
- 0.00 – 0.55s Three HyperFrames workflow mockups spring-in (left → right → center)
14
- Check panel left · render queue right · preview timeline center
15
- 0.33 – 0.95s Nine scattered HyperFrames tool icons stagger in around the cluster
16
- 3.20 – 3.80s MORPH:
17
- center mockup compositor-scale down to the avatar footprint
18
- borderRadius repaint (42px → 50% = reads as circle)
19
- content fades out at 0-40% of morph
20
- non-center mockups + icons exit concurrently
21
- avatar pop (scale 0 → 1) starts at morph trigger
22
- avatar layer opacity fades in at 50% of morph
23
- at 85-100% of morph, mockup-center fades to 0 → avatar visible underneath
24
- 3.53 – 4.40s Eight task bubbles stagger-enter in a radial pattern around the avatar
25
- 4.40 – 6.00s Idle: bubble micro-float + avatar orbit dots + avatar breath
26
- paint-only tween. The "rect → circle" effect is completed by the final 0.51s-onward
27
- opacity hand-off to the avatar element rendered underneath at z-index 20.
28
- - Both mockup layer and avatar layer stay in DOM (no `{showX && <Y />}` conditional render);
29
- opacity gates visibility — required because HyperFrames seek can move time backwards.
30
- - All `Math.sin(frame * ...)` continuous motion replaced by:
31
- mockup float / bubble float / orbit dots → shared onUpdate scene-ticker reading tl.time()
32
- avatar breath → finite sine.inOut yoyo (multiplicative onto pop scale)
33
- - The animated dark-frosted-glass blob background was replaced with a static
34
- gradient + frosted overlay for renderer determinism and file size.
35
- - Avatar video source replaced with a CSS gradient circle (no asset required).
36
- To use a real video, swap the inner .avatar-disc for a <video muted playsinline>.
37
- - Bubbles are generated via JS `forEach` at script load — positions pre-baked in
38
- inline `left`/`top`; GSAP tweens only `scale`/`opacity`/`x`/`y`.
39
-
40
- Spring → ease mapping (from skill SKILL.md):
41
- spring(stiffness:70, damping:14) → back.out(1.4) (mockup entry)
42
- spring(stiffness:180, damping:14) → back.out(1.6) (icon entry)
43
- spring(stiffness:80, damping:18) → power3.out (morph driver)
44
- spring(stiffness:120, damping:14) → back.out(1.4) (avatar pop)
45
- spring(stiffness:180, damping:12) → back.out(1.4) (bubble pop)
46
- -->
47
-
48
- <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
49
-
50
- <style>
51
- :root {
52
- --bg-base: #0a0a0f;
53
- --text-primary: #ffffff;
54
- --surface-dark: #000000;
55
- --surface-mid: #16213e;
56
- --surface-light: rgba(255, 255, 255, 0.98);
57
- --line-soft: rgba(139, 92, 246, 0.5);
58
- --bubble-bg: rgba(255, 255, 255, 0.95);
59
- --bubble-border: rgba(139, 92, 246, 0.5);
60
- --bubble-text: #1f2937;
61
- --brand-cyan: #06b6d4;
62
- --brand-teal: #14b8a6;
63
- --brand-green: #00f2ea;
64
- --brand-blue: #0ea5e9;
65
- --brand-purple: #8b5cf6;
66
- --brand-pink: #ec4899;
67
- --brand-orange: #fb923c;
68
- --brand-ink: #0f0f0f;
69
- --accent-lime: #facc15;
70
- --accent-mint: #ffffff;
71
- --warn-amber: #ffc107;
72
- --tt-cyan: #00f2ea;
73
- }
74
- * {
75
- margin: 0;
76
- padding: 0;
77
- box-sizing: border-box;
78
- }
79
- html,
80
- body {
81
- margin: 0;
82
- width: 1920px;
83
- height: 1080px;
84
- overflow: hidden;
85
- background: var(--bg-base);
86
- font-family:
87
- "Inter",
88
- system-ui,
89
- -apple-system,
90
- sans-serif;
91
- color: var(--text-primary);
92
- }
93
-
94
- /* ============================================================
95
- BACKGROUND (dark frosted glass, matching TSX reference)
96
- ============================================================ */
97
- .bg {
98
- position: absolute;
99
- inset: 0;
100
- overflow: hidden;
101
- background: radial-gradient(
102
- ellipse 120% 100% at 50% 20%,
103
- rgba(30, 30, 45, 1) 0%,
104
- rgba(18, 18, 28, 1) 40%,
105
- rgba(10, 10, 15, 1) 100%
106
- );
107
- }
108
- .bg::before {
109
- content: "";
110
- position: absolute;
111
- inset: 0;
112
- background: rgba(15, 15, 25, 0.4);
113
- backdrop-filter: blur(80px) saturate(180%);
114
- -webkit-backdrop-filter: blur(80px) saturate(180%);
115
- }
116
- .bg::after {
117
- content: "";
118
- position: absolute;
119
- inset: 0;
120
- background:
121
- linear-gradient(
122
- 180deg,
123
- rgba(255, 255, 255, 0.08) 0%,
124
- rgba(255, 255, 255, 0.02) 5%,
125
- transparent 15%,
126
- transparent 100%
127
- ),
128
- linear-gradient(0deg, rgba(139, 92, 246, 0.05) 0%, transparent 20%, transparent 100%);
129
- }
130
- .bg-frost {
131
- position: absolute;
132
- inset: 0;
133
- opacity: 0.5;
134
- filter: blur(120px);
135
- background:
136
- radial-gradient(
137
- circle 550px at 30% 35%,
138
- rgba(139, 92, 246, 0.7) 0%,
139
- rgba(139, 92, 246, 0.3) 40%,
140
- transparent 70%
141
- ),
142
- radial-gradient(
143
- circle 500px at 70% 65%,
144
- rgba(6, 182, 212, 0.6) 0%,
145
- rgba(6, 182, 212, 0.25) 40%,
146
- transparent 70%
147
- ),
148
- radial-gradient(
149
- circle 400px at 50% 80%,
150
- rgba(251, 146, 60, 0.5) 0%,
151
- rgba(251, 146, 60, 0.2) 40%,
152
- transparent 70%
153
- ),
154
- radial-gradient(
155
- circle 350px at 20% 60%,
156
- rgba(236, 72, 153, 0.4) 0%,
157
- rgba(236, 72, 153, 0.15) 40%,
158
- transparent 70%
159
- );
160
- }
161
- .vignette {
162
- position: absolute;
163
- inset: 0;
164
- background-image:
165
- radial-gradient(
166
- ellipse 80% 80% at 50% 50%,
167
- transparent 0%,
168
- transparent 50%,
169
- rgba(0, 0, 0, 0.3) 100%
170
- ),
171
- url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"),
172
- repeating-linear-gradient(
173
- 0deg,
174
- transparent,
175
- transparent 2px,
176
- rgba(255, 255, 255, 0.00075) 2px,
177
- rgba(255, 255, 255, 0.00075) 4px
178
- );
179
- pointer-events: none;
180
- z-index: 400;
181
- }
182
-
183
- /* ============================================================
184
- MOCKUP CLUSTER (Phase 1-2)
185
- ============================================================ */
186
- .mockup-cluster {
187
- position: absolute;
188
- inset: 0;
189
- perspective: 1400px;
190
- transform-style: preserve-3d;
191
- }
192
-
193
- /* Fitness-style phone shells */
194
- .mockup {
195
- position: absolute;
196
- left: 50%;
197
- top: 50%;
198
- width: 320px;
199
- height: 650px;
200
- border-radius: 42px;
201
- background: transparent;
202
- transform-origin: center center;
203
- transform-style: preserve-3d;
204
- will-change: transform, opacity;
205
- }
206
- .mockup-left {
207
- z-index: 10;
208
- }
209
- .mockup-right {
210
- z-index: 12;
211
- }
212
- .mockup-center {
213
- z-index: 25;
214
- background: var(--surface-dark);
215
- box-shadow:
216
- 0 24px 70px rgba(0, 0, 0, 0.4),
217
- 0 0 40px rgba(0, 242, 234, 0.15);
218
- overflow: hidden;
219
- }
220
-
221
- .phone-shell {
222
- position: absolute;
223
- inset: 0;
224
- border-radius: 42px;
225
- background: #000000;
226
- padding: 8px;
227
- box-shadow:
228
- 0 18px 60px rgba(0, 0, 0, 0.3),
229
- 0 4px 16px rgba(0, 0, 0, 0.18),
230
- inset 0 0 0 3px #333333;
231
- overflow: hidden;
232
- will-change: opacity;
233
- }
234
-
235
- .phone-notch {
236
- position: absolute;
237
- top: 8px;
238
- left: 50%;
239
- width: 100px;
240
- height: 26px;
241
- border-radius: 0 0 18px 18px;
242
- background: #000000;
243
- transform: translateX(-50%);
244
- z-index: 5;
245
- }
246
-
247
- .phone-screen {
248
- position: relative;
249
- width: 100%;
250
- height: 100%;
251
- border-radius: 35px;
252
- overflow: hidden;
253
- display: flex;
254
- flex-direction: column;
255
- }
256
-
257
- .mockup-left .phone-screen,
258
- .mockup-right .phone-screen {
259
- background: rgba(255, 255, 255, 0.98);
260
- padding-top: 30px;
261
- }
262
-
263
- .mockup-center .phone-screen {
264
- background: #000000;
265
- }
266
-
267
- .mockup-content {
268
- flex: 1;
269
- display: flex;
270
- flex-direction: column;
271
- min-height: 0;
272
- will-change: opacity;
273
- }
274
-
275
- /* --- HyperFrames Check (left) --- */
276
- .yt-header {
277
- padding: 14px 18px;
278
- background: #f9f9f9;
279
- border-bottom: 1px solid #e5e5e5;
280
- display: flex;
281
- align-items: center;
282
- gap: 10px;
283
- font: 600 16px/1 Inter;
284
- color: #0f0f0f;
285
- }
286
- .yt-header svg .hf-logo-left {
287
- fill: url(#hf-mini-grad-left);
288
- }
289
- .yt-body {
290
- padding: 18px;
291
- color: #0f0f0f;
292
- }
293
- .yt-body h3 {
294
- font: 700 17px/1.2 Inter;
295
- margin-bottom: 12px;
296
- }
297
- .yt-thumb {
298
- height: 130px;
299
- background: linear-gradient(135deg, #1a1a2e, #16213e);
300
- border-radius: 10px;
301
- margin-bottom: 14px;
302
- padding: 18px;
303
- display: grid;
304
- gap: 8px;
305
- align-content: center;
306
- }
307
- .code-line {
308
- height: 10px;
309
- border-radius: 5px;
310
- background: rgba(255, 255, 255, 0.24);
311
- }
312
- .code-line:nth-child(1) {
313
- width: 74%;
314
- background: #ff0000;
315
- }
316
- .code-line:nth-child(2) {
317
- width: 58%;
318
- }
319
- .code-line:nth-child(3) {
320
- width: 86%;
321
- }
322
- .code-line:nth-child(4) {
323
- width: 46%;
324
- background: rgba(255, 255, 255, 0.3);
325
- }
326
- .code-line:nth-child(5) {
327
- width: 68%;
328
- }
329
- .code-line:nth-child(6) {
330
- width: 52%;
331
- background: rgba(255, 255, 255, 0.28);
332
- }
333
- .yt-progress-fill {
334
- width: 72%;
335
- height: 100%;
336
- background: #ff0000;
337
- border-radius: 3px;
338
- }
339
- .yt-progress-row {
340
- display: flex;
341
- justify-content: space-between;
342
- font: 500 12px/1 Inter;
343
- color: #606060;
344
- margin-bottom: 6px;
345
- }
346
- .yt-progress-track {
347
- height: 5px;
348
- background: #e5e5e5;
349
- border-radius: 3px;
350
- overflow: hidden;
351
- }
352
- .yt-task-label {
353
- font: 500 12px/1 Inter;
354
- color: #606060;
355
- margin-top: 16px;
356
- margin-bottom: 8px;
357
- }
358
- .yt-task {
359
- display: flex;
360
- align-items: center;
361
- gap: 8px;
362
- margin-bottom: 6px;
363
- font: 400 12px/1.2 Inter;
364
- color: #606060;
365
- }
366
- .yt-task::before {
367
- content: "";
368
- width: 13px;
369
- height: 13px;
370
- border: 2px solid #909090;
371
- border-radius: 50%;
372
- background: transparent;
373
- flex-shrink: 0;
374
- }
375
- .yt-footer {
376
- margin-top: auto;
377
- padding: 12px 18px;
378
- background: #fff4e5;
379
- border-top: 1px solid #ffe0b2;
380
- font: 500 12px/1 Inter;
381
- color: #e65100;
382
- display: flex;
383
- align-items: center;
384
- gap: 8px;
385
- }
386
-
387
- /* --- HyperFrames Preview (center) — content fades during morph --- */
388
- .tt-statusbar {
389
- padding: 10px 14px;
390
- display: flex;
391
- justify-content: space-between;
392
- font: 500 12px/1 Inter;
393
- color: var(--accent-mint);
394
- }
395
- .tt-preview {
396
- flex: 1;
397
- position: relative;
398
- background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
399
- }
400
- .tt-overlay {
401
- position: absolute;
402
- top: 14px;
403
- left: 14px;
404
- right: 14px;
405
- background: rgba(0, 0, 0, 0.6);
406
- border-radius: 10px;
407
- padding: 10px 12px;
408
- border: none;
409
- backdrop-filter: blur(10px);
410
- -webkit-backdrop-filter: blur(10px);
411
- }
412
- .tt-overlay-title {
413
- font: 500 12px/1 Inter;
414
- color: white;
415
- margin-bottom: 4px;
416
- }
417
- .tt-overlay-sub {
418
- font: 400 10px/1.2 Inter;
419
- color: rgba(216, 254, 255, 0.72);
420
- }
421
- .tt-play {
422
- position: absolute;
423
- top: 50%;
424
- left: 50%;
425
- width: 60px;
426
- height: 60px;
427
- margin: -30px 0 0 -30px;
428
- border-radius: 50%;
429
- background: rgba(255, 255, 255, 0.3);
430
- box-shadow: none;
431
- display: flex;
432
- align-items: center;
433
- justify-content: center;
434
- font-size: 22px;
435
- color: white;
436
- }
437
- .tt-side {
438
- position: absolute;
439
- right: 12px;
440
- bottom: 70px;
441
- display: flex;
442
- flex-direction: column;
443
- gap: 14px;
444
- font: 500 10px/1 Inter;
445
- color: white;
446
- text-align: center;
447
- }
448
- .tt-side div {
449
- display: flex;
450
- flex-direction: column;
451
- gap: 3px;
452
- }
453
- .tt-side span {
454
- font-size: 18px;
455
- font-weight: 800;
456
- color: #ffffff;
457
- }
458
- .tt-timeline {
459
- padding: 12px;
460
- background: #111111;
461
- }
462
- .tt-strip {
463
- display: flex;
464
- gap: 4px;
465
- margin-bottom: 8px;
466
- }
467
- .tt-clip {
468
- flex: 1;
469
- height: 32px;
470
- border-radius: 4px;
471
- background: #333333;
472
- opacity: 0.6;
473
- }
474
- .tt-clip.active {
475
- background: var(--tt-cyan);
476
- opacity: 1;
477
- }
478
- .tt-note {
479
- font: 500 10px/1 Inter;
480
- color: #888888;
481
- text-align: center;
482
- }
483
- .tt-tabs {
484
- padding: 10px 18px;
485
- background: #000000;
486
- display: flex;
487
- justify-content: space-around;
488
- font: 500 11px/1 Inter;
489
- color: white;
490
- }
491
-
492
- /* --- HyperFrames Render (right) --- */
493
- .ig-header {
494
- padding: 12px 16px;
495
- border-bottom: 1px solid #efefef;
496
- display: flex;
497
- align-items: center;
498
- gap: 10px;
499
- font: 600 15px/1 Inter;
500
- color: #262626;
501
- }
502
- .ig-body {
503
- padding: 14px;
504
- flex: 1;
505
- color: #262626;
506
- }
507
- .ig-body h3 {
508
- font: 500 13px/1 Inter;
509
- margin-bottom: 12px;
510
- }
511
- .ig-warn {
512
- background: #fff3cd;
513
- border: 1px solid #ffc107;
514
- border-radius: 10px;
515
- padding: 10px 12px;
516
- margin-bottom: 14px;
517
- }
518
- .ig-warn-title {
519
- font: 500 12px/1.1 Inter;
520
- color: #856404;
521
- }
522
- .ig-warn-sub {
523
- font: 400 11px/1.2 Inter;
524
- color: #856404;
525
- margin-top: 4px;
526
- }
527
- .ig-task-label {
528
- font: 500 13px/1 Inter;
529
- color: #262626;
530
- margin-bottom: 8px;
531
- }
532
- .ig-task {
533
- display: flex;
534
- align-items: center;
535
- gap: 8px;
536
- margin-bottom: 6px;
537
- font: 400 12px/1.2 Inter;
538
- color: #666666;
539
- }
540
- .ig-task::before {
541
- content: "";
542
- width: 12px;
543
- height: 12px;
544
- border: 2px solid #c7c7c7;
545
- border-radius: 50%;
546
- background: transparent;
547
- flex-shrink: 0;
548
- }
549
- .ig-time {
550
- margin-top: 14px;
551
- background: #ffebee;
552
- border-radius: 8px;
553
- padding: 10px 12px;
554
- font: 500 12px/1 Inter;
555
- color: #c62828;
556
- }
557
- .ig-footer {
558
- margin-top: auto;
559
- padding: 12px 14px;
560
- border-top: 1px solid #efefef;
561
- background: #fafafa;
562
- }
563
- .ig-share {
564
- background: linear-gradient(90deg, #833ab4, #fd1d1d, #fcaf45);
565
- border-radius: 10px;
566
- padding: 11px 0;
567
- text-align: center;
568
- font: 600 13px/1 Inter;
569
- color: #ffffff;
570
- }
571
-
572
- /* ============================================================
573
- PLATFORM ICONS — scattered, positions pre-baked in CSS
574
- ============================================================ */
575
- .platform-icon {
576
- position: absolute;
577
- border-radius: 22%;
578
- background: rgba(255, 255, 255, 0.98);
579
- display: flex;
580
- align-items: center;
581
- justify-content: center;
582
- box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
583
- border: none;
584
- z-index: 30;
585
- will-change: transform, opacity;
586
- }
587
- .platform-icon svg {
588
- width: 62%;
589
- height: 62%;
590
- }
591
- .platform-icon .icon-type {
592
- font: 800 25px/1 Inter;
593
- letter-spacing: 0;
594
- color: #063238;
595
- }
596
- .platform-icon .icon-small {
597
- font-size: 20px;
598
- }
599
-
600
- /* Nine icon positions — taken from the the source SCATTERED_ICONS array */
601
- .pi-youtube {
602
- left: calc(22% + 100px);
603
- top: calc(20% - 179px);
604
- width: 102px;
605
- height: 102px;
606
- }
607
- .pi-google {
608
- left: calc(60% + 16px);
609
- top: calc(15% - 113px);
610
- width: 96px;
611
- height: 96px;
612
- }
613
- .pi-instagram {
614
- left: calc(88% - 73px);
615
- top: calc(25% - 103px);
616
- width: 102px;
617
- height: 102px;
618
- }
619
- .pi-tiktok {
620
- left: 10%;
621
- top: calc(48% - 101px);
622
- width: 90px;
623
- height: 90px;
624
- }
625
- .pi-tripadvisor {
626
- left: calc(94% - 89px);
627
- top: calc(55% - 45px);
628
- width: 84px;
629
- height: 84px;
630
- }
631
- .pi-facebook {
632
- left: 15%;
633
- top: 75%;
634
- width: 90px;
635
- height: 90px;
636
- }
637
- .pi-twitter {
638
- left: 42%;
639
- top: 85%;
640
- width: 84px;
641
- height: 84px;
642
- }
643
- .pi-linkedin {
644
- left: 70%;
645
- top: 85%;
646
- width: 78px;
647
- height: 78px;
648
- }
649
- .pi-yelp {
650
- left: calc(92% - 165px);
651
- top: calc(72% + 4px);
652
- width: 90px;
653
- height: 90px;
654
- }
655
-
656
- /* ============================================================
657
- AVATAR + BUBBLES (Phase 3-4)
658
- Initially opacity 0; opacity tween reveals at morph hand-off.
659
- ============================================================ */
660
- .avatar-with-bubbles {
661
- position: absolute;
662
- inset: 0;
663
- opacity: 0;
664
- will-change: opacity;
665
- }
666
- .avatar-stage {
667
- position: absolute;
668
- left: 50%;
669
- top: 50%;
670
- z-index: 20;
671
- will-change: transform;
672
- }
673
- .avatar-ring {
674
- width: 220px;
675
- height: 220px;
676
- border-radius: 50%;
677
- padding: 5px;
678
- background: linear-gradient(135deg, #14b8a6, #06b6d4, #0ea5e9);
679
- box-shadow:
680
- 0 0 60px rgba(20, 184, 166, 0.5),
681
- 0 0 120px rgba(6, 182, 212, 0.3);
682
- }
683
- .avatar-disc {
684
- width: 100%;
685
- height: 100%;
686
- border-radius: 50%;
687
- border: 3px solid rgba(255, 255, 255, 0.25);
688
- background:
689
- radial-gradient(circle at 40% 35%, rgba(255, 255, 255, 0.2), transparent 50%),
690
- conic-gradient(from 40deg, #14b8a6 0%, #06b6d4 35%, #0ea5e9 65%, #8b5cf6 100%);
691
- overflow: hidden;
692
- }
693
- .orbit-dot {
694
- position: absolute;
695
- left: 50%;
696
- top: 50%;
697
- width: 10px;
698
- height: 10px;
699
- margin: -5px 0 0 -5px;
700
- border-radius: 50%;
701
- will-change: transform, opacity;
702
- }
703
- .orbit-dot:nth-child(1) {
704
- background: var(--accent-lime);
705
- }
706
- .orbit-dot:nth-child(2) {
707
- background: var(--brand-purple);
708
- }
709
- .orbit-dot:nth-child(3) {
710
- background: var(--accent-lime);
711
- }
712
- .orbit-dot:nth-child(4) {
713
- background: var(--brand-purple);
714
- }
715
-
716
- .task-bubble {
717
- position: absolute;
718
- z-index: 30;
719
- background: var(--bubble-bg);
720
- border: 3px solid var(--bubble-border);
721
- border-radius: 24px;
722
- padding: 22px 34px;
723
- box-shadow: 0 12px 35px rgba(139, 92, 246, 0.3);
724
- font: 500 26px/1.4 Inter;
725
- color: var(--bubble-text);
726
- white-space: nowrap;
727
- will-change: transform, opacity;
728
- }
729
- </style>
730
- </head>
731
- <body>
732
- <div
733
- id="root"
734
- data-composition-id="main"
735
- data-start="0"
736
- data-duration="6"
737
- data-width="1920"
738
- data-height="1080"
739
- >
740
- <div class="bg"></div>
741
- <div class="bg-frost"></div>
742
-
743
- <div
744
- id="problem-mockup-overwhelm-scene"
745
- class="scene clip"
746
- data-start="0"
747
- data-duration="6"
748
- data-track-index="1"
749
- >
750
- <!-- ===== Phase 1-2: Mockup cluster + scattered icons ===== -->
751
- <div class="mockup-cluster">
752
- <!-- HyperFrames Check mockup (left) -->
753
- <div class="mockup mockup-left">
754
- <div class="phone-shell">
755
- <div class="phone-notch"></div>
756
- <div class="phone-screen">
757
- <div class="mockup-content yt-content">
758
- <div class="yt-header">
759
- <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
760
- <defs>
761
- <linearGradient id="hf-mini-grad-left" x1="2" y1="4" x2="22" y2="20">
762
- <stop offset="0%" stop-color="#ff0000" />
763
- <stop offset="100%" stop-color="#cc0000" />
764
- </linearGradient>
765
- </defs>
766
- <path
767
- class="hf-logo-left"
768
- d="M4 9.5 11.5 5c2.7-1.6 5.7.8 5.1 3.8L15 17.5c-.5 2.8-3.8 4-6 2.2L3.2 15c-2-1.6-1.5-4.2.8-5.5Z"
769
- />
770
- <path
771
- class="hf-logo-left"
772
- d="M13.2 6.5 20.8 11c2.4 1.4 2.4 4.6 0 6l-7.6 4.5c-2.6 1.5-5.8-.7-5.2-3.6l1.8-9c.5-2.8 3-3.8 3.4-2.4Z"
773
- opacity="0.82"
774
- />
775
- </svg>
776
- HyperFrames Check
777
- </div>
778
- <div class="yt-body">
779
- <h3>Validate composition</h3>
780
- <div class="yt-thumb">
781
- <div class="code-line"></div>
782
- <div class="code-line"></div>
783
- <div class="code-line"></div>
784
- <div class="code-line"></div>
785
- <div class="code-line"></div>
786
- <div class="code-line"></div>
787
- </div>
788
- <div class="yt-progress-row"><span>Lint + inspect</span><span>72%</span></div>
789
- <div class="yt-progress-track"><div class="yt-progress-fill"></div></div>
790
- <div class="yt-task-label">Render-safe rules:</div>
791
- <div class="yt-task">data-start / duration set</div>
792
- <div class="yt-task">Timeline registered</div>
793
- <div class="yt-task">Assets resolve locally</div>
794
- <div class="yt-task">Text fits every frame</div>
795
- </div>
796
- <div class="yt-footer">npm run check before render</div>
797
- </div>
798
- </div>
799
- </div>
800
- </div>
801
-
802
- <!-- HyperFrames Preview mockup (center, morph target) -->
803
- <div class="mockup mockup-center">
804
- <div class="phone-shell">
805
- <div class="phone-notch"></div>
806
- <div class="phone-screen">
807
- <div class="mockup-content tt-content">
808
- <div class="tt-statusbar"><span>9:41</span><span>HF</span></div>
809
- <div class="tt-preview">
810
- <div class="tt-overlay">
811
- <div class="tt-overlay-title">Scene 05 · seekable</div>
812
- <div class="tt-overlay-sub">GSAP timeline + data clips</div>
813
- </div>
814
- <div class="tt-play">HF</div>
815
- <div class="tt-side">
816
- <div><span>12</span>Clips</div>
817
- <div><span>4</span>Tracks</div>
818
- <div><span>V</span>Vars</div>
819
- <div><span>MP4</span>Render</div>
820
- </div>
821
- </div>
822
- <div class="tt-timeline">
823
- <div class="tt-strip">
824
- <div class="tt-clip"></div>
825
- <div class="tt-clip"></div>
826
- <div class="tt-clip active"></div>
827
- <div class="tt-clip"></div>
828
- <div class="tt-clip"></div>
829
- <div class="tt-clip"></div>
830
- <div class="tt-clip"></div>
831
- <div class="tt-clip"></div>
832
- </div>
833
- <div class="tt-note">0 errors · frame-safe render</div>
834
- </div>
835
- <div class="tt-tabs">
836
- <span>Clips</span><span>Tracks</span><span>Vars</span><span>Render</span>
837
- </div>
838
- </div>
839
- </div>
840
- </div>
841
- </div>
842
-
843
- <!-- HyperFrames Render mockup (right) -->
844
- <div class="mockup mockup-right">
845
- <div class="phone-shell">
846
- <div class="phone-notch"></div>
847
- <div class="phone-screen">
848
- <div class="mockup-content ig-content">
849
- <div class="ig-header">
850
- <svg viewBox="0 0 24 24" width="22" height="22" aria-hidden="true">
851
- <rect
852
- x="3"
853
- y="4"
854
- width="18"
855
- height="14"
856
- rx="3"
857
- fill="none"
858
- stroke="#833ab4"
859
- stroke-width="2"
860
- />
861
- <path d="M9 9.2 15 12 9 14.8Z" fill="#fd1d1d" />
862
- <path d="M6 21h12" stroke="#fcaf45" stroke-width="2" stroke-linecap="round" />
863
- </svg>
864
- Render Queue
865
- </div>
866
- <div class="ig-body">
867
- <h3>Export HyperFrames scene</h3>
868
- <div class="ig-warn">
869
- <div class="ig-warn-title">Ready for MP4 render</div>
870
- <div class="ig-warn-sub">lint · validate · inspect passed</div>
871
- </div>
872
- <div class="ig-task-label">Pipeline:</div>
873
- <div class="ig-task">Preview locally</div>
874
- <div class="ig-task">Validate runtime</div>
875
- <div class="ig-task">Inspect layout</div>
876
- <div class="ig-task">Render MP4</div>
877
- <div class="ig-task">Publish share link</div>
878
- <div class="ig-time">Draft render: ~45 sec</div>
879
- </div>
880
- <div class="ig-footer">
881
- <div class="ig-share">Publish link</div>
882
- </div>
883
- </div>
884
- </div>
885
- </div>
886
- </div>
887
-
888
- <!-- Nine scattered HyperFrames workflow icons -->
889
- <div class="platform-icon pi-youtube">
890
- <svg viewBox="0 0 24 24" aria-hidden="true">
891
- <defs>
892
- <linearGradient id="hf-orbit-grad" x1="2" y1="4" x2="22" y2="20">
893
- <stop offset="0%" stop-color="#14b8a6" />
894
- <stop offset="100%" stop-color="#06b6d4" />
895
- </linearGradient>
896
- </defs>
897
- <path
898
- d="M4 9.5 11.5 5c2.7-1.6 5.7.8 5.1 3.8L15 17.5c-.5 2.8-3.8 4-6 2.2L3.2 15c-2-1.6-1.5-4.2.8-5.5Z"
899
- fill="url(#hf-orbit-grad)"
900
- />
901
- <path
902
- d="M13.2 6.5 20.8 11c2.4 1.4 2.4 4.6 0 6l-7.6 4.5c-2.6 1.5-5.8-.7-5.2-3.6l1.8-9c.5-2.8 3-3.8 3.4-2.4Z"
903
- fill="url(#hf-orbit-grad)"
904
- opacity="0.82"
905
- />
906
- </svg>
907
- </div>
908
- <div class="platform-icon pi-google">
909
- <span class="icon-type">&lt;/&gt;</span>
910
- </div>
911
- <div class="platform-icon pi-instagram">
912
- <span class="icon-type icon-small">GS</span>
913
- </div>
914
- <div class="platform-icon pi-tiktok">
915
- <span class="icon-type icon-small">CSS</span>
916
- </div>
917
- <div class="platform-icon pi-tripadvisor">
918
- <svg viewBox="0 0 24 24" aria-hidden="true">
919
- <path
920
- d="M12 3 20 7.5v9L12 21 4 16.5v-9Z"
921
- fill="none"
922
- stroke="#063238"
923
- stroke-width="1.6"
924
- />
925
- <path
926
- d="M12 3v9l8-4.5M12 12 4 7.5M12 12v9"
927
- stroke="#06b6d4"
928
- stroke-width="1.6"
929
- stroke-linecap="round"
930
- />
931
- </svg>
932
- </div>
933
- <div class="platform-icon pi-facebook">
934
- <svg viewBox="0 0 24 24" aria-hidden="true">
935
- <path
936
- d="M4 14v-4M8 17V7M12 19V5M16 16V8M20 13v-2"
937
- stroke="#063238"
938
- stroke-width="2.4"
939
- stroke-linecap="round"
940
- />
941
- <path
942
- d="M8 17V7M16 16V8"
943
- stroke="#06b6d4"
944
- stroke-width="2.4"
945
- stroke-linecap="round"
946
- />
947
- </svg>
948
- </div>
949
- <div class="platform-icon pi-twitter">
950
- <span class="icon-type icon-small">CAP</span>
951
- </div>
952
- <div class="platform-icon pi-linkedin">
953
- <span class="icon-type icon-small">MP4</span>
954
- </div>
955
- <div class="platform-icon pi-yelp">
956
- <span class="icon-type icon-small">PUB</span>
957
- </div>
958
- </div>
959
- <!-- /.mockup-cluster -->
960
-
961
- <!-- ===== Phase 3-4: Avatar + task bubbles ===== -->
962
- <div class="avatar-with-bubbles" id="avatar-bubbles">
963
- <div class="avatar-stage" id="avatar-stage">
964
- <div class="avatar-ring">
965
- <div class="avatar-disc"></div>
966
- </div>
967
- <div class="orbit-dot" id="orbit-0"></div>
968
- <div class="orbit-dot" id="orbit-1"></div>
969
- <div class="orbit-dot" id="orbit-2"></div>
970
- <div class="orbit-dot" id="orbit-3"></div>
971
- </div>
972
- <!-- task bubbles appended by JS -->
973
- </div>
974
- </div>
975
- <!-- /.scene -->
976
-
977
- <div class="vignette"></div>
978
- </div>
979
-
980
- <script>
981
- /* ================================================================
982
- CONSTANTS
983
- ================================================================ */
984
- const W = 1920,
985
- H = 1080;
986
- const MOCKUP_CENTER_W = 320; // .mockup-center intrinsic width (matches CSS)
987
- const MOCKUP_CENTER_H = 650;
988
- const AVATAR_DIAMETER = 220;
989
- const MORPH_END_SCALE_X = AVATAR_DIAMETER / MOCKUP_CENTER_W; // ≈ 0.6875
990
- const MORPH_END_SCALE_Y = AVATAR_DIAMETER / MOCKUP_CENTER_H; // ≈ 0.3385
991
-
992
- const TIMING = {
993
- // Phase 1 — center stack → side-phone fan-out
994
- mockupCenterAt: 0.08,
995
- mockupLeftAt: 0.2,
996
- mockupRightAt: 0.28,
997
- mockupEntryDur: 0.7,
998
- mockupFanDur: 1.08,
999
-
1000
- // Phase 2 — icon entries
1001
- iconsAt: 0.33,
1002
- iconEntryDur: 0.45,
1003
- iconStagger: 0.07,
1004
-
1005
- // Phase 3 — morph
1006
- morphAt: 3.2,
1007
- morphDur: 0.6,
1008
-
1009
- // Avatar (pop concurrent with morph; layer opacity in at 50% of morph)
1010
- avatarPopAt: 3.2,
1011
- avatarPopDur: 0.55,
1012
- avatarLayerInAt: 3.5,
1013
- avatarLayerInDur: 0.3,
1014
-
1015
- // Phase 4 — bubbles
1016
- bubblesAt: 3.53,
1017
- bubbleDur: 0.45,
1018
- bubbleStagger: 0.07,
1019
- };
1020
-
1021
- const BUBBLE_TASKS = [
1022
- { label: "Missing data-duration", angle: 270, dx: 14, dy: -8 }, // top
1023
- { label: "Timeline not registered", angle: 315, dx: 122, dy: 63 }, // top-right
1024
- { label: "Same-track overlaps", angle: 0, dx: 86, dy: 63 }, // right
1025
- { label: "Text overflow at 5s", angle: 45, dx: 79, dy: -9 }, // bottom-right
1026
- { label: "Asset path mismatch", angle: 90 }, // bottom
1027
- { label: "Non-deterministic motion", angle: 135, dx: -124, dy: -32 }, // bottom-left
1028
- { label: "Sub-comp wiring drift", angle: 180, dx: -79, dy: 1 }, // left
1029
- { label: "Render blocked by console", angle: 225, dx: -128, dy: 45 }, // top-left
1030
- ];
1031
- const BUBBLE_RADIUS = 420; // px from screen center
1032
- const BUBBLE_CENTER_X = W / 2;
1033
- const BUBBLE_CENTER_Y = H / 2;
1034
-
1035
- /* ================================================================
1036
- INITIAL STATE (GSAP owns the transform from here on)
1037
- ================================================================ */
1038
- // All phones start stacked at center, then the side phones fan out like the Fitness showcase.
1039
- gsap.set(".mockup-left", {
1040
- xPercent: -50,
1041
- yPercent: -50,
1042
- x: 0,
1043
- y: 0,
1044
- rotation: 0,
1045
- rotationY: 0,
1046
- scale: 0.86,
1047
- opacity: 0,
1048
- });
1049
- gsap.set(".mockup-right", {
1050
- xPercent: -50,
1051
- yPercent: -50,
1052
- x: 0,
1053
- y: 0,
1054
- rotation: 0,
1055
- rotationY: 0,
1056
- scale: 0.86,
1057
- opacity: 0,
1058
- });
1059
- gsap.set(".mockup-center", {
1060
- xPercent: -50,
1061
- yPercent: -50,
1062
- x: 0,
1063
- y: 0,
1064
- rotation: 0,
1065
- rotationY: 0,
1066
- scale: 0.84,
1067
- opacity: 0,
1068
- });
1069
-
1070
- gsap.set(".platform-icon", { scale: 0, opacity: 0 });
1071
-
1072
- // Avatar — sits centered. xPercent/yPercent centering, pop starts at scale 0.
1073
- gsap.set(".avatar-stage", { xPercent: -50, yPercent: -50, scale: 0 });
1074
-
1075
- /* Build task bubbles deterministically at script load.
1076
- Positions baked into inline style; GSAP only tweens scale/opacity. */
1077
- const stage = document.getElementById("avatar-bubbles");
1078
- BUBBLE_TASKS.forEach((task, i) => {
1079
- const rad = (task.angle * Math.PI) / 180;
1080
- const x = BUBBLE_CENTER_X + Math.cos(rad) * BUBBLE_RADIUS + (task.dx || 0);
1081
- const y = BUBBLE_CENTER_Y + Math.sin(rad) * BUBBLE_RADIUS + (task.dy || 0);
1082
- const el = document.createElement("div");
1083
- el.className = "task-bubble";
1084
- el.id = "bubble-" + i;
1085
- el.style.left = x + "px";
1086
- el.style.top = y + "px";
1087
- el.textContent = task.label;
1088
- stage.appendChild(el);
1089
- // GSAP-owned centering + initial hidden state.
1090
- gsap.set(el, { xPercent: -50, yPercent: -50, scale: 0, opacity: 0 });
1091
- });
1092
-
1093
- /* ================================================================
1094
- TIMELINE
1095
- ================================================================ */
1096
- window.__timelines = window.__timelines || {};
1097
- const tl = gsap.timeline({ paused: true });
1098
- window.__timelines["main"] = tl;
1099
-
1100
- /* ---------------------------------------------------------------
1101
- PHASE 1: Mockup entries (center stack → fan-out)
1102
- spring(70, 14) → back.out(1.4)
1103
- --------------------------------------------------------------- */
1104
- tl.to(
1105
- ".mockup-center",
1106
- { opacity: 1, scale: 1.0, duration: TIMING.mockupEntryDur, ease: "back.out(1.4)" },
1107
- TIMING.mockupCenterAt,
1108
- );
1109
- tl.to(
1110
- ".mockup-left",
1111
- { opacity: 1, duration: TIMING.mockupEntryDur, ease: "back.out(1.4)" },
1112
- TIMING.mockupLeftAt,
1113
- );
1114
- tl.to(
1115
- ".mockup-left",
1116
- {
1117
- x: -370,
1118
- rotation: -10,
1119
- rotationY: 6,
1120
- scale: 0.92,
1121
- duration: TIMING.mockupFanDur,
1122
- ease: "expo.out",
1123
- },
1124
- TIMING.mockupLeftAt,
1125
- );
1126
- tl.to(
1127
- ".mockup-right",
1128
- { opacity: 1, duration: TIMING.mockupEntryDur, ease: "back.out(1.4)" },
1129
- TIMING.mockupRightAt,
1130
- );
1131
- tl.to(
1132
- ".mockup-right",
1133
- {
1134
- x: 370,
1135
- rotation: 10,
1136
- rotationY: -6,
1137
- scale: 0.92,
1138
- duration: TIMING.mockupFanDur,
1139
- ease: "expo.out",
1140
- },
1141
- TIMING.mockupRightAt,
1142
- );
1143
-
1144
- /* ---------------------------------------------------------------
1145
- PHASE 2: Platform icons (staggered)
1146
- spring(180, 14) → back.out(1.6)
1147
- --------------------------------------------------------------- */
1148
- tl.to(
1149
- ".platform-icon",
1150
- {
1151
- scale: 1,
1152
- opacity: 1,
1153
- duration: TIMING.iconEntryDur,
1154
- ease: "back.out(1.6)",
1155
- stagger: { each: TIMING.iconStagger, from: "start" },
1156
- },
1157
- TIMING.iconsAt,
1158
- );
1159
-
1160
- /* ---------------------------------------------------------------
1161
- PHASE 3: MORPH (the core glue)
1162
- spring(80, 18) → power3.out
1163
- --------------------------------------------------------------- */
1164
- // 1. Center mockup compositor-scales toward the avatar footprint.
1165
- tl.to(
1166
- ".mockup-center",
1167
- {
1168
- scaleX: MORPH_END_SCALE_X,
1169
- scaleY: MORPH_END_SCALE_Y,
1170
- duration: TIMING.morphDur,
1171
- ease: "power3.out",
1172
- },
1173
- TIMING.morphAt,
1174
- );
1175
-
1176
- // 2. borderRadius repaint — reads as a circle by morph end.
1177
- tl.to(
1178
- ".mockup-center",
1179
- {
1180
- borderRadius: "50%",
1181
- duration: TIMING.morphDur,
1182
- ease: "power3.out",
1183
- },
1184
- TIMING.morphAt,
1185
- );
1186
-
1187
- // 3. Surface shifts: black card → cyan-gradient glow.
1188
- tl.to(
1189
- ".mockup-center",
1190
- {
1191
- background: "linear-gradient(135deg, #14B8A6, #06B6D4, #0EA5E9)",
1192
- boxShadow: "0 0 50px rgba(20, 184, 166, 0.50), 0 0 100px rgba(6, 182, 212, 0.25)",
1193
- duration: TIMING.morphDur,
1194
- ease: "power3.out",
1195
- },
1196
- TIMING.morphAt,
1197
- );
1198
-
1199
- // 4. Content fades during first 40% of morph (hides aspect-ratio mismatch).
1200
- tl.to(
1201
- ".mockup-center .mockup-content",
1202
- {
1203
- opacity: 0,
1204
- duration: TIMING.morphDur * 0.4,
1205
- ease: "power2.out",
1206
- },
1207
- TIMING.morphAt,
1208
- );
1209
-
1210
- // 4b. Fade the physical phone shell early so the morph reads as a clean surface hand-off.
1211
- tl.to(
1212
- ".mockup-center .phone-shell",
1213
- {
1214
- opacity: 0,
1215
- duration: TIMING.morphDur * 0.45,
1216
- ease: "power2.out",
1217
- },
1218
- TIMING.morphAt,
1219
- );
1220
-
1221
- // 5. Hand-off: at 85-100% of morph, container fades to 0 → avatar reveals underneath.
1222
- tl.to(
1223
- ".mockup-center",
1224
- {
1225
- opacity: 0,
1226
- duration: TIMING.morphDur * 0.15,
1227
- ease: "none",
1228
- },
1229
- TIMING.morphAt + TIMING.morphDur * 0.85,
1230
- );
1231
-
1232
- /* Non-center mockups exit concurrently with morph */
1233
- tl.to(
1234
- [".mockup-left", ".mockup-right"],
1235
- {
1236
- opacity: 0,
1237
- scale: 0.85,
1238
- duration: TIMING.morphDur * 0.55,
1239
- ease: "power2.out",
1240
- },
1241
- TIMING.morphAt,
1242
- );
1243
-
1244
- /* Platform icons exit concurrently with morph (edge-out stagger) */
1245
- tl.to(
1246
- ".platform-icon",
1247
- {
1248
- opacity: 0,
1249
- scale: 0.85,
1250
- duration: TIMING.morphDur * 0.5,
1251
- ease: "power2.out",
1252
- stagger: { each: 0.025, from: "edges" },
1253
- },
1254
- TIMING.morphAt,
1255
- );
1256
-
1257
- /* Avatar pop — spring(120, 14) → back.out(1.4), concurrent with morph trigger */
1258
- tl.fromTo(
1259
- ".avatar-stage",
1260
- { scale: 0 },
1261
- { scale: 1, duration: TIMING.avatarPopDur, ease: "back.out(1.4)" },
1262
- TIMING.avatarPopAt,
1263
- );
1264
-
1265
- /* Avatar layer opacity in at 50% of morph */
1266
- tl.to(
1267
- "#avatar-bubbles",
1268
- {
1269
- opacity: 1,
1270
- duration: TIMING.avatarLayerInDur,
1271
- ease: "power2.out",
1272
- },
1273
- TIMING.avatarLayerInAt,
1274
- );
1275
-
1276
- /* ---------------------------------------------------------------
1277
- PHASE 4: Task bubbles (staggered radial entry)
1278
- spring(180, 12) → back.out(1.4)
1279
- --------------------------------------------------------------- */
1280
- tl.to(
1281
- ".task-bubble",
1282
- {
1283
- scale: 1,
1284
- opacity: 0.95,
1285
- duration: TIMING.bubbleDur,
1286
- ease: "back.out(1.4)",
1287
- stagger: { each: TIMING.bubbleStagger, from: "start" },
1288
- },
1289
- TIMING.bubblesAt,
1290
- );
1291
-
1292
- /* ---------------------------------------------------------------
1293
- CONTINUOUS MOTION (shared scene-ticker onUpdate)
1294
- Reads tl.time() each frame; cheaper than N independent onUpdates.
1295
- Drives:
1296
- - mockup floating (Phase 1-2 only — gated to t < morphAt)
1297
- - platform-icon floating (same)
1298
- - orbit dots around avatar
1299
- - avatar breath (multiplicative on pop scale)
1300
- - bubble micro-float (after bubblesAt)
1301
- --------------------------------------------------------------- */
1302
- const orbitDots = [
1303
- document.getElementById("orbit-0"),
1304
- document.getElementById("orbit-1"),
1305
- document.getElementById("orbit-2"),
1306
- document.getElementById("orbit-3"),
1307
- ];
1308
- const ORBIT_RADIUS = 130;
1309
- const ORBIT_SPEED = 2; // degrees per timeline-time unit (i.e. per second × 30)
1310
-
1311
- const avatarStage = document.getElementById("avatar-stage");
1312
- const bubbleEls = Array.from(document.querySelectorAll(".task-bubble"));
1313
- const mockupLeft = document.querySelector(".mockup-left");
1314
- const mockupRight = document.querySelector(".mockup-right");
1315
- const platformIcons = Array.from(document.querySelectorAll(".platform-icon"));
1316
-
1317
- tl.to(
1318
- { tick: 0 },
1319
- {
1320
- tick: 1,
1321
- duration: 6.0,
1322
- ease: "none",
1323
- onUpdate: function () {
1324
- const t = tl.time();
1325
-
1326
- /* Mockup + icon floating (only while they're visible — pre-morph) */
1327
- if (t < TIMING.morphAt) {
1328
- const mlY = Math.sin(t * 0.36) * 3;
1329
- const mrY = Math.sin(t * 0.45 + 1) * 3;
1330
- gsap.set(mockupLeft, { y: mlY });
1331
- gsap.set(mockupRight, { y: mrY });
1332
-
1333
- platformIcons.forEach((el, i) => {
1334
- const fx = Math.sin((t * 30 + i * 30) * 0.025) * 5;
1335
- const fy = Math.cos((t * 30 + i * 20) * 0.03) * 4;
1336
- gsap.set(el, { x: fx, y: fy });
1337
- });
1338
- }
1339
-
1340
- /* Avatar breath (multiplicative on pop scale, only after pop completes) */
1341
- const popEnd = TIMING.avatarPopAt + TIMING.avatarPopDur;
1342
- if (t >= popEnd) {
1343
- const idleT = t - popEnd;
1344
- const breath = 1 + Math.sin(idleT * 0.72) * 0.03;
1345
- // popScale at this point is 1.0 (back.out settled). Multiplicative → still 1.0 × breath.
1346
- gsap.set(avatarStage, { scale: 1 * breath });
1347
- }
1348
-
1349
- /* Orbit dots — always cycling once avatar layer is visible */
1350
- if (t >= TIMING.avatarLayerInAt) {
1351
- orbitDots.forEach((dot, i) => {
1352
- const angle = (t * 30 * ORBIT_SPEED + i * 90) * (Math.PI / 180);
1353
- const x = Math.cos(angle) * ORBIT_RADIUS;
1354
- const y = Math.sin(angle) * ORBIT_RADIUS;
1355
- const op = 0.7 + Math.sin(t * 30 * 0.1 + i) * 0.3;
1356
- gsap.set(dot, { x: x, y: y, opacity: op });
1357
- });
1358
- }
1359
-
1360
- /* Bubble micro-float (after they enter) */
1361
- if (t >= TIMING.bubblesAt + TIMING.bubbleDur) {
1362
- bubbleEls.forEach((el, i) => {
1363
- const fx = Math.sin((t * 30 + i * 24) * 0.015) * 5;
1364
- const fy = Math.cos((t * 30 + i * 30) * 0.018) * 4;
1365
- gsap.set(el, { x: fx, y: fy });
1366
- });
1367
- }
1368
- },
1369
- },
1370
- 0,
1371
- );
1372
- </script>
1373
- </body>
1374
- </html>