@prestyj/cli 5.28.0 → 5.29.0

package/assets/motion/library/library.json

@@ -484,6 +484,54 @@
       "license": "original",
       "previewLook": "soft-light-ad"
     },
+    {
+      "id": "camera-rig",
+      "name": "Camera rig",
+      "kind": "frame",
+      "description": "An operated camera over one world layer, built on the move kit: starts wide, whips to a card with a little overshoot, floats by hand, whips on and holds dead still for a rest, pushes in as a stamp lands with one shake on contact, then glides back out, over a parallax backdrop that slides slower than the cards. Replace the cards with your scenes and edit the camera keys.",
+      "tags": [
+        "camera",
+        "whip",
+        "handheld",
+        "shake",
+        "push-in",
+        "zoom",
+        "rest",
+        "parallax",
+        "continuous",
+        "kit"
+      ],
+      "fonts": [],
+      "duration": 8,
+      "license": "original",
+      "requires": [
+        "kit"
+      ],
+      "previewLook": "swiss-grid"
+    },
+    {
+      "id": "chain-knock",
+      "name": "Chain knock",
+      "kind": "diagram",
+      "description": "A ball hops in from the left, hits the first of five process blocks and knocks the whole row like dominoes; the last block stamps a result. Edit the step labels, the result word and the hop timing.",
+      "tags": [
+        "chain-reaction",
+        "process",
+        "steps",
+        "cause-and-effect",
+        "hop",
+        "stamp",
+        "continuous",
+        "kit"
+      ],
+      "fonts": [],
+      "duration": 5,
+      "license": "original",
+      "requires": [
+        "kit"
+      ],
+      "previewLook": "swiss-grid"
+    },
     {
       "id": "chapter-card",
       "name": "Chapter card",
@@ -830,6 +878,28 @@
       "license": "original",
       "previewLook": "duotone-broadcast"
     },
+    {
+      "id": "gather-to-logo",
+      "name": "Gather to logo",
+      "kind": "transition",
+      "description": "Feature chips pop in scattered around the frame, then travel on arcs into the centre, and the moment the last one lands a logo mark and wordmark stamp in as the end card. Edit the chip words, their positions, the mark letter and the wordmark.",
+      "tags": [
+        "logo",
+        "end-card",
+        "gather",
+        "converge",
+        "outro",
+        "continuous",
+        "kit"
+      ],
+      "fonts": [],
+      "duration": 5,
+      "license": "original",
+      "requires": [
+        "kit"
+      ],
+      "previewLook": "sunlit-consumer"
+    },
     {
       "id": "highlight-sweep",
       "name": "Highlight sweep",
@@ -991,6 +1061,74 @@
       "license": "original",
       "previewLook": "soft-light-ad"
     },
+    {
+      "id": "morph-carry",
+      "name": "Morph carry",
+      "kind": "transition",
+      "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.",
+      "tags": [
+        "handoff",
+        "continuous",
+        "kit",
+        "morph",
+        "cursor",
+        "button",
+        "box-to-frame"
+      ],
+      "fonts": [],
+      "duration": 5,
+      "license": "original",
+      "requires": [
+        "kit"
+      ],
+      "previewLook": "soft-light-ad"
+    },
+    {
+      "id": "one-shape-journey",
+      "name": "One shape journey",
+      "kind": "diagram",
+      "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.",
+      "tags": [
+        "morph",
+        "continuous",
+        "kit",
+        "progress",
+        "button",
+        "app-icon",
+        "logo",
+        "end-card",
+        "handoff"
+      ],
+      "fonts": [],
+      "duration": 6,
+      "license": "original",
+      "requires": [
+        "kit"
+      ],
+      "previewLook": "dark-studio"
+    },
+    {
+      "id": "open-from-subject",
+      "name": "Open from subject",
+      "kind": "transition",
+      "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.",
+      "tags": [
+        "handoff",
+        "continuous",
+        "kit",
+        "iris",
+        "circle",
+        "reveal",
+        "logo"
+      ],
+      "fonts": [],
+      "duration": 4,
+      "license": "original",
+      "requires": [
+        "kit"
+      ],
+      "previewLook": "duotone-broadcast"
+    },
     {
       "id": "orbiting-circles",
       "name": "Orbiting circles",
@@ -1051,6 +1189,30 @@
       "license": "original",
       "previewLook": "soft-light-ad"
     },
