@prestyj/cli 5.28.1 → 5.29.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (316) hide show
  1. package/assets/motion/bin/contact-sheet.mjs +9 -3
  2. package/assets/motion/bin/cues.mjs +337 -0
  3. package/assets/motion/bin/library.mjs +53 -10
  4. package/assets/motion/bin/motion-blur.mjs +943 -0
  5. package/assets/motion/bin/motion-check.mjs +354 -3
  6. package/assets/motion/bin/music-fit.mjs +436 -0
  7. package/assets/motion/bin/pdf-extract.mjs +22 -10
  8. package/assets/motion/bin/reference-study.mjs +346 -0
  9. package/assets/motion/bin/score-synth.mjs +1052 -93
  10. package/assets/motion/library/README.md +50 -14
  11. package/assets/motion/library/kit/moves.js +1981 -0
  12. package/assets/motion/library/library.json +232 -0
  13. package/assets/motion/library/pieces/camera-rig/meta.json +13 -0
  14. package/assets/motion/library/pieces/camera-rig/piece.html +153 -0
  15. package/assets/motion/library/pieces/camera-rig/preview.jpg +0 -0
  16. package/assets/motion/library/pieces/chain-knock/meta.json +13 -0
  17. package/assets/motion/library/pieces/chain-knock/piece.html +195 -0
  18. package/assets/motion/library/pieces/chain-knock/preview.jpg +0 -0
  19. package/assets/motion/library/pieces/gather-to-logo/meta.json +13 -0
  20. package/assets/motion/library/pieces/gather-to-logo/piece.html +159 -0
  21. package/assets/motion/library/pieces/gather-to-logo/preview.jpg +0 -0
  22. package/assets/motion/library/pieces/morph-carry/meta.json +13 -0
  23. package/assets/motion/library/pieces/morph-carry/piece.html +173 -0
  24. package/assets/motion/library/pieces/morph-carry/preview.jpg +0 -0
  25. package/assets/motion/library/pieces/one-shape-journey/meta.json +13 -0
  26. package/assets/motion/library/pieces/one-shape-journey/piece.html +195 -0
  27. package/assets/motion/library/pieces/one-shape-journey/preview.jpg +0 -0
  28. package/assets/motion/library/pieces/open-from-subject/meta.json +13 -0
  29. package/assets/motion/library/pieces/open-from-subject/piece.html +168 -0
  30. package/assets/motion/library/pieces/open-from-subject/preview.jpg +0 -0
  31. package/assets/motion/library/pieces/request-to-result/meta.json +13 -0
  32. package/assets/motion/library/pieces/request-to-result/piece.html +212 -0
  33. package/assets/motion/library/pieces/request-to-result/preview.jpg +0 -0
  34. package/assets/motion/library/pieces/scale-dive/meta.json +13 -0
  35. package/assets/motion/library/pieces/scale-dive/piece.html +321 -0
  36. package/assets/motion/library/pieces/scale-dive/preview.jpg +0 -0
  37. package/assets/motion/library/pieces/screen-replica-steps/meta.json +13 -0
  38. package/assets/motion/library/pieces/screen-replica-steps/piece.html +366 -0
  39. package/assets/motion/library/pieces/screen-replica-steps/preview.jpg +0 -0
  40. package/assets/motion/library/pieces/zoom-into-card/meta.json +13 -0
  41. package/assets/motion/library/pieces/zoom-into-card/piece.html +179 -0
  42. package/assets/motion/library/pieces/zoom-into-card/preview.jpg +0 -0
  43. package/assets/motion/library/sheets/diagram.jpg +0 -0
  44. package/assets/motion/library/sheets/frame.jpg +0 -0
  45. package/assets/motion/library/sheets/transition.jpg +0 -0
  46. package/assets/motion/library/sheets/ui.jpg +0 -0
  47. package/assets/motion/references/build-sheet.md +206 -0
  48. package/assets/motion/references/runtime/determinism-rules.md +1 -1
  49. package/assets/motion/references/runtime/gsap-easing-and-stagger.md +29 -29
  50. package/assets/motion/references/runtime/inputs-and-assets.md +7 -12
  51. package/assets/motion/references/runtime/lint-validate-inspect.md +3 -3
  52. package/assets/motion/references/runtime/minimal-composition.md +1 -1
  53. package/assets/motion/references/runtime/preview-render.md +3 -3
  54. package/assets/motion/skills/app-walkthrough/SKILL.md +66 -0
  55. package/assets/motion/skills/before-after/SKILL.md +53 -0
  56. package/assets/motion/skills/brand-kit/SKILL.md +3 -3
  57. package/assets/motion/skills/dev-tool-video/SKILL.md +57 -0
  58. package/assets/motion/skills/launch-video/SKILL.md +62 -0
  59. package/assets/motion/skills/match-reference/SKILL.md +58 -0
  60. package/assets/motion/skills/motion/SKILL.md +78 -85
  61. package/assets/motion/skills/source-ingest/SKILL.md +17 -6
  62. package/assets/motion/skills/website-video/SKILL.md +59 -0
  63. package/assets/skills/bulletproof/SKILL.md +36 -11
  64. package/assets/skills/bulletproof/references/agent-surface.md +19 -9
  65. package/assets/skills/bulletproof/references/audit-protocol.md +20 -5
  66. package/assets/skills/bulletproof/references/platform-playbooks.md +5 -4
  67. package/assets/skills/bulletproof/references/provenance.md +26 -1
  68. package/assets/skills/bulletproof/references/secure-defaults.md +6 -5
  69. package/assets/skills/bulletproof/references/supply-chain.md +21 -17
  70. package/assets/skills/bulletproof/references/threat-landscape.md +28 -26
  71. package/assets/skills/bulletproof/references/verification.md +2 -0
  72. package/assets/skills/clarify/SKILL.md +25 -16
  73. package/assets/skills/code-review/SKILL.md +71 -13
  74. package/assets/skills/code-review/references/agent-diffs.md +27 -0
  75. package/assets/skills/code-review/references/tests.md +19 -0
  76. package/assets/skills/compliance-guard/SKILL.md +20 -5
  77. package/assets/skills/compliance-guard/references/artifacts.md +1 -1
  78. package/assets/skills/compliance-guard/references/eu-uk.md +16 -16
  79. package/assets/skills/compliance-guard/references/lawsuit-vectors.md +5 -5
  80. package/assets/skills/compliance-guard/references/provenance.md +41 -2
  81. package/assets/skills/compliance-guard/references/sector-gates.md +3 -3
  82. package/assets/skills/compliance-guard/references/security-baseline.md +2 -2
  83. package/assets/skills/compliance-guard/references/trigger-map.md +5 -5
  84. package/assets/skills/compliance-guard/references/us.md +27 -21
  85. package/assets/skills/durable/SKILL.md +87 -79
  86. package/assets/skills/durable/references/agent-db-safety.md +69 -0
  87. package/assets/skills/durable/references/backups-and-runtime.md +19 -12
  88. package/assets/skills/durable/references/migrations-and-schema.md +13 -6
  89. package/assets/skills/evidence-led-ui/SKILL.md +69 -127
  90. package/assets/skills/evidence-led-ui/references/anti-defaults.md +107 -208
  91. package/assets/skills/evidence-led-ui/references/direction.md +124 -0
  92. package/assets/skills/evidence-led-ui/references/production-contract.md +8 -0
  93. package/assets/skills/evidence-led-ui/references/provenance.md +24 -1
  94. package/assets/skills/lean/SKILL.md +90 -71
  95. package/assets/skills/lean/references/memory-and-processes.md +3 -2
  96. package/assets/skills/lean/references/playbooks.md +37 -12
  97. package/assets/skills/refactoring/SKILL.md +24 -3
  98. package/assets/skills/refactoring/references/agent-pitfalls.md +4 -1
  99. package/assets/skills/refactoring/references/legacy.md +21 -0
  100. package/assets/skills/root-cause/SKILL.md +20 -10
  101. package/assets/skills/shared-language/SKILL.md +16 -14
  102. package/assets/skills/tdd/SKILL.md +27 -15
  103. package/dist/app-sidecar.js +203 -47
  104. package/dist/app-sidecar.js.map +1 -1
  105. package/dist/cli.js +17 -26
  106. package/dist/cli.js.map +1 -1
  107. package/dist/core/acceptance-checks.d.ts +48 -0
  108. package/dist/core/acceptance-checks.js +144 -0
  109. package/dist/core/acceptance-checks.js.map +1 -0
  110. package/dist/core/agent-session.d.ts +106 -72
  111. package/dist/core/agent-session.js +539 -399
  112. package/dist/core/agent-session.js.map +1 -1
  113. package/dist/core/agents.d.ts +6 -5
  114. package/dist/core/agents.js.map +1 -1
  115. package/dist/core/ask-user.d.ts +90 -8
  116. package/dist/core/ask-user.js +124 -13
  117. package/dist/core/ask-user.js.map +1 -1
  118. package/dist/core/bundled-agents.js +1 -3
  119. package/dist/core/bundled-agents.js.map +1 -1
  120. package/dist/core/cache-diagnostics.d.ts +68 -0
  121. package/dist/core/cache-diagnostics.js +196 -0
  122. package/dist/core/cache-diagnostics.js.map +1 -0
  123. package/dist/core/cache-expiry.d.ts +87 -0
  124. package/dist/core/cache-expiry.js +111 -0
  125. package/dist/core/cache-expiry.js.map +1 -0
  126. package/dist/core/compaction/compactor.js +78 -48
  127. package/dist/core/compaction/compactor.js.map +1 -1
  128. package/dist/core/compaction/plan-step-policy.d.ts +46 -0
  129. package/dist/core/compaction/plan-step-policy.js +57 -0
  130. package/dist/core/compaction/plan-step-policy.js.map +1 -0
  131. package/dist/core/destructive-git-guard.d.ts +90 -0
  132. package/dist/core/destructive-git-guard.js +871 -0
  133. package/dist/core/destructive-git-guard.js.map +1 -0
  134. package/dist/core/event-bus.d.ts +3 -0
  135. package/dist/core/event-bus.js +5 -0
  136. package/dist/core/event-bus.js.map +1 -1
  137. package/dist/core/injection-detect.d.ts +38 -0
  138. package/dist/core/injection-detect.js +232 -0
  139. package/dist/core/injection-detect.js.map +1 -0
  140. package/dist/core/keep-awake.d.ts +88 -0
  141. package/dist/core/keep-awake.js +251 -0
  142. package/dist/core/keep-awake.js.map +1 -0
  143. package/dist/core/mcp/client.d.ts +72 -0
  144. package/dist/core/mcp/client.js +264 -41
  145. package/dist/core/mcp/client.js.map +1 -1
  146. package/dist/core/mcp/content.js +6 -2
  147. package/dist/core/mcp/content.js.map +1 -1
  148. package/dist/core/mcp/store.d.ts +6 -1
  149. package/dist/core/mcp/store.js +12 -1
  150. package/dist/core/mcp/store.js.map +1 -1
  151. package/dist/core/mcp/types.d.ts +18 -0
  152. package/dist/core/model-unavailable.d.ts +14 -0
  153. package/dist/core/model-unavailable.js +23 -0
  154. package/dist/core/model-unavailable.js.map +1 -0
  155. package/dist/core/node-debugger.d.ts +148 -0
  156. package/dist/core/node-debugger.js +642 -0
  157. package/dist/core/node-debugger.js.map +1 -0
  158. package/dist/core/package-threats.d.ts +18 -0
  159. package/dist/core/package-threats.js +168 -0
  160. package/dist/core/package-threats.js.map +1 -0
  161. package/dist/core/persistent-shell.d.ts +58 -6
  162. package/dist/core/persistent-shell.js +331 -49
  163. package/dist/core/persistent-shell.js.map +1 -1
  164. package/dist/core/process-manager.d.ts +14 -0
  165. package/dist/core/process-manager.js +61 -0
  166. package/dist/core/process-manager.js.map +1 -1
  167. package/dist/core/progress/git-xp.js +8 -14
  168. package/dist/core/progress/git-xp.js.map +1 -1
  169. package/dist/core/session-history.d.ts +12 -0
  170. package/dist/core/session-history.js +27 -0
  171. package/dist/core/session-history.js.map +1 -1
  172. package/dist/core/session-manager.d.ts +13 -1
  173. package/dist/core/session-manager.js +38 -18
  174. package/dist/core/session-manager.js.map +1 -1
  175. package/dist/core/session-summary-index.d.ts +37 -0
  176. package/dist/core/session-summary-index.js +172 -0
  177. package/dist/core/session-summary-index.js.map +1 -0
  178. package/dist/core/settings-manager.d.ts +2 -0
  179. package/dist/core/settings-manager.js +10 -0
  180. package/dist/core/settings-manager.js.map +1 -1
  181. package/dist/core/shell-threats-popular-packages.d.ts +11 -0
  182. package/dist/core/shell-threats-popular-packages.js +675 -0
  183. package/dist/core/shell-threats-popular-packages.js.map +1 -0
  184. package/dist/core/shell-threats.d.ts +8 -0
  185. package/dist/core/shell-threats.js +186 -0
  186. package/dist/core/shell-threats.js.map +1 -0
  187. package/dist/core/skills.js +3 -1
  188. package/dist/core/skills.js.map +1 -1
  189. package/dist/core/stream-rules.d.ts +30 -0
  190. package/dist/core/stream-rules.js +151 -0
  191. package/dist/core/stream-rules.js.map +1 -0
  192. package/dist/core/subagent-manager.d.ts +20 -5
  193. package/dist/core/subagent-manager.js +22 -8
  194. package/dist/core/subagent-manager.js.map +1 -1
  195. package/dist/core/subagent-receipt.d.ts +54 -0
  196. package/dist/core/subagent-receipt.js +276 -0
  197. package/dist/core/subagent-receipt.js.map +1 -0
  198. package/dist/core/subagent-turn-record.d.ts +2 -0
  199. package/dist/core/subagent-turn-record.js.map +1 -1
  200. package/dist/core/test-impact.d.ts +73 -0
  201. package/dist/core/test-impact.js +467 -0
  202. package/dist/core/test-impact.js.map +1 -0
  203. package/dist/core/thinking-level.d.ts +1 -1
  204. package/dist/core/thinking-level.js +1 -1
  205. package/dist/core/thinking-level.js.map +1 -1
  206. package/dist/core/verification-gate.d.ts +2 -0
  207. package/dist/core/verification-gate.js +4 -0
  208. package/dist/core/verification-gate.js.map +1 -1
  209. package/dist/core/verification-snapshot.js +3 -5
  210. package/dist/core/verification-snapshot.js.map +1 -1
  211. package/dist/core/workspace-guard.d.ts +18 -7
  212. package/dist/core/workspace-guard.js +227 -60
  213. package/dist/core/workspace-guard.js.map +1 -1
  214. package/dist/interactive.js +2 -1
  215. package/dist/interactive.js.map +1 -1
  216. package/dist/modes/subagent-worker-mode.js +34 -6
  217. package/dist/modes/subagent-worker-mode.js.map +1 -1
  218. package/dist/motion-agent/motion-agent.d.ts +6 -2
  219. package/dist/motion-agent/motion-agent.js +5 -7
  220. package/dist/motion-agent/motion-agent.js.map +1 -1
  221. package/dist/motion-agent/motion-prompt.d.ts +1 -1
  222. package/dist/motion-agent/motion-prompt.js +14 -19
  223. package/dist/motion-agent/motion-prompt.js.map +1 -1
  224. package/dist/motion-agent/motion-review.d.ts +10 -3
  225. package/dist/motion-agent/motion-review.js +15 -7
  226. package/dist/motion-agent/motion-review.js.map +1 -1
  227. package/dist/motion-agent/motion-studio-context.js +1 -1
  228. package/dist/motion-agent/motion-studio-context.js.map +1 -1
  229. package/dist/system-prompt.js +3 -1
  230. package/dist/system-prompt.js.map +1 -1
  231. package/dist/test-support/keep-alive.d.ts +14 -0
  232. package/dist/test-support/keep-alive.js +17 -0
  233. package/dist/test-support/keep-alive.js.map +1 -0
  234. package/dist/tools/ask-user.js +3 -3
  235. package/dist/tools/ask-user.js.map +1 -1
  236. package/dist/tools/bash-read-evidence.d.ts +10 -0
  237. package/dist/tools/bash-read-evidence.js +133 -0
  238. package/dist/tools/bash-read-evidence.js.map +1 -0
  239. package/dist/tools/bash.d.ts +10 -1
  240. package/dist/tools/bash.js +115 -7
  241. package/dist/tools/bash.js.map +1 -1
  242. package/dist/tools/debug.d.ts +54 -0
  243. package/dist/tools/debug.js +233 -0
  244. package/dist/tools/debug.js.map +1 -0
  245. package/dist/tools/edit.js +12 -4
  246. package/dist/tools/edit.js.map +1 -1
  247. package/dist/tools/goals.d.ts +1 -1
  248. package/dist/tools/index.d.ts +19 -2
  249. package/dist/tools/index.js +47 -7
  250. package/dist/tools/index.js.map +1 -1
  251. package/dist/tools/prompt-hints.js +2 -0
  252. package/dist/tools/prompt-hints.js.map +1 -1
  253. package/dist/tools/read-tracker.d.ts +5 -0
  254. package/dist/tools/read-tracker.js +19 -9
  255. package/dist/tools/read-tracker.js.map +1 -1
  256. package/dist/tools/read.js +3 -2
  257. package/dist/tools/read.js.map +1 -1
  258. package/dist/tools/skill.js +5 -0
  259. package/dist/tools/skill.js.map +1 -1
  260. package/dist/tools/subagent-control.js +44 -8
  261. package/dist/tools/subagent-control.js.map +1 -1
  262. package/dist/tools/subagent-shared.d.ts +29 -8
  263. package/dist/tools/subagent-shared.js +45 -14
  264. package/dist/tools/subagent-shared.js.map +1 -1
  265. package/dist/tools/subagent.d.ts +8 -2
  266. package/dist/tools/subagent.js +28 -10
  267. package/dist/tools/subagent.js.map +1 -1
  268. package/dist/tools/task-output.js +3 -2
  269. package/dist/tools/task-output.js.map +1 -1
  270. package/dist/tools/task-send.d.ts +1 -1
  271. package/dist/tools/task-send.js +15 -1
  272. package/dist/tools/task-send.js.map +1 -1
  273. package/dist/tools/tool-tiers.d.ts +2 -2
  274. package/dist/tools/tool-tiers.js +3 -2
  275. package/dist/tools/tool-tiers.js.map +1 -1
  276. package/dist/tools/truncate.d.ts +21 -0
  277. package/dist/tools/truncate.js +187 -0
  278. package/dist/tools/truncate.js.map +1 -1
  279. package/dist/tools/ui-adopt.js +2 -0
  280. package/dist/tools/ui-adopt.js.map +1 -1
  281. package/dist/ui/App.d.ts +0 -4
  282. package/dist/ui/App.js +5 -28
  283. package/dist/ui/App.js.map +1 -1
  284. package/dist/ui/components/ActivityIndicator.js +1 -0
  285. package/dist/ui/components/ActivityIndicator.js.map +1 -1
  286. package/dist/ui/hooks/useAgentLoop.d.ts +1 -8
  287. package/dist/ui/hooks/useAgentLoop.js +1 -119
  288. package/dist/ui/hooks/useAgentLoop.js.map +1 -1
  289. package/dist/ui/render.d.ts +0 -4
  290. package/dist/ui/render.js +0 -2
  291. package/dist/ui/render.js.map +1 -1
  292. package/dist/utils/git.d.ts +77 -0
  293. package/dist/utils/git.js +285 -21
  294. package/dist/utils/git.js.map +1 -1
  295. package/dist/utils/github-ci.js +2 -1
  296. package/dist/utils/github-ci.js.map +1 -1
  297. package/dist/utils/github.js +11 -9
  298. package/dist/utils/github.js.map +1 -1
  299. package/dist/utils/image.d.ts +14 -0
  300. package/dist/utils/image.js +16 -0
  301. package/dist/utils/image.js.map +1 -1
  302. package/dist/utils/process.d.ts +20 -0
  303. package/dist/utils/process.js +98 -0
  304. package/dist/utils/process.js.map +1 -1
  305. package/package.json +5 -5
  306. package/assets/motion/references/motion-language.md +0 -128
  307. package/assets/motion/skills/video-qa/SKILL.md +0 -89
  308. package/dist/core/ideal-review-subagent.d.ts +0 -56
  309. package/dist/core/ideal-review-subagent.js +0 -112
  310. package/dist/core/ideal-review-subagent.js.map +0 -1
  311. package/dist/core/ideal-review.d.ts +0 -82
  312. package/dist/core/ideal-review.js +0 -242
  313. package/dist/core/ideal-review.js.map +0 -1
  314. package/dist/motion-agent/motion-check-tool.d.ts +0 -35
  315. package/dist/motion-agent/motion-check-tool.js +0 -514
  316. package/dist/motion-agent/motion-check-tool.js.map +0 -1
