@pixerate/editor 0.57.0 → 0.59.0

package/dist/animation-editor/index.js

@@ -10,6 +10,7 @@ import {
   isIdentityMatrix,
   multiplyMatrices,
   nodeMatrix,
+  parseSvgTransform,
   parseVectorSvg,
   rotateMatrix,
   scaleMatrix,
@@ -17,7 +18,7 @@ import {
   vectorDocumentToSvg,
   vectorNodeBounds,
   vectorPathWorldBezier
-} from "../chunk-NONDTTH7.js";
+} from "../chunk-3TLL5OID.js";
 import {
   bezierPathLength,
   bezierPathPointAtLength,
@@ -27,9 +28,13 @@ import {
 import {
   HistoryManager
 } from "../chunk-QVZZGT4X.js";
+import {
+  behaviorProgress,
+  motionSeedFromId
+} from "../chunk-3NYXDBBW.js";
 import {
   AnimationPlayer
-} from "../chunk-SHOVAHUB.js";
+} from "../chunk-JK6M6V7G.js";
 import {
   mixColorsOklab
 } from "../chunk-ZRJMJIQU.js";
@@ -42,8 +47,10 @@ import {
   ANIMATION_EASING_PRESETS,
   evaluateEasing,
   isAnimationEasing,
-  resolveEasing
-} from "../chunk-UB2OY7FD.js";
+  resolveEasing,
+  reverseCubicBezier,
+  springSettleMs
+} from "../chunk-AGR4P4UZ.js";
 
 // src/animation-editor/types.ts
 var MOTION_COMMAND_TYPES = [
@@ -59,11 +66,18 @@ var MOTION_COMMAND_TYPES = [
   "follow",
   "pulse",
   "shake",
+  "teeter",
+  "wave",
+  "wiggle",
+  "color-pulse",
   "effect",
   "wait"
 ];
-var MOTION_ENTER_STYLES = ["fade", "pop", "grow", "slide", "draw"];
-var MOTION_EXIT_STYLES = ["fade", "shrink", "slide", "undraw"];
+var MOTION_ENTER_STYLES = ["fade", "pop", "grow", "slide", "draw", "zoom", "rise", "wipe", "iris", "split"];
+var MOTION_REPEAT_MODES = ["loop", "mirror", "offset"];
+var MOTION_EXIT_STYLES = ["fade", "shrink", "slide", "undraw", "wipe"];
+var MOTION_IRIS_SHAPES = ["circle", "box"];
+var MOTION_SPLIT_ORIENTATIONS = ["horizontal", "vertical"];
 var MOTION_DIRECTIONS = ["up", "down", "left", "right"];
 var MOTION_DEFAULT_DURATIONS = {
   enter: 600,
@@ -77,12 +91,37 @@ var MOTION_DEFAULT_DURATIONS = {
   follow: 1400,
   pulse: 600,
   shake: 500,
+  teeter: 600,
+  wave: 1e3,
+  wiggle: 1500,
+  "color-pulse": 600,
   effect: 900
 };
 var MOTION_DEFAULT_HOLD = 600;
 var MOTION_CAMERA_MS = 1e3;
 var MOTION_DRAW_MS_PER_UNIT = 1.5;
 var MOTION_DRAW_RANGE = [500, 2500];
+function motionFlairPrimitive(command2) {
+  switch (command2.type) {
+    case "enter":
+      return `entrance.${command2.style ?? "fade"}`;
+    case "exit":
+      return `exit.${command2.style ?? "fade"}`;
+    case "pulse":
+    case "shake":
+    case "teeter":
+    case "wave":
+    case "wiggle":
+    case "color-pulse":
+      return `emphasis.${command2.type}`;
+    case "rotate":
+      return command2.by !== void 0 ? "emphasis.spin" : void 0;
+    case "follow":
+      return "path.follow";
+    default:
+      return void 0;
+  }
+}
 
 // src/animation-editor/issues.ts
 var MOTION_ISSUE_CODES = {
@@ -91,18 +130,20 @@ var MOTION_ISSUE_CODES = {
   "unknown-target": { severity: "error", wording: "A command names a node the artwork does not have." },
   "unknown-path": { severity: "error", wording: "A follow command names a path the artwork does not have." },
   "not-a-path": { severity: "error", wording: "A follow path must be a path node, not a group." },
+  "reveal-no-box": { severity: "warning", wording: "A wipe, iris or split cannot clip a node with no width or height (a lone straight line), so it fades instead." },
   "unknown-shape": { severity: "error", wording: "A morph names a shape the artwork does not have." },
   "unknown-effect": { severity: "error", wording: "An effect command names an effect the node does not have." },
   "unknown-effect-param": { severity: "error", wording: "An effect command names a parameter that is not a number of that effect." },
   "unknown-frame": { severity: "error", wording: "A camera frames a node the artwork does not have." },
   "invalid-camera": { severity: "error", wording: "A camera rectangle has no area." },
   "invalid-color": { severity: "error", wording: "A colour cannot be read." },
-  "paint-not-color": { severity: "warning", wording: "A style command recolours a gradient or empty paint, which only switches at the end." },
+  "paint-not-color": { severity: "warning", wording: "A style command recolours a gradient or empty paint, which only switches at the end, or a colour pulse has no solid paint to tint." },
   "overlap": { severity: "warning", wording: "Two commands change the same property of a node at the same time; the later one wins." },
   "enter-visible": { severity: "warning", wording: "A node enters while it is already showing, so it blinks out first." },
   "exit-hidden": { severity: "warning", wording: "A node exits or animates while it is hidden." },
   "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." },
   "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." },
@@ -160,23 +201,27 @@ ${problems.map((p) => `- ${p}`).join("\n")}`);
     this.problems = problems;
   }
 };
-var SCENE_KEYS = ["version", "name", "description", "artwork", "shots", "loop", "fps", "target", "controls", "presets"];
+var SCENE_KEYS = ["version", "name", "description", "artwork", "shots", "loop", "fps", "steps", "target", "controls", "presets"];
 var SHOT_KEYS = ["id", "label", "camera", "run", "hold"];
-var CAMERA_KEYS = ["x", "y", "width", "height", "frame", "padding", "ease", "ms"];
-var BASE_KEYS = ["type", "targets", "duration", "delay", "stagger", "with", "ease", "note"];
+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 = {
-  enter: [...BASE_KEYS, "style", "direction", "distance"],
+  enter: [...BASE_KEYS, "style", "direction", "distance", "scale", "shape", "orientation"],
   exit: [...BASE_KEYS, "style", "direction", "distance"],
   draw: [...BASE_KEYS, "from", "to"],
   move: [...BASE_KEYS, "by", "to"],
   rotate: [...BASE_KEYS, "by", "to"],
-  scale: [...BASE_KEYS, "to"],
+  scale: [...BASE_KEYS, "to", "geometric"],
   fade: [...BASE_KEYS, "to"],
   style: [...BASE_KEYS, "fill", "stroke", "strokeWidth"],
   morph: [...BASE_KEYS, "into"],
   follow: [...BASE_KEYS, "path", "rotate", "from", "to"],
   pulse: [...BASE_KEYS, "amount", "count"],
-  shake: [...BASE_KEYS, "amount", "count"],
+  shake: [...BASE_KEYS, "amount", "count", "axis"],
+  teeter: [...BASE_KEYS, "angle", "count"],
+  wave: [...BASE_KEYS, "amount", "count"],
+  wiggle: [...BASE_KEYS, "amount", "frequency", "octaves", "rotate", "seed"],
+  "color-pulse": [...BASE_KEYS, "color", "paint", "count"],
   effect: [...BASE_KEYS, "effect", "param", "to"],
   wait: ["type", "duration", "with", "note"]
 };
@@ -214,7 +259,13 @@ function commandShapeProblems(command2, where) {
   nonNegative("duration");
   nonNegative("delay");
   nonNegative("stagger");
-  if (command2.ease !== void 0 && !isAnimationEasing(command2.ease)) p(`"ease" is not an easing; use a preset such as "ease-in-out" or { "type": "cubic-bezier", \u2026 }.`);
+  if (command2.ease !== void 0 && !isAnimationEasing(command2.ease)) p(`"ease" is not an easing; use a preset such as "ease-in-out" or "spring-bouncy", or { "type": "cubic-bezier", \u2026 } or { "type": "spring", \u2026 }.`);
+  if (command2.repeat !== void 0) {
+    if (type === "enter" || type === "exit") p(`"repeat" is not for ${type} (it brings things in or out once); repeat an emphasis or a move instead.`);
+    else if (!(Number.isInteger(command2.repeat) && command2.repeat >= 1 && command2.repeat <= 1e3)) p(`"repeat" must be a whole number from 1 to 1000.`);
+  }
+  if (command2.repeatMode !== void 0 && !MOTION_REPEAT_MODES.includes(command2.repeatMode)) p(`"repeatMode" must be one of ${MOTION_REPEAT_MODES.join(", ")}.`);
+  if (command2.steps !== void 0 && !(isNum(command2.steps) && command2.steps > 0 && command2.steps <= 120)) p(`"steps" must be frames per second from above 0 to 120 (12 holds each pose for two frames at 24 fps).`);
   switch (type) {
     case "enter":
     case "exit": {
@@ -223,6 +274,9 @@ function commandShapeProblems(command2, where) {
         p(`"style" must be one of ${styles.join(", ")}${typeof command2.style === "string" ? ` (got ${namedWithSuggestion(command2.style, styles)})` : ""}.`);
       if (command2.direction !== void 0 && !MOTION_DIRECTIONS.includes(command2.direction)) p(`"direction" must be one of ${MOTION_DIRECTIONS.join(", ")}.`);
       optionalNumber("distance");
+      if (command2.scale !== void 0 && !(isNum(command2.scale) && command2.scale >= 0)) p(`"scale" must be a number \u2265 0 (the starting scale for pop and zoom).`);
+      if (command2.shape !== void 0 && !MOTION_IRIS_SHAPES.includes(command2.shape)) p(`"shape" must be one of ${MOTION_IRIS_SHAPES.join(", ")} (the opening of an iris).`);
+      if (command2.orientation !== void 0 && !MOTION_SPLIT_ORIENTATIONS.includes(command2.orientation)) p(`"orientation" must be one of ${MOTION_SPLIT_ORIENTATIONS.join(", ")} (the line a split opens from).`);
       break;
     }
     case "draw":
@@ -243,6 +297,7 @@ function commandShapeProblems(command2, where) {
       break;
     case "scale":
       if (!(isNum(command2.to) || isPoint(command2.to))) p(`"to" must be a number or { "x": number, "y": number }.`);
+      if (command2.geometric !== void 0 && typeof command2.geometric !== "boolean") p(`"geometric" must be true or false.`);
       break;
     case "fade":
       if (!(isNum(command2.to) && command2.to >= 0 && command2.to <= 1)) p(`"to" must be an opacity from 0 to 1.`);
@@ -264,8 +319,22 @@ function commandShapeProblems(command2, where) {
       break;
     case "pulse":
     case "shake":
+    case "teeter":
+    case "wave":
+    case "color-pulse":
       optionalNumber("amount");
+      optionalNumber("angle");
       if (command2.count !== void 0 && !(Number.isInteger(command2.count) && command2.count >= 1)) p(`"count" must be a whole number \u2265 1.`);
+      if (command2.axis !== void 0 && command2.axis !== "horizontal" && command2.axis !== "vertical") p(`"axis" must be "horizontal" or "vertical".`);
+      if (command2.color !== void 0 && typeof command2.color !== "string") p(`"color" must be a CSS colour.`);
+      if (command2.paint !== void 0 && command2.paint !== "fill" && command2.paint !== "stroke") p(`"paint" must be "fill" or "stroke".`);
+      break;
+    case "wiggle":
+      optionalNumber("amount");
+      optionalNumber("rotate");
+      if (command2.frequency !== void 0 && !(isNum(command2.frequency) && command2.frequency > 0)) p(`"frequency" must be a number of Hz > 0.`);
+      if (command2.octaves !== void 0 && !(Number.isInteger(command2.octaves) && command2.octaves >= 1 && command2.octaves <= 8)) p(`"octaves" must be a whole number from 1 to 8.`);
+      if (command2.seed !== void 0 && !(Number.isInteger(command2.seed) && command2.seed >= 0)) p(`"seed" must be a whole number \u2265 0.`);
       break;
     case "effect":
       if (typeof command2.effect !== "string" || !command2.effect) p(`"effect" must be the id of one of the node's effects.`);
@@ -294,6 +363,7 @@ function shotShapeProblems(shot, where) {
       } else if (!isRect) problems.push(`${name} camera: give { x, y, width, height } or { frame: "<node id>" }.`);
       if (c.ease !== void 0 && !isAnimationEasing(c.ease)) problems.push(`${name} camera: "ease" is not an easing.`);
       if (c.ms !== void 0 && !(isNum(c.ms) && c.ms >= 0)) problems.push(`${name} camera: "ms" must be a number \u2265 0.`);
+      if (c.geometric !== void 0 && typeof c.geometric !== "boolean") problems.push(`${name} camera: "geometric" must be true or false.`);
     }
   }
   if (!Array.isArray(shot.run)) problems.push(`${name}: "run" must be a list of commands (it may be empty).`);
