@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/scale-dive/piece.html ADDED
@@ -0,0 +1,321 @@
1
+ <!doctype html>
2
+ <!--
3
+ scale-dive: a powers-of-ten dive (move kit). One world layer holds a
4
+ dashboard; kit.camera starts wide, dives into one card (zoom ~4), then into
5
+ the number inside it (zoom ~16), which fills the frame as the payoff and
6
+ rests dead still (no hand-held float in the rest).
7
+ Crisp at every level: each nested level is authored at the size it is SEEN
8
+ at and scaled down with a transform. The card's content is a 1920x1080 box
9
+ at scale(1/CARD_ZOOM); the number is a 1920x1080 box inside it at
10
+ scale(1/(NUM_ZOOM/CARD_ZOOM)). When the camera reaches a level, that
11
+ level's text is back at 1:1 pixels, so it renders sharp, not blown up.
12
+ Needs the move kit: `library.mjs add` installs it; put its <script> in the
13
+ root head after GSAP.
14
+ Params (script top): CARD_ZOOM / NUM_ZOOM (zoom per level; the card box is
15
+ 1920/CARD_ZOOM wide, so keep it 16:9), DIVE_1 / DIVE_2 (start of each dive),
16
+ DIVE_DUR, REST_AT (rest starts; no float after it), DELTA_AT (the delta line
17
+ under the payoff). Move the target card with its left/top in world px.
18
+ -->
19
+ <html lang="en">
20
+ <head>
21
+ <meta charset="UTF-8" />
22
+ <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
23
+ </head>
24
+ <body>
25
+ <div
26
+ id="scale-dive-root"
27
+ data-composition-id="scale-dive"
28
+ data-start="0"
29
+ data-duration="6"
30
+ data-width="1920"
31
+ data-height="1080"
32
+ >
33
+ <style>
34
+ [data-composition-id="scale-dive"] {
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="scale-dive"] .sd-world {
42
+ position: absolute;
43
+ left: 0;
44
+ top: 0;
45
+ width: 1920px;
46
+ height: 1080px;
47
+ }
48
+ [data-composition-id="scale-dive"] .sd-surface {
49
+ background: color-mix(in srgb, var(--field, #fff) 93%, var(--ink, #111));
50
+ border: 2px solid var(--line, rgba(0, 0, 0, 0.14));
51
+ border-radius: var(--radius, 16px);
52
+ box-sizing: border-box;
53
+ }
54
+ [data-composition-id="scale-dive"] .sd-side {
55
+ position: absolute;
56
+ left: 60px;
57
+ top: 60px;
58
+ width: 260px;
59
+ height: 960px;
60
+ padding: 40px 30px;
61
+ display: flex;
62
+ flex-direction: column;
63
+ gap: 26px;
64
+ }
65
+ [data-composition-id="scale-dive"] .sd-brand {
66
+ font-family: var(--display, sans-serif);
67
+ font-weight: var(--display-weight, 700);
68
+ letter-spacing: var(--display-tracking, -0.02em);
69
+ font-size: 34px;
70
+ margin-bottom: 20px;
71
+ }
72
+ [data-composition-id="scale-dive"] .sd-nav {
73
+ font-size: 24px;
74
+ color: var(--muted, #666);
75
+ }
76
+ [data-composition-id="scale-dive"] .sd-nav.on {
77
+ color: var(--ink, #111);
78
+ font-weight: 600;
79
+ }
80
+ [data-composition-id="scale-dive"] .sd-head {
81
+ position: absolute;
82
+ left: 360px;
83
+ top: 70px;
84
+ font-family: var(--display, sans-serif);
85
+ font-weight: var(--display-weight, 700);
86
+ letter-spacing: var(--display-tracking, -0.02em);
87
+ font-size: 56px;
88
+ }
89
+ [data-composition-id="scale-dive"] .sd-sub {
90
+ position: absolute;
91
+ left: 360px;
92
+ top: 150px;
93
+ font-family: var(--mono, monospace);
94
+ font-size: 22px;
95
+ color: var(--muted, #666);
96
+ letter-spacing: 0.06em;
97
+ text-transform: uppercase;
98
+ }
99
+ /* Small cards: plain world-px content (only ever seen wide). */
100
+ [data-composition-id="scale-dive"] .sd-card {
101
+ position: absolute;
102
+ width: 480px;
103
+ height: 270px;
104
+ padding: 30px 34px;
105
+ display: flex;
106
+ flex-direction: column;
107
+ justify-content: space-between;
108
+ overflow: hidden;
109
+ }
110
+ [data-composition-id="scale-dive"] .sd-label {
111
+ font-family: var(--mono, monospace);
112
+ font-size: 18px;
113
+ letter-spacing: 0.08em;
114
+ text-transform: uppercase;
115
+ color: var(--muted, #666);
116
+ }
117
+ [data-composition-id="scale-dive"] .sd-val {
118
+ font-family: var(--display, sans-serif);
119
+ font-weight: var(--display-weight, 700);
120
+ letter-spacing: var(--display-tracking, -0.02em);
121
+ font-size: 64px;
122
+ line-height: 1;
123
+ }
124
+ [data-composition-id="scale-dive"] .sd-bars {
125
+ display: flex;
126
+ align-items: flex-end;
127
+ gap: 10px;
128
+ height: 60px;
129
+ }
130
+ [data-composition-id="scale-dive"] .sd-bars i {
131
+ flex: 1;
132
+ background: var(--line, rgba(0, 0, 0, 0.18));
133
+ border-radius: 4px;
134
+ }
135
+ /* The target card: its content is authored at 1920x1080 and scaled down. */
136
+ [data-composition-id="scale-dive"] .sd-target {
137
+ position: absolute;
138
+ width: 480px;
139
+ height: 270px;
140
+ overflow: hidden;
141
+ }
142
+ [data-composition-id="scale-dive"] .sd-l1 {
143
+ position: absolute;
144
+ left: 0;
145
+ top: 0;
146
+ width: 1920px;
147
+ height: 1080px;
148
+ transform-origin: 0 0;
149
+ }
150
+ [data-composition-id="scale-dive"] .sd-l1-label {
151
+ position: absolute;
152
+ left: 130px;
153
+ top: 110px;
154
+ font-family: var(--mono, monospace);
155
+ font-size: 64px;
156
+ letter-spacing: 0.08em;
157
+ text-transform: uppercase;
158
+ color: var(--muted, #666);
159
+ }
160
+ [data-composition-id="scale-dive"] .sd-l1-note {
161
+ position: absolute;
162
+ left: 130px;
163
+ bottom: 110px;
164
+ font-size: 56px;
165
+ color: var(--muted, #666);
166
+ }
167
+ [data-composition-id="scale-dive"] .sd-l1-chart {
168
+ position: absolute;
169
+ right: 130px;
170
+ top: 110px;
171
+ width: 520px;
172
+ height: 200px;
173
+ }
174
+ /* The number's box: one 1/(NUM/CARD) step smaller again, centred in the card. */
175
+ [data-composition-id="scale-dive"] .sd-l2 {
176
+ position: absolute;
177
+ left: 720px;
178
+ top: 405px;
179
+ width: 1920px;
180
+ height: 1080px;
181
+ transform-origin: 0 0;
182
+ display: flex;
183
+ flex-direction: column;
184
+ align-items: center;
185
+ justify-content: center;
186
+ }
187
+ [data-composition-id="scale-dive"] .sd-num {
188
+ font-family: var(--display, sans-serif);
189
+ font-weight: var(--display-weight, 700);
190
+ font-stretch: var(--display-stretch, 100%);
191
+ letter-spacing: var(--display-tracking, -0.03em);
192
+ font-size: 520px;
193
+ line-height: 0.9;
194
+ white-space: nowrap;
195
+ }
196
+ [data-composition-id="scale-dive"] .sd-num em {
197
+ font-style: normal;
198
+ color: var(--accent, #2f5bff);
199
+ }
200
+ [data-composition-id="scale-dive"] .sd-delta {
201
+ margin-top: 120px;
202
+ display: flex;
203
+ align-items: center;
204
+ gap: 24px;
205
+ font-family: var(--mono, monospace);
206
+ font-size: 64px;
207
+ letter-spacing: 0.04em;
208
+ color: var(--ink, #111);
209
+ }
210
+ </style>
211
+ <div class="sd-world">
212
+ <div class="sd-side sd-surface">
213
+ <!-- edit: app name + nav -->
214
+ <div class="sd-brand">Ledger</div>
215
+ <div class="sd-nav on">Overview</div>
216
+ <div class="sd-nav">Orders</div>
217
+ <div class="sd-nav">Customers</div>
218
+ <div class="sd-nav">Reports</div>
219
+ <div class="sd-nav">Settings</div>
220
+ </div>
221
+ <!-- edit: page title -->
222
+ <div class="sd-head">Overview</div>
223
+ <div class="sd-sub">Last 7 days</div>
224
+ <!-- edit: the surrounding cards (context only) -->
225
+ <div class="sd-card sd-surface" style="left: 360px; top: 240px">
226
+ <div class="sd-label">Revenue</div>
227
+ <div class="sd-val">$84.2k</div>
228
+ <div class="sd-bars"><i style="height: 40%"></i><i style="height: 55%"></i><i style="height: 48%"></i><i style="height: 70%"></i><i style="height: 66%"></i><i style="height: 90%"></i></div>
229
+ </div>
230
+ <div class="sd-card sd-surface" style="left: 1400px; top: 240px">
231
+ <div class="sd-label">Orders</div>
232
+ <div class="sd-val">1,906</div>
233
+ <div class="sd-bars"><i style="height: 60%"></i><i style="height: 52%"></i><i style="height: 74%"></i><i style="height: 58%"></i><i style="height: 80%"></i><i style="height: 72%"></i></div>
234
+ </div>
235
+ <div class="sd-card sd-surface" style="left: 360px; top: 550px">
236
+ <div class="sd-label">Refunds</div>
237
+ <div class="sd-val">0.6%</div>
238
+ <div class="sd-bars"><i style="height: 30%"></i><i style="height: 26%"></i><i style="height: 22%"></i><i style="height: 24%"></i><i style="height: 18%"></i><i style="height: 15%"></i></div>
239
+ </div>
240
+ <div class="sd-card sd-surface" style="left: 880px; top: 550px">
241
+ <div class="sd-label">Avg. basket</div>
242
+ <div class="sd-val">$44.10</div>
243
+ <div class="sd-bars"><i style="height: 50%"></i><i style="height: 54%"></i><i style="height: 52%"></i><i style="height: 58%"></i><i style="height: 61%"></i><i style="height: 64%"></i></div>
244
+ </div>
245
+ <div class="sd-card sd-surface" style="left: 1400px; top: 550px">
246
+ <div class="sd-label">New customers</div>
247
+ <div class="sd-val">312</div>
248
+ <div class="sd-bars"><i style="height: 35%"></i><i style="height: 45%"></i><i style="height: 62%"></i><i style="height: 58%"></i><i style="height: 77%"></i><i style="height: 84%"></i></div>
249
+ </div>
250
+ <!-- the target: left/top in world px; content authored at 1920x1080 -->
251
+ <div class="sd-target sd-surface" style="left: 880px; top: 240px">
252
+ <div class="sd-l1">
253
+ <!-- edit: target card label, note -->
254
+ <div class="sd-l1-label">Checkout conversion</div>
255
+ <svg class="sd-l1-chart" viewBox="0 0 520 200" fill="none">
256
+ <path d="M6 170 L90 150 L175 160 L260 118 L345 104 L430 60 L514 30" stroke="var(--accent, #2f5bff)" stroke-width="12" stroke-linecap="round" stroke-linejoin="round" />
257
+ </svg>
258
+ <div class="sd-l1-note">vs 3.51% the week before</div>
259
+ <div class="sd-l2">
260
+ <!-- edit: the payoff number + delta -->
261
+ <div class="sd-num">4.82<em>%</em></div>
262
+ <div class="sd-delta">
263
+ <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="var(--accent, #2f5bff)" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path class="sd-up" d="M4 17 L10 11 L14 15 L20 7 M14 7 H20 V13" /></svg>
264
+ <span class="sd-delta-txt">+1.31 pts this week</span>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ <script>
272
+ (function () {
273
+ const CARD_ZOOM = 4; // camera zoom that fills the frame with the card
274
+ const NUM_ZOOM = 16; // camera zoom that fills the frame with the number
275
+ const DIVE_1 = 0.7;
276
+ const DIVE_2 = 2.7;
277
+ const DIVE_DUR = 1.3;
278
+ const REST_AT = 4.15;
279
+ const DELTA_AT = 4.25;
280
+
281
+ const kit = window.GGMotionKit;
282
+ const root = document.querySelector('[data-composition-id="scale-dive"]');
283
+ const world = root.querySelector(".sd-world");
284
+ const target = root.querySelector(".sd-target");
285
+ const l1 = root.querySelector(".sd-l1");
286
+ const l2 = root.querySelector(".sd-l2");
287
+ const tl = gsap.timeline({ paused: true });
288
+
289
+ const inner = NUM_ZOOM / CARD_ZOOM;
290
+ l1.style.transform = `scale(${1 / CARD_ZOOM})`;
291
+ l2.style.transform = `scale(${1 / inner})`;
292
+ // Number box centred in the card's 1920x1080 space.
293
+ l2.style.left = `${960 - 960 / inner}px`;
294
+ l2.style.top = `${540 - 540 / inner}px`;
295
+
296
+ const card = kit.centerOf(target, world);
297
+ const KEYS = [
298
+ { x: 960, y: 540, zoom: 1 },
299
+ { at: DIVE_1, x: card.x, y: card.y, zoom: CARD_ZOOM * 0.92, move: "travel", duration: DIVE_DUR },
300
+ { at: DIVE_2, x: card.x, y: card.y, zoom: NUM_ZOOM, move: "travel", duration: DIVE_DUR },
301
+ ];
302
+ kit.camera(tl, world, KEYS, {
303
+ duration: 6,
304
+ handheld: { amp: 4, rotate: 0.1, seed: 9 },
305
+ rests: [[REST_AT, 6]],
306
+ });
307
+
308
+ // The payoff's delta line: drawn arrow, then the words rise.
309
+ const txt = root.querySelector(".sd-delta-txt");
310
+ tl.fromTo(txt, { opacity: 0, y: 30 }, { opacity: 1, y: 0, duration: 0.5, ease: "expo.out" }, DELTA_AT + 0.15);
311
+ const up = root.querySelector(".sd-up");
312
+ tl.fromTo(up, { opacity: 0 }, { opacity: 1, duration: 0.01 }, DELTA_AT);
313
+ kit.tick(tl, up, DELTA_AT, { duration: 0.45 });
314
+ tl.to({}, { duration: 6 - tl.duration() });
315
+
316
+ window.__timelines = window.__timelines || {};
317
+ window.__timelines["scale-dive"] = tl;
318
+ })();
319
+ </script>
320
+ </body>
321
+ </html>
package/assets/motion/library/pieces/screen-replica-steps/meta.json ADDED
@@ -0,0 +1,13 @@
1
+ {
2
+ "id": "screen-replica-steps",
3
+ "name": "Screen replica steps",
4
+ "kind": "ui",
5
+ "description": "A real app screen rebuilt at its screenshot size and walked through step by step: a cursor opens a dropdown, picks an option and saves, every state scripted by a pure setState(t), with one camera close-up per step that follows the cursor and widens at the end. Replace the replica elements with your screenshot's measured layout and edit the copy.",
6
+ "tags": ["replica", "walkthrough", "cursor", "zoom", "camera", "screenshot", "settings", "continuous", "kit"],
7
+ "fonts": [],
8
+ "duration": 8,
9
+ "previewAt": 2.4,
10
+ "license": "original",
11
+ "requires": ["kit"],
12
+ "previewLook": "soft-light-ad"
13
+ }