@@ -0,0 +1,159 @@
1
+ <!doctype html>
2
+ <!--
3
+ gather-to-logo: the cast becomes the logo (move kit). Feature chips pop in
4
+ scattered around the frame, hold for a beat, then travel on arcs into the
5
+ centre and shrink into it; the moment the last one arrives the logo mark
6
+ and wordmark stamp in there and hold as the end card.
7
+ Needs the move kit: `library.mjs add` installs it; put its <script> in the
8
+ root head after GSAP.
9
+ Params (script top): POP_AT (first chip arrival), POP_STAGGER, GATHER_AT
10
+ (when they leave), GATHER_DURATION, GATHER_STAGGER, BOW (arc bend),
11
+ TARGET (gather point, stage px). Chip positions are left/top on each
12
+ .gl-chip (the chip's centre).
13
+ -->
14
+ <html lang="en">
15
+ <head>
16
+ <meta charset="UTF-8" />
17
+ <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
18
+ </head>
19
+ <body>
20
+ <div
21
+ id="gather-to-logo-root"
22
+ data-composition-id="gather-to-logo"
23
+ data-start="0"
24
+ data-duration="5"
25
+ data-width="1920"
26
+ data-height="1080"
27
+ >
28
+ <style>
29
+ [data-composition-id="gather-to-logo"] {
30
+ position: absolute;
31
+ inset: 0;
32
+ overflow: hidden;
33
+ color: var(--ink, #111);
34
+ font-family: var(--text, sans-serif);
35
+ }
36
+ [data-composition-id="gather-to-logo"] .gl-stage {
37
+ position: absolute;
38
+ inset: 0;
39
+ }
40
+ [data-composition-id="gather-to-logo"] .gl-chip {
41
+ position: absolute;
42
+ width: 0;
43
+ height: 0;
44
+ }
45
+ [data-composition-id="gather-to-logo"] .gl-pill {
46
+ position: absolute;
47
+ left: 0;
48
+ top: 0;
49
+ white-space: nowrap;
50
+ padding: 22px 38px;
51
+ border-radius: 999px;
52
+ background: var(--field, #fff);
53
+ border: 3px solid var(--ink, #111);
54
+ color: var(--ink, #111);
55
+ font-family: var(--display, sans-serif);
56
+ font-weight: var(--display-weight, 700);
57
+ font-stretch: var(--display-stretch, 100%);
58
+ letter-spacing: var(--display-tracking, -0.02em);
59
+ font-size: 50px;
60
+ line-height: 1;
61
+ opacity: 0;
62
+ }
63
+ [data-composition-id="gather-to-logo"] .gl-pill.is-accent {
64
+ background: var(--accent, #2f5bff);
65
+ border-color: var(--accent, #2f5bff);
66
+ color: var(--field, #fff);
67
+ }
68
+ [data-composition-id="gather-to-logo"] .gl-logo {
69
+ position: absolute;
70
+ left: 960px;
71
+ top: 540px;
72
+ display: flex;
73
+ align-items: center;
74
+ gap: 36px;
75
+ white-space: nowrap;
76
+ opacity: 0;
77
+ }
78
+ [data-composition-id="gather-to-logo"] .gl-mark {
79
+ width: 176px;
80
+ height: 176px;
81
+ border-radius: var(--radius, 28px);
82
+ background: var(--accent, #2f5bff);
83
+ color: var(--field, #fff);
84
+ display: flex;
85
+ align-items: center;
86
+ justify-content: center;
87
+ font-family: var(--display, sans-serif);
88
+ font-weight: var(--display-weight, 700);
89
+ font-stretch: var(--display-stretch, 100%);
90
+ font-size: 120px;
91
+ line-height: 1;
92
+ }
93
+ [data-composition-id="gather-to-logo"] .gl-word {
94
+ font-family: var(--display, sans-serif);
95
+ font-weight: var(--display-weight, 700);
96
+ font-stretch: var(--display-stretch, 100%);
97
+ letter-spacing: var(--display-tracking, -0.02em);
98
+ font-size: 168px;
99
+ line-height: 1;
100
+ color: var(--ink, #111);
101
+ }
102
+ </style>
103
+ <div class="gl-stage">
104
+ <!-- edit: feature chips (left/top = chip centre in stage px; add is-accent for emphasis) -->
105
+ <div class="gl-chip" style="left: 330px; top: 210px"><div class="gl-pill">Fast sync</div></div>
106
+ <div class="gl-chip" style="left: 960px; top: 150px"><div class="gl-pill is-accent">Offline</div></div>
107
+ <div class="gl-chip" style="left: 1580px; top: 230px"><div class="gl-pill">Shared boards</div></div>
108
+ <div class="gl-chip" style="left: 1660px; top: 560px"><div class="gl-pill is-accent">Comments</div></div>
109
+ <div class="gl-chip" style="left: 1500px; top: 880px"><div class="gl-pill">Version history</div></div>
110
+ <div class="gl-chip" style="left: 920px; top: 930px"><div class="gl-pill">Templates</div></div>
111
+ <div class="gl-chip" style="left: 350px; top: 860px"><div class="gl-pill is-accent">Search</div></div>
112
+ <div class="gl-chip" style="left: 270px; top: 540px"><div class="gl-pill">Dark mode</div></div>
113
+ <div class="gl-logo">
114
+ <!-- edit: logo mark letter -->
115
+ <div class="gl-mark">n</div>
116
+ <!-- edit: wordmark -->
117
+ <div class="gl-word">notably</div>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ <script>
122
+ (function () {
123
+ const kit = window.GGMotionKit;
124
+ const root = document.querySelector('[data-composition-id="gather-to-logo"]');
125
+ const stage = root.querySelector(".gl-stage");
126
+ const chips = root.querySelectorAll(".gl-chip");
127
+ const pills = root.querySelectorAll(".gl-pill");
128
+ const logo = root.querySelector(".gl-logo");
129
+ const tl = gsap.timeline({ paused: true });
130
+
131
+ const POP_AT = 0.2;
132
+ const POP_STAGGER = 0.09;
133
+ const GATHER_AT = 1.75;
134
+ const GATHER_DURATION = 0.85;
135
+ const GATHER_STAGGER = 0.07;
136
+ const BOW = 0.3;
137
+ const TARGET = { x: 960, y: 540 };
138
+
139
+ gsap.set(pills, { xPercent: -50, yPercent: -50 });
140
+ gsap.set(logo, { xPercent: -50, yPercent: -50 });
141
+ pills.forEach((pill, i) => kit.pop(tl, pill, POP_AT + i * POP_STAGGER, { from: 0.4 }));
142
+
143
+ const arrived = kit.converge(tl, chips, GATHER_AT, TARGET, {
144
+ duration: GATHER_DURATION,
145
+ stagger: GATHER_STAGGER,
146
+ bow: BOW,
147
+ space: stage,
148
+ seed: 7,
149
+ });
150
+ // The stamp's contact lands exactly on the last arrival.
151
+ kit.stamp(tl, logo, arrived - 0.2, { rotate: 0, from: 1.8 });
152
+ tl.set({}, {}, 5);
153
+
154
+ window.__timelines = window.__timelines || {};
155
+ window.__timelines["gather-to-logo"] = tl;
156
+ })();
157
+ </script>
158
+ </body>
159
+ </html>
@@ -0,0 +1,13 @@
1
+ {
2
+ "id": "morph-carry",
3
+ "name": "Morph carry",
4
+ "kind": "transition",
5
+ "description": "A cursor presses a pill button and the button's own box springs open into the full frame, its label leaving as the next scene's headline rises inside it. Edit the button label, the hint line and the next scene's kicker and headline.",
6
+ "tags": ["handoff", "continuous", "kit", "morph", "cursor", "button", "box-to-frame"],
7
+ "fonts": [],
8
+ "duration": 5,
9
+ "previewAt": 1.35,
10
+ "license": "original",
11
+ "requires": ["kit"],
12
+ "previewLook": "soft-light-ad"
13
+ }
@@ -0,0 +1,173 @@
1
+ <!doctype html>
2
+ <!--
3
+ morph-carry: the box becomes the next frame. A pill button sits mid-frame;
4
+ a cursor travels to it and presses; on the press the button's own
5
+ rectangle morphs (spring) into the full 1920x1080 frame with square
6
+ corners. Its label leaves early and the next scene's headline rises inside
7
+ the growing box. One element changes; nothing crossfades.
8
+ Needs the move kit: `library.mjs add` installs it; put its <script> in the
9
+ root head after GSAP.
10
+ Params (script top): CURSOR_FROM (start point, px), MOVE_AT (cursor
11
+ leaves), MORPH_DELAY (press -> morph start), MORPH_EASE / MORPH_DUR
12
+ (kit ease name and seconds for the box-to-frame morph), HEADLINE_DELAY (morph start -> headline rise). Button size and
13
+ place: --mc-w / --mc-h / --mc-x / --mc-y (centre).
14
+ -->
15
+ <html lang="en">
16
+ <head>
17
+ <meta charset="UTF-8" />
18
+ <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
19
+ </head>
20
+ <body>
21
+ <div
22
+ id="morph-carry-root"
23
+ data-composition-id="morph-carry"
24
+ data-start="0"
25
+ data-duration="5"
26
+ data-width="1920"
27
+ data-height="1080"
28
+ >
29
+ <style>
30
+ [data-composition-id="morph-carry"] {
31
+ --mc-w: 460px;
32
+ --mc-h: 124px;
33
+ --mc-x: 960px;
34
+ --mc-y: 540px;
35
+ position: absolute;
36
+ inset: 0;
37
+ overflow: hidden;
38
+ color: var(--ink, #111);
39
+ font-family: var(--text, sans-serif);
40
+ }
41
+ [data-composition-id="morph-carry"] .mc-hint {
42
+ position: absolute;
43
+ left: 0;
44
+ right: 0;
45
+ top: calc(var(--mc-y) - 190px);
46
+ text-align: center;
47
+ font-family: var(--mono, monospace);
48
+ font-size: 26px;
49
+ letter-spacing: 0.1em;
50
+ text-transform: uppercase;
51
+ color: var(--muted, #666);
52
+ }
53
+ [data-composition-id="morph-carry"] .mc-box {
54
+ position: absolute;
55
+ left: calc(var(--mc-x) - var(--mc-w) / 2);
56
+ top: calc(var(--mc-y) - var(--mc-h) / 2);
57
+ width: var(--mc-w);
58
+ height: var(--mc-h);
59
+ border-radius: calc(var(--mc-h) / 2);
60
+ background: var(--ink, #111);
61
+ color: var(--field, #fff);
62
+ overflow: hidden;
63
+ box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.35);
64
+ }
65
+ [data-composition-id="morph-carry"] .mc-label,
66
+ [data-composition-id="morph-carry"] .mc-scene {
67
+ position: absolute;
68
+ inset: 0;
69
+ display: flex;
70
+ align-items: center;
71
+ justify-content: center;
72
+ white-space: nowrap;
73
+ }
74
+ [data-composition-id="morph-carry"] .mc-label {
75
+ font-size: 40px;
76
+ font-weight: 600;
77
+ gap: 18px;
78
+ }
79
+ [data-composition-id="morph-carry"] .mc-scene {
80
+ flex-direction: column;
81
+ gap: 34px;
82
+ }
83
+ [data-composition-id="morph-carry"] .mc-kicker {
84
+ font-family: var(--mono, monospace);
85
+ font-size: 28px;
86
+ letter-spacing: 0.12em;
87
+ text-transform: uppercase;
88
+ opacity: 0;
89
+ }
90
+ [data-composition-id="morph-carry"] .mc-head {
91
+ font-family: var(--display, sans-serif);
92
+ font-weight: var(--display-weight, 700);
93
+ font-stretch: var(--display-stretch, 100%);
94
+ letter-spacing: var(--display-tracking, -0.02em);
95
+ font-size: 150px;
96
+ line-height: 1;
97
+ }
98
+ [data-composition-id="morph-carry"] .mc-cursor {
99
+ position: absolute;
100
+ left: 0;
101
+ top: 0;
102
+ width: 56px;
103
+ height: 56px;
104
+ filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.25));
105
+ }
106
+ </style>
107
+ <!-- edit: line above the button -->
108
+ <div class="mc-hint">Step 1 of 2</div>
109
+ <div class="mc-box">
110
+ <div class="mc-label">
111
+ <!-- edit: button label -->
112
+ <span>Get started</span>
113
+ <svg width="34" height="34" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
114
+ </div>
115
+ <div class="mc-scene">
116
+ <!-- edit: next scene kicker and headline -->
117
+ <div class="mc-kicker">Chapter two</div>
118
+ <div class="mc-head">Now it's yours</div>
119
+ </div>
120
+ </div>
121
+ <svg class="mc-cursor" viewBox="0 0 28 28">
122
+ <path d="M5 3.2v19.6c0 .8 1 1.2 1.5.6l4.6-5.1 3.4 7.6c.3.6 1 .9 1.6.6l2.3-1c.6-.3.9-1 .6-1.6l-3.4-7.5h6.8c.8 0 1.2-1 .6-1.6L6.5 2.6C6 2.1 5 2.4 5 3.2z" fill="var(--ink, #111)" stroke="var(--field, #fff)" stroke-width="1.6" stroke-linejoin="round" />
123
+ </svg>
124
+ </div>
125
+ <script>
126
+ (function () {
127
+ const CURSOR_FROM = { x: 1560, y: 900 };
128
+ const MOVE_AT = 0.35;
129
+ const MORPH_DELAY = 0.12;
130
+ const MORPH_EASE = "travel";
131
+ const MORPH_DUR = 0.9;
132
+ const HEADLINE_DELAY = 0.55;
133
+
134
+ const kit = window.GGMotionKit;
135
+ const root = document.querySelector('[data-composition-id="morph-carry"]');
136
+ const box = root.querySelector(".mc-box");
137
+ const label = root.querySelector(".mc-label");
138
+ const hint = root.querySelector(".mc-hint");
139
+ const kicker = root.querySelector(".mc-kicker");
140
+ const head = root.querySelector(".mc-head");
141
+ const cursor = root.querySelector(".mc-cursor");
142
+ const tl = gsap.timeline({ paused: true });
143
+
144
+ const target = kit.centerOf(box, root);
145
+ const { presses } = kit.cursorPath(tl, cursor, MOVE_AT, [
146
+ CURSOR_FROM,
147
+ { x: target.x + 40, y: target.y + 14, click: true, hold: 0.3 },
148
+ ]);
149
+ const press = presses[0];
150
+
151
+ // The press itself: the pill gives a little, then the cursor lets go.
152
+ tl.to(box, { scale: 0.96, duration: 0.09, ease: "power1.out" }, press);
153
+ tl.to(box, { scale: 1, duration: 0.3, ease: kit.ease.firm }, press + 0.09);
154
+ tl.to(cursor, { opacity: 0, duration: 0.2, ease: "none" }, press + 0.2);
155
+
156
+ // Label leaves early; the box becomes the frame.
157
+ const morphAt = press + MORPH_DELAY;
158
+ tl.to(label, { opacity: 0, y: -16, duration: 0.18, ease: "power2.in" }, morphAt);
159
+ tl.to(hint, { opacity: 0, duration: 0.2, ease: "none" }, morphAt);
160
+ tl.to(box, { boxShadow: "0 0 0 0 rgba(0,0,0,0)", duration: 0.4, ease: "none" }, morphAt);
161
+ kit.reshape(tl, box, morphAt, { x: 0, y: 0, w: 1920, h: 1080, r: 0 }, { ease: MORPH_EASE, duration: MORPH_DUR });
162
+
163
+ // Next scene arrives inside it.
164
+ const riseAt = morphAt + HEADLINE_DELAY;
165
+ kit.liftWords(tl, head, riseAt, { stagger: 0.09 });
166
+ tl.fromTo(kicker, { opacity: 0, y: 14 }, { opacity: 0.75, y: 0, duration: 0.4, ease: kit.ease.snap }, riseAt + 0.25);
167
+
168
+ window.__timelines = window.__timelines || {};
169
+ window.__timelines["morph-carry"] = tl;
170
+ })();
171
+ </script>
172
+ </body>
173
+ </html>
@@ -0,0 +1,13 @@
1
+ {
2
+ "id": "one-shape-journey",
3
+ "name": "One shape journey",
4
+ "kind": "diagram",
5
+ "description": "One shape never leaves: a dot pops in, stretches into a progress bar that fills, morphs into a button, then into an app-icon block as the product name rises beside it, with quick label swaps inside. Edit the progress label, button text, icon letter, name and tagline.",
6
+ "tags": ["morph", "continuous", "kit", "progress", "button", "app-icon", "logo", "end-card", "handoff"],
7
+ "fonts": [],
8
+ "duration": 6,
9
+ "previewAt": 3.1,
10
+ "license": "original",
11
+ "requires": ["kit"],
12
+ "previewLook": "dark-studio"
13
+ }
@@ -0,0 +1,195 @@
1
+ <!doctype html>
2
+ <!--
3
+ one-shape-journey: one element, four roles (move kit). A dot pops in,
4
+ stretches into a progress bar that fills, morphs into a button, then into
5
+ a square app icon while the product name rises beside it. The shape is
6
+ never replaced: each change is the same element's box, radius and colour
7
+ (kit.reshape), and the text inside changes by quick label swaps.
8
+ Needs the move kit: `library.mjs add` installs it; put its <script> in the
9
+ root head after GSAP.
10
+ Params (script top): BOXES (the shape's rect for each role, stage px:
11
+ x, y = top-left), STEPS (when each morph starts), FILL (progress fill
12
+ start and length), SWAP (label swap out/in time), LABELS (the text
13
+ shown inside, from the markup's data-* attributes).
14
+ -->
15
+ <html lang="en">
16
+ <head>
17
+ <meta charset="UTF-8" />
18
+ <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
19
+ </head>
20
+ <body>
21
+ <div
22
+ id="one-shape-journey-root"
23
+ data-composition-id="one-shape-journey"
24
+ data-start="0"
25
+ data-duration="6"
26
+ data-width="1920"
27
+ data-height="1080"
28
+ >
29
+ <style>
30
+ [data-composition-id="one-shape-journey"] {
31
+ position: absolute;
32
+ inset: 0;
33
+ overflow: hidden;
34
+ color: var(--ink, #111);
35
+ font-family: var(--text, sans-serif);
36
+ }
37
+ [data-composition-id="one-shape-journey"] .os-stage {
38
+ position: absolute;
39
+ inset: 0;
40
+ }
41
+ [data-composition-id="one-shape-journey"] .os-shape {
42
+ position: absolute;
43
+ left: 936px;
44
+ top: 516px;
45
+ width: 48px;
46
+ height: 48px;
47
+ border-radius: 24px;
48
+ overflow: hidden;
49
+ background: var(--ink, #111);
50
+ opacity: 0;
51
+ }
52
+ [data-composition-id="one-shape-journey"] .os-fill {
53
+ position: absolute;
54
+ left: 0;
55
+ top: 0;
56
+ bottom: 0;
57
+ width: 0%;
58
+ background: var(--accent, #2f5bff);
59
+ }
60
+ [data-composition-id="one-shape-journey"] .os-label {
61
+ position: absolute;
62
+ inset: 0;
63
+ display: flex;
64
+ align-items: center;
65
+ justify-content: center;
66
+ white-space: nowrap;
67
+ color: var(--field, #fff);
68
+ line-height: 1;
69
+ }
70
+ [data-composition-id="one-shape-journey"] .os-label.is-mono {
71
+ font-family: var(--mono, monospace);
72
+ font-size: 30px;
73
+ letter-spacing: 0.06em;
74
+ }
75
+ [data-composition-id="one-shape-journey"] .os-label.is-text {
76
+ font-family: var(--text, sans-serif);
77
+ font-weight: 600;
78
+ font-size: 44px;
79
+ }
80
+ [data-composition-id="one-shape-journey"] .os-label.is-glyph {
81
+ font-family: var(--display, sans-serif);
82
+ font-weight: var(--display-weight, 700);
83
+ font-stretch: var(--display-stretch, 100%);
84
+ font-size: 136px;
85
+ }
86
+ [data-composition-id="one-shape-journey"] .os-name {
87
+ position: absolute;
88
+ left: 820px;
89
+ top: 448px;
90
+ white-space: nowrap;
91
+ }
92
+ [data-composition-id="one-shape-journey"] .os-title {
93
+ font-family: var(--display, sans-serif);
94
+ font-weight: var(--display-weight, 700);
95
+ font-stretch: var(--display-stretch, 100%);
96
+ letter-spacing: var(--display-tracking, -0.02em);
97
+ font-size: 150px;
98
+ line-height: 1;
99
+ }
100
+ [data-composition-id="one-shape-journey"] .os-tag {
101
+ margin-top: 18px;
102
+ font-family: var(--mono, monospace);
103
+ font-size: 26px;
104
+ letter-spacing: 0.08em;
105
+ text-transform: uppercase;
106
+ color: var(--muted, #666);
107
+ }
108
+ </style>
109
+ <!-- edit: data-progress = bar label prefix, data-button = button text, data-glyph = icon letter -->
110
+ <div class="os-stage" data-progress="Uploading" data-button="Open the app" data-glyph="n">
111
+ <div class="os-shape">
112
+ <div class="os-fill"></div>
113
+ <div class="os-label"></div>
114
+ </div>
115
+ <div class="os-name">
116
+ <!-- edit: product name -->
117
+ <div class="os-title">notably</div>
118
+ <!-- edit: tagline -->
119
+ <div class="os-tag">Now on every device</div>
120
+ </div>
121
+ </div>
122
+ </div>
123
+ <script>
124
+ (function () {
125
+ const kit = window.GGMotionKit;
126
+ const root = document.querySelector('[data-composition-id="one-shape-journey"]');
127
+ const stage = root.querySelector(".os-stage");
128
+ const shape = root.querySelector(".os-shape");
129
+ const fill = root.querySelector(".os-fill");
130
+ const label = root.querySelector(".os-label");
131
+ const title = root.querySelector(".os-title");
132
+ const tag = root.querySelector(".os-tag");
133
+ const tl = gsap.timeline({ paused: true });
134
+
135
+ const DURATION = 6;
136
+ const BOXES = {
137
+ bar: { x: 560, y: 504, w: 800, h: 72, r: 36 },
138
+ button: { x: 740, y: 476, w: 440, h: 128, r: 64 },
139
+ icon: { x: 560, y: 440, w: 200, h: 200, r: 48 },
140
+ };
141
+ const STEPS = { dot: 0.2, bar: 0.85, button: 2.75, icon: 3.95 };
142
+ const FILL = { at: 1.3, duration: 1.3 };
143
+ const SWAP = 0.09;
144
+ const LABELS = {
145
+ progress: stage.dataset.progress,
146
+ button: stage.dataset.button,
147
+ glyph: stage.dataset.glyph,
148
+ };
149
+
150
+ // Role 1: a dot.
151
+ kit.pop(tl, shape, STEPS.dot, { from: 0.1 });
152
+ // Role 2: the same dot stretches into a bar and fills.
153
+ kit.reshape(tl, shape, STEPS.bar, BOXES.bar, { spring: "whip" });
154
+ const fillEnd = FILL.at + FILL.duration;
155
+ // Role 3: the full bar gathers into a button.
156
+ kit.reshape(tl, shape, STEPS.button, BOXES.button, { spring: "whip" });
157
+ // Role 4: the button squares up into the app icon and darkens to ink.
158
+ kit.reshape(tl, shape, STEPS.icon, BOXES.icon, { spring: "heavy" });
159
+ const nameAt = kit.liftWords(tl, title, STEPS.icon + 0.35);
160
+ kit.liftWords(tl, tag, nameAt);
161
+
162
+ // Fill amount, and what the label says when: one seek-safe draw.
163
+ const progress = (t) => kit.ease.travel(Math.min(1, Math.max(0, (t - FILL.at) / FILL.duration)));
164
+ const iconFill = (t) => 1 - kit.ease.snap(Math.min(1, Math.max(0, (t - STEPS.icon) / 0.35)));
165
+ const plan = [
166
+ { at: FILL.at, cls: "is-mono", text: (t) => `${LABELS.progress} ${Math.round(progress(t) * 100)}%` },
167
+ { at: STEPS.button + 0.12, cls: "is-text", text: () => LABELS.button },
168
+ { at: STEPS.icon + 0.12, cls: "is-glyph", text: () => LABELS.glyph },
169
+ ];
170
+ kit.drive(tl, 0, DURATION, (t) => {
171
+ fill.style.width = `${(t < STEPS.icon ? progress(t) : iconFill(t)) * 100}%`;
172
+ let i = -1;
173
+ while (i + 1 < plan.length && plan[i + 1].at <= t) i++;
174
+ if (i < 0) {
175
+ label.textContent = "";
176
+ return;
177
+ }
178
+ const step = plan[i];
179
+ const since = t - step.at;
180
+ const until = i + 1 < plan.length ? plan[i + 1].at - t : Infinity;
181
+ // Quick swap: the old label drops out just before, the new one rises in.
182
+ const inP = Math.min(1, since / SWAP);
183
+ const outP = Math.min(1, Math.max(0, 1 - until / SWAP));
184
+ label.className = `os-label ${step.cls}`;
185
+ label.textContent = step.text(t);
186
+ label.style.opacity = String(Math.min(inP, 1 - outP));
187
+ label.style.transform = `translateY(${(1 - kit.ease.snap(inP)) * 40 - outP * 40}%)`;
188
+ });
189
+
190
+ window.__timelines = window.__timelines || {};
191
+ window.__timelines["one-shape-journey"] = tl;
192
+ })();
193
+ </script>
194
+ </body>
195
+ </html>
@@ -0,0 +1,13 @@
1
+ {
2
+ "id": "open-from-subject",
3
+ "name": "Open from subject",
4
+ "kind": "transition",
5
+ "description": "A round mark with a label pops in and holds, then the next stage opens as a growing circle from the mark's centre onto a --field-2 scene where a headline rises. Edit the mark glyph, its label, and the stage's kicker and headline.",
6
+ "tags": ["handoff", "continuous", "kit", "iris", "circle", "reveal", "logo"],
7
+ "fonts": [],
8
+ "duration": 4,
9
+ "previewAt": 2.4,
10
+ "license": "original",
11
+ "requires": ["kit"],
12
+ "previewLook": "duotone-broadcast"
13
+ }