@kenkaiiii/ggcoder 5.69.0 → 5.71.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 (226) 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 +56 -33
  104. package/dist/app-sidecar.js.map +1 -1
  105. package/dist/cli.js +2 -11
  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 +32 -70
  111. package/dist/core/agent-session.js +92 -413
  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/bundled-agents.js +1 -3
  116. package/dist/core/bundled-agents.js.map +1 -1
  117. package/dist/core/compaction/compactor.js +78 -48
  118. package/dist/core/compaction/compactor.js.map +1 -1
  119. package/dist/core/mcp/content.js +6 -2
  120. package/dist/core/mcp/content.js.map +1 -1
  121. package/dist/core/model-unavailable.d.ts +14 -0
  122. package/dist/core/model-unavailable.js +23 -0
  123. package/dist/core/model-unavailable.js.map +1 -0
  124. package/dist/core/node-debugger.d.ts +148 -0
  125. package/dist/core/node-debugger.js +642 -0
  126. package/dist/core/node-debugger.js.map +1 -0
  127. package/dist/core/process-manager.d.ts +14 -0
  128. package/dist/core/process-manager.js +61 -0
  129. package/dist/core/process-manager.js.map +1 -1
  130. package/dist/core/session-history.d.ts +12 -0
  131. package/dist/core/session-history.js +27 -0
  132. package/dist/core/session-history.js.map +1 -1
  133. package/dist/core/settings-manager.d.ts +0 -1
  134. package/dist/core/settings-manager.js +2 -5
  135. package/dist/core/settings-manager.js.map +1 -1
  136. package/dist/core/skills.js +3 -1
  137. package/dist/core/skills.js.map +1 -1
  138. package/dist/core/subagent-manager.d.ts +11 -5
  139. package/dist/core/subagent-manager.js +15 -7
  140. package/dist/core/subagent-manager.js.map +1 -1
  141. package/dist/core/test-impact.d.ts +73 -0
  142. package/dist/core/test-impact.js +467 -0
  143. package/dist/core/test-impact.js.map +1 -0
  144. package/dist/core/thinking-level.d.ts +1 -1
  145. package/dist/core/thinking-level.js +1 -1
  146. package/dist/core/thinking-level.js.map +1 -1
  147. package/dist/core/verification-gate.d.ts +8 -98
  148. package/dist/core/verification-gate.js +26 -256
  149. package/dist/core/verification-gate.js.map +1 -1
  150. package/dist/interactive.js +2 -1
  151. package/dist/interactive.js.map +1 -1
  152. package/dist/modes/subagent-worker-mode.js +17 -5
  153. package/dist/modes/subagent-worker-mode.js.map +1 -1
  154. package/dist/motion-agent/motion-agent.d.ts +6 -2
  155. package/dist/motion-agent/motion-agent.js +5 -7
  156. package/dist/motion-agent/motion-agent.js.map +1 -1
  157. package/dist/motion-agent/motion-prompt.d.ts +1 -1
  158. package/dist/motion-agent/motion-prompt.js +14 -19
  159. package/dist/motion-agent/motion-prompt.js.map +1 -1
  160. package/dist/motion-agent/motion-review.d.ts +5 -1
  161. package/dist/motion-agent/motion-review.js +8 -3
  162. package/dist/motion-agent/motion-review.js.map +1 -1
  163. package/dist/motion-agent/motion-studio-context.js +1 -1
  164. package/dist/motion-agent/motion-studio-context.js.map +1 -1
  165. package/dist/system-prompt.js +3 -1
  166. package/dist/system-prompt.js.map +1 -1
  167. package/dist/test-support/keep-alive.d.ts +14 -0
  168. package/dist/test-support/keep-alive.js +17 -0
  169. package/dist/test-support/keep-alive.js.map +1 -0
  170. package/dist/tools/bash-read-evidence.d.ts +10 -0
  171. package/dist/tools/bash-read-evidence.js +133 -0
  172. package/dist/tools/bash-read-evidence.js.map +1 -0
  173. package/dist/tools/bash.d.ts +10 -1
  174. package/dist/tools/bash.js +66 -3
  175. package/dist/tools/bash.js.map +1 -1
  176. package/dist/tools/debug.d.ts +54 -0
  177. package/dist/tools/debug.js +233 -0
  178. package/dist/tools/debug.js.map +1 -0
  179. package/dist/tools/edit.js +12 -4
  180. package/dist/tools/edit.js.map +1 -1
  181. package/dist/tools/index.d.ts +19 -2
  182. package/dist/tools/index.js +46 -6
  183. package/dist/tools/index.js.map +1 -1
  184. package/dist/tools/prompt-hints.js +2 -0
  185. package/dist/tools/prompt-hints.js.map +1 -1
  186. package/dist/tools/read-tracker.d.ts +5 -0
  187. package/dist/tools/read-tracker.js +19 -9
  188. package/dist/tools/read-tracker.js.map +1 -1
  189. package/dist/tools/skill.js +5 -0
  190. package/dist/tools/skill.js.map +1 -1
  191. package/dist/tools/steroids.d.ts +1 -1
  192. package/dist/tools/subagent-control.js +11 -3
  193. package/dist/tools/subagent-control.js.map +1 -1
  194. package/dist/tools/subagent-shared.d.ts +16 -8
  195. package/dist/tools/subagent-shared.js +21 -15
  196. package/dist/tools/subagent-shared.js.map +1 -1
  197. package/dist/tools/subagent.d.ts +8 -2
  198. package/dist/tools/subagent.js +16 -9
  199. package/dist/tools/subagent.js.map +1 -1
  200. package/dist/tools/tool-tiers.d.ts +2 -2
  201. package/dist/tools/tool-tiers.js +3 -2
  202. package/dist/tools/tool-tiers.js.map +1 -1
  203. package/dist/ui/App.d.ts +0 -7
  204. package/dist/ui/App.js +6 -79
  205. package/dist/ui/App.js.map +1 -1
  206. package/dist/ui/hooks/useAgentLoop.d.ts +0 -7
  207. package/dist/ui/hooks/useAgentLoop.js +1 -119
  208. package/dist/ui/hooks/useAgentLoop.js.map +1 -1
  209. package/dist/ui/render.d.ts +0 -4
  210. package/dist/ui/render.js +0 -2
  211. package/dist/ui/render.js.map +1 -1
  212. package/dist/utils/image.d.ts +14 -0
  213. package/dist/utils/image.js +16 -0
  214. package/dist/utils/image.js.map +1 -1
  215. package/package.json +4 -4
  216. package/assets/motion/references/motion-language.md +0 -128
  217. package/assets/motion/skills/video-qa/SKILL.md +0 -89
  218. package/dist/core/ideal-review-subagent.d.ts +0 -56
  219. package/dist/core/ideal-review-subagent.js +0 -112
  220. package/dist/core/ideal-review-subagent.js.map +0 -1
  221. package/dist/core/ideal-review.d.ts +0 -82
  222. package/dist/core/ideal-review.js +0 -242
  223. package/dist/core/ideal-review.js.map +0 -1
  224. package/dist/motion-agent/motion-check-tool.d.ts +0 -42
  225. package/dist/motion-agent/motion-check-tool.js +0 -564
  226. package/dist/motion-agent/motion-check-tool.js.map +0 -1