@@ -312,6 +382,7 @@ 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.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.');
   if (input.controls !== void 0) {
@@ -358,7 +429,7 @@ function indexMotionNodes(nodes) {
       const local = vectorNodeBounds(node);
       const bounds = vectorNodeBounds(node, parentWorld);
       const center = local ? { x: local.x + local.width / 2, y: local.y + local.height / 2 } : { x: 0, y: 0 };
-      if (!out.has(node.id)) out.set(node.id, { node, ancestors, parentWorld, center, bounds });
+      if (!out.has(node.id)) out.set(node.id, { node, ancestors, parentWorld, center, bounds, box: local });
       if (node.type === "group") walk(node.children, multiplyMatrices(nodeMatrix(node), parentWorld), [...ancestors, node.id]);
     }
   };
@@ -375,6 +446,56 @@ function firstPaint(node, key) {
   }
   return void 0;
 }
+function strokeReach(node) {
+  let reach = 0;
+  for (const p of node.type === "path" ? [node] : collectPathNodes(node)) {
+    if (p.stroke == null || p.stroke === "none") continue;
+    const width = p.strokeWidth ?? 1;
+    reach = Math.max(reach, p.strokeAlign === "outside" ? width : p.strokeAlign === "inside" ? 0 : width / 2);
+  }
+  return reach;
+}
+function motionRevealPadding(entry) {
+  const box = entry.box;
+  if (!box || !(box.width > 0) || !(box.height > 0)) return null;
+  const s = strokeReach(entry.node);
+  return [Math.min(1, s / box.width + 0.02), Math.min(1, s / box.height + 0.02)];
+}
+var clipRound = (n) => Math.round(n * 1e4) / 1e4 || 0;
+function revealFull(property, [px, py]) {
+  return (property === "clipRect" ? [-px, -py, 1 + 2 * px, 1 + 2 * py] : [0.5, 0.5, Math.hypot(0.5 + px, 0.5 + py)]).map(clipRound);
+}
+var OPPOSITE = { up: "down", down: "up", left: "right", right: "left" };
+function motionRevealClip(entry, reveal) {
+  const pad = motionRevealPadding(entry);
+  if (!pad) return null;
+  const [px, py] = pad;
+  const [w, h] = [1 + 2 * px, 1 + 2 * py];
+  const rect = (from, to) => ({ property: "clipRect", from: from.map(clipRound), to: to.map(clipRound) });
+  if (reveal.style === "iris") {
+    if (reveal.shape === "box") return rect([0.5, 0.5, 0, 0], [-px, -py, w, h]);
+    return { property: "clipCircle", from: [0.5, 0.5, 0], to: revealFull("clipCircle", pad) };
+  }
+  if (reveal.style === "split") {
+    if (reveal.orientation === "vertical") return rect([0.5, -py, 0, h], [-px, -py, w, h]);
+    return rect([-px, 0.5, w, 0], [-px, -py, w, h]);
+  }
+  const direction = reveal.direction ?? "right";
+  if (reveal.hide) {
+    const shown = motionRevealClip(entry, { style: "wipe", direction: OPPOSITE[direction] });
+    return { ...shown, from: shown.to, to: shown.from };
+  }
+  switch (direction) {
+    case "right":
+      return rect([-px, -py, 0, h], [-px, -py, w, h]);
+    case "left":
+      return rect([1 + px, -py, 0, h], [-px, -py, w, h]);
+    case "down":
+      return rect([-px, -py, w, 0], [-px, -py, w, h]);
+    case "up":
+      return rect([-px, 1 + py, w, 0], [-px, -py, w, h]);
+  }
+}
 function motionRestValue(entry, property, artwork) {
   const node = entry?.node;
   switch (property) {
@@ -402,6 +523,11 @@ function motionRestValue(entry, property, artwork) {
     }
     case "shape":
       return node?.id ?? "";
+    case "clipRect":
+    case "clipCircle": {
+      const pad = entry && motionRevealPadding(entry);
+      return pad ? revealFull(property, pad) : [];
+    }
     case "camera":
       return [0, 0, artwork.width, artwork.height];
   }
@@ -423,16 +549,36 @@ function interpolateMotionValue(from, to, u) {
 }
 function segmentProgress(segment, time) {
   const span = segment.end - segment.start;
-  const u = span <= 0 ? 1 : Math.min(1, Math.max(0, (time - segment.start) / span));
-  return { u, eased: segment.wave ? u : evaluateEasing(segment.ease, u, span) };
+  let elapsed = time - segment.start;
+  if (segment.steps && segment.steps > 0 && elapsed < span) elapsed = Math.floor(elapsed * segment.steps / 1e3 + 1e-9) / segment.steps * 1e3;
+  const u = span <= 0 ? 1 : Math.min(1, Math.max(0, elapsed / span));
+  return { u, eased: evaluateEasing(segment.ease, segment.reverse ? 1 - u : u, span) };
 }
-function segmentValue(segment, time) {
-  const { u, eased } = segmentProgress(segment, time);
-  const v = interpolateMotionValue(segment.from, segment.to, eased);
-  if (!segment.wave || typeof v !== "number") return v;
-  const { kind, amount, count } = segment.wave;
-  if (kind === "pulse") return v * (1 + amount * Math.sin(Math.PI * u * count) ** 2);
-  return v + amount * Math.sin(2 * Math.PI * u * count) * (1 - u);
+function geometricValue(from, to, e) {
+  const grow = (a, b) => a > 0 && b > 0 ? a * (b / a) ** e : void 0;
+  if (typeof from === "number" && typeof to === "number") return grow(from, to);
+  if (Array.isArray(from) && Array.isArray(to) && from.length === 4 && to.length === 4) {
+    const [x0, y0, w0, h0] = from;
+    const [x1, y1, w1, h1] = to;
+    const w = grow(w0, w1);
+    const h = grow(h0, h1);
+    if (w === void 0 || h === void 0) return void 0;
+    const f = Math.abs(w1 - w0) > 1e-9 ? (w - w0) / (w1 - w0) : e;
+    const cx = x0 + w0 / 2 + (x1 + w1 / 2 - x0 - w0 / 2) * f;
+    const cy = y0 + h0 / 2 + (y1 + h1 / 2 - y0 - h0 / 2) * f;
+    return [cx - w / 2, cy - h / 2, w, h];
+  }
+  return void 0;
+}
+function segmentValue(segment, time, raw = false) {
+  const { eased } = segmentProgress(segment, time);
+  if (segment.geometric && !segment.behavior) {
+    const g = geometricValue(segment.from, segment.to, eased);
+    if (g !== void 0) return g;
+  }
+  if (!segment.behavior || raw) return interpolateMotionValue(segment.from, segment.to, eased);
+  const p = behaviorProgress(segment.behavior, eased, segment.index ?? 0, segment.end - segment.start);
+  return typeof segment.from === "string" ? interpolateMotionValue(segment.from, segment.to, Math.min(1, Math.max(0, p))) : interpolateMotionValue(segment.from, segment.to, p);
 }
 function activeSegment(track, time) {
   if (!track?.length) return void 0;
@@ -440,10 +586,10 @@ function activeSegment(track, time) {
   for (const s of track) if (s.start <= time && (!found || s.start >= found.start)) found = s;
   return found;
 }
-function trackValue(track, time) {
+function trackValue(track, time, raw = false) {
   if (!track?.length) return void 0;
   const s = activeSegment(track, time);
-  if (s) return segmentValue(s, time);
+  if (s) return segmentValue(s, time, raw);
   let first = track[0];
   for (const t of track) if (t.start < first.start) first = t;
   return first.from;
@@ -480,9 +626,21 @@ function motionPathLength(node, parentWorld = IDENTITY_MATRIX) {
   }
   return longest;
 }
+function motionCommandRepeat(command2) {
+  if (command2.type === "wait" || command2.type === "enter" || command2.type === "exit") return 1;
+  const n = command2.repeat ?? 1;
+  return Number.isInteger(n) && n >= 1 ? n : 1;
+}
 function motionCommandDuration(command2, scene, target) {
+  return motionCycleDuration(command2, scene, target) * motionCommandRepeat(command2);
+}
+function motionCycleDuration(command2, scene, target) {
   if (command2.type === "wait") return command2.duration;
   if (command2.duration !== void 0) return command2.duration;
+  if (command2.ease !== void 0) {
+    const ease = resolveEasing(command2.ease);
+    if (ease !== "hold" && ease.type === "spring") return springSettleMs(ease);
+  }
   if (command2.type === "draw" || command2.type === "enter" && command2.style === "draw" || command2.type === "exit" && command2.style === "undraw") {
     const entry = target ? indexMotionNodes(scene.artwork.nodes).get(target) : void 0;
     const length = entry ? motionPathLength(entry.node) : 0;
@@ -511,7 +669,7 @@ function compileMotionScene(scene) {
       const rect = resolveMotionCamera(shot.camera, scene);
       if (rect && rect.width > 0 && rect.height > 0) {
         const ms = index === 0 ? 0 : shot.camera.ms ?? MOTION_CAMERA_MS;
-        cameraMoves.push({ shot: shot.id, start, end: start + ms, to: rect, ease: shot.camera.ease ?? MOTION_EASE_IN_OUT });
+        cameraMoves.push({ shot: shot.id, start, end: start + ms, to: rect, ease: shot.camera.ease ?? MOTION_EASE_IN_OUT, geometric: shot.camera.geometric === true });
         cursor = start + ms;
       }
     }
@@ -552,7 +710,7 @@ function compileMotionScene(scene) {
     jobs.push({
       start: move.start,
       order: order++,
-      run: () => push({ node: "", property: "camera", start: move.start, end: move.end, from: valueAt("", "camera", move.start), to: [move.to.x, move.to.y, move.to.width, move.to.height], ease: move.ease, shot: move.shot, command: -1 })
+      run: () => push({ node: "", property: "camera", start: move.start, end: move.end, from: valueAt("", "camera", move.start), to: [move.to.x, move.to.y, move.to.width, move.to.height], ease: move.ease, shot: move.shot, command: -1, ...move.geometric ? { geometric: true } : {} })
     });
   }
   for (const timing of commands) {
@@ -563,11 +721,37 @@ function compileMotionScene(scene) {
       const entry = nodes.get(target);
       if (!entry) return;
       const start = timing.start + k * (command2.stagger ?? 0);
-      const duration2 = motionCommandDuration(command2, scene, target);
-      jobs.push({ start, order: order++, run: () => compileCommand(command2, target, entry, start, duration2, timing) });
+      const cycle = motionCycleDuration(command2, scene, target);
+      jobs.push({ start, order: order++, run: () => compileRepeated(command2, target, entry, start, cycle, timing) });
     });
   }
   jobs.sort((a, b) => a.start - b.start || a.order - b.order).forEach((job) => job.run());
+  function compileRepeated(command2, node, entry, start, cycle, timing) {
+    const first = segments.length;
+    compileCommand(command2, node, entry, start, cycle, timing);
+    const made = segments.slice(first);
+    const steps = command2.steps ?? scene.steps;
+    if (steps && steps > 0) for (const s of made) s.steps = steps;
+    const n = motionCommandRepeat(command2);
+    const mode = command2.repeatMode ?? "loop";
+    const shift = (v, by, k) => {
+      if (typeof v === "number" && typeof by === "number") return v + by * k;
+      if (Array.isArray(v) && Array.isArray(by) && v.length === by.length) return v.map((x, i) => x + by[i] * k);
+      return v;
+    };
+    for (let k = 1; k < n; k++) {
+      const at = start + k * cycle;
+      for (const s of made) {
+        if (mode === "mirror" && k % 2 === 1) {
+          push({ ...s, start: at + (start + cycle - s.end), end: at + (start + cycle - s.start), reverse: !s.reverse });
+          continue;
+        }
+        const delta = typeof s.from === "number" && typeof s.to === "number" ? s.to - s.from : Array.isArray(s.from) && Array.isArray(s.to) && s.from.length === s.to.length ? s.to.map((x, i) => x - s.from[i]) : 0;
+        const by = mode === "offset" ? delta : 0;
+        push({ ...s, start: at + (s.start - start), end: at + (s.end - start), from: shift(s.from, by, k), to: shift(s.to, by, k) });
+      }
+    }
+  }
   function compileCommand(command2, node, entry, start, duration2, timing) {
     const end = start + duration2;
     const where = { shot: timing.shot, command: timing.command };
@@ -582,15 +766,27 @@ function compileMotionScene(scene) {
       case "enter": {
         const style = command2.style ?? "fade";
         const opacity = rest("opacity");
+        const reveal = style === "wipe" ? motionRevealClip(entry, { style, direction: command2.direction }) : style === "iris" ? motionRevealClip(entry, { style, shape: command2.shape }) : style === "split" ? motionRevealClip(entry, { style, orientation: command2.orientation }) : null;
+        for (const p of ["clipRect", "clipCircle"]) if (p !== reveal?.property && tracks.has(motionTrackKey(node, p))) seg(p, rest(p), "linear", start, start);
+        if (reveal) {
+          seg("opacity", opacity, "linear", start, start);
+          seg(reveal.property, reveal.to, ease ?? MOTION_EASE_OUT, start, end, { from: reveal.from });
+          break;
+        }
         if (style === "draw") {
           seg("drawEnd", 1, ease ?? MOTION_EASE_IN_OUT, start, start + duration2 * 0.75, { from: 0 });
           seg("fillOpacity", 1, MOTION_EASE_OUT, start + duration2 * 0.6, end, { from: 0 });
           break;
         }
-        if (style === "pop") {
-          seg("opacity", opacity, MOTION_EASE_OUT, start, start + duration2 * 0.4, { from: 0 });
-          seg("scaleX", 1, ease ?? "ease-out-back", start, end, { from: 0.5 });
-          seg("scaleY", 1, ease ?? "ease-out-back", start, end, { from: 0.5 });
+        if (style === "pop" || style === "zoom") {
+          const from = command2.scale ?? (style === "pop" ? 0.5 : 1.6);
+          seg("opacity", opacity, MOTION_EASE_OUT, start, start + duration2 * (style === "pop" ? 0.4 : 0.5), { from: 0 });
+          seg("scaleX", 1, ease ?? (style === "pop" ? "ease-out-back" : MOTION_EASE_OUT), start, end, { from });
+          seg("scaleY", 1, ease ?? (style === "pop" ? "ease-out-back" : MOTION_EASE_OUT), start, end, { from });
+        } else if (style === "rise") {
+          const y = num("y");
+          seg("opacity", opacity, MOTION_EASE_OUT, start, start + duration2 * 0.5, { from: 0 });
+          seg("y", y, ease ?? "ease-out-back", start, end, { from: y + (command2.distance ?? 20) });
         } else if (style === "grow") {
           seg("opacity", opacity, MOTION_EASE_OUT, start, start + duration2 * 0.3, { from: 0 });
           seg("scaleX", 1, ease ?? MOTION_EASE_OUT, start, end, { from: 0 });
@@ -608,7 +804,9 @@ function compileMotionScene(scene) {
       }
       case "exit": {
         const style = command2.style ?? "fade";
-        if (style === "undraw") {
+        const wipe = style === "wipe" ? motionRevealClip(entry, { style, direction: command2.direction, hide: true }) : null;
+        if (wipe) seg(wipe.property, wipe.to, ease ?? "ease-in", start, end, { from: wipe.from });
+        else if (style === "undraw") {
           seg("fillOpacity", 0, "ease-in", start, start + duration2 * 0.4);
           seg("drawEnd", 0, ease ?? MOTION_EASE_IN_OUT);
         } else if (style === "shrink") {
@@ -624,13 +822,11 @@ function compileMotionScene(scene) {
         } else seg("opacity", 0, ease ?? "ease-in");
         break;
       }
-      case "draw":
-        {
-          const drawn = tracks.has(motionTrackKey(node, "drawEnd"));
-          seg("drawEnd", command2.to ?? 1, ease ?? MOTION_EASE_IN_OUT, start, end, command2.from !== void 0 ? { from: command2.from } : drawn ? {} : { from: 0 });
-          break;
-        }
+      case "draw": {
+        const drawn = tracks.has(motionTrackKey(node, "drawEnd"));
+        seg("drawEnd", command2.to ?? 1, ease ?? MOTION_EASE_IN_OUT, start, end, command2.from !== void 0 ? { from: command2.from } : drawn ? {} : { from: 0 });
         break;
+      }
       case "move": {
         const e = ease ?? MOTION_EASE_IN_OUT;
         let dx = command2.by?.x ?? 0;
@@ -650,8 +846,9 @@ function compileMotionScene(scene) {
         break;
       case "scale": {
         const to = typeof command2.to === "number" ? { x: command2.to, y: command2.to } : command2.to;
-        seg("scaleX", to.x, ease ?? MOTION_EASE_IN_OUT);
-        seg("scaleY", to.y, ease ?? MOTION_EASE_IN_OUT);
+        const geometric = command2.geometric ? { geometric: true } : {};
+        seg("scaleX", to.x, ease ?? MOTION_EASE_IN_OUT, start, end, geometric);
+        seg("scaleY", to.y, ease ?? MOTION_EASE_IN_OUT, start, end, geometric);
         break;
       }
       case "fade":
@@ -668,14 +865,35 @@ function compileMotionScene(scene) {
       case "follow":
         seg("follow", command2.to ?? 1, ease ?? MOTION_EASE_IN_OUT, start, end, { from: command2.from ?? 0, path: command2.path, rotate: command2.rotate ?? false });
         break;
+      // Emphasis: a change toward a peak that a behaviour swings round (as Flair's primitives do).
       case "pulse": {
-        const wave = { kind: "pulse", amount: command2.amount ?? 0.15, count: command2.count ?? 1 };
-        seg("scaleX", num("scaleX"), "linear", start, end, { wave });
-        seg("scaleY", num("scaleY"), "linear", start, end, { wave });
+        const behavior = { type: "pulse", count: command2.count ?? 1 };
+        const k = 1 + (command2.amount ?? 0.15);
+        seg("scaleX", num("scaleX") * k, ease ?? "linear", start, end, { behavior });
+        seg("scaleY", num("scaleY") * k, ease ?? "linear", start, end, { behavior });
         break;
       }
-      case "shake":
-        seg("x", num("x"), "linear", start, end, { wave: { kind: "shake", amount: command2.amount ?? 8, count: command2.count ?? 3 } });
+      case "shake": {
+        const p = command2.axis === "vertical" ? "y" : "x";
+        seg(p, num(p) + (command2.amount ?? 8), ease ?? "linear", start, end, { behavior: { type: "oscillate", count: command2.count ?? 3, decay: 1 } });
+        break;
+      }
+      case "teeter":
+        seg("rotation", num("rotation") + (command2.angle ?? 8), ease ?? "linear", start, end, { behavior: { type: "oscillate", count: command2.count ?? 3, decay: 1 } });
+        break;
+      case "wave":
+        seg("y", num("y") - (command2.amount ?? 6), ease ?? "linear", start, end, { behavior: { type: "oscillate", count: command2.count ?? 2 } });
+        break;
+      case "wiggle": {
+        const behavior = { type: "wriggle", frequency: command2.frequency ?? 3, octaves: command2.octaves ?? 2, seed: command2.seed || motionSeedFromId(node) };
+        const amount = command2.amount ?? 6;
+        seg("x", num("x") + amount, ease ?? "linear", start, end, { behavior, index: 0 });
+        seg("y", num("y") + amount, ease ?? "linear", start, end, { behavior, index: 1 });
+        if (command2.rotate) seg("rotation", num("rotation") + command2.rotate, ease ?? "linear", start, end, { behavior, index: 2 });
+        break;
+      }
+      case "color-pulse":
+        seg(command2.paint ?? "fill", command2.color ?? "#f59e0b", ease ?? "linear", start, end, { behavior: { type: "pulse", count: command2.count ?? 1 } });
         break;
       case "effect":
         seg(`effect:${command2.effect}:${command2.param}`, command2.to, ease ?? MOTION_EASE_IN_OUT);
@@ -757,44 +975,53 @@ function shapeAt(entry, timeline, nodes, time) {
   if (u >= 1) return b === entry ? null : shapeIn(entry, b);
   return morphBetween(shapeIn(entry, a), shapeIn(entry, b)).at(u);
 }
+function motionFollowRoute(entry, path) {
+  if (!path || path.node.type !== "path") return null;
+  try {
+    return transformBezierPath(vectorPathWorldBezier(path.node, path.parentWorld, { effects: false }), invertMatrix(entry.parentWorld));
+  } catch {
+    return null;
+  }
+}
 function followAt(entry, timeline, nodes, time) {
   const track = timeline.tracks.get(motionTrackKey(entry.node.id, "follow"));
   const s = activeSegment(track, time) ?? track?.[0];
   if (!s?.path) return null;
-  const path = nodes.get(s.path);
-  if (!path || path.node.type !== "path") return null;
+  const route = motionFollowRoute(entry, nodes.get(s.path));
   const progress = Number(trackValue(track, time));
-  if (!(progress >= 0)) return null;
+  if (!route || !(progress >= 0)) return null;
   try {
-    const bezier = vectorPathWorldBezier(path.node, path.parentWorld, { effects: false });
-    const at = bezierPathPointAtLength(bezier, Math.min(1, Math.max(0, progress)) * bezierPathLength(bezier));
+    const at = bezierPathPointAtLength(route, Math.min(1, Math.max(0, progress)) * bezierPathLength(route));
     if (!at) return null;
-    const p = applyMatrix(invertMatrix(entry.parentWorld), { x: at.point[0], y: at.point[1] });
-    return { x: p.x, y: p.y, angle: s.rotate ? at.angle * 180 / Math.PI : 0 };
+    return { x: at.point[0], y: at.point[1], angle: s.rotate ? at.angle * 180 / Math.PI : 0 };
   } catch {
     return null;
   }
 }
-function motionNodeOffset(entry, timeline, time, nodes = indexMotionNodes([entry.node])) {
+function motionNodeOffset(entry, timeline, time, nodes = indexMotionNodes([entry.node]), raw = false, follow = true) {
   const read = (p, rest) => {
-    const v = trackValue(timeline.tracks.get(motionTrackKey(entry.node.id, p)), time);
+    const v = trackValue(timeline.tracks.get(motionTrackKey(entry.node.id, p)), time, raw);
     return typeof v === "number" ? v : rest;
   };
-  if (!TRANSFORM_PROPS.some((p) => timeline.tracks.has(motionTrackKey(entry.node.id, p)))) return null;
-  let dx = read("x", 0);
-  let dy = read("y", 0);
-  let rotation = read("rotation", 0);
+  if (!TRANSFORM_PROPS.some((p) => (follow || p !== "follow") && timeline.tracks.has(motionTrackKey(entry.node.id, p)))) return null;
+  const dx = read("x", 0);
+  const dy = read("y", 0);
+  const rotation = read("rotation", 0);
   const scaleX = read("scaleX", 1);
   const scaleY = read("scaleY", 1);
-  const follow = followAt(entry, timeline, nodes, time);
-  if (follow) {
-    dx += follow.x - entry.center.x;
-    dy += follow.y - entry.center.y;
-    rotation += follow.angle;
-  }
   const c = entry.center;
-  const matrix = multiplyMatrices(multiplyMatrices(scaleMatrix(scaleX, scaleY, c), rotateMatrix(rotation, c)), translateMatrix(dx, dy));
-  return { matrix, dx, dy, rotation, scaleX, scaleY };
+  let matrix = multiplyMatrices(multiplyMatrices(scaleMatrix(scaleX, scaleY, c), rotateMatrix(rotation, c)), translateMatrix(dx, dy));
+  const along = follow ? followAt(entry, timeline, nodes, time) : null;
+  if (along) matrix = multiplyMatrices(matrix, multiplyMatrices(multiplyMatrices(translateMatrix(-c.x, -c.y), rotateMatrix(along.angle)), translateMatrix(along.x, along.y)));
+  return { matrix, dx, dy, rotation, scaleX, scaleY, follow: along };
+}
+function motionNodeClips(id, timeline, time) {
+  const out = [];
+  const rect = trackValue(timeline.tracks.get(motionTrackKey(id, "clipRect")), time);
+  if (Array.isArray(rect) && rect.length === 4) out.push({ shape: "rect", x: tidy(rect[0]), y: tidy(rect[1]), width: Math.max(0, tidy(rect[2])), height: Math.max(0, tidy(rect[3])) });
+  const circle = trackValue(timeline.tracks.get(motionTrackKey(id, "clipCircle")), time);
+  if (Array.isArray(circle) && circle.length === 3) out.push({ shape: "circle", cx: tidy(circle[0]), cy: tidy(circle[1]), r: Math.max(0, tidy(circle[2])) });
+  return out;
 }
 function motionFrameAt(scene, time, options = {}) {
   const s = applyMotionControlValues(scene, options.values);
@@ -803,12 +1030,15 @@ function motionFrameAt(scene, time, options = {}) {
   const drawOn = options.draw !== false;
   const value = (id, p) => trackValue(timeline.tracks.get(motionTrackKey(id, p)), time);
   const animated = new Set(timeline.segments.map((seg) => seg.node));
+  const clips = {};
   const visit = (node) => {
     let out = node.type === "group" ? { ...node, children: node.children.map(visit) } : node;
     if (!animated.has(node.id)) return out;
     const entry = nodes.get(node.id);
     if (!entry) return out;
     const id = node.id;
+    const clip = motionNodeClips(id, timeline, time);
+    if (clip.length) clips[id] = clip;
     const shape = shapeAt(entry, timeline, nodes, time);
     if (shape) {
       const { name, visible, opacity: opacity2, locked } = node;
@@ -872,11 +1102,19 @@ function motionFrameAt(scene, time, options = {}) {
   const document = { ...s.artwork, nodes: s.artwork.nodes.map(visit) };
   const cam = trackValue(timeline.tracks.get(motionTrackKey("", "camera")), time);
   const box = Array.isArray(cam) ? cam : [0, 0, s.artwork.width, s.artwork.height];
-  return { time, document, camera: { x: tidy(box[0]), y: tidy(box[1]), width: tidy(box[2]), height: tidy(box[3]) } };
+  return { time, document, camera: { x: tidy(box[0]), y: tidy(box[1]), width: tidy(box[2]), height: tidy(box[3]) }, clips };
+}
+function motionClipAttrs(clip) {
+  const { shape: _shape, ...attrs } = clip;
+  return attrs;
 }
 function motionFrameToSvg(scene, time, options = {}) {
   const frame = motionFrameAt(scene, time, options);
-  return withViewBox(vectorDocumentToSvg(frame.document, options), frame.camera);
+  const prefix = options.idPrefix ?? "vg-";
+  const wrap = { ...options.wrap };
+  for (const [id, clips] of Object.entries(frame.clips))
+    wrap[id] = [...wrap[id] ?? [], ...clips.map((clip, i) => ({ clip: { id: `${prefix}reveal-${id}-${i}`, shape: clip.shape, attrs: motionClipAttrs(clip) } }))];
+  return withViewBox(vectorDocumentToSvg(frame.document, { ...options, wrap }), frame.camera);
 }
 function withViewBox(svg, box) {
   const f = (n) => String(Math.round(n * 1e3) / 1e3);
@@ -911,6 +1149,11 @@ function visibleAt(timeline, id, time, node) {
   if (node.visible === false) return false;
   if (num("opacity", node.opacity ?? 1) <= 0.01) return false;
   if (Math.abs(num("scaleX", 1) * num("scaleY", 1)) <= 1e-4) return false;
+  const clip = (p) => trackValue(timeline.tracks.get(motionTrackKey(id, p)), time);
+  const rect = clip("clipRect");
+  if (Array.isArray(rect) && (rect[2] <= 1e-4 || rect[3] <= 1e-4)) return false;
+  const circle = clip("clipCircle");
+  if (Array.isArray(circle) && circle[2] <= 1e-4) return false;
   const hasFill = node.type === "path" ? !!node.fill && node.fill !== "none" : collectPathNodes(node).some((p) => p.fill && p.fill !== "none");
   return num("drawEnd", 1) > 0.01 || hasFill && num("fillOpacity", 1) > 0.01;
 }
@@ -947,9 +1190,23 @@ function checkMotionScene(scene) {
       const timing = timeline.commands.find((c) => c.shot === shot.id && c.command === i);
       if (timing && timing.duration > 0 && timing.duration < MOTION_MIN_CHANGE_MS)
         issues.push(motionIssue("too-fast", `This ${command2.type} lasts ${timing.duration} ms, too quick to follow; make it at least ${MOTION_MIN_CHANGE_MS} ms.`, { ...where, measured: timing.duration, needed: MOTION_MIN_CHANGE_MS, unit: "ms", ids: targets }));
+      if (command2.duration !== void 0 && command2.ease !== void 0) {
+        const ease = resolveEasing(command2.ease);
+        if (ease !== "hold" && ease.type === "spring") {
+          const settle = springSettleMs(ease);
+          if (command2.duration < settle * 0.9)
+            issues.push(motionIssue("spring-cut-short", `This ${command2.type}'s spring takes ${settle} ms to settle but lasts ${command2.duration} ms, so it jumps to its end; leave "duration" out (the spring sets it) or make it at least ${settle} ms.`, { ...where, measured: command2.duration, needed: settle, unit: "ms", ids: targets }));
+        }
+      }
       if (command2.type === "follow" && known(command2.path, "unknown-path", "path", where) && nodes.get(command2.path).node.type !== "path")
         issues.push(motionIssue("not-a-path", `"${command2.path}" is a group; follow a single path node.`, { ...where, ids: [command2.path] }));
       if (command2.type === "morph") known(command2.into, "unknown-shape", "shape", where);
+      const style = command2.type === "enter" || command2.type === "exit" ? command2.style : void 0;
+      if (style === "wipe" || style === "iris" || style === "split") {
+        for (const id of targets)
+          if (!motionRevealPadding(nodes.get(id)))
+            issues.push(motionIssue("reveal-no-box", `"${id}" has no width or height (a straight line), so a ${style} cannot clip it and it fades instead; use style "${command2.type === "enter" ? "draw" : "undraw"}" for a line.`, { ...where, ids: [id] }));
+      }
       if (command2.type === "style") {
         for (const key of ["fill", "stroke"]) {
           const color = command2[key];
@@ -966,6 +1223,18 @@ function checkMotionScene(scene) {
           }
         }
       }
+      if (command2.type === "color-pulse") {
+        const key = command2.paint ?? "fill";
+        const color = command2.color ?? "#f59e0b";
+        if (normalizeTokenColor(color) === null) issues.push(motionIssue("invalid-color", `color "${color}" is not a colour this editor reads; use hex ("#0ea5e9"), rgb() or rgba().`, where));
+        else
+          for (const id of targets) {
+            const node = nodes.get(id).node;
+            const paths = node.type === "path" ? [node] : collectPathNodes(node);
+            if (paths.some((p) => typeof p[key] !== "string"))
+              issues.push(motionIssue("paint-not-color", `"${id}" has a gradient or no ${key}, so a colour pulse cannot tint it; give it a solid ${key} or pulse the ${key === "fill" ? "stroke" : "fill"}.`, { ...where, ids: [id] }));
+          }
+      }
       if (command2.type === "effect") {
         for (const id of targets) {
           const node = nodes.get(id).node;
@@ -1086,6 +1355,11 @@ function applyOne(scene, edit) {
       else if (edit.description !== void 0) next.description = edit.description;
       if (edit.loop !== void 0) next.loop = edit.loop;
       if (edit.fps !== void 0) next.fps = edit.fps;
+      if (edit.steps === null) delete next.steps;
+      else if (edit.steps !== void 0) {
+        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;
+      }
       if (edit.target === null) delete next.target;
       else if (edit.target !== void 0) next.target = edit.target;
       return next;
@@ -1221,6 +1495,13 @@ var FLAIR_EASES = {
   "in-out": (t) => t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2,
   out: (t) => 1 - (1 - t) ** 3
 };
+var FLAIR_EXPORT_VERSION = "0.39";
+function flairAtLeast(version, min) {
+  const a = version.split(".").map((n) => parseInt(n, 10) || 0);
+  const b = min.split(".").map((n) => parseInt(n, 10) || 0);
+  for (let i = 0; i < Math.max(a.length, b.length); i++) if ((a[i] ?? 0) !== (b[i] ?? 0)) return (a[i] ?? 0) > (b[i] ?? 0);
+  return true;
+}
 function flairEaseFor(ease) {
   for (const name of ["linear", "out", "in-out"]) {
     let worst = 0;
@@ -1239,7 +1520,7 @@ function flairCurveFor(ease, curves = true) {
   if (resolved === "hold" || resolved.type !== "cubic-bezier") return void 0;
   return [resolved.x1, resolved.y1, resolved.x2, resolved.y2];
 }
-var overshoots = (ease) => typeof ease !== "string" && (ease[1] < 0 || ease[1] > 1 || ease[3] < 0 || ease[3] > 1);
+var overshoots = (ease) => typeof ease !== "string" && ("spring" in ease || ease[1] < 0 || ease[1] > 1 || ease[3] < 0 || ease[3] > 1);
 var TRANSFORM_PROPS2 = ["x", "y", "rotation", "scaleX", "scaleY", "follow"];
 var LINEAR_TRANSFORM = /* @__PURE__ */ new Set(["x", "y", "rotation", "scaleX", "scaleY"]);
 function hex6(color) {
@@ -1249,7 +1530,24 @@ function hex6(color) {
 function toFlairSvgMotion(scene, options = {}) {
   const fps = options.fps ?? scene.fps ?? 30;
   const precision = options.precision ?? 3;
-  const curves = options.curves ?? true;
+  const flair = options.flair ?? FLAIR_EXPORT_VERSION;
+  const curves = options.curves ?? flairAtLeast(flair, "0.36");
+  const behaviors = options.behaviors ?? flairAtLeast(flair, "0.38");
+  const springs = flairAtLeast(flair, "0.39");
+  const strobes = flairAtLeast(flair, "0.39");
+  const writeEase = (ease) => typeof ease === "string" || "spring" in ease ? ease : ease.map(round2);
+  const easeOf = (segment) => {
+    const resolved = resolveEasing(segment.ease);
+    if (resolved !== "hold" && resolved.type === "spring") {
+      if (!springs || segment.reverse) return void 0;
+      const { mass, stiffness, damping, velocity } = resolved;
+      return { spring: { mass, stiffness, damping, velocity } };
+    }
+    if (!segment.reverse) return flairCurveFor(segment.ease, curves);
+    const back = reverseCubicBezier(segment.ease);
+    return back && curves ? flairCurveFor(back, curves) : void 0;
+  };
+  const plays = (s) => (!s.behavior || behaviors) && (!s.steps || strobes) && !s.geometric;
   const round2 = (n) => Math.round(n * 10 ** precision) / 10 ** precision;
   const f = (n) => String(round2(n));
   const timeline = compileMotionScene(scene);
@@ -1264,26 +1562,72 @@ function toFlairSvgMotion(scene, options = {}) {
   };
   const animatedNodes = new Set(timeline.segments.map((s) => s.node).filter(Boolean));
   const pathsSeen = /* @__PURE__ */ new Set();
+  const wrap = {};
+  const routes = [];
+  const follows = [];
+  const usedIds = new Set(nodes.keys());
+  const freshId = (base) => {
+    let id = base;
+    for (let n = 2; usedIds.has(id); n++) id = `${base}-${n}`;
+    usedIds.add(id);
+    return id;
+  };
   for (const id of animatedNodes) {
     const entry = nodes.get(id);
     const node = entry.node;
+    const drawn = [...entry.ancestors.map((a) => nodes.get(a).node), node].every((n) => n.visible !== false);
+    for (const [p, name] of [["clipRect", "reveal"], ["clipCircle", "iris"]]) {
+      if (!drawn || !timeline.tracks.has(motionTrackKey(id, p))) continue;
+      const wrapper = freshId(`${id}--${name}`);
+      const clipId = freshId(`${wrapper}-clip`);
+      const shapeId = freshId(`${wrapper}-clip-shape`);
+      const clipAt = (t) => motionNodeClips(id, timeline, t).find((c) => c.shape === (p === "clipRect" ? "rect" : "circle"));
+      const rest = clipAt(0);
+      (wrap[id] ??= []).push({ id: wrapper, clip: { id: clipId, shapeId, shape: rest.shape, attrs: motionClipAttrs(rest) } });
+      channels.push({ id: shapeId, kind: "attrs", attrs: Object.keys(motionClipAttrs(rest)), segments: [...track(id, p)], exact: () => true, value: (t) => Object.values(motionClipAttrs(clipAt(t))).map((v) => Math.round(v * 1e4) / 1e4) });
+    }
+    const followSegments = track(id, "follow");
+    if (drawn && followSegments.length) {
+      const ids = /* @__PURE__ */ new Map();
+      for (const seg of followSegments) {
+        if (!seg.path || ids.has(seg.path)) continue;
+        const route = motionFollowRoute(entry, nodes.get(seg.path));
+        if (!route) continue;
+        const routeId = freshId(`${id}--follow-route`);
+        ids.set(seg.path, routeId);
+        routes.push(`<path id="${routeId}" d="${bezierPathToSvg(route, { precision })}" fill="none"/>`);
+      }
+      if (ids.size) {
+        const wrapper = freshId(`${id}--follow`);
+        const centre = freshId(`${id}--follow-centre`);
+        const c = entry.center;
+        const at = motionNodeOffset(entry, timeline, 0, nodes)?.follow;
+        const placed = at ? `translate(${f(at.x)} ${f(at.y)})${at.angle ? ` rotate(${f(at.angle)})` : ""}` : void 0;
+        (wrap[id] ??= []).push({ id: wrapper, ...placed ? { transform: placed } : {} }, { id: centre, transform: `translate(${f(-c.x)} ${f(-c.y)})` });
+        follows.push({ id, wrapper, routes: ids, segments: followSegments.filter((seg) => seg.path && ids.has(seg.path)) });
+      }
+    }
     if (timeline.tracks.has(motionTrackKey(id, "opacity")))
-      channels.push({ id, kind: "attr", attr: "opacity", segments: [...track(id, "opacity")], exact: (s) => !s.wave, value: (t) => round2(Math.min(1, Math.max(0, Number(trackValue(track(id, "opacity"), t))))) });
-    const transformSegments = TRANSFORM_PROPS2.flatMap((p) => track(id, p));
+      channels.push({ id, kind: "attr", attr: "opacity", segments: [...track(id, "opacity")], exact: plays, value: (t) => round2(Math.min(1, Math.max(0, Number(trackValue(track(id, "opacity"), t))))) });
+    const followed = follows.some((x) => x.id === id);
+    const transformSegments = TRANSFORM_PROPS2.flatMap((p) => followed && p === "follow" ? [] : track(id, p));
     if (transformSegments.length) {
       const base = node.transform ? ` matrix(${node.transform.map(f).join(" ")})` : "";
       const c = entry.center;
+      const transformAt = (t, raw) => {
+        const o = motionNodeOffset(entry, timeline, t, nodes, raw, !followed);
+        return `translate(${f(o.dx)} ${f(o.dy)}) rotate(${f(o.rotation)} ${f(c.x)} ${f(c.y)}) translate(${f(c.x)} ${f(c.y)}) scale(${f(o.scaleX)} ${f(o.scaleY)}) translate(${f(-c.x)} ${f(-c.y)})${base}`;
+      };
       channels.push({
         id,
         kind: "attr",
         attr: "transform",
         segments: transformSegments,
-        exact: (s) => LINEAR_TRANSFORM.has(s.property) && !s.wave,
+        exact: (s) => LINEAR_TRANSFORM.has(s.property) && plays(s),
         overshoot: true,
-        value: (t) => {
-          const o = motionNodeOffset(entry, timeline, t, nodes);
-          return `translate(${f(o.dx)} ${f(o.dy)}) rotate(${f(o.rotation)} ${f(c.x)} ${f(c.y)}) translate(${f(c.x)} ${f(c.y)}) scale(${f(o.scaleX)} ${f(o.scaleY)}) translate(${f(-c.x)} ${f(-c.y)})${base}`;
-        }
+        // x, y and the angle are the transform's numbers 0, 1 and 2 (`MotionSegment.index`).
+        value: (t) => transformAt(t, false),
+        raw: (t) => transformAt(t, true)
       });
     }
     const paths = node.type === "path" ? [node] : collectPathNodes(node);
@@ -1292,7 +1636,7 @@ function toFlairSvgMotion(scene, options = {}) {
       pathsSeen.add(path.id);
       const paint = (p, attr) => {
         const from = owner(path, p);
-        if (from) channels.push({ id: path.id, kind: "attr", attr, segments: [...track(from, p)], exact: () => true, value: (t) => hex6(trackValue(track(from, p), t)) });
+        if (from) channels.push({ id: path.id, kind: "attr", attr, segments: [...track(from, p)], exact: plays, value: (t) => hex6(trackValue(track(from, p), t)), raw: (t) => hex6(trackValue(track(from, p), t, true)) });
       };
       paint("fill", "fill");
       paint("stroke", "stroke");
@@ -1331,15 +1675,30 @@ function toFlairSvgMotion(scene, options = {}) {
   const animate = [];
   let sampled = 0;
   const same = (a, b) => JSON.stringify(a) === JSON.stringify(b);
-  const emit = (channel, delay, ms, from, to, ease) => {
-    const base = { ...channel.id ? { id: channel.id } : {}, ...delay > 0 ? { delay: round2(delay) } : {}, ms: round2(ms), ease: typeof ease === "string" ? ease : ease.map(round2) };
+  const emit = (channel, delay, ms, from, to, ease, segment) => {
+    const written = writeEase(ease);
+    const base = {
+      ...channel.id ? { id: channel.id } : {},
+      ...delay > 0 ? { delay: round2(delay) } : {},
+      ms: round2(ms),
+      ease: written,
+      ...segment?.behavior ? { behavior: segment.behavior } : {},
+      ...segment?.steps ? { strobe: segment.steps } : {}
+    };
     if (channel.kind === "view") animate.push({ ...base, view: to });
     else if (channel.kind === "draw") animate.push({ ...base, draw: [from, to] });
-    else animate.push({ ...base, attrs: { [channel.attr]: [from, to] } });
+    else if (channel.kind === "attrs") {
+      const [a, b] = [from, to];
+      const attrs = Object.fromEntries(channel.attrs.flatMap((name, k) => a[k] !== b[k] ? [[name, [a[k], b[k]]]] : []));
+      animate.push({ ...base, attrs });
+    } else animate.push({ ...base, attrs: { [channel.attr]: [from, to] } });
   };
   for (const channel of channels) {
     const cuts = channel.segments.filter((s) => s.end <= s.start);
-    for (const cut of cuts) emit(channel, cut.start, 0, channel.value(Math.max(0, cut.start - 1e-3)), channel.value(cut.start), "linear");
+    for (const cut of cuts) {
+      const [from, to] = [channel.value(Math.max(0, cut.start - 1e-3)), channel.value(cut.start)];
+      if (cut.start <= 0 || !same(from, to) || channel.kind === "view") emit(channel, cut.start, 0, from, to, "linear");
+    }
     const times = [...new Set(channel.segments.flatMap((s) => [s.start, s.end]))].sort((a, b) => a - b);
     for (let i = 0; i + 1 < times.length; i++) {
       const a = times[i];
@@ -1347,13 +1706,14 @@ function toFlairSvgMotion(scene, options = {}) {
       const active = channel.segments.filter((s) => s.start < b && s.end > a);
       if (!active.length) continue;
       const first = active[0];
-      const together = active.every((x) => x.start === a && x.end === b && channel.exact(x) && JSON.stringify(x.ease) === JSON.stringify(first.ease));
-      const curve = together ? flairCurveFor(first.ease, curves) : void 0;
+      const key = (x) => JSON.stringify([x.ease, x.behavior, x.reverse ?? false, x.steps ?? 0]);
+      const together = active.every((x) => x.start === a && x.end === b && channel.exact(x) && key(x) === key(first));
+      const curve = together ? easeOf(first) : void 0;
       const ease = curve && (!overshoots(curve) || channel.overshoot) ? curve : void 0;
       if (ease) {
         const from = channel.value(a);
-        const to = channel.value(b);
-        if (!same(from, to) || channel.kind === "view") emit(channel, a, b - a, from, to, ease);
+        const to = first.behavior ? (channel.raw ?? channel.value)(b) : channel.value(b);
+        if (!same(from, to) || channel.kind === "view") emit(channel, a, b - a, from, to, ease, first);
         continue;
       }
       const n = Math.max(1, Math.ceil((b - a) * fps / 1e3));
@@ -1370,8 +1730,30 @@ function toFlairSvgMotion(scene, options = {}) {
       }
     }
   }
+  for (const follow of follows) {
+    const starts = follow.segments.map((seg) => seg.start);
+    for (const seg of follow.segments) {
+      const along = { id: follow.wrapper, along: follow.routes.get(seg.path), ...seg.rotate ? { orient: true } : {} };
+      const progress = (t) => round2(Math.min(1, Math.max(0, Number(segmentValue(seg, t)))));
+      const curve = seg.end > seg.start ? plays(seg) ? easeOf(seg) : void 0 : "linear";
+      if (curve && !(overshoots(curve) && seg.rotate)) {
+        const ends = seg.reverse ? [Number(seg.to), Number(seg.from)] : [Number(seg.from), Number(seg.to)];
+        animate.push({ ...along, ...seg.start > 0 ? { delay: round2(seg.start) } : {}, ms: round2(seg.end - seg.start), ease: writeEase(curve), ...seg.steps ? { strobe: seg.steps } : {}, at: [round2(ends[0]), round2(ends[1])] });
+        continue;
+      }
+      const until = Math.min(seg.end, ...starts.filter((t) => t > seg.start));
+      const n = Math.max(1, Math.ceil((until - seg.start) * fps / 1e3));
+      for (let k = 1; k <= n; k++) {
+        const t0 = seg.start + (until - seg.start) * (k - 1) / n;
+        const t1 = seg.start + (until - seg.start) * k / n;
+        animate.push({ ...along, ...t0 > 0 ? { delay: round2(t0) } : {}, ms: round2(t1 - t0), ease: "linear", at: [progress(t0), progress(t1)] });
+        sampled++;
+      }
+    }
+  }
   animate.sort((x, y) => (x.delay ?? 0) - (y.delay ?? 0));
-  let svg = vectorDocumentToSvg({ ...scene.artwork, nodes: expandVectorAppearances(scene.artwork.nodes) }, { pretty: false, precision });
+  let svg = vectorDocumentToSvg({ ...scene.artwork, nodes: expandVectorAppearances(scene.artwork.nodes) }, { pretty: false, precision, wrap });
+  if (routes.length) svg = svg.replace(/^(<svg[^>]*>)/, `$1<defs>${routes.join("")}</defs>`);
   const lastChange = animate.reduce((m, a) => Math.max(m, (a.delay ?? 0) + (a.ms ?? 0)), 0);
   let motion = { svg, animate };
   if (scene.controls?.length) {
@@ -1414,6 +1796,196 @@ function toFlairEffectDocument(scene, options = {}) {
   };
 }
 
+// src/animation-editor/flair-import.ts
+var PLACEHOLDER = /\{\{\s*([A-Za-z_]\w*)\s*(?::\s*([A-Za-z0-9]*)([^}]*))?\}\}/g;
+function attributeOf(attrs, name) {
+  const m = new RegExp(`(?:^|\\s)${name}=(?:'([^']*)'|(\\S+))`).exec(attrs);
+  return m ? m[1] ?? m[2] : void 0;
+}
+function resolvePlaceholders(motion, notes) {
+  const text = JSON.stringify(motion);
+  const declared = /* @__PURE__ */ new Map();
+  for (const m of text.matchAll(PLACEHOLDER)) {
+    if (!m[2] || declared.has(m[1])) continue;
+    const attrs = m[3] ?? "";
+    const value = attributeOf(attrs, "default");
+    const fallback = m[2] === "color" ? "#000000" : "0";
+    declared.set(m[1], { type: m[2], value: m[2] === "color" ? (value ?? fallback).toLowerCase() : value ?? fallback, ...attributeOf(attrs, "label") ? { label: attributeOf(attrs, "label") } : {} });
+  }
+  const controls = [];
+  for (const [name, d] of declared) {
+    if (d.type === "color" && /^#[0-9a-fA-F]{6}$/.test(d.value)) controls.push({ name, type: "color", default: d.value.toLowerCase(), ...d.label ? { label: d.label } : {} });
+    else notes.push(`Control "${name}" (${d.type}) is fixed at its default ${d.value}: scenes take colour controls only.`);
+  }
+  const unknown = /* @__PURE__ */ new Set();
+  const filled = text.replace(PLACEHOLDER, (_, name) => {
+    const d = declared.get(name);
+    if (!d) unknown.add(name);
+    return (d?.value ?? "").replace(/"/g, '\\"');
+  });
+  for (const name of unknown) notes.push(`Placeholder "{{${name}}}" has no declaration, so it was left empty.`);
+  return { motion: JSON.parse(filled), controls };
+}
+function easingOf(ease, fallback) {
+  if (ease === void 0) return fallback;
+  if (ease === "linear") return "linear";
+  if (ease === "out") return MOTION_EASE_OUT;
+  if (ease === "in-out") return MOTION_EASE_IN_OUT;
+  if (Array.isArray(ease)) return { type: "cubic-bezier", x1: ease[0], y1: ease[1], x2: ease[2], y2: ease[3] };
+  if (typeof ease === "object" && "spring" in ease) return { type: "spring", ...ease.spring };
+  return fallback;
+}
+function poseOf(value, entry) {
+  const t = parseSvgTransform(String(value));
+  const o = multiplyMatrices(invertMatrix(nodeMatrix(entry.node)) ?? [1, 0, 0, 1, 0, 0], t);
+  const sx = Math.hypot(o[0], o[1]);
+  if (!(sx > 1e-9)) return null;
+  const sy = (o[0] * o[3] - o[1] * o[2]) / sx;
+  if (Math.abs(o[2] + o[1] / sx * sy) > 1e-6 || Math.abs(o[3] - o[0] / sx * sy) > 1e-6) return null;
+  const c = entry.center;
+  const moved = applyMatrix(o, c);
+  return { dx: moved.x - c.x, dy: moved.y - c.y, rotation: Math.atan2(o[1], o[0]) * 180 / Math.PI, sx, sy };
+}
+var near = (a, b, eps = 1e-6) => Math.abs(a - b) < eps;
+var r3 = (n) => Math.round(n * 1e3) / 1e3;
+function commandsFor(anim, nodes, entered, notes) {
+  const id = anim.id;
+  const entry = nodes.get(id);
+  const where = `"${id}"`;
+  if (!entry) {
+    notes.push(`A change to ${where} was skipped: the artwork has no element with that id.`);
+    return [];
+  }
+  const targets = [id];
+  const duration = anim.ms ?? 800;
+  const timing = {
+    duration,
+    ...anim.strobe ? { steps: anim.strobe } : {},
+    ...anim.repeat && anim.repeat > 1 ? { repeat: anim.repeat, ...anim.alternate ? { repeatMode: "mirror" } : {} } : {}
+  };
+  const ease = (fallback) => ({ ease: easingOf(anim.ease, fallback) });
+  const out = [];
+  const behavior = anim.behavior;
+  const unsupported = ["count", "write", "scramble", "solo"].filter((k) => anim[k] !== void 0);
+  if (unsupported.length) notes.push(`${where}: ${unsupported.join(", ")} ${unsupported.length > 1 ? "are" : "is"} not part of scenes and was skipped.`);
+  if (anim.draw !== void 0 && anim.draw !== false) {
+    const [from, to] = anim.draw === true ? [0, 1] : anim.draw;
+    out.push({ type: "draw", targets, from, to, ...timing, ...ease(MOTION_EASE_IN_OUT) });
+  }
+  if (anim.along) {
+    const path = nodes.get(anim.along);
+    if (!path || path.node.type !== "path") notes.push(`${where} follows "${anim.along}", which is not a path in the artwork; the follow was skipped.`);
+    else out.push({ type: "follow", targets, path: anim.along, from: anim.at?.[0] ?? 0, to: anim.at?.[1] ?? 1, ...anim.orient ? { rotate: true } : {}, ...timing, ...ease(MOTION_EASE_IN_OUT) });
+  }
+  for (const [attr, [a, b]] of Object.entries(anim.attrs ?? {})) {
+    if (attr === "opacity") {
+      const [from, to] = [Number(a), Number(b)];
+      if (behavior) notes.push(`${where}: an opacity ${behavior.type} became a plain fade.`);
+      if (from === 0 && to > 0 && !entered.has(id)) {
+        entered.add(id);
+        out.push({ type: "enter", targets, style: "fade", ...timing, ...ease(MOTION_EASE_OUT) });
+      } else out.push({ type: "fade", targets, to: Math.min(1, Math.max(0, to)), ...timing, ...ease(MOTION_EASE_IN_OUT) });
+    } else if (attr === "fill" || attr === "stroke") {
+      if (behavior?.type === "pulse") out.push({ type: "color-pulse", targets, color: String(b), paint: attr, count: behavior.count ?? 1, ...timing, ...ease("linear") });
+      else {
+        if (behavior) notes.push(`${where}: a ${attr} ${behavior.type} became a plain colour change.`);
+        out.push({ type: "style", targets, [attr]: String(b), ...timing, ...ease(MOTION_EASE_IN_OUT) });
+      }
+    } else if (attr === "stroke-width") {
+      out.push({ type: "style", targets, strokeWidth: Number(b), ...timing, ...ease(MOTION_EASE_IN_OUT) });
+    } else if (attr === "transform") {
+      const p0 = poseOf(a, entry);
+      const p1 = poseOf(b, entry);
+      if (!p0 || !p1) {
+        notes.push(`${where}: a transform that skews was skipped (scenes move, turn and scale).`);
+        continue;
+      }
+      const d = { x: r3(p1.dx - p0.dx), y: r3(p1.dy - p0.dy), r: r3(p1.rotation - p0.rotation), sx: p1.sx / p0.sx, sy: p1.sy / p0.sy };
+      if (behavior) {
+        const linear = ease("linear");
+        const moves = d.x !== 0 || d.y !== 0;
+        const turns = d.r !== 0;
+        const scales = !near(d.sx, 1) || !near(d.sy, 1);
+        if (behavior.type === "pulse" && scales && !moves && !turns) out.push({ type: "pulse", targets, amount: r3(d.sx - 1), count: behavior.count ?? 1, ...timing, ...linear });
+        else if (behavior.type === "oscillate" && (behavior.decay ?? 0) > 0 && turns && !moves && !scales) out.push({ type: "teeter", targets, angle: d.r, count: behavior.count ?? 1, ...timing, ...linear });
+        else if (behavior.type === "oscillate" && (behavior.decay ?? 0) > 0 && moves && !turns && !scales && (d.x === 0 || d.y === 0))
+          out.push({ type: "shake", targets, amount: d.x || d.y, count: behavior.count ?? 1, ...d.x === 0 ? { axis: "vertical" } : {}, ...timing, ...linear });
+        else if (behavior.type === "oscillate" && !behavior.decay && d.x === 0 && d.y !== 0 && !turns && !scales) out.push({ type: "wave", targets, amount: -d.y, count: behavior.count ?? 1, ...timing, ...linear });
+        else if (behavior.type === "wriggle" && !scales)
+          out.push({ type: "wiggle", targets, amount: Math.max(Math.abs(d.x), Math.abs(d.y)), ...turns ? { rotate: Math.abs(d.r) } : {}, frequency: behavior.frequency ?? 2, octaves: behavior.octaves ?? 2, seed: behavior.seed ?? 42, ...timing, ...linear });
+        else notes.push(`${where}: a transform ${behavior.type} that is not a pulse, shake, teeter, wave or wiggle was skipped.`);
+        continue;
+      }
+      const e = ease(MOTION_EASE_IN_OUT);
+      if (d.x !== 0 || d.y !== 0) out.push({ type: "move", targets, by: { x: d.x, y: d.y }, ...timing, ...e });
+      if (d.r !== 0) out.push({ type: "rotate", targets, to: r3(p1.rotation), ...timing, ...e });
+      if (!near(d.sx, 1) || !near(d.sy, 1)) out.push({ type: "scale", targets, to: near(p1.sx, p1.sy) ? r3(p1.sx) : { x: r3(p1.sx), y: r3(p1.sy) }, ...timing, ...e });
+    } else notes.push(`${where}: changing "${attr}" is not part of scenes and was skipped.`);
+  }
+  return out;
+}
+function fromFlairSvgMotion(input, options = {}) {
+  const notes = [];
+  if (!input || typeof input.svg !== "string") throw new Error('Give a Flair SvgMotion: { svg: "<svg \u2026>", animate: [ \u2026 ] }.');
+  const { motion, controls } = resolvePlaceholders(input, notes);
+  const artwork = parseVectorSvg(motion.svg);
+  const nodes = indexMotionNodes(artwork.nodes);
+  const byStep = /* @__PURE__ */ new Map();
+  for (const anim of motion.animate ?? []) {
+    const step = Math.max(0, Math.floor(anim.step ?? 0));
+    if (!byStep.has(step)) byStep.set(step, []);
+    byStep.get(step).push(anim);
+  }
+  const steps = [...byStep.keys()].sort((a, b) => a - b);
+  if (steps.length > 1) notes.push("Each Flair step became a shot played after the one before (Flair steps wait for clicks or set times).");
+  const entered = /* @__PURE__ */ new Set();
+  const shots = steps.map((step, index) => {
+    const anims = [...byStep.get(step)].sort((a, b) => (a.delay ?? 0) - (b.delay ?? 0));
+    let camera;
+    let cameraMs = 0;
+    const run = [];
+    let last = 0;
+    for (const anim of anims) {
+      if (anim.view !== void 0) {
+        if (camera || (anim.delay ?? 0) > 0) {
+          notes.push(`Step ${step}: a camera move ${camera ? "after the first" : `${anim.delay} ms in`} was dropped; a shot frames the camera once, at its start.`);
+          continue;
+        }
+        const ms = anim.ms ?? 800;
+        const ease = easingOf(anim.ease, MOTION_EASE_IN_OUT);
+        camera = typeof anim.view === "string" ? { frame: anim.view, padding: 0, ms, ease } : { x: anim.view[0], y: anim.view[1], width: anim.view[2], height: anim.view[3], ms, ease };
+        cameraMs = index === 0 ? 0 : ms;
+        continue;
+      }
+      if (!anim.id) continue;
+      const at = Math.max(0, (anim.delay ?? 0) - cameraMs);
+      if (cameraMs && (anim.delay ?? 0) < cameraMs) notes.push(`Step ${step}: a change to "${anim.id}" during the camera move now starts after it.`);
+      for (const command2 of commandsFor(anim, nodes, entered, notes)) {
+        const first = run.length === 0;
+        run.push({ ...command2, ...first ? {} : { with: "previous" }, ...at - last > 0 || first ? { delay: first ? at : at - last } : {} });
+        if (first && at === 0) delete run[run.length - 1].delay;
+        last = at;
+      }
+    }
+    return { id: `step-${step}`, ...camera ? { camera } : {}, run, ...index === steps.length - 1 ? { hold: options.hold ?? 600 } : {} };
+  });
+  const scene = { version: 1, name: options.name ?? "from-flair", artwork, shots, ...controls.length ? { controls } : {} };
+  const problems = motionSceneShapeProblems(scene);
+  if (problems.length) throw new Error(`The imported scene is not well formed:
+${problems.join("\n")}`);
+  return { scene, notes: [...new Set(notes)], issues: checkMotionScene(scene) };
+}
+function fromFlairVectorEffect(effect, options = {}) {
+  if (!effect || effect.kind !== "vector" || !effect.motion) throw new Error('Give a Flair vector effect: { kind: "vector", id, name, motion: { svg, animate } }.');
+  const result = fromFlairSvgMotion(effect.motion, { name: options.name ?? effect.id ?? effect.name, hold: options.hold ?? effect.hold });
+  const names = new Set((result.scene.controls ?? []).map((c) => c.name));
+  const presets = (effect.presets ?? []).map((p) => ({ name: p.name, values: Object.fromEntries(Object.entries(p.values).filter(([k]) => names.has(k))) })).filter((p) => Object.keys(p.values).length);
+  const scene = { ...result.scene, ...effect.description ? { description: effect.description } : {}, ...presets.length ? { presets } : {} };
+  const notes = [...result.notes];
+  if (effect.trigger) notes.push(`The effect plays on ${effect.trigger}; scenes play through, so the trigger is not kept (pass it back to toFlairVectorEffect).`);
+  return { scene, notes, issues: checkMotionScene(scene) };
+}
+
 // src/animation-editor/controller.ts
 var BLANK = { width: 800, height: 450, background: "#ffffff", nodes: [] };
 var AnimationEditorController = class {
@@ -1660,10 +2232,29 @@ var MS = (what) => ({ type: "number", minimum: 0, description: `${what} in milli
 var FRACTION = (what) => ({ type: "number", minimum: 0, maximum: 1, description: what });
 var POINT = (what) => object({ x: { type: "number", description: "Document units." }, y: { type: "number", description: "Document units." } }, ["x", "y"], what);
 var EASE = {
-  description: `Easing: a preset (${ANIMATION_EASING_PRESETS.join(", ")}) or { "type": "cubic-bezier", "x1", "y1", "x2", "y2" }. Default: a cubic ease-out for entrances, cubic ease-in-out for moves.`,
+  description: `Easing: a preset (${ANIMATION_EASING_PRESETS.join(", ")}), { "type": "cubic-bezier", "x1", "y1", "x2", "y2" }, { "type": "spring", \u2026 } or { "type": "elastic", \u2026 }. The spring presets are Figma's: gentle, quick, bouncy, slow. A command with a spring and no "duration" lasts until the spring settles. Default: a cubic ease-out for entrances, cubic ease-in-out for moves.`,
   anyOf: [
     { type: "string", enum: [...ANIMATION_EASING_PRESETS] },
-    object({ type: { const: "cubic-bezier", description: "Curve kind." }, x1: { type: "number", description: "Out handle x (0\u20131)." }, y1: { type: "number", description: "Out handle y." }, x2: { type: "number", description: "In handle x (0\u20131)." }, y2: { type: "number", description: "In handle y." } }, ["type", "x1", "y1", "x2", "y2"])
+    object({ type: { const: "cubic-bezier", description: "Curve kind." }, x1: { type: "number", description: "Out handle x (0\u20131)." }, y1: { type: "number", description: "Out handle y." }, x2: { type: "number", description: "In handle x (0\u20131)." }, y2: { type: "number", description: "In handle y." } }, ["type", "x1", "y1", "x2", "y2"]),
+    object(
+      {
+        type: { const: "spring", description: "A damped spring (may overshoot)." },
+        stiffness: { type: "number", exclusiveMinimum: 0, description: "Stiffness (default 170; quick 300, bouncy 600)." },
+        damping: { type: "number", minimum: 0, description: "Damping (default 26; lower bounces more)." },
+        mass: { type: "number", exclusiveMinimum: 0, description: "Mass (default 1)." },
+        velocity: { type: "number", description: "Starting speed, in changes per second (default 0)." }
+      },
+      ["type"]
+    ),
+    object(
+      {
+        type: { const: "elastic", description: "A decaying wobble." },
+        amplitude: { type: "number", minimum: 0, description: "Overshoot factor (default 1)." },
+        period: { type: "number", exclusiveMinimum: 0, description: "Wobble period as a fraction of the length (default 0.3)." },
+        mode: { type: "string", enum: ["out", "in", "in-out"], description: "Where it wobbles (default out)." }
+      },
+      ["type"]
+    )
   ]
 };
 var BASE = {
@@ -1673,26 +2264,36 @@ var BASE = {
   stagger: MS("Start each further target this much later (default 0)"),
   with: { type: "string", enum: ["after", "previous"], description: '"after" (default) starts when the commands before it finish; "previous" starts together with the command before.' },
   ease: EASE,
-  note: { type: "string", description: "Why this command is here, in a few words." }
+  note: { type: "string", description: "Why this command is here, in a few words." },
+  repeat: { type: "integer", minimum: 1, maximum: 1e3, description: 'Play it this many times (default 1); "duration" is one cycle. Not for enter or exit.' },
+  repeatMode: { type: "string", enum: [...MOTION_REPEAT_MODES], description: "loop (default) restarts each cycle, mirror plays every other one backwards, offset carries on from where the last ended (rotate by 90 with repeat 4 makes a full turn)." },
+  steps: { type: "number", exclusiveMinimum: 0, maximum: 120, description: `Stepped time: hold on a grid of this many frames per second (12 = "on twos"). Default: the scene's steps, else smooth.` }
 };
 var command = (type, description, extra = {}, required = []) => object({ type: { const: type, description }, ...BASE, ...extra }, ["type", "targets", ...required], description);
 var MOTION_COMMAND_SCHEMA = {
   description: `A command (one of ${MOTION_COMMAND_TYPES.join(", ")}). Commands in a shot play one after another unless "with": "previous".`,
   oneOf: [
     command("enter", "Brings hidden targets in; they are hidden before this shot.", {
-      style: { type: "string", enum: [...MOTION_ENTER_STYLES], description: "fade (default), pop, grow, slide, or draw (outline drawn on, then the fill fades in)." },
-      direction: { type: "string", enum: [...MOTION_DIRECTIONS], description: "For slide: direction of travel (default up)." },
-      distance: { type: "number", description: "For slide: document units (default 40)." }
+      style: {
+        type: "string",
+        enum: [...MOTION_ENTER_STYLES],
+        description: "fade (default), pop (scales up past full size and settles), grow (from nothing), slide, draw (outline drawn on, then the fill fades in), zoom (settles from larger), rise (rises a short way, overshooting a touch), or a reveal through a clip over the target's box: wipe (behind a travelling edge), iris (from the centre outwards) or split (from a line through the middle). Reveals need a box with a width and a height (not a lone straight line)."
+      },
+      direction: { type: "string", enum: [...MOTION_DIRECTIONS], description: "For slide: direction of travel (default up). For wipe: the way the edge travels (default right, revealing from the left)." },
+      distance: { type: "number", description: "For slide (default 40) and rise (default 20): document units." },
+      scale: { type: "number", minimum: 0, description: "For pop (default 0.5) and zoom (default 1.6): the starting scale (1 = rest size)." },
+      shape: { type: "string", enum: [...MOTION_IRIS_SHAPES], description: "For iris: open through a circle (default; an ellipse on a box that is not square) or a box." },
+      orientation: { type: "string", enum: [...MOTION_SPLIT_ORIENTATIONS], description: "For split: horizontal (default) opens up and down from a horizontal line through the middle; vertical opens left and right." }
     }),
     command("exit", "Takes targets out.", {
-      style: { type: "string", enum: [...MOTION_EXIT_STYLES], description: "fade (default), shrink, slide or undraw." },
-      direction: { type: "string", enum: [...MOTION_DIRECTIONS], description: "For slide: direction of travel (default down)." },
+      style: { type: "string", enum: [...MOTION_EXIT_STYLES], description: "fade (default), shrink, slide, undraw, or wipe (hides behind a travelling edge through a clip over the target's box: a wipe in, reversed)." },
+      direction: { type: "string", enum: [...MOTION_DIRECTIONS], description: "For slide: direction of travel (default down). For wipe: the way the edge travels (default right, hiding from the left)." },
       distance: { type: "number", description: "For slide: document units (default 40)." }
     }),
     command("draw", "Draws strokes on (or off) to a fraction of their length.", { to: FRACTION("Fraction drawn at the end (default 1)."), from: FRACTION("Fraction drawn at the start (default: what is drawn now).") }),
     command("move", "Moves targets by an offset or so their centre lands on a point.", { by: POINT("Offset in document units."), to: POINT("Point (document coordinates) for the centre.") }),
     command("rotate", "Turns targets about their centre (degrees, clockwise).", { by: { type: "number", description: "Degrees to turn by." }, to: { type: "number", description: "Angle to turn to, in degrees from rest." } }),
-    command("scale", "Scales targets about their centre (1 = rest size).", { to: { description: "A factor, or { x, y } factors.", anyOf: [{ type: "number" }, POINT("Factors per axis.")] } }, ["to"]),
+    command("scale", "Scales targets about their centre (1 = rest size).", { to: { description: "A factor, or { x, y } factors.", anyOf: [{ type: "number" }, POINT("Factors per axis.")] }, geometric: { type: "boolean", description: "Grow by a steady factor, which reads as an even zoom (default false)." } }, ["to"]),
     command("fade", "Changes opacity.", { to: FRACTION("Opacity at the end (0\u20131).") }, ["to"]),
     command("style", "Blends solid fill / stroke colours (in OKLab) and stroke width. On a group it changes every path in it.", {
       fill: { type: "string", description: "CSS colour (hex, rgb(), rgba())." },
@@ -1702,12 +2303,30 @@ var MOTION_COMMAND_SCHEMA = {
     command("morph", "Morphs each target into the shape (and paint) of another node, which usually stays hidden.", { into: { type: "string", minLength: 1, description: "Id of the node whose shape to take." } }, ["into"]),
     command("follow", "Moves targets along a path node, centre on the path.", {
       path: { type: "string", minLength: 1, description: "Id of a path node (it can be hidden)." },
-      rotate: { type: "boolean", description: "Turn with the path (default false)." },
+      rotate: { type: "boolean", description: "Turn with the path (default false); moves and shakes made meanwhile turn with it too." },
       from: FRACTION("Where to start along the path (default 0)."),
       to: FRACTION("Where to end along the path (default 1).")
     }, ["path"]),
     command("pulse", "Scales up and back to draw the eye.", { amount: { type: "number", description: "Extra scale at the peak (default 0.15)." }, count: { type: "integer", minimum: 1, description: "Pulses (default 1)." } }),
-    command("shake", "Shakes side to side, settling.", { amount: { type: "number", description: "Document units (default 8)." }, count: { type: "integer", minimum: 1, description: "Shakes (default 3)." } }),
+    command("shake", "Shakes side to side (or up and down), settling.", {
+      amount: { type: "number", description: "Document units (default 8)." },
+      count: { type: "integer", minimum: 1, description: "Shakes (default 3)." },
+      axis: { type: "string", enum: ["horizontal", "vertical"], description: "Default horizontal." }
+    }),
+    command("teeter", "Rocks about the centre either way, settling.", { angle: { type: "number", description: "Degrees either way (default 8)." }, count: { type: "integer", minimum: 1, description: "Rocks (default 3)." } }),
+    command("wave", "Bobs up and down without settling, like something floating (default 1000 ms).", { amount: { type: "number", description: "Height in document units (default 6)." }, count: { type: "integer", minimum: 1, description: "Bobs (default 2)." } }),
+    command("wiggle", "Wanders about its place as smooth seeded noise, easing out of and back to rest (default 1500 ms). The same seed always wanders the same way.", {
+      amount: { type: "number", description: "Up to about this far, in document units (default 6)." },
+      frequency: { type: "number", exclusiveMinimum: 0, description: "Wanders per second, in Hz (default 3)." },
+      octaves: { type: "integer", minimum: 1, maximum: 8, description: "Layers of finer detail (default 2)." },
+      rotate: { type: "number", description: "Also turns about the centre by up to about this many degrees (default 0)." },
+      seed: { type: "integer", minimum: 0, description: "Default: one picked from the target id, so each target wanders its own way." }
+    }),
+    command("color-pulse", "Tints solid paint toward a colour and back (mixed in OKLab). On a group it tints every path in it.", {
+      color: { type: "string", description: 'The tint, a CSS colour (default "#f59e0b").' },
+      paint: { type: "string", enum: ["fill", "stroke"], description: "Which paint (default fill)." },
+      count: { type: "integer", minimum: 1, description: "Pulses (default 1)." }
+    }),
     command("effect", "Tweens a numeric parameter of a live path effect on the targets (twist angle, wiggle time, zig zag size, trim offset\u2026).", {
       effect: { type: "string", minLength: 1, description: `Effect id from get_animation's element "effects".` },
       param: { type: "string", minLength: 1, description: "A numeric parameter of that effect (listed with it)." },
@@ -1720,11 +2339,12 @@ var MOTION_COMMAND_SCHEMA = {
     )
   ]
 };
+var GEOMETRIC_CAMERA = { type: "boolean", description: "Zoom at a steady rate, so a big zoom does not rush at the start (default false)." };
 var CAMERA = {
   description: `Where the camera looks: a rectangle { x, y, width, height } in document units, or { frame: "<node id>", padding } to frame a node (fitted to the artwork's shape). It eases there over "ms" (default 1000); the first shot cuts.`,
   anyOf: [
-    object({ x: { type: "number", description: "Left." }, y: { type: "number", description: "Top." }, width: { type: "number", exclusiveMinimum: 0, description: "Width." }, height: { type: "number", exclusiveMinimum: 0, description: "Height." }, ease: EASE, ms: MS("Camera move length") }, ["x", "y", "width", "height"]),
-    object({ frame: { type: "string", minLength: 1, description: "Node id to frame." }, padding: { type: "number", description: "Margin around it (default 24)." }, ease: EASE, ms: MS("Camera move length") }, ["frame"])
+    object({ x: { type: "number", description: "Left." }, y: { type: "number", description: "Top." }, width: { type: "number", exclusiveMinimum: 0, description: "Width." }, height: { type: "number", exclusiveMinimum: 0, description: "Height." }, ease: EASE, ms: MS("Camera move length"), geometric: GEOMETRIC_CAMERA }, ["x", "y", "width", "height"]),
+    object({ frame: { type: "string", minLength: 1, description: "Node id to frame." }, padding: { type: "number", description: "Margin around it (default 24)." }, ease: EASE, ms: MS("Camera move length"), geometric: GEOMETRIC_CAMERA }, ["frame"])
   ]
 };
 var SHOT_FIELDS = {
@@ -1750,6 +2370,7 @@ var SETTINGS = {
   description: { type: ["string", "null"], description: "What it shows; null clears." },
   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).' },
   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 = {
@@ -1804,7 +2425,8 @@ function describeMotionShots(scene) {
       ...shot.hold !== void 0 ? { hold: shot.hold } : {},
       commands: shot.run.map((c, index) => {
         const ct = timeline.commands.find((x) => x.shotIndex === i && x.command === index);
-        return { index, ...c, start: ct.start, end: ct.end };
+        const primitive = motionFlairPrimitive(c);
+        return { index, ...c, start: ct.start, end: ct.end, ...primitive ? { flairPrimitive: primitive } : {} };
       })
     };
   });
@@ -1840,7 +2462,7 @@ function createAnimationEditorToolProvider(controller, options = {}) {
   const getAnimation = {
     name: "get_animation",
     title: "Read the animation",
-    description: "Returns the vector animation: its name, artwork size, length (ms), loop mode, the artwork's elements (id, type, name, parent, bounds, solid paints, live effects with their numeric parameters), every shot with its commands and their start/end times, Flair controls, and a summary of issues. Use the ids it returns with the write tools.",
+    description: `Returns the vector animation: its name, artwork size, length (ms), loop mode, the artwork's elements (id, type, name, parent, bounds, solid paints, live effects with their numeric parameters), every shot with its commands and their start/end times (and, where Flair has one, the Flair motion primitive a command plays as "flairPrimitive", e.g. "entrance.pop"), Flair controls, and a summary of issues. Use the ids it returns with the write tools.`,
     inputSchema: object({ includeElements: { type: "boolean", description: "Include the artwork's elements (default true)." } }),
     annotations: { title: "Read the animation", ...READ },
     handler: ({ includeElements = true }) => {
@@ -1927,16 +2549,20 @@ 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 exportFlairMotion = {
     name: "export_flair_motion",
     title: "Export as Flair vector motion",
     description: "Returns the animation as a Flair SvgMotion ({ svg, animate }) that Flair's SvgPlayer plays, plus its hold, how many changes were sampled into linear steps, and notes on anything not carried over.",
     inputSchema: object({
       fps: { type: "number", minimum: 1, maximum: 120, description: "Sampling rate for changes Flair cannot express exactly (default: the scene's fps, else 30)." },
-      curves: { type: "boolean", description: CURVES_DESCRIPTION }
+      curves: { type: "boolean", description: CURVES_DESCRIPTION },
+      behaviors: { type: "boolean", description: BEHAVIORS_DESCRIPTION },
+      flair: { type: "string", pattern: "^\\d+\\.\\d+(\\.\\d+)?$", description: FLAIR_DESCRIPTION }
     }),
     annotations: { title: "Export as Flair vector motion", ...READ },
-    handler: ({ fps, curves }) => controller.toFlairMotion({ ...fps ? { fps } : {}, ...curves === void 0 ? {} : { curves } })
+    handler: ({ fps, curves, behaviors, flair }) => controller.toFlairMotion({ ...fps ? { fps } : {}, ...curves === void 0 ? {} : { curves }, ...behaviors === void 0 ? {} : { behaviors }, ...flair ? { flair } : {} })
   };
   const exportFlairEffect = {
     name: "export_flair_effect",
@@ -1948,7 +2574,9 @@ function createAnimationEditorToolProvider(controller, options = {}) {
       description: { type: "string", description: "One sentence (default: the scene's description)." },
       category: { type: "string", minLength: 1, description: "Flair catalog category, e.g. icon, loader, ui, data, text, morph (default icon)." },
       tags: { type: "array", items: { type: "string" }, description: "Search tags (default none)." },
-      curves: { type: "boolean", description: CURVES_DESCRIPTION }
+      curves: { type: "boolean", description: CURVES_DESCRIPTION },
+      behaviors: { type: "boolean", description: BEHAVIORS_DESCRIPTION },
+      flair: { type: "string", pattern: "^\\d+\\.\\d+(\\.\\d+)?$", description: FLAIR_DESCRIPTION }
     }),
     annotations: { title: "Export as a Flair effect", ...READ },
     handler: (args) => controller.toFlairEffect(args)
@@ -1969,6 +2597,34 @@ function createAnimationEditorToolProvider(controller, options = {}) {
       return apply({ op: "set_artwork", artwork }, "Replace artwork", (s) => ({ elements: describeMotionElements(s) }));
     }
   };
+  const importFlairEffect = {
+    name: "import_flair_effect",
+    title: "Import a Flair effect",
+    description: "Replaces the whole animation with a Flair vector effect or SvgMotion (one undo step): its SVG becomes the artwork, {{name: color}} placeholders become colour controls, and each Flair step becomes a shot of commands (fade, enter, style, move, rotate, scale, draw, follow, pulse, shake, teeter, wave, wiggle, color-pulse). Returns the shots, the elements, notes on anything not carried over and the issues. With dry_run it only reports what the import would give.",
+    inputSchema: object(
+      {
+        effect: { type: "object", description: 'A Flair catalog vector effect { kind: "vector", id, name, motion: { svg, animate }, hold?, presets? }. Give this or "motion".' },
+        motion: { type: "object", description: 'A Flair SvgMotion { svg, animate }. Give this or "effect".' },
+        name: { type: "string", minLength: 1, description: `Name for the scene (default: the effect's id, else "from-flair").` },
+        dry_run: { type: "boolean", description: "Report without replacing anything (default false)." }
+      },
+      []
+    ),
+    annotations: { title: "Import a Flair effect", ...DESTRUCTIVE },
+    handler: ({ effect, motion, name, dry_run = false }) => {
+      if (effect === void 0 === (motion === void 0)) throw new Error('Give exactly one of "effect" (a Flair vector effect) or "motion" (a Flair SvgMotion). Nothing was changed.');
+      let result;
+      try {
+        result = effect !== void 0 ? fromFlairVectorEffect(effect, name ? { name } : {}) : fromFlairSvgMotion(motion, name ? { name } : {});
+      } catch (error) {
+        throw new Error(`The Flair effect could not be imported: ${error.message} Nothing was changed.`);
+      }
+      const report = { notes: result.notes, issues: issueSummary(result.issues), shots: describeMotionShots(result.scene).map(({ id, start, end, commands }) => ({ id, start, end, commands: commands.length })) };
+      if (dry_run) return { dry_run: true, ...report, hint: "Nothing was replaced; call again without dry_run to import." };
+      const applied = controller.apply({ op: "replace_scene", scene: result.scene }, "Import Flair effect");
+      return outcome(applied, applied.ok ? { ...report, elements: describeMotionElements(result.scene) } : {});
+    }
+  };
   const insertShots = {
     name: "insert_shots",
     title: "Add shots",
@@ -2051,7 +2707,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 or target length. Returns the timing.",
+    description: "Sets the name, description, loop mode, export frame rate, stepped time 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")
@@ -2130,7 +2786,7 @@ function createAnimationEditorToolProvider(controller, options = {}) {
     }
   };
   const reads = [getAnimation, getShot, findElements, checkAnimation, renderFrame, exportFlairMotion, exportFlairEffect, seekAnimation];
-  const writes = [setArtworkSvg, insertShots, updateShot, deleteShots, moveShot, addCommands, updateCommand, deleteCommands, setSettings, setControls, editAnimation, writeAnimation, undo, redo];
+  const writes = [setArtworkSvg, importFlairEffect, insertShots, updateShot, deleteShots, moveShot, addCommands, updateCommand, deleteCommands, setSettings, setControls, editAnimation, writeAnimation, undo, redo];
   return {
     id: options.id ?? "animation",
     namespace: options.namespace,
@@ -2160,12 +2816,19 @@ How it plays
 
 Commands
 - enter (fade, pop, grow, slide, draw) and exit (fade, shrink, slide, undraw) bring things in and out.
+- enter also reveals through a clip over the target's box: wipe (behind an edge travelling "direction", default right), iris (from the centre; "shape": circle or box) and split (from a line through the middle; "orientation": horizontal or vertical). exit wipe hides the same way. Reveals need a width and a height: use draw / undraw for a straight line.
 - draw draws strokes on to a fraction; move, rotate, scale and fade change the pose (about the centre); style blends solid colours and stroke width.
-- morph turns a shape into another node's shape (keep the target hidden); follow moves along a path node; pulse and shake draw the eye.
+- enter also has zoom (settles from larger) and rise (rises a short way, overshooting a touch); pop and zoom take a starting "scale".
+- morph turns a shape into another node's shape (keep the target hidden); follow moves along a path node (with "rotate", moves made meanwhile turn with the path).
+- Emphasis draws the eye and returns to rest: pulse (swell), shake (side to side, or "axis": "vertical"), teeter (rock), wave (bob, no settling), wiggle (seeded wander; the same seed wanders the same way) and color-pulse (tint and back).
+- 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.
+- "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).
 
 Working method
-1. get_animation to learn the element ids (set_animation_artwork_svg first if there is no artwork: give every element you will animate an id).
+1. get_animation to learn the element ids (set_animation_artwork_svg first if there is no artwork: give every element you will animate an id; or import_flair_effect to start from a Flair effect and edit it).
 2. Plan a few shots, each one idea. Add them with insert_shots, or edit_animation to make several edits as one step (dry_run first when unsure).
 3. check_animation and fix every error and warning; render_animation_frame (shot + "end") to look at the result.
 4. To make a reusable Flair effect, set_animation_controls (colour controls stand for every use of their default colour) and export_flair_effect.
@@ -2175,6 +2838,7 @@ export {
   ANIMATION_EDITOR_AGENT_INSTRUCTIONS,
   AnimationEditorController,
   FLAIR_EASES,
+  FLAIR_EXPORT_VERSION,
   MOTION_CAMERA_MS,
   MOTION_COMMAND_SCHEMA,
   MOTION_COMMAND_TYPES,
@@ -2189,8 +2853,11 @@ export {
   MOTION_EDIT_OPS,
   MOTION_ENTER_STYLES,
   MOTION_EXIT_STYLES,
+  MOTION_IRIS_SHAPES,
   MOTION_ISSUE_CODES,
   MOTION_MIN_CHANGE_MS,
+  MOTION_REPEAT_MODES,
+  MOTION_SPLIT_ORIENTATIONS,
   MotionSceneFormatError,
   activeSegment,
   applyMotionControlValues,
@@ -2203,22 +2870,33 @@ export {
   describeMotionElements,
   describeMotionShots,
   fitMotionRect,
+  flairAtLeast,
   flairCurveFor,
   flairEaseFor,
   freshShotId,
+  fromFlairSvgMotion,
+  fromFlairVectorEffect,
   indexMotionNodes,
   interpolateMotionValue,
   isMotionCommand,
   isMotionShot,
+  motionClipAttrs,
   motionCommandDuration,
+  motionCommandRepeat,
+  motionCycleDuration,
+  motionFlairPrimitive,
+  motionFollowRoute,
   motionFrameAt,
   motionFrameToSvg,
   motionIssue,
   motionIssueKey,
   motionIssueLine,
+  motionNodeClips,
   motionNodeOffset,
   motionPathLength,
   motionRestValue,
+  motionRevealClip,
+  motionRevealPadding,
   motionSceneShapeProblems,
   motionSceneToJson,
   motionShotAt,