+    {
+      "id": "request-to-result",
+      "name": "Request to result",
+      "kind": "ui",
+      "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.",
+      "tags": [
+        "prompt",
+        "cursor",
+        "typing",
+        "morph",
+        "result",
+        "checklist",
+        "ai",
+        "continuous",
+        "kit"
+      ],
+      "fonts": [],
+      "duration": 7,
+      "license": "original",
+      "requires": [
+        "kit"
+      ],
+      "previewLook": "soft-light-ad"
+    },
     {
       "id": "retro-grid",
       "name": "Retro grid",
@@ -1077,6 +1239,29 @@
       },
       "previewLook": "duotone-broadcast"
     },
+    {
+      "id": "scale-dive",
+      "name": "Scale dive",
+      "kind": "transition",
+      "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.",
+      "tags": [
+        "zoom",
+        "dive",
+        "camera",
+        "dashboard",
+        "number",
+        "payoff",
+        "continuous",
+        "kit"
+      ],
+      "fonts": [],
+      "duration": 6,
+      "license": "original",
+      "requires": [
+        "kit"
+      ],
+      "previewLook": "soft-light-ad"
+    },
     {
       "id": "scale-through-word",
       "name": "Scale through word",
@@ -1099,6 +1284,30 @@
       "license": "original",
       "previewLook": "soft-light-ad"
     },
+    {
+      "id": "screen-replica-steps",
+      "name": "Screen replica steps",
+      "kind": "ui",
+      "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.",
+      "tags": [
+        "replica",
+        "walkthrough",
+        "cursor",
+        "zoom",
+        "camera",
+        "screenshot",
+        "settings",
+        "continuous",
+        "kit"
+      ],
+      "fonts": [],
+      "duration": 8,
+      "license": "original",
+      "requires": [
+        "kit"
+      ],
+      "previewLook": "soft-light-ad"
+    },
     {
       "id": "serif-quote",
       "name": "Pull quote",
@@ -1379,6 +1588,29 @@
       "duration": 4,
       "license": "original",
       "previewLook": "soft-light-ad"
+    },
+    {
+      "id": "zoom-into-card",
+      "name": "Zoom into card",
+      "kind": "transition",
+      "description": "Six cards pop in, one is picked and the camera pushes straight through it until its fill becomes the next scene, where a title drops in. Edit the card names, TARGET, and the next scene's kicker and title.",
+      "tags": [
+        "handoff",
+        "continuous",
+        "kit",
+        "zoom",
+        "dive",
+        "camera",
+        "cards",
+        "grid"
+      ],
+      "fonts": [],
+      "duration": 5,
+      "license": "original",
+      "requires": [
+        "kit"
+      ],
+      "previewLook": "swiss-grid"
     }
   ]
 }

package/assets/motion/library/pieces/camera-rig/meta.json

@@ -0,0 +1,13 @@
+{
+  "id": "camera-rig",
+  "name": "Camera rig",
+  "kind": "frame",
+  "description": "An operated camera over one world layer, built on the move kit: starts wide, whips to a card with a little overshoot, floats by hand, whips on and holds dead still for a rest, pushes in as a stamp lands with one shake on contact, then glides back out, over a parallax backdrop that slides slower than the cards. Replace the cards with your scenes and edit the camera keys.",
+  "tags": ["camera", "whip", "handheld", "shake", "push-in", "zoom", "rest", "parallax", "continuous", "kit"],
+  "fonts": [],
+  "duration": 8,
+  "previewAt": 5.9,
+  "license": "original",
+  "requires": ["kit"],
+  "previewLook": "swiss-grid"
+}

package/assets/motion/library/pieces/camera-rig/piece.html

