greenlight-motion 0.3.3 → 0.4.0

package/dist/greenlight-motion-script.mjs

@@ -6868,16 +6868,41 @@ var TXA = (function() {
   };
   const LAYER_FIELDS2 = {
     pivotX: num8("Pivot X", 0, -100, 100, 1, "%", false, "% of the unit from its centre: \u2212100 = left edge, 100 = right edge"),
-    pivotY: num8("Pivot Y", 0, -100, 100, 1, "%", false, "% of the unit from its centre: \u2212100 = top, 100 = bottom")
+    pivotY: num8("Pivot Y", 0, -100, 100, 1, "%", false, "% of the unit from its centre: \u2212100 = top, 100 = bottom"),
+    // Who films the units' depth (Position Z, Rotate 3D). Each unit = its own camera in
+    // front of it (letters turn like separate cards). Layer / Project = one camera for
+    // the whole text: nearer letters grow and every letter converges to one vanishing
+    // point. Project = the project's Camera layer itself (dolly, pan, tilt, zoom).
+    camera: en(
+      "Camera",
+      "unit",
+      { unit: "Each unit", layer: "Layer", project: "Project" },
+      "Each unit: every letter (word, line) has its own little camera. Layer: one camera in front of the text. Project camera: the project's Camera layer films the letters in depth"
+    ),
+    perspective: num8(
+      "Perspective",
+      0,
+      0,
+      2e4,
+      10,
+      "px",
+      false,
+      "The layer camera's distance from the text. 0 = the composition camera's, so a letter moved in Z looks like a layer moved in Z"
+    )
   };
-  const LAYER_ITEM_KEYS2 = { pivotX: "textAnimatorPivotX", pivotY: "textAnimatorPivotY" };
+  const LAYER_ITEM_KEYS2 = { pivotX: "textAnimatorPivotX", pivotY: "textAnimatorPivotY", camera: "textAnimatorCamera", perspective: "textAnimatorPerspective" };
+  const LAYER_SPARSE = { camera: "unit", perspective: 0 };
   const EFFECTS2 = [
     {
       key: "position",
       label: "Position",
       group: "Transform",
       desc: "Move the selected units",
-      fields: { x: num8("X", 0, -2e3, 2e3, 1, "px"), y: num8("Y", -80, -2e3, 2e3, 1, "px") }
+      fields: {
+        x: num8("X", 0, -2e3, 2e3, 1, "px"),
+        y: num8("Y", -80, -2e3, 2e3, 1, "px"),
+        z: num8("Z", 0, -2e4, 2e4, 1, "px", true, "Depth: + toward you, \u2212 away. Under a shared camera (More options \u25B8 Camera) letters converge to one vanishing point; with each unit's own camera a unit grows or shrinks in place")
+      }
     },
     {
       key: "scale",
@@ -7111,7 +7136,10 @@ var TXA = (function() {
     for (const [k, key] of Object.entries(LAYER_ITEM_KEYS2)) raw[k] = item[key];
     const lf = sanitizeGroup(LAYER_FIELDS2, raw);
     const out = { textAnimators: list };
-    for (const [k, key] of Object.entries(LAYER_ITEM_KEYS2)) out[key] = lf[k];
+    for (const [k, key] of Object.entries(LAYER_ITEM_KEYS2)) {
+      if (k in LAYER_SPARSE && (lf[k] === LAYER_SPARSE[k] || lf.camera === "unit")) continue;
+      out[key] = lf[k];
+    }
     return out;
   }
   function layerSettings2(item) {
@@ -7415,7 +7443,7 @@ var TXA = (function() {
     return n1 * Math.pow(p - 2.625 / c, 2) + 0.984375;
   }
   const elasticOut = (p) => p === 1 ? 1 : Math.pow(2, -10 * p) * Math.sin((p - 0.075) * (2 * Math.PI / 0.3)) + 1;
-  function bezier(p1x, p1y, p2x, p2y) {
+  function bezier2(p1x, p1y, p2x, p2y) {
     const bx = (t) => 3 * p1x * t * (1 - t) * (1 - t) + 3 * p2x * t * t * (1 - t) + t * t * t;
     const by = (t) => 3 * p1y * t * (1 - t) * (1 - t) + 3 * p2y * t * t * (1 - t) + t * t * t;
     return (x) => {
@@ -7468,22 +7496,22 @@ var TXA = (function() {
       Impulse: sampled(SAMPLED.Impulse),
       Swing: sampled(SAMPLED.Swing),
       Anticipate: sampled(SAMPLED.Anticipate),
-      Natural: bezier(0.8, 0, 0.2, 1),
-      "Slow Down": bezier(0, 0, 0, 1),
-      "AE In (arrive)": bezier(0.3141666673, 0, 0.0875000209, 1),
-      "AE Smooth": bezier(0.882083327, 0, 0.2445833683, 1),
-      "AE Out (leave)": bezier(0.8699999754, 0, 0.6433336333, 1),
-      Punch: bezier(0.7, 0, 0.1, 1),
-      "Apple Out": bezier(0.32, 0.72, 0, 1),
-      "Smooth Glide": bezier(0.2111, 0.7721, 0.8541, 0.112),
-      "Glide Easing Stop": bezier(0, 0.9125, 1, -0.0338)
+      Natural: bezier2(0.8, 0, 0.2, 1),
+      "Slow Down": bezier2(0, 0, 0, 1),
+      "AE In (arrive)": bezier2(0.3141666673, 0, 0.0875000209, 1),
+      "AE Smooth": bezier2(0.882083327, 0, 0.2445833683, 1),
+      "AE Out (leave)": bezier2(0.8699999754, 0, 0.6433336333, 1),
+      Punch: bezier2(0.7, 0, 0.1, 1),
+      "Apple Out": bezier2(0.32, 0.72, 0, 1),
+      "Smooth Glide": bezier2(0.2111, 0.7721, 0.8541, 0.112),
+      "Glide Easing Stop": bezier2(0, 0.9125, 1, -0.0338)
     };
   })();
   let lastBez = null;
   const curveFn2 = (name, handles) => {
     if (name === "Custom" && Array.isArray(handles) && handles.length === 4) {
       const key = handles.join(",");
-      if (!lastBez || lastBez.key !== key) lastBez = { key, fn: bezier(...handles) };
+      if (!lastBez || lastBez.key !== key) lastBez = { key, fn: bezier2(...handles) };
       return lastBez.fn;
     }
     return CURVE_FNS[name] || CURVE_FNS["Ease Out"];
@@ -7935,7 +7963,7 @@ var TXA = (function() {
   }
   function xfOf(st, level) {
     const xf = st.xf || (st.xf = {});
-    return xf[level] || (xf[level] = { tx: 0, ty: 0, s: 1, sx: 1, sy: 1, rot: 0, rx: 0, ry: 0, skew: 0, axis: 0, persp: 0 });
+    return xf[level] || (xf[level] = { tx: 0, ty: 0, tz: 0, s: 1, sx: 1, sy: 1, rot: 0, rx: 0, ry: 0, skew: 0, axis: 0, persp: 0 });
   }
   function applyEffect(st, type, v, k, i, time, g, fillRgb, level = "char") {
     const kp = clamp6(k, 0, 1);
@@ -7944,6 +7972,7 @@ var TXA = (function() {
         const e2 = xfOf(st, level);
         e2.tx += v.x * k;
         e2.ty += v.y * k;
+        e2.tz += (v.z || 0) * k;
         break;
       }
       case "scale": {
@@ -8075,13 +8104,20 @@ var TXA = (function() {
     return [H[0] / w, H[3] / w, H[1] / w, H[4] / w, H[2] / w, H[5] / w];
   }
   const W_NEAR = 0.25;
-  function levelH(e2, box2, pivot) {
+  const Z_PERSP = 2e3;
+  function levelH(e2, box2, pivot, zPersp = 0) {
     const cx = (box2.x0 + box2.x1) / 2;
     const cy = (box2.y0 + box2.y1) / 2;
     const px = cx + pivot.x * (box2.x1 - box2.x0) / 2;
     const py = cy + pivot.y * (box2.y1 - box2.y0) / 2;
-    const sx = e2.s * e2.sx;
-    const sy = e2.s * e2.sy;
+    let sx = e2.s * e2.sx;
+    let sy = e2.s * e2.sy;
+    if (e2.tz) {
+      const Dz = e2.persp > 0 ? e2.persp : zPersp > 0 ? zPersp : Z_PERSP;
+      const f2 = Dz / Math.max(Dz * W_NEAR, Dz - e2.tz);
+      sx *= f2;
+      sy *= f2;
+    }
     let k00 = 1, k01 = 0, k10 = 0, k11 = 1;
     if (e2.skew) {
       const t = Math.tan(clamp6(e2.skew, -85, 85) * Math.PI / 180);
@@ -8201,7 +8237,7 @@ var TXA = (function() {
     ];
     const tx = px + e2.tx - (L[0] * px + L[1] * py);
     const ty = py + e2.ty - (L[3] * px + L[4] * py);
-    const tz = -(L[6] * px + L[7] * py);
+    const tz = -(L[6] * px + L[7] * py) - (e2.tz || 0);
     return [L[0], L[1], L[2], tx, L[3], L[4], L[5], ty, L[6], L[7], L[8], tz, 0, 0, 0, 1];
   }
   function unitTransform3d2(xf, boxOf, pivot) {
@@ -8214,13 +8250,36 @@ var TXA = (function() {
     }
     return M;
   }
-  function unitTransform2(xf, boxOf, pivot) {
+  const CAM_NEAR = 0.05;
+  function unitTransformCam2(xf, boxOf, pivot, cam) {
+    const M = unitTransform3d2(xf, boxOf, pivot);
+    if (!M) return null;
+    const d = cam.d;
+    const H = [
+      M[0] + cam.x * M[8] / d,
+      M[1] + cam.x * M[9] / d,
+      M[3] + cam.x * M[11] / d,
+      M[4] + cam.y * M[8] / d,
+      M[5] + cam.y * M[9] / d,
+      M[7] + cam.y * M[11] / d,
+      M[8] / d,
+      M[9] / d,
+      1 + M[11] / d
+    ];
+    const b2 = boxOf("char");
+    let wMin = Infinity;
+    for (const [x, y] of [[b2.x0, b2.y0], [b2.x1, b2.y0], [b2.x0, b2.y1], [b2.x1, b2.y1]]) wMin = Math.min(wMin, H[6] * x + H[7] * y + H[8]);
+    const depth = M[8] * ((b2.x0 + b2.x1) / 2) + M[9] * ((b2.y0 + b2.y1) / 2) + M[11];
+    const projective = Math.abs(H[6]) > 1e-12 || Math.abs(H[7]) > 1e-12;
+    return { H, projective, depth, hidden: !(wMin > CAM_NEAR) };
+  }
+  function unitTransform2(xf, boxOf, pivot, zPersp = 0) {
     let H = null;
     let projective = false;
     for (const lv of LEVELS2) {
       const e2 = xf && xf[lv];
       if (!e2) continue;
-      const r = levelH(e2, boxOf(lv), pivot);
+      const r = levelH(e2, boxOf(lv), pivot, zPersp);
       H = H ? hMul(r.H, H) : r.H;
       if (r.projective) projective = true;
     }
@@ -8656,6 +8715,7 @@ var TXA = (function() {
     maskedXf: maskedXf2,
     unitTransform: unitTransform2,
     unitTransform3d: unitTransform3d2,
+    unitTransformCam: unitTransformCam2,
     m4Mul: m4Mul2,
     applyH: applyH2,
     hToCanvas: hToCanvas2,
@@ -8730,6 +8790,7 @@ var {
   maskedXf,
   unitTransform,
   unitTransform3d,
+  unitTransformCam,
   m4Mul,
   applyH,
   hToCanvas,
@@ -8765,6 +8826,7 @@ var factory = function(T) {
   const CATEGORIES2 = [
     { id: "sweep", name: "Sweep Reveal" },
     { id: "kinetic", name: "Kinetic" },
+    { id: "depth", name: "Depth" },
     { id: "shape", name: "Type on Shape" },
     { id: "emphasis", name: "Emphasis" },
     { id: "loop", name: "Loop" },
@@ -9639,6 +9701,234 @@ var factory = function(T) {
         }
       ]
     },
+    // The two after it film the text with ONE camera (layer: { camera: 'layer' }): every
+    // letter at its own depth, all converging to one vanishing point, nearer covering
+    // farther — what Position Z and a shared Rotate 3D are for.
+    // Title Push 3D = MotionFast template5 "Push 1 — 3D Pop" (the title-push-3d template):
+    // its stage's 1000 px CSS perspective on 4 vw type is a layer camera ~13 em away. Each
+    // word pops in over 0.8 s on GSAP's power1.out, 0.2–0.4 s after the one before (0.2 s —
+    // its shortest — and 0.75 s here, so seven words land by 2 s like every Kinetic preset; the modal's Speed
+    // stretches both); here it flies in from deep behind the text and tips up flat, and Back
+    // Out carries it a little past the line toward the camera before it settles. The
+    // template slides its container left as each word lands so the words shown stay
+    // centred; that needs the shown words' width, so here the whole text makes one Sine Out
+    // glide left across the arrivals. At the end the words rush past the camera, last first.
+    {
+      id: "title-push-3d",
+      name: "Title Push 3D",
+      cat: "kinetic",
+      sides: "inOut",
+      anchor: "drive",
+      sample: "Kinetic type with depth",
+      tile: KIN_TILE,
+      labLayer: { size: 110, weight: 800 },
+      layer: { camera: "layer", perspective: em(13) },
+      description: "Words fly in from depth one by one, overshoot toward the camera and settle as the line glides over to make room; at the end they rush past the camera",
+      animators: [
+        {
+          name: "Fly in",
+          range: kIn("words", "word", { stagger: 0.2, duration: 0.75, curve: "Back Out" }),
+          effects: [["position", { x: 0, y: em(0.35), z: em(-26) }], ["rotate3d", { x: -50, y: 0, perspective: em(6) }], ["opacity", { opacity: 0 }]]
+        },
+        {
+          name: "Push",
+          range: kIn("lines", "all", { stagger: 0, duration: 1.6, curve: "Sine Out" }),
+          effects: [["position", { x: em(2.4), y: 0 }]]
+        },
+        {
+          name: "Rush out",
+          range: kOut("words", "word", { order: "backward", stagger: 0.05, duration: 0.55, curve: "Ease In" }),
+          effects: [["position", { x: 0, y: 0, z: em(9) }], ["opacity", { opacity: 0 }]]
+        }
+      ]
+    },
+    // Perspective Type = the Kinetic Perspective Type template (kinetic-perspective-type,
+    // look-dev html/kinetic-perspective-type.html): the whole text lies on a plane tilted
+    // toward the camera (X 32°, Y 25°, Z −6°, 150 %; its focal 520 px on 250 px type is a
+    // layer camera ~2 em away — 3 em here, the same keystone on lines ~4 em wide), the lines
+    // drive in one after another (0.5 s apart, 0.5 s each, AE Smooth), rising from 1.45 line
+    // heights below and growing from 55 %, and at 1.2 s the plane swings flat (0.7 s,
+    // Natural: a Time entrance with a 1.2 s delay, so no keys). Not here: each arrival
+    // shoving the earlier lines up the plane (a line cannot move on its neighbours' clocks),
+    // the pushed word and its reflow, and the template's own motion blur. At the end the
+    // lines sink back into depth.
+    {
+      id: "perspective-type",
+      name: "Perspective Type",
+      cat: "kinetic",
+      sides: "inOut",
+      anchor: "drive",
+      sample: "Big\nbold\nideas",
+      tile: KIN_TILE,
+      // Centred like the template's block (its lines are left-aligned inside a block it
+      // centres in frame): a left-aligned layer swings its tilted plane off the left edge.
+      labLayer: { size: 160, weight: 800, lineHeight: 0.95 },
+      layer: { camera: "layer", perspective: em(3) },
+      description: "Lines drive in one after another on a plane tilted toward the camera, which then swings flat; at the end they sink back into depth",
+      animators: [
+        {
+          name: "Lines in",
+          range: kIn("lines", "line", { stagger: 0.5, duration: 0.5, curve: "AE Smooth" }),
+          effects: [["position", { x: 0, y: em(1.4) }], ["scale", { scale: 55 }], ["opacity", { opacity: 0 }]]
+        },
+        {
+          name: "Tilted plane",
+          range: kIn("lines", "all", { delay: 1.2, stagger: 0, duration: 0.7, curve: "Natural" }),
+          effects: [["rotate3d", { x: 32, y: 25, perspective: em(3) }], ["rotation", { angle: -6 }], ["scale", { scale: 150 }], ["position", { x: em(0.16), y: em(-0.04) }]]
+        },
+        {
+          name: "Sink out",
+          range: kOut("lines", "line", { order: "backward", stagger: 0.08, duration: 0.5, curve: "Ease In" }),
+          effects: [["position", { x: 0, y: 0, z: em(-8) }], ["opacity", { opacity: 0 }]]
+        }
+      ]
+    },
+    // ── Depth ──
+    // Position Z under ONE camera (layer: { camera: 'layer', perspective }): a letter
+    // moved in depth really goes there — nearer grows and moves out from the centre,
+    // farther shrinks toward one vanishing point, nearer covers farther. Picked by the
+    // owner from the Text in Depth lab (html/text-depth-lab, 2026-11-07).
+    {
+      id: "rack-focus",
+      name: "Rack Focus",
+      cat: "depth",
+      sides: "inOut",
+      anchor: "start",
+      sample: "Pull focus to every word",
+      tile: "Pull focus\nto every word",
+      labLayer: { size: 130, weight: 600 },
+      layer: { camera: "layer", perspective: em(14) },
+      description: "Words come forward out of a soft background and snap into focus; at the end they pass the focus toward you",
+      animators: [
+        {
+          name: "Focus in",
+          range: kIn("words", "word", { stagger: 0.12, duration: 1.3, curve: "Expo Out" }),
+          effects: [["position", { x: 0, y: 0, z: em(-9) }], ["blur", { amount: em(0.12) }], ["opacity", { opacity: 0 }]]
+        },
+        {
+          name: "Focus out",
+          range: kOut("words", "word", { stagger: 0.05, duration: 0.6, curve: "Ease In" }),
+          effects: [["position", { x: 0, y: 0, z: em(5) }], ["blur", { amount: em(0.12) }], ["opacity", { opacity: 0 }]]
+        }
+      ]
+    },
+    // Pivot Y 100: each letter turns on a hinge at its feet; under one camera the letters lie
+    // on a real floor that recedes to the vanishing point.
+    {
+      id: "stand-up",
+      name: "Stand Up",
+      cat: "depth",
+      sides: "inOut",
+      anchor: "start",
+      sample: "Stand up and be seen",
+      tile: "Stand up\nand be seen",
+      labLayer: { size: 150, weight: 800 },
+      layer: { camera: "layer", perspective: em(6), pivotY: 100 },
+      description: "Letters slide forward across the floor and stand up one after another, hinged at their feet; at the end they fall forward toward you",
+      animators: [
+        {
+          name: "Stand",
+          range: kIn("charsNoSpace", "char", { stagger: 0.04, duration: 0.9, curve: "Cubic Out" }),
+          effects: [["position", { x: 0, y: 0, z: em(-3) }], ["rotate3d", { x: 90, y: 0, perspective: em(6) }], ["opacity", { opacity: 0 }]]
+        },
+        {
+          name: "Fall",
+          range: kOut("charsNoSpace", "char", { stagger: 0.025, duration: 0.6, curve: "Ease In" }),
+          effects: [["position", { x: 0, y: 0, z: em(1.5) }], ["rotate3d", { x: -90, y: 0, perspective: em(6) }], ["opacity", { opacity: 0 }]]
+        }
+      ]
+    },
+    // Words rest at their own depths, only behind the plate. One camera pulls a far word toward
+    // the centre, so a nearer word just outside it would cover it: the depths form a bowl (the
+    // middle words deepest, Shape Smooth) with a fixed scatter added (Wiggle at 0 / s), so an
+    // outer neighbour is never much farther. Drift is the camera move, spread over the whole
+    // layer: every word slides by the same amount past the fixed camera, which films exactly
+    // like a slow pan and push-in — the nearer words travel farther (parallax). The bowl runs
+    // in reading order, so it is written for ONE line: on two, the deep middle words are the
+    // rows' outer ends and get pulled into their neighbours.
+    {
+      id: "strata",
+      name: "Strata",
+      cat: "depth",
+      sides: "inOut",
+      anchor: "start",
+      sample: "Each word at its own depth",
+      tile: "Layers of depth",
+      labLayer: { size: 108, weight: 800 },
+      layer: { camera: "layer", perspective: em(10) },
+      description: "Words float in and rest at their own depths while a slow camera drift slides them past each other; at the end they fall back",
+      animators: [
+        {
+          name: "Layers",
+          range: { basedOn: "words", around: "word", shape: "smooth" },
+          wiggle: { mode: "add", min: 0, max: 40, rate: 0, corr: 0, seed: 8 },
+          effects: [["position", { x: 0, y: 0, z: em(-7) }]]
+        },
+        {
+          name: "Drift",
+          anchor: "clip",
+          range: { basedOn: "words", around: "word" },
+          effects: [["position", { x: em(0.7), y: 0, z: em(-1) }]],
+          keys: { amount: [[0, 100, "Sine Smooth"], [100, -100]] }
+        },
+        {
+          name: "Float in",
+          range: kIn("words", "word", { stagger: 0.12, duration: 1.2, curve: "Cubic Out" }),
+          effects: [["position", { x: 0, y: 0, z: em(-12) }], ["opacity", { opacity: 0 }]]
+        },
+        {
+          name: "Fall back",
+          range: kOut("words", "word", { order: "backward", stagger: 0.05, duration: 0.6, curve: "Ease In" }),
+          effects: [["position", { x: 0, y: 0, z: em(-12) }], ["opacity", { opacity: 0 }]]
+        }
+      ]
+    },
+    // Fill folds top to bottom: Sit back greys every word, the Spotlight's white wins at its turn.
+    {
+      id: "spotlight",
+      name: "Spotlight",
+      cat: "depth",
+      sides: "once",
+      anchor: "start",
+      sample: "Every word takes the stage",
+      tile: "Every word\ntakes the stage",
+      labLayer: { size: 130, weight: 800 },
+      layer: { camera: "layer", perspective: em(12) },
+      description: "Words wait set back and dim; each in turn steps forward into the light, and the last one keeps it",
+      animators: [
+        {
+          name: "Sit back",
+          range: { basedOn: "words", around: "word" },
+          effects: [["position", { x: 0, y: 0, z: em(-1.6) }], ["fill", { color: "#5d636b" }]]
+        },
+        {
+          name: "Spotlight",
+          range: { drive: "time", animate: "active", basedOn: "words", around: "word", delay: 0.3, stagger: 0.55, duration: 0.35, hold: 0, fadeOut: 0.3, keepLast: true, curve: "Cubic Out" },
+          effects: [["position", { x: 0, y: 0, z: em(1.6) }], ["fill", { color: "#ffffff" }]]
+        }
+      ]
+    },
+    // A Time cascade from the centre, looping: each letter swells toward the camera on its
+    // turn and settles back, so a ring of depth spreads outward like a ripple on water.
+    {
+      id: "ripple",
+      name: "Ripple",
+      cat: "depth",
+      sides: "loop",
+      anchor: "none",
+      sample: "Ripples from the centre",
+      tile: "Ripples from\nthe centre",
+      labLayer: { size: 130, weight: 700 },
+      layer: { camera: "layer", perspective: em(10) },
+      description: "Rings of depth spread from the centre of the text to its edges, over and over, like ripples on still water",
+      animators: [
+        {
+          name: "Ripple",
+          range: { drive: "time", animate: "active", basedOn: "charsNoSpace", around: "char", order: "center", delay: 0.2, stagger: 0.1, duration: 0.14, hold: 0, fadeOut: 0.3, loop: true, curve: "Sine Out" },
+          effects: [["position", { x: 0, y: 0, z: em(1.1) }], ["fill", { color: "#8fe3ff", mix: 65 }]]
+        }
+      ]
+    },
     // ── Type on Shape ──
     // The typing animator carries a Highlight box set to Behind ▸ Revealed, so the
     // shape grows with the letters on one set of keys. Per line = a bar per row,
@@ -10233,6 +10523,8 @@ var factory = function(T) {
     return span;
   }
   const isTimed2 = (p) => p.anchor === "start" || p.anchor === "end";
+  const keyedAt = (p, anchor) => p.animators.some((a) => a.keys && anchorOf2(p, a) === anchor);
+  const keyedBothEnds2 = (p) => keyedAt(p, "start") && keyedAt(p, "end");
   const resolveEm2 = (v, fontPx) => {
     if (!v || typeof v !== "object" || Array.isArray(v)) return v;
     let n2 = (Number(v.px) || 0) + (Number(v.em) || 0) * fontPx;
@@ -10252,8 +10544,9 @@ var factory = function(T) {
     };
     const span = presetSpan2(p);
     const clip = Math.max(0.1, clipSec);
+    const room = keyedBothEnds2(p) ? clip / 2 : clip;
     let scale = span > 0 && duration > 0 ? duration / span : 1;
-    if (span > 0 && span * scale > clip) scale = clip / span;
+    if (span > 0 && span * scale > room) scale = room / span;
     const pos = (t, anchor) => {
       let v;
       if (anchor === "clip") v = t;
@@ -10299,7 +10592,8 @@ var factory = function(T) {
     return {
       animators: T.sanitizeAnimators(animators),
       tracks,
-      layer: { ...T.defaultsOf(T.LAYER_FIELDS), ...p.layer || {} }
+      // Layer fields may be sizes too (a shared camera's Perspective in em).
+      layer: { ...T.defaultsOf(T.LAYER_FIELDS), ...Object.fromEntries(Object.entries(p.layer || {}).map(([k, v]) => [k, resolveEm2(v, fontPx)])) }
     };
   }
   function fakeVoice2(text, { start = 0.35, rate = 1 } = {}) {
@@ -10314,22 +10608,106 @@ var factory = function(T) {
   }
   const usesVoice2 = (p) => !!(p && Array.isArray(p.animators) && p.animators.some((a) => a.range && a.range.drive === "voice"));
   const hasExit2 = (p) => !!(p && Array.isArray(p.animators) && p.animators.some((a) => a.range && (a.range.animate === "out" || a.range.animate === "inOut")));
+  const exitStagger = (basedOn) => basedOn === "words" ? 0.04 : basedOn === "lines" ? 0.08 : 0.015;
   function withExit2(p) {
-    if (!p || p.sides === "out" || p.sides === "loop" || hasExit2(p)) return p;
+    if (!p || p.sides === "out" || p.sides === "inOut" || p.sides === "loop" || hasExit2(p)) return p;
     const first = p.animators[0] && p.animators[0].range;
     const basedOn = first && first.basedOn || "chars";
-    const stagger = basedOn === "words" ? 0.04 : basedOn === "lines" ? 0.08 : 0.015;
     return {
       ...p,
       sides: "inOut",
       animators: [...p.animators, {
         name: "Out",
-        range: { drive: "time", animate: "out", basedOn, stagger, duration: 0.3, curve: "Ease In" },
+        range: { drive: "time", animate: "out", basedOn, stagger: exitStagger(basedOn), duration: 0.3, curve: "Ease In" },
         effects: [["opacity", { opacity: 0 }]]
       }]
     };
   }
-  const api = { CATEGORIES: CATEGORIES2, PRESETS: PRESETS3, anchorOf: anchorOf2, presetSpan: presetSpan2, isTimed: isTimed2, resolveEm: resolveEm2, build: build2, fakeVoice: fakeVoice2, usesVoice: usesVoice2, hasExit: hasExit2, withExit: withExit2 };
+  const REVERSE_CURVE = {
+    "Ease In": "Ease Out",
+    "Ease Out": "Ease In",
+    "Cubic In": "Cubic Out",
+    "Cubic Out": "Cubic In",
+    "Sine In": "Sine Out",
+    "Sine Out": "Sine In",
+    "Expo In": "Expo Out",
+    "Expo Out": "Expo In",
+    "Back In": "Back Out",
+    "Back Out": "Back In",
+    "AE In (arrive)": "AE Out (leave)",
+    "AE Out (leave)": "AE In (arrive)",
+    Overshoot: "Anticipate",
+    "Smooth Overshoot": "Anticipate",
+    Elastic: "Anticipate",
+    Anticipate: "Overshoot",
+    "Bounce Out": "Ease In",
+    Power: "Cubic In",
+    "Slow Down": "Expo In",
+    "Apple Out": "Ease In"
+  };
+  const reverseCurve = (c) => REVERSE_CURVE[c] || c;
+  const REVERSE_ORDER = { forward: "backward", backward: "forward", center: "edges", edges: "center" };
+  const driven = (r) => r.drive === "time" || r.drive === "voice";
+  function sideOf(p, a) {
+    const r = a.range || {};
+    if (r.loop || a.wiggle) return null;
+    if (driven(r)) {
+      const animate = r.animate || "in";
+      return animate === "in" || animate === "out" ? animate : null;
+    }
+    if (!a.keys || !Object.keys(a.keys).length) return null;
+    const anchor = anchorOf2(p, a);
+    return anchor === "start" ? "in" : anchor === "end" ? "out" : null;
+  }
+  function sideVersions2(p) {
+    if (!p || p.sides !== "in" && p.sides !== "out") return null;
+    const sides = p.animators.map((a) => sideOf(p, a));
+    return sides.includes(p.sides) && !sides.includes(p.sides === "in" ? "out" : "in") ? ["in", "out", "inOut"] : null;
+  }
+  function mirror(p, a) {
+    const toOut = sideOf(p, a) === "in";
+    const word = toOut ? "out" : "in";
+    const m = new RegExp(`\\b${toOut ? "in" : "out"}$`, "i").exec(a.name);
+    const name = m ? a.name.slice(0, m.index) + (m[0][0] === m[0][0].toUpperCase() ? word[0].toUpperCase() + word.slice(1) : word) : `${a.name} ${word}`;
+    const r = a.range || {};
+    if (driven(r)) {
+      const range = { ...r, animate: word, order: REVERSE_ORDER[r.order || "forward"] || r.order, curve: reverseCurve(r.curve || "Ease Out") };
+      if (r.curve === "Custom" && Array.isArray(r.bezier) && r.bezier.length === 4) {
+        const [x1, y1, x2, y2] = r.bezier;
+        range.bezier = [1 - x2, 1 - y2, 1 - x1, 1 - y1];
+      }
+      if (r.drive === "voice") {
+        range.drive = "time";
+        if (r.stagger == null) range.stagger = exitStagger(r.basedOn);
+      }
+      return { ...a, name, range };
+    }
+    const keys = {};
+    for (const [chan, ks] of Object.entries(a.keys)) {
+      const n2 = ks.length;
+      keys[chan] = ks.map((_, i) => {
+        const k = ks[n2 - 1 - i];
+        const into = ks[n2 - 2 - i];
+        const t = -k[0] || 0;
+        return into ? [t, k[1], reverseCurve(into[2] || "Smooth")] : [t, k[1]];
+      });
+    }
+    return { ...a, name, anchor: toOut ? "end" : "start", keys };
+  }
+  function withSides2(p, sides) {
+    const versions = sideVersions2(p);
+    if (!versions || !versions.includes(sides) || sides === p.sides) return p;
+    const flip = { start: "end", end: "start" };
+    const pinned = (a) => a.keys && !a.anchor ? { ...a, anchor: anchorOf2(p, a) } : a;
+    const moving = (a) => sideOf(p, a) === p.sides;
+    if (sides === "inOut") {
+      const back = p.animators.filter(moving).map((a) => mirror(p, a));
+      const own = p.animators.map(pinned);
+      return { ...p, sides, anchor: p.anchor === "end" ? "start" : p.anchor, animators: p.sides === "in" ? [...own, ...back] : [...back, ...own] };
+    }
+    return { ...p, sides, anchor: flip[p.anchor] || p.anchor, animators: p.animators.map((a) => moving(a) ? mirror(p, a) : pinned(a)) };
+  }
+  const api = { CATEGORIES: CATEGORIES2, PRESETS: PRESETS3, anchorOf: anchorOf2, presetSpan: presetSpan2, isTimed: isTimed2, keyedBothEnds: keyedBothEnds2, resolveEm: resolveEm2, build: build2, fakeVoice: fakeVoice2, usesVoice: usesVoice2, hasExit: hasExit2, withExit: withExit2, sideVersions: sideVersions2, withSides: withSides2 };
   return api;
 };
 var PRESETS_API = factory(textAnimators_default);
@@ -10339,12 +10717,15 @@ var {
   anchorOf,
   presetSpan,
   isTimed,
+  keyedBothEnds,
   resolveEm,
   build,
   fakeVoice,
   usesVoice,
   hasExit,
-  withExit
+  withExit,
+  sideVersions,
+  withSides
 } = PRESETS_API;
 
 // src/components/videoEditor/textAnimatorClassicPresets.js
@@ -12584,13 +12965,21 @@ function presetPatch(item, preset, { clipSec, fontPx, duration = null, speed = 1
     });
     list = [...existing, ...renamed].slice(0, MAX_ANIMATORS);
   }
+  const shared = built.layer.camera && built.layer.camera !== "unit";
+  const camera = {
+    textAnimatorCamera: shared ? built.layer.camera : null,
+    textAnimatorPerspective: shared && built.layer.perspective > 0 ? built.layer.perspective : null
+  };
+  const hasCamera = item?.textAnimatorCamera === "layer" || item?.textAnimatorCamera === "project";
   return {
     textAnimators: list,
     propertyKeyframes: pk,
     ...adding ? null : {
       textAnimatorPivotX: built.layer.pivotX,
-      textAnimatorPivotY: built.layer.pivotY
-    }
+      textAnimatorPivotY: built.layer.pivotY,
+      ...camera
+    },
+    ...adding && shared && !hasCamera ? camera : null
   };
 }
 
@@ -12712,6 +13101,8 @@ var LayerTransitionType = {
    * reveals it; its exit maps the layer and dissolves the map to nothing.
    * Pixel Blocks block the layer in (or out) over what is under it; a colour
    * wipe fills only the layer's own pixels.
+   * The Zoom Ruler's entrance opens the layer inside the growing ruler box over
+   * what is under it; its exit keeps the layer outside the box until it clears.
    *
    * The options live in transitionIn/OutOptions, resolved through the SAME
    * ADVANCED_TRANSITION_PRESETS descriptor the cross slot reads.
@@ -12723,6 +13114,7 @@ var LayerTransitionType = {
   GLOW_STACK: "Gradient Glow Stack",
   GRADIENT_MAP: "Gradient Map",
   PIXEL_BLOCKS: "Pixel Blocks",
+  ZOOM_RULER: "Zoom Ruler",
   CUSTOM: "Custom"
 };
 var ADVANCED_LAYER_TRANSITIONS = Object.freeze([
@@ -12732,18 +13124,26 @@ var ADVANCED_LAYER_TRANSITIONS = Object.freeze([
   LayerTransitionType.CAMERA_WHIP,
   LayerTransitionType.GLOW_STACK,
   LayerTransitionType.GRADIENT_MAP,
-  LayerTransitionType.PIXEL_BLOCKS
+  LayerTransitionType.PIXEL_BLOCKS,
+  LayerTransitionType.ZOOM_RULER
 ]);
 var TransitionEasing = {
+  // The order is the easing picker's (EasingPicker.jsx GROUPS) so every plain dropdown
+  // lists the curves the same way: Basic, After Effects, Expressive, springs, families.
   LINEAR: "Linear",
   EASE_IN: "Ease In",
   EASE_OUT: "Ease Out",
   EASE_IN_OUT: "Smooth",
-  // The owner's own curves from the "Easing study" board (2026-10-16): Smooth Glide arrives fast, glides slowly
-  // through the middle and leaves fast (its "Glide Easing" layer); Glide Easing Stop jumps in, all but stops,
-  // then goes (its "Glide Easing Stop" layer). Both are cubic beziers — see EASING_BEZIER.
-  SMOOTH_GLIDE: "Smooth Glide",
-  GLIDE_STOP: "Glide Easing Stop",
+  // Expressive curves ported from the legacy MotionFast template easing catalogue
+  // (greenlight-render-templates/templates/common/easings.ts). Natural and Slow Down
+  // are cubic beziers; Overshoot/Impulse/Swing are sampled spring curves.
+  NATURAL: "Natural",
+  // From the "Easing Lab" board (2026-11-01), both plain cubic beziers. Punch winds up
+  // slowly, hits hard and trails a long tail (scene changes on the beat, a logo hit, a
+  // screen swipe); nothing else in the list is within 0.23 of it. Apple Out starts at
+  // full speed and spends most of the move in a soft stop (UI panels, drawers, a
+  // camera landing).
+  PUNCH: "Punch",
   // After Effects-style bezier curves — same curves as MotionFast's aeIn/aeSmooth/aeOut.
   // AE names a curve by the side of the key its influence sits on, so the shapes read
   // backwards to the CSS names: AE In starts fast and brakes into the key (an arrival),
@@ -12751,42 +13151,37 @@ var TransitionEasing = {
   AE_IN: "AE In (arrive)",
   AE_SMOOTH: "AE Smooth",
   AE_OUT: "AE Out (leave)",
-  SINE_IN: "Sine In",
-  SINE_OUT: "Sine Out",
-  SINE_IN_OUT: "Sine Smooth",
-  CUBIC_IN: "Cubic In",
-  CUBIC_OUT: "Cubic Out",
-  EXPO_IN: "Expo In",
-  EXPO_OUT: "Expo Out",
-  EXPO_IN_OUT: "Expo Smooth",
-  // A hard, decisive stop (GSAP power4.out; drawn as cubic-bezier(0.23, 1, 0.32, 1)).
-  POWER: "Power",
-  // From the "Easing Lab" board (2026-11-01), both plain cubic beziers. Punch winds up
-  // slowly, hits hard and trails a long tail (scene changes on the beat, a logo hit, a
-  // screen swipe); nothing else in the list is within 0.23 of it. Apple Out starts at
-  // full speed and spends most of the move in a soft stop (UI panels, drawers, a
-  // camera landing).
-  PUNCH: "Punch",
+  // The owner's own curves from the "Easing study" board (2026-10-16): Smooth Glide arrives fast, glides slowly
+  // through the middle and leaves fast (its "Glide Easing" layer); Glide Easing Stop jumps in, all but stops,
+  // then goes (its "Glide Easing Stop" layer). Both are cubic beziers — see EASING_BEZIER.
+  SMOOTH_GLIDE: "Smooth Glide",
+  GLIDE_STOP: "Glide Easing Stop",
   APPLE_OUT: "Apple Out",
+  SLOW_DOWN: "Slow Down",
+  OVERSHOOT: "Overshoot",
+  IMPULSE: "Impulse",
+  SWING: "Swing",
+  // Winds back first, then snaps through to the end: an exit. Sampled.
+  ANTICIPATE: "Anticipate",
   BACK_IN: "Back In",
   BACK_OUT: "Back Out",
   BACK_IN_OUT: "Back Smooth",
   BOUNCE_OUT: "Bounce Out",
   ELASTIC_OUT: "Elastic",
-  // Expressive curves ported from the legacy MotionFast template easing catalogue
-  // (greenlight-render-templates/templates/common/easings.ts). Natural and Slow Down
-  // are cubic beziers; Overshoot/Impulse/Swing are sampled spring curves.
-  NATURAL: "Natural",
-  SLOW_DOWN: "Slow Down",
-  OVERSHOOT: "Overshoot",
-  IMPULSE: "Impulse",
-  SWING: "Swing",
   // The smooth sibling of Overshoot/Elastic: the same springy character, but it
   // leaves 0 at zero velocity instead of being thrown, and rings once instead
   // of several times. Sampled — see SAMPLED_EASING_VALUES.
   SMOOTH_OVERSHOOT: "Smooth Overshoot",
-  // Winds back first, then snaps through to the end: an exit. Sampled.
-  ANTICIPATE: "Anticipate",
+  SINE_IN: "Sine In",
+  SINE_OUT: "Sine Out",
+  SINE_IN_OUT: "Sine Smooth",
+  CUBIC_IN: "Cubic In",
+  CUBIC_OUT: "Cubic Out",
+  EXPO_IN: "Expo In",
+  EXPO_OUT: "Expo Out",
+  EXPO_IN_OUT: "Expo Smooth",
+  // A hard, decisive stop (GSAP power4.out; drawn as cubic-bezier(0.23, 1, 0.32, 1)).
+  POWER: "Power",
   // ── Keyframe-only easings ──
   // CUSTOM reads the key's own `bezier: [x1, y1, x2, y2]` (the graph editor writes
   // it by dragging handles); HOLD steps to the next key instead of interpolating.
@@ -13611,6 +14006,10 @@ function buildGradient(type = "linear", angle = 90, stops = []) {
 // src/components/videoEditor/shapePath.js
 init_define_import_meta_env();
 
+// src/components/videoEditor/borderKeyframes.js
+init_define_import_meta_env();
+var RADIUS_KF_KEYS = ["borderRadius", "borderRadiusTL", "borderRadiusTR", "borderRadiusBR", "borderRadiusBL"];
+
 // src/components/videoEditor/objectMotionPath.js
 init_define_import_meta_env();
 var OBJECT_MOTION_PATH_AIMS = ["tangent", "points", "free"];
@@ -13863,7 +14262,7 @@ var LINE_PATH_PRESETS = [
 ];
 var ALL_PRESETS = [...SHAPE_PATH_PRESETS, ...LINE_PATH_PRESETS];
 var LINE_PRESET_IDS = new Set(LINE_PATH_PRESETS.map((p) => p.id));
-var SHAPE_CORNER_KF_KEYS = ["borderRadius", "borderRadiusTL", "borderRadiusTR", "borderRadiusBR", "borderRadiusBL"];
+var SHAPE_CORNER_KF_KEYS = RADIUS_KF_KEYS;
 var SHAPE_SIZE_KF_KEYS = ["shapeWidthPx", "shapeHeightPx", "shapeWidthPct", "shapeHeightPct", "shapeRadiusPx", "shapeRadiusPct", ...SHAPE_CORNER_KF_KEYS];
 var SIZE_KF_META = {
   shapeWidthPx: { displayLabel: "Shape width", unit: "px", max: 2e4 },
@@ -15911,6 +16310,58 @@ function formatCounterValue(units, spec) {
 }
 var SHUTTER_SEC = 1 / 60;
 
+// src/components/videoEditor/textMorph.js
+init_define_import_meta_env();
+var MORPH_MATCH = Object.freeze(["order", "any"]);
+var MORPH_LEAVE = Object.freeze(["mask", "fade", "blur", "scale"]);
+var MORPH_ORDER = Object.freeze(["left", "center", "all"]);
+var MORPH_DEFAULTS = Object.freeze({
+  duration: 0.8,
+  easing: "EXPO_IN_OUT",
+  match: "order",
+  ignoreCase: true,
+  letterStagger: 0.03,
+  arc: 0,
+  leave: "fade",
+  order: "left"
+});
+function bezier(x1, y1, x2, y2) {
+  const cx = 3 * x1;
+  const bx = 3 * (x2 - x1) - cx;
+  const ax = 1 - cx - bx;
+  const cy = 3 * y1;
+  const by = 3 * (y2 - y1) - cy;
+  const ay = 1 - cy - by;
+  const X = (s) => ((ax * s + bx) * s + cx) * s;
+  const Y = (s) => ((ay * s + by) * s + cy) * s;
+  const dX = (s) => (3 * ax * s + 2 * bx) * s + cx;
+  return (u) => {
+    if (u <= 0) return 0;
+    if (u >= 1) return 1;
+    let s = u;
+    for (let i = 0; i < 8; i += 1) {
+      const e2 = X(s) - u;
+      const d = dX(s);
+      if (Math.abs(e2) < 1e-7 || Math.abs(d) < 1e-6) break;
+      s -= e2 / d;
+    }
+    if (Math.abs(X(s) - u) > 1e-6) {
+      let lo = 0;
+      let hi = 1;
+      s = u;
+      for (let i = 0; i < 40; i += 1) {
+        if (X(s) < u) lo = s;
+        else hi = s;
+        s = (lo + hi) / 2;
+      }
+    }
+    return Y(s);
+  };
+}
+var EASE_LEAVE = bezier(0.55, 0, 0.8, 0.3);
+var EASE_ARRIVE = bezier(0.22, 1, 0.36, 1);
+var EASE_SWAP = bezier(0.45, 0, 0.2, 1);
+
 // src/components/videoEditor/textPlaceholders.js
 var TOKEN_RE = /\{\{\{\s*([A-Za-z]+)\s*(?::([^{}]*?))?\s*\}\}\}/g;
 var PLACEHOLDER_CATALOG = Object.freeze([
@@ -15930,7 +16381,13 @@ var PLACEHOLDER_CATALOG = Object.freeze([
     id: "CYCLE",
     label: "Word cycle",
     example: "{{{CYCLE:fast|simple|yours}}}",
-    description: "Words separated by | take turns in the sentence: each one holds, then rolls or fades to the next."
+    description: "Words or phrases separated by | take turns in the sentence: each one holds, then rolls, fades or morphs to the next (Morph: the letters they share travel to their new place). Pace: add hold=2 (seconds each word stays) and duration=0.6 (seconds the change takes), or set Hold and Duration in its card."
+  },
+  {
+    id: "MORPH",
+    label: "Text Morph",
+    example: "{{{CYCLE:fast|simple|yours; style=morph; hold=1.2; duration=0.8}}}",
+    description: "A word cycle whose letters travel: the letters two words share slide to their new place, the others rise out and in. Pace: hold = seconds each word stays, duration = seconds the morph takes (Hold and Travel in its card). Whole lines instead of words: write each on its own line and turn on Each line is a state."
   },
   {
     id: "SCRAMBLE",
@@ -15964,6 +16421,7 @@ var PLACEHOLDER_CATALOG = Object.freeze([
   }
 ]);
 var clamp3 = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+var CYCLE_STYLES = ["roll", "fade", "blur", "morph"];
 var CYCLE_DEFAULTS = Object.freeze({
   textCycleStyle: "roll",
   textCycleDelay: 0,
@@ -16008,14 +16466,22 @@ var PLACEHOLDER_OPTIONS = Object.freeze({
     kf: { kf: true }
   },
   cycle: {
-    style: { values: ["roll", "fade", "blur"] },
+    style: { values: CYCLE_STYLES },
     start: { num: [0, 3600] },
     hold: { num: [0, 60] },
     duration: { num: [0.05, 10] },
     easing: { easing: true },
     width: { values: ["fit", "fixed"] },
     direction: { values: ["up", "down"] },
-    loop: { values: ["on", "off"] }
+    loop: { values: ["on", "off"] },
+    // Morph only (textMorph.js): how letters pair up, the letter stagger (s), the
+    // travel's arc (0–1), how the unpaired letters leave / arrive, the rank order.
+    match: { values: ["order", "any"] },
+    case: { values: ["ignore", "keep"] },
+    stagger: { num: [0, 2] },
+    arc: { num: [0, 1] },
+    leave: { values: ["mask", "fade", "blur", "scale"] },
+    order: { values: ["left", "center", "centre", "all"] }
   },
   scramble: {
     start: { num: [0, 3600] },
@@ -16107,13 +16573,15 @@ var PLACEHOLDER_LABELS = Object.freeze({
   CYCLE: "Word cycle",
   SCRAMBLE: "Scramble",
   TIMECODE: "Timecode",
-  FRAME: "Frame number"
+  FRAME: "Frame number",
+  LINES: "Line states"
 });
 function findVariable(variables, name) {
   if (!Array.isArray(variables)) return null;
   const key = name.toLowerCase();
   return variables.find((v) => String(v?.name || "").toLowerCase() === key) || null;
 }
+var LINE_STATE_STYLES = Object.freeze(["morph", "roll", "fade", "blur"]);
 function formatTimecode(sec, fps, format = "hh:mm:ss:ff") {
   const f2 = Math.max(1, Math.round(Number(fps) || 30));
   const frames = Math.max(0, Math.floor(sec * f2 + 1e-6));
@@ -16655,11 +17123,11 @@ var PT_KF_KEYS = PT_NUMBER_FIELDS.filter((f2) => f2.kf).map((f2) => f2.key);
 // src/components/videoEditor/gsapTransitions.js
 var HOLD_EASE = () => 0;
 var customEaseCache = /* @__PURE__ */ new Map();
-function customEase(bezier) {
-  const key = bezier.join(",");
+function customEase(bezier2) {
+  const key = bezier2.join(",");
   let fn = customEaseCache.get(key);
   if (!fn) {
-    fn = bezierEase(...bezier);
+    fn = bezierEase(...bezier2);
     if (customEaseCache.size > 256) customEaseCache.clear();
     customEaseCache.set(key, fn);
   }
@@ -16689,8 +17157,8 @@ function resolveWholeKeyEase(key) {
   const easing = key?.easing || TransitionEasing.LINEAR;
   if (easing === TransitionEasing.HOLD) return HOLD_EASE;
   if (easing === TransitionEasing.CUSTOM) {
-    const bezier = sanitizeBezier(key?.bezier);
-    if (bezier) return customEase(bezier);
+    const bezier2 = sanitizeBezier(key?.bezier);
+    if (bezier2) return customEase(bezier2);
     return playedEase(TransitionEasing.EASE_IN_OUT);
   }
   return playedEase(easing);
@@ -18661,8 +19129,9 @@ var CAMERA_KF_PROPS = [
   { label: "camY", displayLabel: "Pan Y", group: "Motion", placeholder: "0", unit: "%", type: "number", min: -200, max: 200, step: 0.5 },
   { label: "camRoll", displayLabel: "Roll", group: "Motion", placeholder: "0", unit: "deg", type: "number", min: -180, max: 180, step: 0.5 },
   { label: "camDolly", displayLabel: "Dolly", group: "Motion", placeholder: "0", unit: "px", type: "number", min: -3e3, max: 3e3, step: 10 },
-  { label: "camTiltX", displayLabel: "Tilt X", group: "Motion", placeholder: "0", unit: "deg", type: "number", min: -60, max: 60, step: 0.5 },
-  { label: "camTiltY", displayLabel: "Tilt Y", group: "Motion", placeholder: "0", unit: "deg", type: "number", min: -60, max: 60, step: 0.5 },
+  // No min/max on tilt: an orbit may go past 90° and all the way round; the evaluators hold any angle.
+  { label: "camTiltX", displayLabel: "Tilt X", group: "Motion", placeholder: "0", unit: "deg", type: "number", step: 0.5 },
+  { label: "camTiltY", displayLabel: "Tilt Y", group: "Motion", placeholder: "0", unit: "deg", type: "number", step: 0.5 },
   { label: "camDofEnabled", displayLabel: "Depth of Field", group: "Depth of Field", placeholder: "0", unit: "", type: "number", min: 0, max: 1, step: 1 },
   { label: "camFocusDistance", displayLabel: "Focus Distance", group: "Depth of Field", placeholder: "0", unit: "px", type: "number", min: 0, max: 2e4, step: 10 },
   { label: "camAperture", displayLabel: "Aperture", group: "Depth of Field", placeholder: "24", unit: "px", type: "number", min: 0, max: 300, step: 1 },
@@ -18702,8 +19171,8 @@ function cameraMoveHash(propertyKeyframes) {
     const seen = /* @__PURE__ */ new Set();
     const keys = track.filter((k) => k && Number.isFinite(Number.parseFloat(k.position))).map((k) => {
       const easing = easings.has(k.easing) ? k.easing : TransitionEasing.EASE_IN_OUT;
-      const bezier = easing === TransitionEasing.CUSTOM && Array.isArray(k.bezier) ? k.bezier.map((n2) => Math.round(Number(n2) * 1e4) / 1e4).join(",") : "";
-      return [Math.round(Number.parseFloat(k.position) * 1e3) / 1e3, String(k.value ?? ""), easing, bezier];
+      const bezier2 = easing === TransitionEasing.CUSTOM && Array.isArray(k.bezier) ? k.bezier.map((n2) => Math.round(Number(n2) * 1e4) / 1e4).join(",") : "";
+      return [Math.round(Number.parseFloat(k.position) * 1e3) / 1e3, String(k.value ?? ""), easing, bezier2];
     }).sort((a, b2) => a[0] - b2[0]).filter((k) => seen.has(k[0]) ? false : (seen.add(k[0]), true));
     parts.push(`${prop}=${keys.map((k) => k.join("|")).join(";")}`);
   }
@@ -21791,8 +22260,8 @@ function compileScript(script, caps, files = /* @__PURE__ */ new Map()) {
 // src/motionEngine/sceneScriptGuide.js
 init_define_import_meta_env();
 
-// ../skills/greenlight-dash/references/video-design.md
-var video_design_default = "# Motion design that looks made, not generated\n\nWhat makes a video read as designed rather than generated. The rules hold however the video is built \u2014 a project\nthrough the app's API, `project.json` with the engine's CLI, or a scene script \u2014 so read them before the first version\nand check every version against them.\n\n## Story and words\n\n- **One idea per scene**: 3\u20136 scenes of 2\u20133 s for a short video. A scene that says two things says neither.\n- **At most ~8 words on screen at once, held at least 1 s.** People read about 3 words a second; text that leaves\n  before it is read is noise.\n- **9:16**: bigger text, stacked vertically, everything in the middle 80 %.\n\n## Hierarchy\n\n- One headline per scene; supporting text much smaller. Hierarchy comes from size and weight, not colour alone.\n- One accent colour and strong contrast.\n- **No text shadows unless the user asks for one.** A shadow under type reads as a stock default and softens the\n  letter edges. When text has to read over footage or a busy picture, get the contrast from the design instead: a\n  calmer or darker part of the frame, a caption bar (`textBgEnabled`), or a shape behind the text. So no\n  `textShadowX` / `textShadowY` / `textShadowBlur` / `textShadowSpread` on a text layer, no `shadow` property in a\n  Text Animator and no `longShadow` effect on text. A shadow already in the user's project stays.\n- Keep text inside the middle 80 % of the frame (in a project: |panX| and |panY| \u2264 40): players and feeds crop the\n  edges.\n\n## Timing\n\n- Stagger related elements by 0.06\u20130.12 s.\n- **One focal move at a time.** If everything moves, nothing reads: supporting elements move less and later.\n- Shapes and pictures enter in 0.4\u20130.8 s; exits are faster than entrances.\n- A text animation takes at least 0.8\u20131 s over the whole line, first unit in to last unit settled, unless the video\n  needs snap (a beat hit, a glitch flick): faster text flashes past before it is read. The arithmetic per kind of\n  animation: video-projects.md, Text animation pace.\n\n## Easing by intent\n\n- Entrances: `AE In (arrive)`, `Expo Out` or `Power` (fast start, soft landing); UI panels and drawers: `Apple Out`.\n  Camera and big moves: `AE Smooth`.\n- Scene changes on the beat, a logo hit, a screen swipe: `Punch` (slow wind-up, hard hit, long tail).\n- A layer that passes through (in, glide, out): `Smooth Glide` with the `glide` expression \u2014 the Glide keyframe\n  presets build it (video-keyframes.md).\n- Playful arrivals: `Back Out` or `Overshoot`; a real spring: the `spring` expression (Snappy for buttons, icons and\n  pop-ins, Gentle for mascots, big cards and the camera). Exits: `Ease In` or `AE Out (leave)`.\n- `Linear` only for constant motion: tickers, rotation, progress along a path.\n\n## Text animation\n\n- Animate words or letters, never a whole line at once \u2014 the text presets do this.\n- One family per video. Calm presets for lines and captions: Glide Text (`glide-text`), Classic Fade Up\n  (`classic-fade-up`), Classic Rise (Mask) (`classic-rise-mask`); Focus Type (`focus-type`) for a title.\n- Punchy presets that tilt or overshoot \u2014 Swing Pop (`swing-pop`), Whip (`whip`), Letter Vortex (`letter-vortex`) \u2014\n  only on 1\u20133 words when the video wants energy. On a longer caption they read cheap.\n- Glide Continuous (`glide-continuous`) and Glide Soft Stop (`glide-soft-stop`) never let the text rest: use them\n  only when the user asks for drifting text.\n- On a coloured card, pick a preset without a colour band (Classic Rise (Mask), Classic Fade Up): a band's colour can\n  clash with the card.\n\n## Transitions and camera\n\n- Vary two or three kinds of transition across a video: one kind everywhere looks like a template, a new one at\n  every cut looks random.\n- Camera moves are slow and small unless they are the point. Fast motion looks best at 60 fps with motion blur.\n- A real 3D camera earns its place on one or two moments, not every scene: a zoom onto the one thing a scene is about\n  (a number, the button a screen recording clicks; 1.3\u20132\xD7, then back out), or a slow orbit or push that shows depth.\n- Depth needs layers at different distances: a soft shape or picture far behind, the words at the front. Depth of\n  field reads only then; keep the words sharp.\n- Keep an orbit in front of flat layers (within about \xB170\xB0): text turned further goes edge-on, then mirrored.\n\n## Sound\n\n- A soft whoosh on each transition and on the first headline is a good base. `data-1` or `selection-data-click` for\n  UI-like pops, `cinematic-transition-13` for one big reveal.\n\n## What to check in every version\n\nLook at real frames across the video (a contact sheet) before the user sees it \u2014 the JSON doesn't show these:\nblank or empty frames, overlapping or cut-off text, text too small or gone too fast, nothing moving or everything\nmoving at once, weak hierarchy, clashing colours. Fix them and look again; two rounds are usually enough.\n";
+// ../skills/greenlight-dash/references/video/design.md
+var design_default = "# Motion design that looks made, not generated\n\nWhat makes a video read as designed rather than generated. The rules hold however the video is built \u2014 a project\nthrough the app's API, `project.json` with the engine's CLI, or a scene script \u2014 so read them before the first version\nand check every version against them.\n\n## Story and words\n\n- **One idea per scene**: 3\u20136 scenes of 2\u20133 s for a short video. A scene that says two things says neither.\n- **At most ~8 words on screen at once, held at least 1 s.** People read about 3 words a second; text that leaves\n  before it is read is noise.\n- **9:16**: bigger text, stacked vertically, everything in the middle 80 %.\n\n## Hierarchy\n\n- One headline per scene; supporting text much smaller. Hierarchy comes from size and weight, not colour alone.\n- One accent colour and strong contrast.\n- **No text shadows unless the user asks for one.** A shadow under type reads as a stock default and softens the\n  letter edges. When text has to read over footage or a busy picture, get the contrast from the design instead: a\n  calmer or darker part of the frame, a caption bar (`textBgEnabled`), or a shape behind the text. So no\n  `textShadowX` / `textShadowY` / `textShadowBlur` / `textShadowSpread` on a text layer, no `shadow` property in a\n  Text Animator and no `longShadow` effect on text. A shadow already in the user's project stays.\n- Keep text inside the middle 80 % of the frame (in a project: |panX| and |panY| \u2264 40): players and feeds crop the\n  edges.\n\n## Timing\n\n- Stagger related elements by 0.06\u20130.12 s.\n- **One focal move at a time.** If everything moves, nothing reads: supporting elements move less and later.\n- Shapes and pictures enter in 0.4\u20130.8 s; exits are faster than entrances.\n- A text animation takes at least 0.8\u20131 s over the whole line, first unit in to last unit settled, unless the video\n  needs snap (a beat hit, a glitch flick): faster text flashes past before it is read. The arithmetic per kind of\n  animation: [Text animation pace](#text-animation-pace).\n\n## Easing by intent\n\n- Entrances: `AE In (arrive)`, `Expo Out` or `Power` (fast start, soft landing); UI panels and drawers: `Apple Out`.\n  Camera and big moves: `AE Smooth`.\n- Scene changes on the beat, a logo hit, a screen swipe: `Punch` (slow wind-up, hard hit, long tail).\n- A layer that passes through (in, glide, out): `Smooth Glide` with the `glide` expression \u2014 the Glide keyframe\n  presets build it ([keyframes.md](keyframes.md)).\n- Playful arrivals: `Back Out` or `Overshoot`; a real spring: the `spring` expression (Snappy for buttons, icons and\n  pop-ins, Gentle for mascots, big cards and the camera). Exits: `Ease In` or `AE Out (leave)`; the Kinetic recipes'\n  `Anticipate` exits (wind back, then snap away) are the exception and stay as tuned.\n- `Linear` only for constant motion: tickers, rotation, progress along a path.\n\n## Text animation\n\n- Animate words or letters, never a whole line at once \u2014 the text presets do this.\n- One family per video. Calm presets for lines and captions: Classic Fade Up (`classic-fade-up`), Classic Rise (Mask)\n  (`classic-rise-mask`), Glide Text (`glide-text`); Focus Type (`focus-type`) for a title. All are in\n  [text-presets.md](text-presets.md).\n- Punchy presets that tilt or overshoot ([text-kinetic.md](text-kinetic.md): Swing Pop (`swing-pop`), Whip (`whip`),\n  Letter Vortex (`letter-vortex`)\u2026) only on short titles, hooks and calls to action \u2014 up to about 5 words, or 2\u20134 short\n  stacked lines \u2014 and only when the video wants energy. On a longer line or a caption under speech they read cheap.\n- Glide Continuous (`glide-continuous`) and Glide Soft Stop (`glide-soft-stop`) never let the text rest: use them\n  only when the user asks for drifting text.\n- On a coloured card, pick a preset without a colour band (Classic Rise (Mask), Classic Fade Up): a band's colour can\n  clash with the card.\n\n## Text animation pace\n\nBy default, text that animates in, animates out or gets a one-time pass (a sweep, a highlight, a typed line) takes\n**at least 0.8\u20131 s**, counted from the moment its first unit starts to the moment its last unit settles. Faster than\nthat, the words flash past before anyone can read them. In a Video Editor project the rule holds however the motion is\nbuilt:\n\n- **Advanced Animations on Time** (`textAnimators[].range.drive: \"time\"`): the span is\n  `(units \u2212 1) \xD7 stagger + duration`. For example, 4 words with `stagger` 0.06 and `duration` 0.8 take 0.98 s. For\n  moves (rise, slide, scale, rotate, blur), reach the span with `duration`, because a long `stagger` makes a long line\n  crawl. A typewriter (`duration` 0) gets its pace from `stagger`.\n- **Keyframes** (`txa:` range tracks such as Start or Offset, or a text layer's own position, scale and opacity\n  tracks): the first and last key of one move sit at least 0.8 s apart. Key positions are % of the layer, so a move\n  from `p1` to `p2` lasts `(p2 \u2212 p1) / 100 \xD7 layer seconds`. On a layer with a speed curve, a `txa:` key's position is\n  a % of the clip's source length (`trimEnd \u2212 trimStart`) instead, so time the move on that clock\n  ([text.md](text.md)).\n- **Layer entrances and exits** on a text layer: `transitionInDuration` / `transitionOutDuration` of 0.8 or more\n  (the most they take is 3 s).\n- **Recipes** from [text-kinetic.md](text-kinetic.md) and [text-presets.md](text-presets.md) keep their tuned timing.\n  On very short text (one or two words), where the span works out under 0.8 s, raise `duration` until it reaches 0.8 s.\n\nGo faster only when the edit really needs it: the user asks for snappy or fast text, a word hits on a beat or a fast\ncut, a glitch or scramble flicks, the layer is too short to fit a 0.8 s move, or the animator uses `drive: \"voice\"`\n(the speech sets the pace there).\n\n## Transitions and camera\n\n- Vary two or three kinds of transition across a video: one kind everywhere looks like a template, a new one at\n  every cut looks random.\n- Camera moves are slow and small unless they are the point. Fast motion looks best at 60 fps with motion blur.\n- A real 3D camera earns its place on one or two moments, not every scene: a zoom onto the one thing a scene is about\n  (a number, the button a screen recording clicks; 1.3\u20132\xD7, then back out), or a slow orbit or push that shows depth.\n- Depth needs layers at different distances: a soft shape or picture far behind, the words at the front. Depth of\n  field reads only then; keep the words sharp.\n- Keep an orbit in front of flat layers (within about \xB170\xB0): text turned further goes edge-on, then mirrored.\n\n## Sound\n\n- A soft whoosh on each transition and on the first headline is a good base. `data-1` or `selection-data-click` for\n  UI-like pops, `cinematic-transition-13` for one big reveal.\n- Take sound effects from the user's Sound Library first\n  ([media.md](../media.md#asset-libraries-sound--assets--music)). The ids above are GreenLight Motion library sounds, not\n  Sound Library files: `GET /api/motion-sounds/v1/<id>.wav` serves one (e.g. `/api/motion-sounds/v1/data-1.wav`). Save\n  it into the board folder and use the board url as an `audio` clip's `url`.\n\n## What to check in every version\n\nLook at real frames across the video (a contact sheet) before the user sees it \u2014 the JSON doesn't show these:\nblank or empty frames, overlapping or cut-off text, text too small or gone too fast, nothing moving or everything\nmoving at once, weak hierarchy, clashing colours. Fix them and look again; two rounds are usually enough.\n";
 
 // src/motionEngine/sceneScriptGuide.js
 var PREFERRED = {
@@ -21900,7 +22369,7 @@ matte, masks, particles, 3D) goes on from \`project.json\`: SKILL.md, "Beyond th
 `;
 }
 function designGuide() {
-  return `${video_design_default.replace(/^(#+) /gm, "#$1 ").trim()}
+  return `${design_default.replace(/^(#+) /gm, "#$1 ").trim()}
 
 `;
 }