@pixerate/editor 0.62.0 → 0.64.0

package/dist/animation-editor/index.js

@@ -23,6 +23,7 @@ import {
   bezierPathLength,
   bezierPathPointAtLength,
   bezierPathToSvg,
+  toBezierPath,
   transformBezierPath
 } from "../chunk-GTMJ4Y3S.js";
 import {
@@ -149,6 +150,8 @@ var MOTION_ISSUE_CODES = {
   "out-of-frame": { severity: "warning", wording: "A node a command animates ends up outside the camera." },
   "too-fast": { severity: "warning", wording: "A change is too quick to follow." },
   "spring-cut-short": { severity: "warning", wording: "A spring is given a duration shorter than it takes to settle, so it jumps to its end." },
+  "unknown-cue": { severity: "error", wording: "A shot is cued to a beat with no beat grid, or to a word the narration does not have." },
+  "cue-missed": { severity: "warning", wording: "A shot starts after its cue, because the shot before runs past it." },
   "scene-too-long": { severity: "warning", wording: "The scene runs past its target length." },
   "scene-too-short": { severity: "warning", wording: "The scene ends before its target length." },
   "unknown-control-color": { severity: "warning", wording: "A control stands for a colour the scene never uses." },
@@ -206,8 +209,8 @@ ${problems.map((p) => `- ${p}`).join("\n")}`);
     this.problems = problems;
   }
 };
-var SCENE_KEYS = ["version", "name", "description", "artwork", "shots", "loop", "fps", "steps", "target", "controls", "presets"];
-var SHOT_KEYS = ["id", "label", "camera", "run", "hold", "speed"];
+var SCENE_KEYS = ["version", "name", "description", "artwork", "shots", "loop", "fps", "steps", "beat", "narration", "target", "controls", "presets"];
+var SHOT_KEYS = ["id", "label", "camera", "at", "run", "hold", "speed"];
 var CAMERA_KEYS = ["x", "y", "width", "height", "frame", "padding", "ease", "ms", "geometric"];
 var BASE_KEYS = ["type", "targets", "duration", "delay", "stagger", "with", "ease", "note", "repeat", "repeatMode", "steps"];
 var COMMAND_KEYS = {
@@ -361,6 +364,16 @@ function shotShapeProblems(shot, where) {
   if (shot.label !== void 0 && typeof shot.label !== "string") problems.push(`${name}: "label" must be a string.`);
   if (shot.hold !== void 0 && !(isNum(shot.hold) && shot.hold >= 0)) problems.push(`${name}: "hold" must be a number of milliseconds \u2265 0.`);
   if (shot.speed !== void 0 && !(isNum(shot.speed) && shot.speed >= 0.05 && shot.speed <= 20)) problems.push(`${name}: "speed" must be a number from 0.05 to 20 (2 plays it twice as fast).`);
+  if (shot.at !== void 0) {
+    const at = shot.at;
+    const given = isObject(at) ? ["beat", "word", "ms"].filter((k) => at[k] !== void 0) : [];
+    if (!isObject(at) || given.length !== 1) problems.push(`${name}: "at" must give one of { "beat": number }, { "word": index } or { "ms": number }.`);
+    else {
+      unknownKeys(at, ["beat", "word", "ms"], `${name} at`, problems);
+      const k = given[0];
+      if (!isNum(at[k]) || at[k] < 0 || k === "word" && !Number.isInteger(at[k])) problems.push(`${name}: "at.${k}" must be ${k === "word" ? "a word index \u2265 0" : "a number \u2265 0"}.`);
+    }
+  }
   if (shot.camera !== void 0) {
     const c = shot.camera;
     if (!isObject(c)) problems.push(`${name}: "camera" must be an object.`);
@@ -391,6 +404,16 @@ function motionSceneShapeProblems(input) {
     problems.push('Scene: "artwork" must be a vector document { width, height, nodes }.');
   if (input.loop !== void 0 && !["none", "loop", "ping-pong"].includes(input.loop)) problems.push('Scene: "loop" must be "none", "loop" or "ping-pong".');
   if (input.fps !== void 0 && !(isNum(input.fps) && input.fps > 0 && input.fps <= 120)) problems.push('Scene: "fps" must be a number from 1 to 120.');
+  if (input.beat !== void 0) {
+    const b = input.beat;
+    if (!isObject(b) || !(isNum(b.bpm) && b.bpm >= 1 && b.bpm <= 1e3) || b.offset !== void 0 && !isNum(b.offset) || b.meter !== void 0 && !(Number.isInteger(b.meter) && b.meter >= 1))
+      problems.push('Scene: "beat" must be { "bpm": 1\u20131000, "offset"?: ms, "meter"?: beats a bar }.');
+  }
+  if (input.narration !== void 0) {
+    const n = input.narration;
+    if (!isObject(n) || !Array.isArray(n.words) || !n.words.every((w, i, all) => isObject(w) && typeof w.text === "string" && isNum(w.start) && w.start >= 0 && (w.end === void 0 || isNum(w.end) && w.end >= w.start) && (i === 0 || w.start >= (all[i - 1].start ?? 0))))
+      problems.push('Scene: "narration" must be { "words": [{ "text", "start": ms, "end"?: ms }, \u2026] } in time order.');
+  }
   if (input.steps !== void 0 && !(isNum(input.steps) && input.steps > 0 && input.steps <= 120)) problems.push('Scene: "steps" must be frames per second from above 0 to 120.');
   if (input.target !== void 0 && !(Array.isArray(input.target) && input.target.length === 2 && input.target.every(isNum) && input.target[0] <= input.target[1]))
     problems.push('Scene: "target" must be [min, max] seconds.');
@@ -699,6 +722,21 @@ function motionPathLength(node, parentWorld = IDENTITY_MATRIX) {
 function motionShotTimeScale(shot) {
   return typeof shot.speed === "number" && shot.speed > 0 && Number.isFinite(shot.speed) ? 1 / shot.speed : 1;
 }
+function motionBeatTime(grid, beat) {
+  return (grid.offset ?? 0) + beat * 6e4 / grid.bpm;
+}
+function motionBeatAt(grid, ms) {
+  const beat = (ms - (grid.offset ?? 0)) * grid.bpm / 6e4;
+  const meter = Math.max(1, Math.round(grid.meter ?? 4));
+  const whole = Math.floor(beat + 1e-9);
+  return { beat, bar: Math.floor(whole / meter) + 1, beatInBar: (whole % meter + meter) % meter + 1 };
+}
+function motionCueTime(scene, cue) {
+  if (typeof cue.ms === "number") return Math.max(0, cue.ms);
+  if (typeof cue.beat === "number") return scene.beat && scene.beat.bpm > 0 ? Math.max(0, motionBeatTime(scene.beat, cue.beat)) : void 0;
+  if (typeof cue.word === "number") return scene.narration?.words[cue.word]?.start;
+  return void 0;
+}
 function motionCommandRepeat(command2) {
   if (command2.type === "wait" || command2.type === "enter" || command2.type === "exit") return 1;
   const n = command2.repeat ?? 1;
@@ -736,6 +774,12 @@ function compileMotionScene(scene) {
   const cameraMoves = [];
   let t = 0;
   scene.shots.forEach((shot, index) => {
+    const cue = shot.at ? motionCueTime(scene, shot.at) : void 0;
+    if (cue !== void 0 && cue > t) {
+      if (shots.length) shots[shots.length - 1].end = cue;
+      t = cue;
+    }
+    const missedBy = cue !== void 0 && t - cue > 0.5 ? t - cue : void 0;
     const start = t;
     let cursor = start;
     const f = motionShotTimeScale(shot);
@@ -762,7 +806,7 @@ function compileMotionScene(scene) {
       runEnd = Math.max(runEnd, end2);
     });
     const end = runEnd + (shot.hold ?? MOTION_DEFAULT_HOLD) * f;
-    shots.push({ id: shot.id, index, ...shot.label ? { label: shot.label } : {}, start, commandsStart, commandsEnd: runEnd, end });
+    shots.push({ id: shot.id, index, ...shot.label ? { label: shot.label } : {}, start, commandsStart, commandsEnd: runEnd, end, ...cue !== void 0 ? { cue } : {}, ...missedBy !== void 0 ? { missedBy } : {} });
     t = end;
   });
   const tracks = /* @__PURE__ */ new Map();
@@ -1366,6 +1410,17 @@ function checkMotionScene(scene) {
       }
     });
   });
+  scene.shots.forEach((shot, i) => {
+    if (!shot.at) return;
+    const timing = timeline.shots[i];
+    if (timing.cue === void 0) {
+      const what = shot.at.beat !== void 0 ? `beat ${shot.at.beat}, but the scene has no beat grid; set one with set_animation_settings ({ "beat": { "bpm": \u2026 } })` : `word ${shot.at.word}, but the narration has ${scene.narration?.words.length ?? 0} words (indexes from 0)`;
+      issues.push(motionIssue("unknown-cue", `Shot "${shot.id}" is cued to ${what}.`, { shot: shot.id }));
+    } else if (timing.missedBy !== void 0) {
+      const late = Math.round(timing.missedBy);
+      issues.push(motionIssue("cue-missed", `Shot "${shot.id}" is cued at ${Math.round(timing.cue)} ms but starts ${late} ms late, because the shot before runs until ${Math.round(timing.start)} ms; shorten that shot (its hold, durations or speed) or cue this one later.`, { shot: shot.id, measured: late, needed: 0, unit: "ms" }));
+    }
+  });
   for (const [key, track] of timeline.tracks) {
     if (key.endsWith("\0add")) continue;
     for (let i = 1; i < track.length; i++) {
@@ -1467,6 +1522,14 @@ function applyOne(scene, edit) {
         if (!(typeof edit.steps === "number" && edit.steps > 0 && edit.steps <= 120)) fail('"steps" must be frames per second from above 0 to 120 (12 is "on twos" at 24 fps), or null for smooth.');
         next.steps = edit.steps;
       }
+      for (const key of ["beat", "narration"]) {
+        if (edit[key] === null) delete next[key];
+        else if (edit[key] !== void 0) next[key] = edit[key];
+      }
+      {
+        const problems = motionSceneShapeProblems(next).filter((p) => /"beat"|"narration"/.test(p));
+        if (problems.length) fail(problems.join(" "));
+      }
       if (edit.target === null) delete next.target;
       else if (edit.target !== void 0) next.target = edit.target;
       return next;
@@ -2121,6 +2184,311 @@ function fromFlairVectorEffect(effect, options = {}) {
   return { scene, notes, issues: checkMotionScene(scene) };
 }
 
+// src/animation-editor/lottie.ts
+var STATIC_TR = () => ({
+  ty: "tr",
+  p: { a: 0, k: [0, 0] },
+  a: { a: 0, k: [0, 0] },
+  s: { a: 0, k: [100, 100] },
+  r: { a: 0, k: 0 },
+  o: { a: 0, k: 100 },
+  sk: { a: 0, k: 0 },
+  sa: { a: 0, k: 0 }
+});
+function rgba(color) {
+  const hex = typeof color === "string" ? normalizeTokenColor(color) : null;
+  if (!hex) return null;
+  const n = (i) => parseInt(hex.slice(i, i + 2), 16) / 255;
+  return [n(1), n(3), n(5), hex.length >= 9 ? parseInt(hex.slice(7, 9), 16) / 255 : 1];
+}
+function lottieContours(path, round2) {
+  const out = [];
+  let cur = null;
+  let px = 0;
+  let py = 0;
+  const add = (x, y, inX, inY) => {
+    cur.v.push([x, y]);
+    cur.i.push([inX - x, inY - y]);
+    cur.o.push([0, 0]);
+    px = x;
+    py = y;
+  };
+  for (const cmd of path) {
+    if (cmd.type === "M") {
+      if (cur) out.push(cur);
+      cur = { c: false, v: [], i: [], o: [] };
+      add(cmd.x, cmd.y, cmd.x, cmd.y);
+    } else if (!cur) continue;
+    else if (cmd.type === "L") add(cmd.x, cmd.y, cmd.x, cmd.y);
+    else if (cmd.type === "Q") {
+      const c1 = [px + 2 / 3 * (cmd.x1 - px), py + 2 / 3 * (cmd.y1 - py)];
+      const c2 = [cmd.x + 2 / 3 * (cmd.x1 - cmd.x), cmd.y + 2 / 3 * (cmd.y1 - cmd.y)];
+      cur.o[cur.o.length - 1] = [c1[0] - px, c1[1] - py];
+      add(cmd.x, cmd.y, c2[0], c2[1]);
+    } else if (cmd.type === "C") {
+      cur.o[cur.o.length - 1] = [cmd.x1 - px, cmd.y1 - py];
+      add(cmd.x, cmd.y, cmd.x2, cmd.y2);
+    } else if (cmd.type === "Z") {
+      cur.c = true;
+      const n = cur.v.length;
+      if (n > 1 && Math.abs(cur.v[n - 1][0] - cur.v[0][0]) < 1e-9 && Math.abs(cur.v[n - 1][1] - cur.v[0][1]) < 1e-9) {
+        cur.i[0] = cur.i[n - 1];
+        cur.v.pop();
+        cur.i.pop();
+        cur.o.pop();
+      }
+      out.push(cur);
+      cur = null;
+    }
+  }
+  if (cur) out.push(cur);
+  return out.map((c) => ({ c: c.c, v: c.v.map((p) => p.map(round2)), i: c.i.map((p) => p.map(round2)), o: c.o.map((p) => p.map(round2)) }));
+}
+function staticParts(m) {
+  const sx = Math.hypot(m[0], m[1]);
+  if (!(sx > 1e-12)) return null;
+  const sy = (m[0] * m[3] - m[1] * m[2]) / sx;
+  if (Math.abs(m[2] + m[1] / sx * sy) > 1e-6 || Math.abs(m[3] - m[0] / sx * sy) > 1e-6) return null;
+  return { p: [m[4], m[5]], s: [sx * 100, sy * 100], r: Math.atan2(m[1], m[0]) * 180 / Math.PI };
+}
+function toLottie(scene, options = {}) {
+  const fps = options.fps ?? scene.fps ?? 30;
+  const precision = options.precision ?? 3;
+  const round2 = (n) => Math.round(n * 10 ** precision) / 10 ** precision;
+  const frame = (ms) => round2(ms * fps / 1e3);
+  const timeline = compileMotionScene(scene);
+  const nodes = indexMotionNodes(scene.artwork.nodes);
+  const notes = [];
+  let sampled = 0;
+  const track = (id, p) => timeline.tracks.get(motionTrackKey(id, p)) ?? [];
+  const layers = (id, p) => timeline.tracks.get(`${motionTrackKey(id, p)}\0add`) ?? [];
+  const end = timeline.duration;
+  const curveOf = (s) => {
+    if (s.behavior || s.steps || s.geometric) return void 0;
+    const e = s.reverse ? reverseCubicBezier(s.ease) : resolveEasing(s.ease);
+    if (!e || e === "hold" || e.type !== "cubic-bezier") return void 0;
+    return [e.x1, e.y1, e.x2, e.y2];
+  };
+  const animate = (segments, value, exact = true) => {
+    const rest = value(0).map(round2);
+    if (!segments.length) return { a: 0, k: rest.length === 1 ? rest[0] : rest };
+    const keys = [];
+    const key = (t, v, ease) => {
+      const k = { t: frame(t), s: v.map(round2) };
+      if (ease === "hold") k.h = 1;
+      else {
+        const [x1, y1, x2, y2] = ease === "linear" || !ease ? [0, 0, 1, 1] : ease;
+        k.o = { x: [round2(x1)], y: [round2(y1)] };
+        k.i = { x: [round2(x2)], y: [round2(y2)] };
+      }
+      if (keys.length && keys[keys.length - 1].t === k.t) keys[keys.length - 1] = k;
+      else keys.push(k);
+    };
+    const times = [.../* @__PURE__ */ new Set([0, ...segments.flatMap((s) => [s.start, s.end]), end])].filter((t) => t >= 0 && t <= end).sort((a, b) => a - b);
+    for (let n = 0; n + 1 < times.length; n++) {
+      const a = times[n];
+      const b = times[n + 1];
+      const active = segments.filter((s) => s.start < b && s.end > a);
+      if (!active.length) {
+        key(a, value(a), "hold");
+        continue;
+      }
+      const first = active[0];
+      const curve = exact && active.every((s) => s.start === a && s.end === b && JSON.stringify(curveOf(s)) === JSON.stringify(curveOf(first))) ? curveOf(first) : void 0;
+      if (curve) {
+        key(a, value(a), curve);
+        continue;
+      }
+      const count = Math.max(1, Math.ceil((b - a) * fps / 1e3));
+      for (let k = 0; k < count; k++) {
+        const t = a + (b - a) * k / count;
+        key(t, value(t), "linear");
+        sampled++;
+      }
+    }
+    for (const s of segments) if (s.end <= s.start) key(s.start, value(s.start), "hold");
+    keys.sort((x, y) => x.t - y.t);
+    key(end, value(end), "hold");
+    const last = keys[keys.length - 1];
+    delete last.o;
+    delete last.i;
+    delete last.h;
+    return { a: 1, k: keys };
+  };
+  const poseAt = (entry, t) => {
+    const o = motionNodeOffset(entry, timeline, t, nodes);
+    if (!o) return { p: [entry.center.x, entry.center.y], s: [100, 100], r: 0 };
+    const m = o.matrix;
+    const sx = Math.hypot(m[0], m[1]);
+    const sy = sx > 1e-12 ? (m[0] * m[3] - m[1] * m[2]) / sx : 0;
+    const c = entry.center;
+    return { p: [m[0] * c.x + m[2] * c.y + m[4], m[1] * c.x + m[3] * c.y + m[5]], s: [sx * 100, sy * 100], r: Math.atan2(m[1], m[0]) * 180 / Math.PI };
+  };
+  const poseTransform = (entry) => {
+    const id = entry.node.id;
+    const tr = STATIC_TR();
+    const c = [entry.center.x, entry.center.y].map(round2);
+    const own = (p) => track(id, p);
+    const layered = ["x", "y", "rotation", "scaleX", "scaleY"].some((p) => layers(id, p).length);
+    const moving = ["x", "y", "rotation", "scaleX", "scaleY", "follow"].some((p) => own(p).length) || layered;
+    if (moving) {
+      const mixed = own("follow").length > 0 || layered;
+      tr.a = { a: 0, k: c };
+      tr.p = animate(mixed ? [...own("x"), ...own("y"), ...own("follow"), ...layers(id, "x"), ...layers(id, "y")] : [...own("x"), ...own("y")], (t) => poseAt(entry, t).p, !mixed);
+      tr.r = animate(mixed ? [...own("rotation"), ...own("follow"), ...layers(id, "rotation")] : own("rotation"), (t) => [poseAt(entry, t).r], !mixed);
+      tr.s = animate(mixed ? [...own("scaleX"), ...own("scaleY"), ...layers(id, "scaleX"), ...layers(id, "scaleY")] : [...own("scaleX"), ...own("scaleY")], (t) => poseAt(entry, t).s, !mixed);
+      if (tr.p.a === 0) tr.p = { a: 0, k: poseAt(entry, 0).p.map(round2) };
+    }
+    const opacity = own("opacity");
+    const rest = entry.node.opacity ?? 1;
+    tr.o = opacity.length ? animate(opacity, (t) => [Math.min(1, Math.max(0, Number(trackValue(opacity, t) ?? rest))) * 100]) : { a: 0, k: round2(rest * 100) };
+    return tr;
+  };
+  const owner = (path, p) => {
+    const entry = nodes.get(path.id);
+    if (!entry) return void 0;
+    return [...entry.ancestors, path.id].find((id) => timeline.tracks.has(motionTrackKey(id, p)));
+  };
+  const paintOf = (paint, what, id) => {
+    if (paint === void 0 || paint === null || paint === "none") return null;
+    const c = rgba(paint);
+    if (!c) notes.push(`"${id}": its ${what} is a gradient, which is not exported; it is left unpainted.`);
+    return c;
+  };
+  const pathShapes = (path) => {
+    const items = [];
+    const shapeSegments = [...timeline.tracks.entries()].filter(([k]) => k.startsWith(`${path.id}\0`) && (k.endsWith("\0shape") || k.includes("\0effect:"))).flatMap(([, v]) => v);
+    const geometryAt = (t) => {
+      if (!shapeSegments.length) return vectorPathWorldBezier(path);
+      const now = indexMotionNodes(motionFrameAt(scene, t, { draw: false, offsets: false }).document.nodes).get(path.id)?.node;
+      return now && now.type === "path" ? vectorPathWorldBezier(expandVectorAppearances([now])[0]) : vectorPathWorldBezier(path);
+    };
+    const rest = lottieContours(toBezierPath(geometryAt(0)), round2);
+    rest.forEach((contour, n) => {
+      let ks = { a: 0, k: contour };
+      if (shapeSegments.length) {
+        const keys = [];
+        let fits = true;
+        const count = Math.max(1, Math.ceil(end * fps / 1e3));
+        for (let k = 0; k <= count && fits; k++) {
+          const t = end * k / count;
+          const c = lottieContours(toBezierPath(geometryAt(t)), round2)[n];
+          if (!c || c.v.length !== contour.v.length || c.c !== contour.c) fits = false;
+          else keys.push({ t: frame(t), s: [c], ...k < count ? { o: { x: [0], y: [0] }, i: { x: [1], y: [1] } } : {} });
+        }
+        if (fits) {
+          ks = { a: 1, k: keys };
+          sampled += keys.length;
+        } else notes.push(`"${path.id}": its morph changes how many points the outline has, which Lottie cannot tween; it shows its starting shape.`);
+      }
+      items.push({ ty: "sh", nm: `${path.id} ${n + 1}`, ks });
+    });
+    const fillFrom = owner(path, "fill");
+    const strokeFrom = owner(path, "stroke");
+    const widthFrom = owner(path, "strokeWidth");
+    const fadeFrom = owner(path, "fillOpacity");
+    const drawFrom = owner(path, "drawEnd");
+    if (drawFrom) {
+      const draw = track(drawFrom, "drawEnd");
+      items.push({ ty: "tm", nm: "Draw on", s: { a: 0, k: 0 }, e: animate(draw, (t) => [Math.min(1, Math.max(0, Number(trackValue(draw, t) ?? 1))) * 100]), o: { a: 0, k: 0 }, m: 1 });
+    }
+    if (owner(path, "drawStart")) notes.push(`"${path.id}": drawing from a start other than 0 is not exported.`);
+    const stroke = paintOf(path.stroke, "stroke", path.id);
+    if (stroke || strokeFrom) {
+      const colour = strokeFrom ? track(strokeFrom, "stroke") : [];
+      items.push({
+        ty: "st",
+        nm: "Stroke",
+        c: colour.length ? animate(colour, (t) => rgba(trackValue(colour, t)) ?? stroke ?? [0, 0, 0, 1]) : { a: 0, k: (stroke ?? [0, 0, 0, 1]).map(round2) },
+        o: { a: 0, k: 100 },
+        w: widthFrom ? animate(track(widthFrom, "strokeWidth"), (t) => [Math.max(0, Number(trackValue(track(widthFrom, "strokeWidth"), t) ?? path.strokeWidth ?? 1))]) : { a: 0, k: round2(path.strokeWidth ?? 1) },
+        lc: path.strokeLinecap === "round" ? 2 : path.strokeLinecap === "square" ? 3 : 1,
+        lj: path.strokeLinejoin === "round" ? 2 : path.strokeLinejoin === "bevel" ? 3 : 1,
+        ml: 4
+      });
+      if (path.strokeDasharray?.length) notes.push(`"${path.id}": its dashes are not exported; the stroke is solid.`);
+      if (path.strokeAlign && path.strokeAlign !== "center") notes.push(`"${path.id}": its stroke is drawn centred (Lottie has no inside or outside strokes).`);
+    }
+    const fill = paintOf(path.fill, "fill", path.id);
+    if (fill || fillFrom) {
+      const colour = fillFrom ? track(fillFrom, "fill") : [];
+      const fade = fadeFrom ? track(fadeFrom, "fillOpacity") : [];
+      items.push({
+        ty: "fl",
+        nm: "Fill",
+        c: colour.length ? animate(colour, (t) => rgba(trackValue(colour, t)) ?? fill ?? [0, 0, 0, 1]) : { a: 0, k: (fill ?? [0, 0, 0, 1]).map(round2) },
+        o: fade.length ? animate(fade, (t) => [Math.min(1, Math.max(0, Number(trackValue(fade, t) ?? 1))) * 100]) : { a: 0, k: 100 },
+        r: path.fillRule === "evenodd" ? 2 : 1
+      });
+    }
+    return items;
+  };
+  const nodeGroup = (node) => {
+    const entry = nodes.get(node.id);
+    if (timeline.tracks.has(motionTrackKey(node.id, "clipRect")) || timeline.tracks.has(motionTrackKey(node.id, "clipCircle")))
+      notes.push(`"${node.id}": its wipe, iris or split reveal is not exported (Lottie masks belong to layers); it fades with its opacity only.`);
+    let inner;
+    const innerTr = STATIC_TR();
+    if (node.type === "path") inner = [...pathShapes(node)];
+    else {
+      inner = [...node.children].reverse().map(nodeGroup);
+      const m = nodeMatrix(node);
+      if (m !== IDENTITY_MATRIX) {
+        const parts = staticParts(m);
+        if (!parts) notes.push(`"${node.id}": its transform skews, which is not exported; it is drawn without the skew.`);
+        else {
+          innerTr.p = { a: 0, k: parts.p.map(round2) };
+          innerTr.s = { a: 0, k: parts.s.map(round2) };
+          innerTr.r = { a: 0, k: round2(parts.r) };
+        }
+      }
+    }
+    const body = { ty: "gr", nm: `${node.id} (own)`, it: [...inner, innerTr] };
+    return { ty: "gr", nm: node.name ?? node.id, ...node.visible === false ? { hd: true } : {}, it: [body, poseTransform(entry)] };
+  };
+  const artwork = { ...scene.artwork, nodes: expandVectorAppearances(scene.artwork.nodes) };
+  const content = [...artwork.nodes].reverse().map(nodeGroup);
+  if (artwork.background && rgba(artwork.background))
+    content.push({ ty: "gr", nm: "Background", it: [{ ty: "rc", nm: "Background", p: { a: 0, k: [artwork.width / 2, artwork.height / 2] }, s: { a: 0, k: [artwork.width, artwork.height] }, r: { a: 0, k: 0 } }, { ty: "fl", c: { a: 0, k: rgba(artwork.background).map(round2) }, o: { a: 0, k: 100 }, r: 1 }, STATIC_TR()] });
+  const camera = track("", "camera");
+  const root = STATIC_TR();
+  if (camera.length) {
+    const box = (t) => trackValue(camera, t) ?? [0, 0, artwork.width, artwork.height];
+    root.a = animate(camera, (t) => box(t).slice(0, 2), false);
+    root.s = animate(camera, (t) => [artwork.width / box(t)[2] * 100, artwork.height / box(t)[3] * 100], false);
+  }
+  const op = Math.max(1, Math.ceil(end * fps / 1e3));
+  const lottie = {
+    v: "5.7.4",
+    fr: fps,
+    ip: 0,
+    op,
+    w: artwork.width,
+    h: artwork.height,
+    nm: scene.name,
+    ddd: 0,
+    assets: [],
+    layers: [
+      {
+        ddd: 0,
+        ind: 1,
+        ty: 4,
+        nm: scene.name,
+        sr: 1,
+        ks: { o: { a: 0, k: 100 }, r: { a: 0, k: 0 }, p: { a: 0, k: [0, 0, 0] }, a: { a: 0, k: [0, 0, 0] }, s: { a: 0, k: [100, 100, 100] } },
+        ao: 0,
+        shapes: [{ ty: "gr", nm: "Camera", it: [...content, root] }],
+        ip: 0,
+        op,
+        st: 0,
+        bm: 0
+      }
+    ],
+    markers: timeline.shots.map((s) => ({ tm: frame(s.start), cm: s.label ?? s.id, dr: frame(s.end - s.start) }))
+  };
+  return { lottie, sampled, notes: [...new Set(notes)] };
+}
+
 // src/animation-editor/controller.ts
 var BLANK = { width: 800, height: 450, background: "#ffffff", nodes: [] };
 var AnimationEditorController = class {
@@ -2495,7 +2863,12 @@ var SHOT_FIELDS = {
   camera: CAMERA,
   run: { type: "array", items: MOTION_COMMAND_SCHEMA, description: "Commands, in order." },
   hold: MS("Hold after the commands (default 600)"),
-  speed: { type: "number", minimum: 0.05, maximum: 20, description: "Play the whole shot this many times as fast (default 1; 0.5 is half speed). fit_animation sets it." }
+  speed: { type: "number", minimum: 0.05, maximum: 20, description: "Play the whole shot this many times as fast (default 1; 0.5 is half speed). fit_animation sets it." },
+  at: object(
+    { beat: { type: "number", minimum: 0, description: `Beat number on the scene's beat grid, from 0 (2.5 is the "and" of beat 3).` }, word: { type: "integer", minimum: 0, description: "Index of a narration word, from 0." }, ms: { type: "number", minimum: 0, description: "A time in ms." } },
+    [],
+    "Start this shot on a cue (give one of beat, word or ms); the shot before holds until then. get_timing_grid lists beats and words."
+  )
 };
 var SHOT = object({ id: { type: "string", pattern: "^[A-Za-z0-9_][\\w.-]*$", description: 'Unique shot id, e.g. "intro".' }, ...SHOT_FIELDS }, ["id", "run"], "A shot.");
 var CONTROL = object(
@@ -2515,6 +2888,20 @@ var SETTINGS = {
   loop: { type: "string", enum: ["none", "loop", "ping-pong"], description: "Playback past the end (default none)." },
   fps: { type: "number", minimum: 1, maximum: 120, description: "Sampling rate for exports (default 30)." },
   steps: { anyOf: [{ type: "number", exclusiveMinimum: 0, maximum: 120 }, { type: "null" }], description: 'Stepped time for every command without its own: changes hold on a grid of this many frames per second (12 = "on twos" at 24 fps) for a hand-drawn look; null makes it smooth again (default).' },
+  beat: {
+    anyOf: [
+      object({ bpm: { type: "number", minimum: 1, maximum: 1e3, description: "Beats a minute." }, offset: { type: "number", description: "When beat 0 falls, ms (default 0)." }, meter: { type: "integer", minimum: 1, description: "Beats a bar (default 4)." } }, ["bpm"]),
+      { type: "null" }
+    ],
+    description: `A beat grid (music or a voiceover's rhythm) that shots can be cued to with "at": { "beat": n }; null clears.`
+  },
+  narration: {
+    anyOf: [
+      object({ words: { type: "array", items: object({ text: { type: "string", description: "The word." }, start: { type: "number", minimum: 0, description: "When it is said, ms." }, end: { type: "number", minimum: 0, description: "When it ends, ms." } }, ["text", "start"]), description: "Words in time order, from a TTS or speech-to-text word timing." } }, ["words"]),
+      { type: "null" }
+    ],
+    description: `A voiceover's word timings that shots can be cued to with "at": { "word": index }; null clears.`
+  },
   target: { anyOf: [{ type: "array", items: { type: "number", minimum: 0 }, minItems: 2, maxItems: 2 }, { type: "null" }], description: "Wanted length [min, max] in seconds; null clears." }
 };
 var EDIT_OP = {
@@ -2522,7 +2909,7 @@ var EDIT_OP = {
   oneOf: [
     object({ op: { const: "set_settings", description: "Like set_animation_settings." }, ...SETTINGS }, ["op"]),
     object({ op: { const: "insert_shots", description: "Like insert_shots." }, shots: { type: "array", items: SHOT, minItems: 1, description: "Shots to add." }, at: { type: "integer", minimum: 0, description: "Position (default: the end)." } }, ["op", "shots"]),
-    object({ op: { const: "update_shot", description: "Like update_shot." }, shot: SHOT_ID, set: object({ id: SHOT.properties.id, ...SHOT_FIELDS }, [], "Fields to replace."), remove: { type: "array", items: { type: "string", enum: ["label", "camera", "hold", "speed"] }, description: "Fields to clear." } }, ["op", "shot"]),
+    object({ op: { const: "update_shot", description: "Like update_shot." }, shot: SHOT_ID, set: object({ id: SHOT.properties.id, ...SHOT_FIELDS }, [], "Fields to replace."), remove: { type: "array", items: { type: "string", enum: ["label", "camera", "hold", "speed", "at"] }, description: "Fields to clear." } }, ["op", "shot"]),
     object({ op: { const: "delete_shots", description: "Like delete_shots." }, shots: { type: "array", items: SHOT_ID, minItems: 1, description: "Shot ids." } }, ["op", "shots"]),
     object({ op: { const: "move_shot", description: "Like move_shot." }, shot: SHOT_ID, to: { type: "integer", minimum: 0, description: "New position (0 = first)." } }, ["op", "shot", "to"]),
     object({ op: { const: "add_commands", description: "Like add_commands." }, shot: SHOT_ID, commands: { type: "array", items: MOTION_COMMAND_SCHEMA, minItems: 1, description: "Commands to add." }, at: { type: "integer", minimum: 0, description: "Index in the shot's run (default: the end)." } }, ["op", "shot", "commands"]),
@@ -2567,6 +2954,8 @@ function describeMotionShots(scene) {
       end: t.end,
       ...shot.camera ? { camera: shot.camera } : {},
       ...shot.hold !== void 0 ? { hold: shot.hold } : {},
+      ...t.cue !== void 0 ? { cue: Math.round(t.cue) } : {},
+      ...t.missedBy !== void 0 ? { missedBy: Math.round(t.missedBy) } : {},
       commands: shot.run.map((c, index) => {
         const ct = timeline.commands.find((x) => x.shotIndex === i && x.command === index);
         const primitive = motionFlairPrimitive(c);
@@ -2695,6 +3084,42 @@ function createAnimationEditorToolProvider(controller, options = {}) {
   const CURVES_DESCRIPTION = "Write cubic-bezier easings (ease, ease-in, ease-out, ease-in-out, back eases, custom curves) as one change with ease: [x1, y1, x2, y2] (default true). Needs Flair 0.36 or later; false samples them into linear steps for older Flair.";
   const FLAIR_DESCRIPTION = "The Flair version to export for (default 0.39): springs and stepped time need 0.39, behaviours 0.38, cubic-bezier curves 0.36; older versions get those sampled into linear steps.";
   const BEHAVIORS_DESCRIPTION = "Write pulses, shakes, teeters, waves, wiggles and colour pulses as one change with a Flair behavior, so they play exactly (default true; needs Flair 0.38 or later). False samples them into linear steps for older Flair.";
+  const getTimingGrid = {
+    name: "get_timing_grid",
+    title: "Read the beat grid and narration",
+    description: 'Returns the beats (number, time in ms, bar and beat in the bar) and narration words (index, text, start, end) between two times, to cue shots to with "at". Also says which shot plays at each. Without a beat grid or narration, that part is empty and says how to add one.',
+    inputSchema: object({
+      from: { type: "number", minimum: 0, description: "From this time, ms (default 0)." },
+      to: { type: "number", minimum: 0, description: "Up to this time, ms (default: the end of the animation, or of the narration if later)." },
+      limit: { type: "integer", minimum: 1, maximum: 1e3, description: "At most this many beats and words each (default 200)." }
+    }),
+    annotations: { title: "Read the beat grid and narration", ...READ },
+    handler: ({ from = 0, to, limit = 200 }) => {
+      const s = scene();
+      const timeline = compileMotionScene(s);
+      const words = s.narration?.words ?? [];
+      const end = to ?? Math.max(timeline.duration, words.length ? words[words.length - 1].end ?? words[words.length - 1].start : 0);
+      const shotAt = (ms) => timeline.shots.find((x) => ms >= x.start && ms < x.end)?.id;
+      const beats = [];
+      if (s.beat && s.beat.bpm > 0) {
+        const first = Math.max(0, Math.ceil(motionBeatAt(s.beat, from).beat - 1e-9));
+        for (let b = first; beats.length < limit; b++) {
+          const ms = motionBeatTime(s.beat, b);
+          if (ms > end) break;
+          const at = motionBeatAt(s.beat, ms);
+          const shot = shotAt(ms);
+          beats.push({ beat: b, ms: Math.round(ms), bar: at.bar, beatInBar: at.beatInBar, ...shot ? { shot } : {} });
+        }
+      }
+      const listed = words.map((w, index) => ({ index, text: w.text, start: w.start, ...w.end !== void 0 ? { end: w.end } : {}, ...shotAt(w.start) ? { shot: shotAt(w.start) } : {} })).filter((w) => w.start >= from && w.start <= end).slice(0, limit);
+      return {
+        from,
+        to: Math.round(end),
+        ...s.beat ? { grid: s.beat, beats } : { beats: [], hint: 'No beat grid: set_animation_settings with { "beat": { "bpm": 120 } }.' },
+        ...words.length ? { words: listed } : { words: [], narrationHint: 'No narration: set_animation_settings with { "narration": { "words": [{ "text", "start" }, \u2026] } }.' }
+      };
+    }
+  };
   const exportFlairMotion = {
     name: "export_flair_motion",
     title: "Export as Flair vector motion",
@@ -2708,6 +3133,14 @@ function createAnimationEditorToolProvider(controller, options = {}) {
     annotations: { title: "Export as Flair vector motion", ...READ },
     handler: ({ fps, curves, behaviors, flair }) => controller.toFlairMotion({ ...fps ? { fps } : {}, ...curves === void 0 ? {} : { curves }, ...behaviors === void 0 ? {} : { behaviors }, ...flair ? { flair } : {} })
   };
+  const exportLottie = {
+    name: "export_lottie",
+    title: "Export as Lottie",
+    description: "Returns the animation as Lottie (Bodymovin JSON, v5) for lottie-web and the mobile Lottie players: one shape layer whose groups mirror the artwork, a marker per shot, eased changes as keyframes with bezier easing and the rest sampled. Also returns how many keyframes were sampled and notes on anything not carried over (gradients, dashes, reveal clips, morphs that change point counts).",
+    inputSchema: object({ fps: { type: "number", minimum: 1, maximum: 120, description: "Frame rate (default: the scene's fps, else 30)." } }),
+    annotations: { title: "Export as Lottie", ...READ },
+    handler: ({ fps }) => toLottie(scene(), fps ? { fps } : {})
+  };
   const exportFlairEffect = {
     name: "export_flair_effect",
     title: "Export as a Flair effect",
@@ -2806,7 +3239,7 @@ function createAnimationEditorToolProvider(controller, options = {}) {
       {
         shot: SHOT_ID,
         set: object({ id: SHOT.properties.id, ...SHOT_FIELDS }, [], "Fields to replace."),
-        remove: { type: "array", items: { type: "string", enum: ["label", "camera", "hold", "speed"] }, description: "Fields to clear." }
+        remove: { type: "array", items: { type: "string", enum: ["label", "camera", "hold", "speed", "at"] }, description: "Fields to clear." }
       },
       ["shot"]
     ),
@@ -2872,7 +3305,7 @@ function createAnimationEditorToolProvider(controller, options = {}) {
   const setSettings = {
     name: "set_animation_settings",
     title: "Change animation settings",
-    description: "Sets the name, description, loop mode, export frame rate, stepped time or target length. Returns the timing.",
+    description: "Sets the name, description, loop mode, export frame rate, stepped time, beat grid, narration word timings or target length. Returns the timing.",
     inputSchema: object(SETTINGS),
     annotations: { title: "Change animation settings", ...WRITE_IDEMPOTENT },
     handler: (args) => apply({ op: "set_settings", ...args }, "Change settings")
@@ -2950,7 +3383,7 @@ function createAnimationEditorToolProvider(controller, options = {}) {
       return { redone, ...redone ? { label } : {} };
     }
   };
-  const reads = [getAnimation, getShot, findElements, checkAnimation, renderFrame, exportFlairMotion, exportFlairEffect, seekAnimation];
+  const reads = [getAnimation, getShot, findElements, getTimingGrid, checkAnimation, renderFrame, exportFlairMotion, exportFlairEffect, exportLottie, seekAnimation];
   const writes = [setArtworkSvg, fitAnimation, importFlairEffect, insertShots, updateShot, deleteShots, moveShot, addCommands, updateCommand, deleteCommands, setSettings, setControls, editAnimation, writeAnimation, undo, redo];
   return {
     id: options.id ?? "animation",
@@ -2989,6 +3422,7 @@ Commands
 - Emphasis stacks on other motion: a shake during a slide shakes as it slides. Give move, rotate or scale "blend": "add" to stack them too (what they add stays); "blend": "replace" makes a change take over instead.
 - Any command but enter and exit can "repeat" (loop, mirror back and forth, or offset to carry on: rotate by 90, repeat 4 is a full turn); "duration" is one cycle.
 - Springs ("spring-gentle", "spring-quick", "spring-bouncy", "spring-slow" or { "type": "spring", \u2026 }) feel physical; leave "duration" out and the spring sets it.
+- To time shots to music or a voiceover: set a "beat" grid or "narration" word timings with set_animation_settings, read them with get_timing_grid, and give a shot "at": { "beat": n } or { "word": i }. The shot before holds until the cue; check_animation warns when a cue is missed.
 - "steps": 12 (on a command, or for the whole scene with set_animation_settings) holds poses "on twos" for a hand-drawn look. "geometric": true on scale or a camera zooms at an even rate.
 - Commands share their names and defaults with Flair's motion primitives (get_animation shows each one's "flairPrimitive"), and emphasis, reveals and follows export to Flair exactly.
 - effect tweens a numeric parameter of a live path effect already on the node (twist angle, wiggle time, zig zag size).
@@ -3052,9 +3486,12 @@ export {
   isMotionShot,
   matchMotionNodes,
   motionAddTrackKey,
+  motionBeatAt,
+  motionBeatTime,
   motionClipAttrs,
   motionCommandDuration,
   motionCommandRepeat,
+  motionCueTime,
   motionCycleDuration,
   motionFlairPrimitive,
   motionFollowRoute,
@@ -3084,6 +3521,7 @@ export {
   toFlairEffectDocument,
   toFlairSvgMotion,
   toFlairVectorEffect,
+  toLottie,
   trackValue,
   withMotionLayers,
   withViewBox