@@ -0,0 +1,153 @@
+<!doctype html>
+<!--
+  camera-rig: an operated camera over one world layer (move kit). It starts
+  wide, whips to the first card, floats by hand, whips on to the second and
+  holds dead still for a rest, then pushes to the third as a stamp lands
+  (one shake on contact) and glides back out. The dotted backdrop is a
+  parallax layer at depth 0.6, so it slides slower than the cards.
+  Needs the move kit: `library.mjs add` installs it; put its <script> in the
+  root head after GSAP.
+  Params (script top): KEYS (where the camera looks, in world px), REST
+  (the still stretch), STAMP_AT, BACK_DEPTH (0 pinned, 1 moves with the
+  cards). Move the cards with their left/top (card centre in world px).
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div
+      id="camera-rig-root"
+      data-composition-id="camera-rig"
+      data-start="0"
+      data-duration="8"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        [data-composition-id="camera-rig"] {
+          position: absolute;
+          inset: 0;
+          overflow: hidden;
+          color: var(--ink, #111);
+          font-family: var(--text, sans-serif);
+        }
+        [data-composition-id="camera-rig"] .cr-world,
+        [data-composition-id="camera-rig"] .cr-back {
+          position: absolute;
+          left: 0;
+          top: 0;
+          width: 1920px;
+          height: 1080px;
+        }
+        /* The layer stays at 0,0 in world px (the camera maths needs that);
+           its dots overhang a full frame each way so no pan shows an edge. */
+        [data-composition-id="camera-rig"] .cr-back::before {
+          content: "";
+          position: absolute;
+          inset: -1080px -1920px;
+          background-image: radial-gradient(circle, var(--line, rgba(0, 0, 0, 0.18)) 2px, transparent 2.5px);
+          background-size: 48px 48px;
+          background-position: 24px 0;
+        }
+        [data-composition-id="camera-rig"] .cr-card {
+          position: absolute;
+          width: 520px;
+          height: 300px;
+          margin: -150px 0 0 -260px;
+          box-sizing: border-box;
+          padding: 40px 44px;
+          border-radius: var(--radius, 18px);
+          background: var(--field-2, #eee);
+          border: 2px solid var(--line, rgba(0, 0, 0, 0.18));
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+        }
+        [data-composition-id="camera-rig"] .cr-label {
+          font-family: var(--mono, monospace);
+          font-size: 24px;
+          letter-spacing: 0.08em;
+          text-transform: uppercase;
+          color: var(--muted, #666);
+        }
+        [data-composition-id="camera-rig"] .cr-title {
+          font-family: var(--display, sans-serif);
+          font-weight: var(--display-weight, 700);
+          font-stretch: var(--display-stretch, 100%);
+          letter-spacing: var(--display-tracking, -0.02em);
+          font-size: 76px;
+          line-height: 1;
+        }
+        [data-composition-id="camera-rig"] .cr-stamp {
+          position: absolute;
+          right: 36px;
+          top: 30px;
+          padding: 8px 18px;
+          border: 4px solid var(--ink, #111);
+          border-radius: 10px;
+          background: var(--field, #fff);
+          color: var(--ink, #111);
+          font-family: var(--mono, monospace);
+          font-weight: 700;
+          font-size: 30px;
+          letter-spacing: 0.06em;
+          opacity: 0;
+        }
+      </style>
+      <div class="cr-back"></div>
+      <div class="cr-world">
+        <!-- edit: the three subjects (position with left/top = card centre in world px) -->
+        <div class="cr-card" style="left: 470px; top: 560px">
+          <div class="cr-label">01 / lead</div>
+          <div class="cr-title">Find it</div>
+        </div>
+        <div class="cr-card" style="left: 1450px; top: 320px">
+          <div class="cr-label">02 / rest</div>
+          <div class="cr-title">Read it</div>
+        </div>
+        <div class="cr-card" style="left: 1320px; top: 800px">
+          <div class="cr-label">03 / contact</div>
+          <div class="cr-title">Ship it</div>
+          <div class="cr-stamp">DONE</div>
+        </div>
+      </div>
+    </div>
+    <script>
+      (function () {
+        const kit = window.GGMotionKit;
+        const root = document.querySelector('[data-composition-id="camera-rig"]');
+        const world = root.querySelector(".cr-world");
+        const back = root.querySelector(".cr-back");
+        const stampEl = root.querySelector(".cr-stamp");
+        const tl = gsap.timeline({ paused: true });
+
+        // Where the camera looks (world px at frame centre) and when each move starts.
+        const KEYS = [
+          { x: 960, y: 540, zoom: 1 },
+          { at: 0.7, x: 470, y: 560, zoom: 1.9, move: "whip", duration: 0.8 },
+          { at: 2.5, x: 1450, y: 320, zoom: 2.1, move: "whip", duration: 0.8 },
+          { at: 4.9, x: 1320, y: 800, zoom: 1.8, move: "whip", duration: 0.8 },
+          { at: 6.6, x: 960, y: 540, zoom: 1, move: "glide", duration: 1.2 },
+        ];
+        const REST = [3.4, 4.7]; // dead still: no float, no drift
+        const STAMP_AT = 5.6;
+        const BACK_DEPTH = 0.6;
+
+        const contact = kit.stamp(tl, stampEl, STAMP_AT, { rotate: -6 });
+        kit.camera(tl, world, KEYS, {
+          duration: 8,
+          lead: 0.1,
+          handheld: { amp: 5, rotate: 0.15, seed: 4 },
+          rests: [REST],
+          shakes: [{ at: contact, amount: 12 }],
+          layers: [{ el: back, depth: BACK_DEPTH }],
+        });
+
+        window.__timelines = window.__timelines || {};
+        window.__timelines["camera-rig"] = tl;
+      })();
+    </script>
+  </body>
+</html>

package/assets/motion/library/pieces/chain-knock/meta.json

@@ -0,0 +1,13 @@
+{
+  "id": "chain-knock",
+  "name": "Chain knock",
+  "kind": "diagram",
+  "description": "A ball hops in from the left, hits the first of five process blocks and knocks the whole row like dominoes; the last block stamps a result. Edit the step labels, the result word and the hop timing.",
+  "tags": ["chain-reaction", "process", "steps", "cause-and-effect", "hop", "stamp", "continuous", "kit"],
+  "fonts": [],
+  "duration": 5,
+  "previewAt": 1.72,
+  "license": "original",
+  "requires": ["kit"],
+  "previewLook": "swiss-grid"
+}

package/assets/motion/library/pieces/chain-knock/piece.html

@@ -0,0 +1,195 @@
+<!doctype html>
+<!--
+  chain-knock: cause and effect along a process (move kit). A ball hops in
+  from the left twice, its second landing puts it flush against block 1,
+  and that contact knocks the row block by block; as the last block takes
+  its hit, the result stamps onto it.
+  Needs the move kit: `library.mjs add` installs it; put its <script> in the
+  root head after GSAP.
+  Params (script top): HOPS (each hop's start, air time, height and the x it
+  lands at; the last one must land at CONTACT_X), BALL, KNOCK_PUSH,
+  KNOCK_GAP, STAMP_FALL (the stamp falls this long and lands on the last knock).
+  Geometry: --ck-* variables (block size and gap; the row is centred).
+-->
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+  </head>
+  <body>
+    <div
+      id="chain-knock-root"
+      data-composition-id="chain-knock"
+      data-start="0"
+      data-duration="5"
+      data-width="1920"
+      data-height="1080"
+    >
+      <style>
+        [data-composition-id="chain-knock"] {
+          position: absolute;
+          inset: 0;
+          overflow: hidden;
+          color: var(--ink, #111);
+          font-family: var(--text, sans-serif);
+        }
+        [data-composition-id="chain-knock"] .ck-stage {
+          position: absolute;
+          inset: 0;
+        }
+        [data-composition-id="chain-knock"] .ck-floor {
+          position: absolute;
+          left: 0;
+          right: 0;
+          top: 650px;
+          height: 3px;
+          background: var(--line, rgba(0, 0, 0, 0.2));
+        }
+        [data-composition-id="chain-knock"] .ck-row {
+          position: absolute;
+          left: 338px;
+          top: 470px;
+          display: flex;
+          gap: 36px;
+        }
+        [data-composition-id="chain-knock"] .ck-block {
+          position: relative;
+          width: 220px;
+          height: 180px;
+          box-sizing: border-box;
+          padding: 22px 24px;
+          border: 3px solid var(--ink, #111);
+          border-radius: calc(var(--radius, 18px) * 0.6);
+          background: var(--field, #fff);
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          transform-origin: 50% 100%;
+        }
+        [data-composition-id="chain-knock"] .ck-block.is-last {
+          background: var(--accent, #2f5bff);
+          border-color: var(--accent, #2f5bff);
+          color: var(--field, #fff);
+        }
+        [data-composition-id="chain-knock"] .ck-num {
+          font-family: var(--mono, monospace);
+          font-size: 22px;
+          letter-spacing: 0.08em;
+          color: var(--muted, #666);
+        }
+        [data-composition-id="chain-knock"] .ck-block.is-last .ck-num {
+          color: inherit;
+        }
+        [data-composition-id="chain-knock"] .ck-label {
+          font-family: var(--display, sans-serif);
+          font-weight: var(--display-weight, 700);
+          font-stretch: var(--display-stretch, 100%);
+          letter-spacing: var(--display-tracking, -0.02em);
+          font-size: 46px;
+          line-height: 1;
+        }
+        [data-composition-id="chain-knock"] .ck-stamp {
+          position: absolute;
+          left: 50%;
+          top: -92px;
+          margin-left: -130px;
+          width: 260px;
+          box-sizing: border-box;
+          text-align: center;
+          padding: 12px 0;
+          border: 4px solid var(--ink, #111);
+          border-radius: 12px;
+          background: var(--field, #fff);
+          color: var(--ink, #111);
+          font-family: var(--mono, monospace);
+          font-weight: 700;
+          font-size: 30px;
+          letter-spacing: 0.08em;
+          opacity: 0;
+        }
+        [data-composition-id="chain-knock"] .ck-ball {
+          position: absolute;
+          left: 0;
+          top: 586px;
+          width: 64px;
+          height: 64px;
+        }
+        [data-composition-id="chain-knock"] .ck-ball-body {
+          width: 64px;
+          height: 64px;
+          border-radius: 50%;
+          background: var(--ink, #111);
+        }
+        [data-composition-id="chain-knock"] .ck-caption {
+          position: absolute;
+          left: 338px;
+          top: 720px;
+          font-family: var(--mono, monospace);
+          font-size: 24px;
+          letter-spacing: 0.08em;
+          text-transform: uppercase;
+          color: var(--muted, #666);
+        }
+      </style>
+      <div class="ck-stage">
+        <div class="ck-floor"></div>
+        <div class="ck-row">
+          <!-- edit: the five steps -->
+          <div class="ck-block"><div class="ck-num">01</div><div class="ck-label">Idea</div></div>
+          <div class="ck-block"><div class="ck-num">02</div><div class="ck-label">Draft</div></div>
+          <div class="ck-block"><div class="ck-num">03</div><div class="ck-label">Review</div></div>
+          <div class="ck-block"><div class="ck-num">04</div><div class="ck-label">Test</div></div>
+          <div class="ck-block is-last">
+            <div class="ck-num">05</div>
+            <div class="ck-label">Release</div>
+            <!-- edit: the result -->
+            <div class="ck-stamp">SHIPPED</div>
+          </div>
+        </div>
+        <!-- edit: caption -->
+        <div class="ck-caption">One push moves the whole pipeline</div>
+        <div class="ck-ball"><div class="ck-ball-body"></div></div>
+      </div>
+    </div>
+    <script>
+      (function () {
+        const kit = window.GGMotionKit;
+        const root = document.querySelector('[data-composition-id="chain-knock"]');
+        const ball = root.querySelector(".ck-ball");
+        const body = root.querySelector(".ck-ball-body");
+        const blocks = root.querySelectorAll(".ck-block");
+        const stampEl = root.querySelector(".ck-stamp");
+        const tl = gsap.timeline({ paused: true });
+
+        const BALL = 64;
+        const START_X = -90; // off the left edge
+        const CONTACT_X = blocks[0].offsetLeft + blocks[0].offsetParent.offsetLeft - BALL; // flush with block 1
+        const HOPS = [
+          { at: 0.3, air: 0.5, height: 190, to: 110 },
+          { at: 1.05, air: 0.42, height: 120, to: CONTACT_X },
+        ];
+        const KNOCK_PUSH = 44;
+        const KNOCK_GAP = 0.13;
+        const STAMP_FALL = 0.2; // stamp contact lands on the last knock
+
+        let x = START_X;
+        let landed = 0;
+        HOPS.forEach((h, i) => {
+          landed = kit.hop(tl, body, h.at, { duration: h.air, height: h.height });
+          // Horizontal travel happens only in the air, so the landing is the contact.
+          tl.fromTo(ball, { x }, { x: h.to, duration: h.air, ease: "none", immediateRender: i === 0 }, h.at + 0.08);
+          x = h.to;
+        });
+
+        const last = kit.knock(tl, blocks, landed, { push: KNOCK_PUSH, gap: KNOCK_GAP, tilt: 6 });
+        // The ball gives a little and rolls back off the block it hit.
+        tl.to(ball, { x: CONTACT_X - 46, duration: kit.settleTime("soft"), ease: kit.springEase("soft") }, landed + 0.02);
+        kit.stamp(tl, stampEl, last - STAMP_FALL, { rotate: -5, duration: STAMP_FALL });
+        tl.set({}, {}, 5);
+
+        window.__timelines = window.__timelines || {};
+        window.__timelines["chain-knock"] = tl;
+      })();
+    </script>
+  </body>
+</html>

package/assets/motion/library/pieces/gather-to-logo/meta.json

@@ -0,0 +1,13 @@
+{
+  "id": "gather-to-logo",
+  "name": "Gather to logo",
+  "kind": "transition",
+  "description": "Feature chips pop in scattered around the frame, then travel on arcs into the centre, and the moment the last one lands a logo mark and wordmark stamp in as the end card. Edit the chip words, their positions, the mark letter and the wordmark.",
+  "tags": ["logo", "end-card", "gather", "converge", "outro", "continuous", "kit"],
+  "fonts": [],
+  "duration": 5,
+  "previewAt": 2.6,
+  "license": "original",
+  "requires": ["kit"],
+  "previewLook": "sunlit-consumer"
+}