package/assets/motion/library/pieces/open-from-subject/piece.html ADDED
@@ -0,0 +1,168 @@
1
+ <!doctype html>
2
+ <!--
3
+ open-from-subject: a hero mark (a round dot with a short label) pops in and
4
+ holds; then the next stage opens as a growing circle out of the mark's own
5
+ centre, revealing a --field-2 scene whose headline rises in. The headline
6
+ ink is whichever of --ink / --field reads better on --field-2 (measured
7
+ once from the look's tokens, so it stays seek-safe).
8
+ Needs the move kit: `library.mjs add` installs it; put its <script> in the
9
+ root head after GSAP.
10
+ Params (script top): POP_AT (mark arrives), LABEL_AT (label slides in),
11
+ OPEN_AT / OPEN_DUR / OPEN_EASE (the circle), HEAD_DELAY (open start ->
12
+ headline). Mark place: --os-x / --os-y (centre), size --os-size.
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="open-from-subject-root"
22
+ data-composition-id="open-from-subject"
23
+ data-start="0"
24
+ data-duration="4"
25
+ data-width="1920"
26
+ data-height="1080"
27
+ >
28
+ <style>
29
+ [data-composition-id="open-from-subject"] {
30
+ --os-x: 960px;
31
+ --os-y: 480px;
32
+ --os-size: 200px;
33
+ position: absolute;
34
+ inset: 0;
35
+ overflow: hidden;
36
+ color: var(--ink, #111);
37
+ font-family: var(--text, sans-serif);
38
+ }
39
+ [data-composition-id="open-from-subject"] .os-mark {
40
+ position: absolute;
41
+ left: calc(var(--os-x) - var(--os-size) / 2);
42
+ top: calc(var(--os-y) - var(--os-size) / 2);
43
+ width: var(--os-size);
44
+ height: var(--os-size);
45
+ border-radius: 50%;
46
+ background: var(--ink, #111);
47
+ color: var(--field, #fff);
48
+ display: grid;
49
+ place-items: center;
50
+ font-family: var(--display, sans-serif);
51
+ font-weight: var(--display-weight, 700);
52
+ font-size: calc(var(--os-size) * 0.42);
53
+ letter-spacing: var(--display-tracking, -0.02em);
54
+ }
55
+ [data-composition-id="open-from-subject"] .os-label {
56
+ position: absolute;
57
+ left: 0;
58
+ right: 0;
59
+ top: calc(var(--os-y) + var(--os-size) / 2 + 44px);
60
+ text-align: center;
61
+ font-family: var(--display, sans-serif);
62
+ font-weight: var(--display-weight, 700);
63
+ font-stretch: var(--display-stretch, 100%);
64
+ letter-spacing: var(--display-tracking, -0.02em);
65
+ font-size: 64px;
66
+ line-height: 1;
67
+ }
68
+ [data-composition-id="open-from-subject"] .os-stage {
69
+ position: absolute;
70
+ inset: 0;
71
+ background: var(--field-2, #222);
72
+ display: flex;
73
+ flex-direction: column;
74
+ align-items: center;
75
+ justify-content: center;
76
+ gap: 36px;
77
+ clip-path: circle(0px at 50% 50%);
78
+ }
79
+ [data-composition-id="open-from-subject"] .os-kicker {
80
+ font-family: var(--mono, monospace);
81
+ font-size: 28px;
82
+ letter-spacing: 0.12em;
83
+ text-transform: uppercase;
84
+ opacity: 0;
85
+ }
86
+ [data-composition-id="open-from-subject"] .os-head {
87
+ font-family: var(--display, sans-serif);
88
+ font-weight: var(--display-weight, 700);
89
+ font-stretch: var(--display-stretch, 100%);
90
+ letter-spacing: var(--display-tracking, -0.02em);
91
+ font-size: 150px;
92
+ line-height: 1;
93
+ white-space: nowrap;
94
+ }
95
+ [data-composition-id="open-from-subject"] .os-probe {
96
+ position: absolute;
97
+ width: 0;
98
+ height: 0;
99
+ visibility: hidden;
100
+ }
101
+ </style>
102
+ <!-- edit: the mark's glyph and its label -->
103
+ <div class="os-mark" data-layout-allow-occlusion>G</div>
104
+ <div class="os-label" data-layout-allow-occlusion>Gather</div>
105
+ <div class="os-stage">
106
+ <!-- edit: next stage kicker and headline -->
107
+ <div class="os-kicker">Introducing</div>
108
+ <div class="os-head">One place for all of it</div>
109
+ </div>
110
+ <i class="os-probe" style="color: var(--ink, #111); background-color: var(--field, #fff); border-color: var(--field-2, #222)"></i>
111
+ </div>
112
+ <script>
113
+ (function () {
114
+ const POP_AT = 0.2;
115
+ const LABEL_AT = 0.55;
116
+ const OPEN_AT = 1.75;
117
+ const OPEN_DUR = 1.0;
118
+ const OPEN_EASE = "travel";
119
+ const HEAD_DELAY = 0.55;
120
+
121
+ const kit = window.GGMotionKit;
122
+ const root = document.querySelector('[data-composition-id="open-from-subject"]');
123
+ const mark = root.querySelector(".os-mark");
124
+ const label = root.querySelector(".os-label");
125
+ const stage = root.querySelector(".os-stage");
126
+ const kicker = root.querySelector(".os-kicker");
127
+ const head = root.querySelector(".os-head");
128
+ const tl = gsap.timeline({ paused: true });
129
+
130
+ // Pick the stage ink: --ink or --field, whichever contrasts more with --field-2.
131
+ const probe = getComputedStyle(root.querySelector(".os-probe"));
132
+ const rgb = (s) => (s.match(/[\d.]+/g) || [0, 0, 0]).slice(0, 3).map(Number);
133
+ const lum = ([r, g, b]) => {
134
+ const f = (v) => ((v /= 255) <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4);
135
+ return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);
136
+ };
137
+ const contrast = (a, b) => {
138
+ const [hi, lo] = [lum(a), lum(b)].sort((x, y) => y - x);
139
+ return (hi + 0.05) / (lo + 0.05);
140
+ };
141
+ const bg = rgb(probe.borderTopColor);
142
+ const useInk = contrast(rgb(probe.color), bg) >= contrast(rgb(probe.backgroundColor), bg);
143
+ stage.style.color = useInk ? "var(--ink, #111)" : "var(--field, #fff)";
144
+
145
+ // The subject arrives and holds.
146
+ kit.pop(tl, mark, POP_AT, { spring: "bouncy" });
147
+ tl.fromTo(label, { opacity: 0, y: 24 }, { opacity: 1, y: 0, duration: 0.5, ease: kit.ease.snap }, LABEL_AT);
148
+ // A small breath before the open, pulled from the centre.
149
+ tl.to(mark, { scale: 0.9, duration: 0.18, ease: "power2.in" }, OPEN_AT - 0.18);
150
+ tl.to(mark, { scale: 1.15, duration: 0.4, ease: kit.ease.snap }, OPEN_AT);
151
+
152
+ // The next stage opens out of the mark's centre.
153
+ const c = kit.centerOf(mark, root);
154
+ kit.openFrom(tl, stage, OPEN_AT, { x: c.x, y: c.y, duration: OPEN_DUR, ease: OPEN_EASE });
155
+
156
+ // Once the circle has swallowed the subject, take it out of the frame.
157
+ tl.set([mark, label], { visibility: "hidden" }, OPEN_AT + 0.45);
158
+
159
+ const riseAt = OPEN_AT + HEAD_DELAY;
160
+ kit.liftWords(tl, head, riseAt, { stagger: 0.08 });
161
+ tl.fromTo(kicker, { opacity: 0, y: 14 }, { opacity: 0.8, y: 0, duration: 0.4, ease: kit.ease.snap }, riseAt + 0.3);
162
+
163
+ window.__timelines = window.__timelines || {};
164
+ window.__timelines["open-from-subject"] = tl;
165
+ })();
166
+ </script>
167
+ </body>
168
+ </html>
package/assets/motion/library/pieces/request-to-result/meta.json ADDED
@@ -0,0 +1,13 @@
1
+ {
2
+ "id": "request-to-result",
3
+ "name": "Request to result",
4
+ "kind": "ui",
5
+ "description": "A request types into a prompt box, a cursor presses Send, and the same box grows into the result card as rows land one by one with drawn checks; one element carries the scene, no crossfade. Edit the request text, the result header and the rows.",
6
+ "tags": ["prompt", "cursor", "typing", "morph", "result", "checklist", "ai", "continuous", "kit"],
7
+ "fonts": [],
8
+ "duration": 7,
9
+ "previewAt": 5.2,
10
+ "license": "original",
11
+ "requires": ["kit"],
12
+ "previewLook": "soft-light-ad"
13
+ }
package/assets/motion/library/pieces/request-to-result/piece.html ADDED
@@ -0,0 +1,212 @@
1
+ <!doctype html>
2
+ <!--
3
+ request-to-result: one element carries the scene (move kit). A prompt box
4
+ sits mid-frame; the request types in (kit.typewrite), a cursor travels in and
5
+ presses Send (kit.cursorPath), and the prompt box itself grows into the
6
+ result card (kit.reshape). The request stays as the card's header and
7
+ result rows land one by one, each with a drawn check (kit.tick). No
8
+ crossfade: the box you typed into is the box that answers.
9
+ Needs the move kit: `library.mjs add` installs it; put its <script> in the
10
+ root head after GSAP.
11
+ Params (script top): TYPE_AT (typing starts), CPS (typing speed),
12
+ BOX_FROM / BOX_TO (prompt and result rects, stage px: x, y, w, h, r),
13
+ ROW_GAP (seconds between result rows), CURSOR_FROM (cursor start point).
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="request-to-result-root"
23
+ data-composition-id="request-to-result"
24
+ data-start="0"
25
+ data-duration="7"
26
+ data-width="1920"
27
+ data-height="1080"
28
+ >
29
+ <style>
30
+ [data-composition-id="request-to-result"] {
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="request-to-result"] .rr-box {
38
+ position: absolute;
39
+ left: 410px;
40
+ top: 470px;
41
+ width: 1100px;
42
+ height: 140px;
43
+ border-radius: 36px;
44
+ box-sizing: border-box;
45
+ overflow: hidden;
46
+ background: color-mix(in srgb, var(--field, #fff) 92%, var(--ink, #111));
47
+ border: 2px solid var(--line, rgba(0, 0, 0, 0.16));
48
+ box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.35);
49
+ }
50
+ [data-composition-id="request-to-result"] .rr-prompt {
51
+ position: absolute;
52
+ left: 52px;
53
+ top: 0;
54
+ right: 150px;
55
+ height: 136px;
56
+ display: flex;
57
+ align-items: center;
58
+ font-size: 38px;
59
+ white-space: nowrap;
60
+ overflow: hidden;
61
+ }
62
+ [data-composition-id="request-to-result"] .rr-send {
63
+ position: absolute;
64
+ right: 26px;
65
+ top: 26px;
66
+ width: 84px;
67
+ height: 84px;
68
+ border-radius: 50%;
69
+ background: var(--ink, #111);
70
+ color: var(--field, #fff);
71
+ display: grid;
72
+ place-items: center;
73
+ }
74
+ [data-composition-id="request-to-result"] .rr-rule {
75
+ position: absolute;
76
+ left: 52px;
77
+ right: 52px;
78
+ top: 136px;
79
+ height: 2px;
80
+ background: var(--line, rgba(0, 0, 0, 0.16));
81
+ transform-origin: 0 50%;
82
+ }
83
+ [data-composition-id="request-to-result"] .rr-rows {
84
+ position: absolute;
85
+ left: 52px;
86
+ right: 52px;
87
+ top: 176px;
88
+ display: flex;
89
+ flex-direction: column;
90
+ gap: 22px;
91
+ }
92
+ [data-composition-id="request-to-result"] .rr-head {
93
+ font-family: var(--mono, monospace);
94
+ font-size: 24px;
95
+ letter-spacing: 0.08em;
96
+ text-transform: uppercase;
97
+ color: var(--muted, #666);
98
+ margin-bottom: 6px;
99
+ }
100
+ [data-composition-id="request-to-result"] .rr-row {
101
+ display: flex;
102
+ align-items: center;
103
+ gap: 28px;
104
+ height: 88px;
105
+ padding: 0 30px;
106
+ border-radius: calc(var(--radius, 16px) * 0.8);
107
+ background: color-mix(in srgb, var(--field, #fff) 80%, var(--ink, #111) 4%);
108
+ border: 2px solid var(--line, rgba(0, 0, 0, 0.12));
109
+ font-size: 36px;
110
+ }
111
+ [data-composition-id="request-to-result"] .rr-row b {
112
+ font-weight: 600;
113
+ }
114
+ [data-composition-id="request-to-result"] .rr-row span.rr-meta {
115
+ margin-left: auto;
116
+ font-family: var(--mono, monospace);
117
+ font-size: 26px;
118
+ color: var(--muted, #666);
119
+ }
120
+ [data-composition-id="request-to-result"] .rr-cursor {
121
+ position: absolute;
122
+ left: 0;
123
+ top: 0;
124
+ width: 56px;
125
+ height: 56px;
126
+ filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.22));
127
+ }
128
+ </style>
129
+ <div class="rr-box">
130
+ <!-- edit: the request -->
131
+ <div class="rr-prompt">Find invoices over $5k that are past due</div>
132
+ <div class="rr-send">
133
+ <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7" /></svg>
134
+ </div>
135
+ <div class="rr-rule"></div>
136
+ <div class="rr-rows">
137
+ <!-- edit: result header + rows (name, detail) -->
138
+ <div class="rr-head">3 invoices found</div>
139
+ <div class="rr-row">
140
+ <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="var(--accent, #2f5bff)" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"><path class="rr-check" d="M20 6L9 17l-5-5" /></svg>
141
+ <b>Northwind Ltd</b><span class="rr-meta">$12,400 · 21 days late</span>
142
+ </div>
143
+ <div class="rr-row">
144
+ <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="var(--accent, #2f5bff)" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"><path class="rr-check" d="M20 6L9 17l-5-5" /></svg>
145
+ <b>Halden &amp; Co</b><span class="rr-meta">$8,950 · 9 days late</span>
146
+ </div>
147
+ <div class="rr-row">
148
+ <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="var(--accent, #2f5bff)" stroke-width="2.8" stroke-linecap="round" stroke-linejoin="round"><path class="rr-check" d="M20 6L9 17l-5-5" /></svg>
149
+ <b>Brightline Studio</b><span class="rr-meta">$5,300 · 4 days late</span>
150
+ </div>
151
+ </div>
152
+ </div>
153
+ <svg class="rr-cursor" viewBox="0 0 28 28">
154
+ <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" />
155
+ </svg>
156
+ </div>
157
+ <script>
158
+ (function () {
159
+ const TYPE_AT = 0.5;
160
+ const CPS = 24;
161
+ const BOX_FROM = { x: 410, y: 470, w: 1100, h: 140, r: 36 };
162
+ const BOX_TO = { x: 360, y: 230, w: 1200, h: 610, r: 36 };
163
+ const ROW_GAP = 0.42;
164
+ const CURSOR_FROM = { x: 1700, y: 960 };
165
+
166
+ const kit = window.GGMotionKit;
167
+ const root = document.querySelector('[data-composition-id="request-to-result"]');
168
+ const box = root.querySelector(".rr-box");
169
+ const send = root.querySelector(".rr-send");
170
+ const cursor = root.querySelector(".rr-cursor");
171
+ const rows = [...root.querySelectorAll(".rr-row")];
172
+ const checks = [...root.querySelectorAll(".rr-check")];
173
+ const tl = gsap.timeline({ paused: true });
174
+
175
+ gsap.set(box, { left: BOX_FROM.x, top: BOX_FROM.y, width: BOX_FROM.w, height: BOX_FROM.h, borderRadius: BOX_FROM.r });
176
+ tl.fromTo(box, { opacity: 0, y: 30 }, { opacity: 1, y: 0, duration: 0.5, ease: "expo.out" }, 0);
177
+
178
+ const typed = kit.typewrite(tl, root.querySelector(".rr-prompt"), TYPE_AT, { cps: CPS, seed: 5 });
179
+
180
+ // Send's centre in stage px (box is at BOX_FROM when the press lands).
181
+ const sendAt = { x: BOX_FROM.x + BOX_FROM.w - 26 - 42, y: BOX_FROM.y + 26 + 42 };
182
+ tl.fromTo(cursor, { opacity: 0 }, { opacity: 1, duration: 0.2 }, typed - 0.2);
183
+ const path = kit.cursorPath(tl, cursor, typed - 0.2, [
184
+ { ...CURSOR_FROM },
185
+ { ...sendAt, click: true, hold: 0.1 },
186
+ { x: sendAt.x + 260, y: sendAt.y + 420, duration: 0.7 },
187
+ ]);
188
+ const press = path.presses[0];
189
+ tl.to(send, { scale: 0.88, duration: 0.09, ease: "power2.out" }, press);
190
+ tl.to(send, { scale: 1, duration: 0.3, ease: kit.ease.bounce }, press + 0.09);
191
+ tl.to(cursor, { opacity: 0, duration: 0.3 }, path.end - 0.3);
192
+
193
+ // The box becomes the result card; Send shrinks away.
194
+ const grown = kit.reshape(tl, box, press + 0.2, BOX_TO, { spring: "heavy" });
195
+ tl.to(send, { scale: 0, opacity: 0, duration: 0.3, ease: "power2.in" }, press + 0.35);
196
+ tl.fromTo(root.querySelector(".rr-rule"), { scaleX: 0 }, { scaleX: 1, duration: 0.6, ease: kit.ease.snap }, press + 0.3);
197
+ tl.fromTo(root.querySelector(".rr-head"), { opacity: 0, y: 16 }, { opacity: 1, y: 0, duration: 0.4, ease: "expo.out" }, grown - 0.1);
198
+
199
+ rows.forEach((row, i) => {
200
+ const at = grown + 0.15 + i * ROW_GAP;
201
+ tl.fromTo(row, { opacity: 0, y: 40 }, { opacity: 1, y: 0, duration: 0.5, ease: kit.ease.snap }, at);
202
+ tl.fromTo(checks[i], { opacity: 0 }, { opacity: 1, duration: 0.01 }, at + 0.15);
203
+ kit.tick(tl, checks[i], at + 0.15, { duration: 0.35 });
204
+ });
205
+ tl.to({}, { duration: Math.max(0, 7 - tl.duration()) });
206
+
207
+ window.__timelines = window.__timelines || {};
208
+ window.__timelines["request-to-result"] = tl;
209
+ })();
210
+ </script>
211
+ </body>
212
+ </html>
package/assets/motion/library/pieces/scale-dive/meta.json ADDED
@@ -0,0 +1,13 @@
1
+ {
2
+ "id": "scale-dive",
3
+ "name": "Scale dive",
4
+ "kind": "transition",
5
+ "description": "A powers-of-ten camera dive on one world layer: a wide dashboard, into one card, into the number inside it, which fills the frame and rests as the payoff. Edit the dashboard copy, the target card and the number; nested levels are authored large and scaled down so text stays crisp at every zoom.",
6
+ "tags": ["zoom", "dive", "camera", "dashboard", "number", "payoff", "continuous", "kit"],
7
+ "fonts": [],
8
+ "duration": 6,
9
+ "previewAt": 2.3,
10
+ "license": "original",
11
+ "requires": ["kit"],
12
+ "previewLook": "soft-light-ad"
13
+ }