@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,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>
@@ -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
+ }