@pixerate/editor 0.83.0 → 0.84.0

package/dist/video-editor/index.js

@@ -13,8 +13,11 @@ import "../chunk-AGR4P4UZ.js";
 
 // src/video-editor/types.ts
 var VIDEO_FITS = ["contain", "cover", "fill", "none"];
-var VIDEO_TRANSITION_TYPES = ["crossfade", "dip", "wipe"];
+var VIDEO_TRANSITION_TYPES = ["crossfade", "dip", "wipe", "push", "slide", "iris"];
 var VIDEO_WIPE_DIRECTIONS = ["left", "right", "up", "down"];
+var videoTransitionAudioCurve = (t) => t.audioCurve ?? (t.type === "dip" ? "linear" : "equal-power");
+var VIDEO_BLEND_MODES = ["normal", "multiply", "screen", "overlay", "darken", "lighten", "color-dodge", "color-burn", "hard-light", "soft-light", "difference", "exclusion", "add"];
+var VIDEO_CLIP_ANIMATION_EFFECTS = ["fade", "rise", "drop", "slide-left", "slide-right", "zoom", "pop"];
 var VIDEO_FADE_CURVES = ["linear", "equal-power", "s-curve", "exponential", "logarithmic"];
 var VIDEO_PLACEMENT_MODES = ["refuse", "overwrite", "insert"];
 var VIDEO_CLIP_TYPES = ["media", "text", "color"];
@@ -207,6 +210,136 @@ function videoKeyframeFfmpegExpr(prop, time, fallback, step) {
   return `if(lt(${time},${fmt(points[0][0])}),${fmt(points[0][1])},${expr})`;
 }
 
+// src/video-editor/grade.ts
+var VIDEO_GRADE_CONTROLS = [
+  { key: "exposure", label: "Exposure", min: -3, max: 3, step: 0.1, description: "Exposure in stops: +1 doubles every channel, -1 halves it (default 0)." },
+  { key: "contrast", label: "Contrast", min: -1, max: 1, step: 0.05, description: "Contrast around mid grey, -1 (flat grey) to 1 (twice as steep); default 0." },
+  { key: "saturation", label: "Saturation", min: -1, max: 1, step: 0.05, description: "Saturation, -1 (black and white) to 1 (twice as saturated); default 0." },
+  { key: "hue", label: "Hue", min: -180, max: 180, step: 1, description: "Hue rotation in degrees (default 0)." },
+  { key: "temperature", label: "Temperature", min: -1, max: 1, step: 0.05, description: "White balance, -1 (cool, bluer) to 1 (warm, more orange); default 0." },
+  { key: "tint", label: "Tint", min: -1, max: 1, step: 0.05, description: "White balance, -1 (greener) to 1 (more magenta); default 0." }
+];
+var VIDEO_GRADE_PRESETS = {
+  warm: { temperature: 0.4, saturation: 0.1 },
+  cool: { temperature: -0.4, tint: -0.05 },
+  punchy: { contrast: 0.25, saturation: 0.3 },
+  faded: { exposure: 0.15, contrast: -0.3, saturation: -0.3 },
+  "black-and-white": { saturation: -1, contrast: 0.15 },
+  "bleach-bypass": { saturation: -0.6, contrast: 0.4 },
+  "day-for-night": { exposure: -1.5, saturation: -0.4, temperature: -0.6 }
+};
+var VIDEO_GRADE_PRESET_NAMES = Object.keys(VIDEO_GRADE_PRESETS);
+var clampTo = (c, v) => Math.min(c.max, Math.max(c.min, v));
+function normalizeVideoGrade(grade) {
+  if (!grade) return void 0;
+  const out = {};
+  for (const c of VIDEO_GRADE_CONTROLS) {
+    const v = grade[c.key];
+    if (typeof v === "number" && Number.isFinite(v) && v !== 0) out[c.key] = Math.round(clampTo(c, v) * 1e3) / 1e3;
+  }
+  return Object.keys(out).length ? out : void 0;
+}
+function videoGradePreset(name, amount = 1) {
+  const preset = VIDEO_GRADE_PRESETS[name];
+  if (!preset) throw new Error(`There is no grade preset "${name}"; the presets are ${VIDEO_GRADE_PRESET_NAMES.join(", ")}.`);
+  const k = Math.min(1, Math.max(0, amount));
+  return normalizeVideoGrade(Object.fromEntries(Object.entries(preset).map(([key, v]) => [key, v * k])));
+}
+function videoGradeSteps(grade) {
+  const g = normalizeVideoGrade(grade);
+  if (!g) return [];
+  const steps = [];
+  if (g.exposure) steps.push({ kind: "brightness", amount: 2 ** g.exposure });
+  if (g.contrast) steps.push({ kind: "contrast", amount: 1 + g.contrast });
+  if (g.saturation) steps.push({ kind: "saturate", amount: 1 + g.saturation });
+  if (g.hue) steps.push({ kind: "hue-rotate", degrees: g.hue });
+  if (g.temperature || g.tint) {
+    const t = g.temperature ?? 0;
+    steps.push({ kind: "gains", r: 1 + 0.25 * t, g: 1 - 0.25 * (g.tint ?? 0), b: 1 - 0.25 * t });
+  }
+  return steps;
+}
+function videoGradeStepMatrix(step) {
+  switch (step.kind) {
+    case "brightness":
+      return [
+        [step.amount, 0, 0, 0],
+        [0, step.amount, 0, 0],
+        [0, 0, step.amount, 0]
+      ];
+    case "contrast": {
+      const c = step.amount;
+      const o = 0.5 - 0.5 * c;
+      return [
+        [c, 0, 0, o],
+        [0, c, 0, o],
+        [0, 0, c, o]
+      ];
+    }
+    case "gains":
+      return [
+        [step.r, 0, 0, 0],
+        [0, step.g, 0, 0],
+        [0, 0, step.b, 0]
+      ];
+    case "saturate": {
+      const s = step.amount;
+      return [
+        [0.213 + 0.787 * s, 0.715 - 0.715 * s, 0.072 - 0.072 * s, 0],
+        [0.213 - 0.213 * s, 0.715 + 0.285 * s, 0.072 - 0.072 * s, 0],
+        [0.213 - 0.213 * s, 0.715 - 0.715 * s, 0.072 + 0.928 * s, 0]
+      ];
+    }
+    case "hue-rotate": {
+      const a = step.degrees * Math.PI / 180;
+      const cos = Math.cos(a);
+      const sin = Math.sin(a);
+      return [
+        [0.213 + cos * 0.787 - sin * 0.213, 0.715 - cos * 0.715 - sin * 0.715, 0.072 - cos * 0.072 + sin * 0.928, 0],
+        [0.213 - cos * 0.213 + sin * 0.143, 0.715 + cos * 0.285 + sin * 0.14, 0.072 - cos * 0.072 - sin * 0.283, 0],
+        [0.213 - cos * 0.213 - sin * 0.787, 0.715 - cos * 0.715 + sin * 0.715, 0.072 + cos * 0.928 + sin * 0.072, 0]
+      ];
+    }
+  }
+}
+function applyVideoGrade(grade, rgb) {
+  let v = rgb.map((x) => x / 255);
+  for (const step of videoGradeSteps(grade)) {
+    const m = videoGradeStepMatrix(step);
+    v = m.map((row) => Math.min(1, Math.max(0, row[0] * v[0] + row[1] * v[1] + row[2] * v[2] + row[3])));
+  }
+  return v.map((x) => Math.round(x * 255));
+}
+var fmt2 = (v) => String(Math.round(v * 1e5) / 1e5);
+function videoGradeStepSvgValues(step) {
+  return videoGradeStepMatrix(step).map((row) => [row[0], row[1], row[2], 0, row[3]].map(fmt2).join(" ")).concat("0 0 0 1 0").join(" ");
+}
+function videoGradeSvgFilter(id, grade) {
+  const steps = videoGradeSteps(grade);
+  return `<filter id="${id}" color-interpolation-filters="sRGB" x="0" y="0" width="100%" height="100%">${steps.map((s) => `<feColorMatrix type="matrix" values="${videoGradeStepSvgValues(s)}"/>`).join("")}</filter>`;
+}
+var videoGradeGainsFilterId = (step) => `pixerate-wb-${[step.r, step.g, step.b].map((v) => Math.round(v * 1e3)).join("-")}`;
+function videoGradeCssFilter(grade) {
+  return videoGradeSteps(grade).map((s) => s.kind === "brightness" ? `brightness(${fmt2(s.amount)})` : s.kind === "contrast" ? `contrast(${fmt2(s.amount)})` : s.kind === "saturate" ? `saturate(${fmt2(s.amount)})` : s.kind === "hue-rotate" ? `hue-rotate(${fmt2(s.degrees)}deg)` : `url(#${videoGradeGainsFilterId(s)})`).join(" ");
+}
+function videoGradeSvgDefs(grade) {
+  return videoGradeSteps(grade).filter((s) => s.kind === "gains").map((s) => {
+    const id = videoGradeGainsFilterId(s);
+    return { id, markup: `<filter id="${id}" color-interpolation-filters="sRGB"><feColorMatrix type="matrix" values="${videoGradeStepSvgValues(s)}"/></filter>` };
+  });
+}
+function videoGradeFfmpegFilters(grade) {
+  return videoGradeSteps(grade).map((step) => {
+    const m = videoGradeStepMatrix(step);
+    if (step.kind === "brightness" || step.kind === "contrast") {
+      const lut = (i) => `clip(val*${fmt2(m[i][i])}+${fmt2(m[i][3] * 255)},0,255)`;
+      return `lutrgb=r='${lut(0)}':g='${lut(1)}':b='${lut(2)}'`;
+    }
+    const k = ["r", "g", "b"];
+    return `colorchannelmixer=${m.flatMap((row, i) => row.slice(0, 3).map((v, j) => `${k[i]}${k[j]}=${fmt2(v)}`)).join(":")}`;
+  });
+}
+
 // src/video-editor/parse.ts
 var isObject = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
 var fail = (path, what) => {
@@ -275,6 +408,22 @@ function parseVideoTransform(v, path) {
     rotation: parseVideoAnimatable(v.rotation, `${path}.rotation`, { optional: true })
   });
 }
+function parseVideoClipAnimation(v, path) {
+  if (v === void 0) return void 0;
+  if (!isObject(v)) return fail(path, "must be an object { effect, duration }");
+  return compact({
+    effect: oneOf(v.effect, VIDEO_CLIP_ANIMATION_EFFECTS, `${path}.effect`, false),
+    duration: num(v.duration, `${path}.duration`, { optional: true, positive: true })
+  });
+}
+function parseVideoGrade(v, path) {
+  if (v === void 0) return void 0;
+  if (!isObject(v)) return fail(path, "must be an object such as { exposure, contrast, saturation }");
+  const known = new Set(VIDEO_GRADE_CONTROLS.map((c) => c.key));
+  const unknown = Object.keys(v).find((k) => !known.has(k));
+  if (unknown) fail(`${path}.${unknown}`, `is not a grade setting; use ${[...known].join(", ")}`);
+  return compact(Object.fromEntries(VIDEO_GRADE_CONTROLS.map((c) => [c.key, num(v[c.key], `${path}.${c.key}`, { optional: true, min: c.min, max: c.max })])));
+}
 function parseVideoTransition(v, path) {
   if (v === void 0) return void 0;
   if (!isObject(v)) return fail(path, "must be an object { type, duration }");
@@ -282,7 +431,8 @@ function parseVideoTransition(v, path) {
     type: oneOf(v.type, VIDEO_TRANSITION_TYPES, `${path}.type`, false),
     duration: num(v.duration, `${path}.duration`, { positive: true }),
     color: str(v.color, `${path}.color`, true),
-    direction: oneOf(v.direction, VIDEO_WIPE_DIRECTIONS, `${path}.direction`)
+    direction: oneOf(v.direction, VIDEO_WIPE_DIRECTIONS, `${path}.direction`),
+    audioCurve: oneOf(v.audioCurve, VIDEO_FADE_CURVES, `${path}.audioCurve`)
   });
 }
 function parseVideoAsset(v, path = "asset") {
@@ -313,6 +463,10 @@ function parseVideoClip(v, path = "clip") {
     opacity: parseVideoAnimatable(v.opacity, `${path}.opacity`, { optional: true, min: 0, max: 1 }),
     transform: parseVideoTransform(v.transform, `${path}.transform`),
     fit: oneOf(v.fit, VIDEO_FITS, `${path}.fit`),
+    blend: oneOf(v.blend, VIDEO_BLEND_MODES, `${path}.blend`),
+    grade: parseVideoGrade(v.grade, `${path}.grade`),
+    animateIn: parseVideoClipAnimation(v.animateIn, `${path}.animateIn`),
+    animateOut: parseVideoClipAnimation(v.animateOut, `${path}.animateOut`),
     fadeIn: num(v.fadeIn, `${path}.fadeIn`, { optional: true, min: 0 }),
     fadeOut: num(v.fadeOut, `${path}.fadeOut`, { optional: true, min: 0 }),
     transition: parseVideoTransition(v.transition, `${path}.transition`)
@@ -563,6 +717,66 @@ function videoClipsAt(project, time) {
   return out;
 }
 
+// src/video-editor/clip-animation.ts
+var VIDEO_CLIP_ANIMATION_DURATION = 500;
+var EFFECTS = {
+  fade: { easeIn: "linear", easeOut: "linear" },
+  rise: { y: 0.06, easeIn: "ease-out", easeOut: "ease-in" },
+  drop: { y: -0.06, easeIn: "ease-out", easeOut: "ease-in" },
+  "slide-left": { x: 0.15, easeIn: "ease-out", easeOut: "ease-in" },
+  "slide-right": { x: -0.15, easeIn: "ease-out", easeOut: "ease-in" },
+  zoom: { scale: 0.6, easeIn: "ease-out", easeOut: "ease-in" },
+  // Overshoots past full size, then settles (a "back" curve).
+  pop: { scale: 0.3, easeIn: [0.34, 1.56, 0.64, 1], easeOut: [0.36, 0, 0.66, -0.56] }
+};
+var PROPS = ["opacity", "x", "y", "scale"];
+function videoClipAnimationProperties(animation) {
+  const spec = EFFECTS[animation.effect];
+  return PROPS.filter((p) => p === "opacity" || spec[p] !== void 0);
+}
+function videoClipAnimationSpans(clip) {
+  const a = clip.animateIn ? clip.animateIn.duration ?? VIDEO_CLIP_ANIMATION_DURATION : 0;
+  const b = clip.animateOut ? clip.animateOut.duration ?? VIDEO_CLIP_ANIMATION_DURATION : 0;
+  const k = a + b > clip.duration ? clip.duration / (a + b) : 1;
+  return { in: a * k, out: b * k };
+}
+function videoClipAnimated(clip, project) {
+  if (!clip.animateIn && !clip.animateOut) return clip;
+  const spans = videoClipAnimationSpans(clip);
+  const out = { ...clip, transform: { ...clip.transform } };
+  for (const prop of PROPS) {
+    const current = prop === "opacity" ? clip.opacity : clip.transform?.[prop];
+    if (isVideoKeyframes(current)) continue;
+    const base = current ?? (prop === "opacity" || prop === "scale" ? 1 : 0);
+    const away = (spec) => {
+      if (prop === "opacity") return 0;
+      const v = spec[prop];
+      if (v === void 0) return void 0;
+      return prop === "scale" ? base * v : base + v * (prop === "x" ? project.width : project.height);
+    };
+    const keys = [];
+    if (clip.animateIn) {
+      const spec = EFFECTS[clip.animateIn.effect];
+      const from = away(spec);
+      if (from !== void 0) keys.push({ t: 0, v: from, ease: spec.easeIn }, { t: spans.in, v: base });
+    }
+    if (clip.animateOut) {
+      const spec = EFFECTS[clip.animateOut.effect];
+      const to = away(spec);
+      if (to !== void 0) {
+        const start = clip.duration - spans.out;
+        if (!keys.length || keys[keys.length - 1].t < start) keys.push({ t: start, v: base, ease: spec.easeOut });
+        else keys[keys.length - 1] = { ...keys[keys.length - 1], ease: spec.easeOut };
+        keys.push({ t: clip.duration, v: to });
+      }
+    }
+    if (!keys.length) continue;
+    if (prop === "opacity") out.opacity = { keys };
+    else out.transform[prop] = { keys };
+  }
+  return out;
+}
+
 // src/video-editor/check.ts
 function videoClipKeyframes(clip) {
   const out = [
@@ -581,6 +795,8 @@ var VIDEO_ISSUE_CODES = [
   "transition-too-long",
   "transition-handles",
   "fades-too-long",
+  "animations-too-long",
+  "animation-keyed",
   "keyframes-outside-clip",
   "unknown-duration",
   "unused-asset",
@@ -617,6 +833,16 @@ function checkVideoProject(project) {
         issues.push({ code: "overlap", severity: "error", ...at, message: `Clips "${clip.id}" and "${next.id}" overlap on track "${track.id}" from ${formatVideoSeconds(next.start)}; move one of them.` });
       if ((clip.fadeIn ?? 0) + (clip.fadeOut ?? 0) > clip.duration + VIDEO_TIME_EPSILON)
         issues.push({ code: "fades-too-long", severity: "warning", ...at, message: `Clip "${clip.id}"'s fades (${clip.fadeIn ?? 0} + ${clip.fadeOut ?? 0} ms) are longer than the clip (${clip.duration} ms); shorten them.` });
+      const anim = (clip.animateIn ? clip.animateIn.duration ?? VIDEO_CLIP_ANIMATION_DURATION : 0) + (clip.animateOut ? clip.animateOut.duration ?? VIDEO_CLIP_ANIMATION_DURATION : 0);
+      if (anim > clip.duration + VIDEO_TIME_EPSILON)
+        issues.push({ code: "animations-too-long", severity: "warning", ...at, message: `Clip "${clip.id}"'s entrance and exit (${anim} ms together) are longer than the clip (${clip.duration} ms), so both are shortened; give them shorter durations.` });
+      for (const which of ["animateIn", "animateOut"]) {
+        const a = clip[which];
+        if (!a) continue;
+        const keyed = videoClipAnimationProperties(a).filter((p) => videoKeysOf(p === "opacity" ? clip.opacity : clip.transform?.[p]).length);
+        if (keyed.length)
+          issues.push({ code: "animation-keyed", severity: "note", ...at, message: `Clip "${clip.id}"'s ${a.effect} ${which === "animateIn" ? "entrance" : "exit"} leaves ${keyed.join(", ")} alone, because the clip keys ${keyed.length > 1 ? "them" : "it"} itself; remove those keyframes or the animation.` });
+      }
       for (const { property, keys } of videoClipKeyframes(clip)) {
         const outside = keys.filter((k) => k.t < -VIDEO_TIME_EPSILON || k.t > clip.duration + VIDEO_TIME_EPSILON);
         if (outside.length)
@@ -730,7 +956,7 @@ function retimeClipKeys(clip, fn) {
     if (isVideoKeyframes(v)) a.set(fn(v));
   }
 }
-var OPTIONAL_CLIP_FIELDS = ["name", "opacity", "transform", "fit", "fadeIn", "fadeOut", "fadeInCurve", "fadeOutCurve", "transition", "in", "speed", "volume", "muted", "color", "fontSize", "fontFamily", "fontWeight", "background"];
+var OPTIONAL_CLIP_FIELDS = ["name", "opacity", "transform", "fit", "blend", "grade", "animateIn", "animateOut", "fadeIn", "fadeOut", "fadeInCurve", "fadeOutCurve", "transition", "in", "speed", "volume", "muted", "color", "fontSize", "fontFamily", "fontWeight", "background"];
 var TIME_FIELDS = { slip_clip: ["delta"], roll_edit: ["delta"], slide_clip: ["delta"], lift_range: ["from", "to"], extract_range: ["from", "to"], split_at: ["at"] };
 var Editor = class {
   constructor(p) {
@@ -827,6 +1053,7 @@ var Editor = class {
     delete right.transition;
     delete right.fadeIn;
     delete right.fadeInCurve;
+    delete right.animateIn;
     const leftValues = clipAnimatables(clip);
     clipAnimatables(right).forEach((r, i) => {
       const [l, rr] = splitVideoAnimatable(leftValues[i].get(), at - clip.start);
@@ -836,6 +1063,7 @@ var Editor = class {
     this.moveIn(right, at - clip.start);
     clip.duration = at - clip.start;
     delete clip.fadeOut;
+    delete clip.animateOut;
     if (clip.type === "media") delete clip.fadeOutCurve;
     track.clips.push(right);
     track.clips.sort((a, b) => a.start - b.start);
@@ -1387,6 +1615,7 @@ function videoTitleFrame(project, clip, clipTime = 0) {
   return { time: clip.start, width: project.width, height: project.height, background: "rgba(0,0,0,0)", layers: [layer], audio: [] };
 }
 var clamp01 = (v) => Math.min(1, Math.max(0, v));
+var videoTransitionEase = (progress) => (1 - Math.cos(Math.PI * clamp01(progress))) / 2;
 function videoFadeCurveGain(curve, x) {
   const t = clamp01(x);
   switch (curve) {
@@ -1440,8 +1669,8 @@ function videoFrameAt(project, time) {
       if (outgoing?.type === "dip" && outgoing.progress >= 0.5) continue;
       const inside = Math.min(Math.max(time, clip.start), videoClipEnd(clip));
       const fade = fadeGain(clip, inside);
-      const level = (t, into) => t.type === "dip" ? Math.abs(1 - 2 * t.progress) : into ? t.progress : 1 - t.progress;
-      const mix = (incoming ? level(incoming, true) : 1) * (outgoing ? level(outgoing, false) : 1);
+      const level = (t, transition, into) => videoFadeCurveGain(videoTransitionAudioCurve(transition), t.type === "dip" ? Math.abs(1 - 2 * t.progress) : into ? t.progress : 1 - t.progress);
+      const mix = (incoming ? level(incoming, incoming.transition, true) : 1) * (outgoing ? level(outgoing, outgoing.next.transition, false) : 1);
       const asset = clip.type === "media" ? assets.get(clip.asset) : void 0;
       const sourceTime = sourceTimeAt(clip, time);
       const clipTime = time - clip.start;
@@ -1452,20 +1681,39 @@ function videoFrameAt(project, time) {
       }
       if (track.kind !== "video" || track.hidden) continue;
       if (clip.type === "media" && (!asset || asset.kind === "audio")) continue;
-      let opacity = videoValueAt(clip.opacity, clipTime, 1) * fade;
+      const shown = videoClipAnimated(clip, project);
+      let opacity = videoValueAt(shown.opacity, clipTime, 1) * fade;
       let wipe;
       let dip = null;
+      let iris;
+      let shift = 0;
+      let shiftDirection = "right";
       if (incoming) {
         if (incoming.type === "crossfade") opacity *= incoming.progress;
         else if (incoming.type === "wipe") wipe = { direction: incoming.transition.direction ?? "right", progress: incoming.progress };
-        else dip = { color: incoming.transition.color ?? "#000000", opacity: (1 - incoming.progress) * 2 };
+        else if (incoming.type === "iris") iris = { progress: incoming.progress };
+        else if (incoming.type === "push" || incoming.type === "slide") {
+          shiftDirection = incoming.transition.direction ?? "right";
+          shift = videoTransitionEase(incoming.progress) - 1;
+        } else dip = { color: incoming.transition.color ?? "#000000", opacity: (1 - incoming.progress) * 2 };
       }
       if (outgoing?.type === "dip") dip = { color: outgoing.next.transition.color ?? "#000000", opacity: outgoing.progress * 2 };
+      if (outgoing?.type === "push") {
+        shiftDirection = outgoing.next.transition.direction ?? "right";
+        shift = videoTransitionEase(outgoing.progress);
+      }
       const size = clip.type === "media" ? { width: asset.width ?? project.width, height: asset.height ?? project.height } : { width: project.width, height: project.height };
       const fit = clip.fit ?? (clip.type === "media" ? "contain" : "fill");
-      const rect = placeVideoRect(project, size, clip.type === "text" ? "fill" : fit, clip.transform, clipTime);
-      const layer = { clip: clip.id, track: track.id, type: clip.type, opacity: clamp01(opacity), rect, rotation: videoValueAt(clip.transform?.rotation, clipTime, 0) };
+      const placed = placeVideoRect(project, size, clip.type === "text" ? "fill" : fit, shown.transform, clipTime);
+      const across = shiftDirection === "left" || shiftDirection === "right";
+      const sign = shiftDirection === "left" || shiftDirection === "up" ? -1 : 1;
+      const rect = shift ? { ...placed, ...across ? { x: placed.x + sign * shift * project.width } : { y: placed.y + sign * shift * project.height } } : placed;
+      const layer = { clip: clip.id, track: track.id, type: clip.type, opacity: clamp01(opacity), rect, rotation: videoValueAt(shown.transform?.rotation, clipTime, 0) };
       if (wipe) layer.wipe = wipe;
+      if (iris) layer.iris = iris;
+      if (clip.blend && clip.blend !== "normal") layer.blend = clip.blend;
+      const grade = normalizeVideoGrade(clip.grade);
+      if (grade) layer.grade = grade;
       if (clip.type === "media") Object.assign(layer, { asset: asset.id, assetKind: asset.kind, src: asset.src, sourceTime });
       if (clip.type === "text") layer.text = videoTextStyle(clip);
       if (clip.type === "color") layer.color = clip.color;
@@ -1696,6 +1944,7 @@ var VideoAudioPeaksCache = class {
 // src/video-editor/render.ts
 var esc = (s) => s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
 var n = (v) => String(Math.round(v * 100) / 100);
+var videoIrisRadius = (frame, progress) => progress * Math.hypot(frame.width / 2, frame.height / 2);
 function videoWipeRect(rect, wipe) {
   const { direction, progress } = wipe;
   const w = rect.width * progress;
@@ -1713,6 +1962,11 @@ function videoFrameToSvg(frame, options = {}, assets = []) {
     const { rect } = layer;
     const attrs = [];
     if (layer.opacity < 1) attrs.push(`opacity="${n(layer.opacity)}"`);
+    if (layer.blend) attrs.push(`style="mix-blend-mode:${layer.blend === "add" ? "plus-lighter" : layer.blend}"`);
+    if (layer.grade) {
+      defs.push(videoGradeSvgFilter(`g${i}`, layer.grade));
+      attrs.push(`filter="url(#g${i})"`);
+    }
     if (layer.rotation) attrs.push(`transform="rotate(${n(layer.rotation)} ${n(rect.x + rect.width / 2)} ${n(rect.y + rect.height / 2)})"`);
     if (layer.wipe) {
       const r = videoWipeRect(rect, layer.wipe);
@@ -1744,7 +1998,12 @@ function videoFrameToSvg(frame, options = {}, assets = []) {
         inner = `<rect ${box} fill="#334155" stroke="#94a3b8" stroke-width="2"/><text x="${n(rect.x + rect.width / 2)}" y="${n(rect.y + rect.height / 2)}" text-anchor="middle" dominant-baseline="central" font-family="sans-serif" font-size="${n(size)}" fill="#e2e8f0">${esc(label)}</text>`;
       }
     }
-    body.push(attrs.length ? `<g ${attrs.join(" ")}>${inner}</g>` : inner);
+    let item = attrs.length ? `<g ${attrs.join(" ")}>${inner}</g>` : inner;
+    if (layer.iris) {
+      defs.push(`<clipPath id="i${i}"><circle cx="${n(frame.width / 2)}" cy="${n(frame.height / 2)}" r="${n(videoIrisRadius(frame, layer.iris.progress))}"/></clipPath>`);
+      item = `<g clip-path="url(#i${i})">${item}</g>`;
+    }
+    body.push(item);
   });
   return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${n(frame.width)} ${n(frame.height)}" width="${n(frame.width)}" height="${n(frame.height)}">${defs.length ? `<defs>${defs.join("")}</defs>` : ""}<rect width="100%" height="100%" fill="${esc(frame.background)}"/>${body.join("")}</svg>`;
 }
@@ -1768,7 +2027,7 @@ function videoContactSheetSvg(project, times, options = {}) {
   });
   return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${n(W)} ${n(H)}" width="${n(W)}" height="${n(H)}"><rect width="100%" height="100%" fill="#f8fafc"/>${cells.join("")}</svg>`;
 }
-function drawVideoFrame(ctx, frame, sourceFor, scale = 1) {
+function drawVideoFrame(ctx, frame, sourceFor, scale = 1, options = {}) {
   ctx.save();
   ctx.setTransform(scale, 0, 0, scale, 0, 0);
   ctx.globalAlpha = 1;
@@ -1778,6 +2037,18 @@ function drawVideoFrame(ctx, frame, sourceFor, scale = 1) {
     const { rect } = layer;
     ctx.save();
     ctx.globalAlpha = layer.opacity;
+    if (layer.iris) {
+      ctx.beginPath();
+      ctx.arc(frame.width / 2, frame.height / 2, videoIrisRadius(frame, layer.iris.progress), 0, 2 * Math.PI);
+      ctx.clip();
+    }
+    if (layer.blend && layer.blend !== "normal") ctx.globalCompositeOperation = layer.blend === "add" ? "lighter" : layer.blend;
+    if (layer.grade) {
+      const defs = videoGradeSvgDefs(layer.grade);
+      if (options.defineSvgFilter) for (const d of defs) options.defineSvgFilter(d.id, d.markup);
+      const css = videoGradeCssFilter(layer.grade);
+      ctx.filter = options.defineSvgFilter ? css : css.replace(/\s*url\([^)]*\)/g, "").trim() || "none";
+    }
     if (layer.rotation) {
       ctx.translate(rect.x + rect.width / 2, rect.y + rect.height / 2);
       ctx.rotate(layer.rotation * Math.PI / 180);
@@ -1858,7 +2129,7 @@ function toVideoEdl(project, options = {}) {
       const outReel = before.type === "media" ? reelName(assets.get(before.asset)) : "BL";
       const at = sourceAt(before, recIn);
       lines.push(row(n2, outReel, "C", at, at, recIn, recIn));
-      lines.push(row(n2, reel, `${t.type === "wipe" ? "W001" : "D"}    ${frames}`, sourceAt(clip, recIn), sourceAt(clip, recOut), recIn, recOut));
+      lines.push(row(n2, reel, `${t.type === "crossfade" || t.type === "dip" ? "D" : "W001"}    ${frames}`, sourceAt(clip, recIn), sourceAt(clip, recOut), recIn, recOut));
     } else lines.push(row(n2, reel, "C", sourceAt(clip, recIn), sourceAt(clip, recOut), recIn, recOut));
     if (clip.type === "media" && videoClipSpeed(clip) !== 1) lines.push(`M2   ${reel.padEnd(8)} ${(videoClipSpeed(clip) * fps).toFixed(1).padStart(6)}      ${tc(sourceAt(clip, recIn))}`);
     if (clip.type === "media") lines.push(`* FROM CLIP NAME: ${asset?.name ?? asset?.src ?? clip.asset}`);
@@ -1894,6 +2165,20 @@ function parseVideoLoudnessMeasurement(output) {
   return m;
 }
 var sec = (ms) => String(Math.round(ms) / 1e3);
+var FFMPEG_BLEND = {
+  multiply: "multiply",
+  screen: "screen",
+  overlay: "overlay",
+  darken: "darken",
+  lighten: "lighten",
+  "color-dodge": "dodge",
+  "color-burn": "burn",
+  "hard-light": "hardlight",
+  "soft-light": "softlight",
+  difference: "difference",
+  exclusion: "exclusion",
+  add: "addition"
+};
 var AFADE_CURVES = { linear: "tri", "equal-power": "qsin", "s-curve": "hsin", exponential: "cub", logarithmic: "ipar" };
 var afadeCurve = (curve) => curve && curve !== "linear" ? `:curve=${AFADE_CURVES[curve]}` : "";
 var even = (v) => Math.max(2, 2 * Math.round(v / 2));
@@ -1939,6 +2224,7 @@ function buildFfmpeg(project, options, measure) {
   let cur = "base";
   let usesDrawtext = false;
   const animated = /* @__PURE__ */ new Set();
+  const blended = /* @__PURE__ */ new Set();
   let k = 0;
   const step = 2e3 / fps;
   const expr = (prop, clipTime, fallback, what) => {
@@ -1954,7 +2240,8 @@ function buildFfmpeg(project, options, measure) {
     return inputs.length - 1;
   };
   for (const track of [...project.tracks].reverse()) {
-    for (const clip of sortedVideoClips(track)) {
+    for (const raw of sortedVideoClips(track)) {
+      const clip = videoClipAnimated(raw, project);
       const { lead, tail } = videoClipOverhang(track, clip);
       const t0 = clip.start - lead;
       const span = clip.duration + lead + tail;
@@ -1973,11 +2260,13 @@ function buildFfmpeg(project, options, measure) {
         const volume = isVideoKeyframes(clip.volume) ? `volume='${trackGain}*(${expr(clip.volume, `(t*1000${lead ? `-${Math.round(lead)}` : ""})`, 1, "volume")})':eval=frame` : `volume=${(clip.volume ?? 1) * trackGain}`;
         const chain2 = ["asetpts=PTS-STARTPTS", ...atempo(videoClipSpeed(clip)), volume];
         const before2 = clip.transition ? videoClipBefore(track, clip) : null;
-        if (lead) chain2.push(`afade=t=in:st=0:d=${sec(2 * lead)}`);
-        if (tail) chain2.push(`afade=t=out:st=${sec(span - 2 * tail)}:d=${sec(2 * tail)}`);
-        if (before2 && clip.transition.type === "dip") chain2.push(`afade=t=in:st=0:d=${sec(clip.transition.duration / 2)}`);
-        const after = sortedVideoClips(track).find((c) => c !== clip && Math.abs(c.start - end) < 0.5 && c.transition?.type === "dip");
-        if (after) chain2.push(`afade=t=out:st=${sec(span - after.transition.duration / 2)}:d=${sec(after.transition.duration / 2)}`);
+        const next2 = sortedVideoClips(track).find((c) => c !== clip && Math.abs(c.start - end) < 0.5 && c.transition);
+        const inCurve = clip.transition ? afadeCurve(videoTransitionAudioCurve(clip.transition)) : "";
+        const outCurve = next2 ? afadeCurve(videoTransitionAudioCurve(next2.transition)) : "";
+        if (lead) chain2.push(`afade=t=in:st=0:d=${sec(2 * lead)}${inCurve}`);
+        if (tail) chain2.push(`afade=t=out:st=${sec(span - 2 * tail)}:d=${sec(2 * tail)}${outCurve}`);
+        if (before2 && clip.transition.type === "dip") chain2.push(`afade=t=in:st=0:d=${sec(clip.transition.duration / 2)}${inCurve}`);
+        if (next2?.transition.type === "dip") chain2.push(`afade=t=out:st=${sec(span - next2.transition.duration / 2)}:d=${sec(next2.transition.duration / 2)}${outCurve}`);
         if (clip.fadeIn) chain2.push(`afade=t=in:st=${sec(lead)}:d=${sec(clip.fadeIn)}${afadeCurve(clip.fadeInCurve)}`);
         if (clip.fadeOut) chain2.push(`afade=t=out:st=${sec(lead + clip.duration - clip.fadeOut)}:d=${sec(clip.fadeOut)}${afadeCurve(clip.fadeOutCurve)}`);
         chain2.push(`adelay=${Math.round(t0)}:all=1`);
@@ -2016,6 +2305,8 @@ function buildFfmpeg(project, options, measure) {
           `enable='between(t,${sec(clip.start)},${sec(end)})'`
         ];
         if (tf?.rotation) notes.push(`Title "${clip.id}" is drawn without its rotation (drawtext cannot rotate).`);
+        if (videoGradeFfmpegFilters(clip.grade).length) notes.push(`Title "${clip.id}" is drawn without its grade (drawtext draws straight onto the picture); pass titleImage to grade titles.`);
+        if (clip.blend && clip.blend !== "normal") notes.push(`Title "${clip.id}" is drawn without its blend mode (drawtext draws straight onto the picture); pass titleImage to blend titles.`);
         graph.push(`[${cur}]drawtext=${opts.join(":")}[${next}]`);
         cur = next;
         continue;
@@ -2031,10 +2322,8 @@ function buildFfmpeg(project, options, measure) {
         source = `[${index}:v]`;
         chain.push(`setpts=${videoClipSpeed(clip) !== 1 ? `(PTS-STARTPTS)/${videoClipSpeed(clip)}` : "PTS-STARTPTS"}`, `fps=${fps}`, `scale=${even(rect.width)}:${even(rect.height)}`);
       }
-      if (isVideoKeyframes(placed?.scale)) {
-        const s = expr(placed.scale, onChain("t"), 1, "scale");
-        chain.push(`scale=w='max(2,trunc(${even(rect.width)}*(${s})/2)*2)':h='max(2,trunc(${even(rect.height)}*(${s})/2)*2)':eval=frame`);
-      }
+      const grade = videoGradeFfmpegFilters(clip.grade);
+      if (grade.length) chain.push("format=rgba", ...grade);
       chain.push("format=yuva420p");
       if (isVideoKeyframes(clip.opacity)) chain.push(`geq=lum='lum(X,Y)':cb='cb(X,Y)':cr='cr(X,Y)':a='alpha(X,Y)*clip(${expr(clip.opacity, onChain("T"), 1, "opacity")},0,1)'`);
       else if (clip.opacity !== void 0 && clip.opacity < 1) chain.push(`colorchannelmixer=aa=${clip.opacity}`);
@@ -2048,18 +2337,50 @@ function buildFfmpeg(project, options, measure) {
         const test = dir === "right" ? `lt(X,W*${p})` : dir === "left" ? `gt(X,W*(1-${p}))` : dir === "down" ? `lt(Y,H*${p})` : `gt(Y,H*(1-${p}))`;
         chain.push(`geq=lum='lum(X,Y)':cb='cb(X,Y)':cr='cr(X,Y)':a='if(${test},alpha(X,Y),0)'`);
       }
+      if (lead && clip.transition.type === "iris") {
+        const r = videoIrisRadius({ width: W, height: H }, 1);
+        chain.push(`geq=lum='lum(X,Y)':cb='cb(X,Y)':cr='cr(X,Y)':a='if(lte(hypot(X+${Math.round(rect.x)}-${W / 2},Y+${Math.round(rect.y)}-${H / 2}),${Math.round(r)}*min(1,T/${sec(2 * lead)})),alpha(X,Y),0)'`);
+      }
       const rotation = placed?.rotation;
-      if (isVideoKeyframes(rotation)) chain.push(`rotate=a='(${expr(rotation, onChain("t"), 0, "rotation")})*PI/180':c=none:ow='hypot(iw,ih)':oh=ow`);
-      else if (rotation) chain.push(`rotate=${rotation}*PI/180:c=none:ow=rotw(${rotation}*PI/180):oh=roth(${rotation}*PI/180)`);
+      if (isVideoKeyframes(rotation)) chain.push(`rotate=a='(${expr(rotation, onChain("t"), 0, "rotation")})*PI/180':c=black@0:ow='hypot(iw,ih)':oh=ow`);
+      else if (rotation) chain.push(`rotate=${rotation}*PI/180:c=black@0:ow=rotw(${rotation}*PI/180):oh=roth(${rotation}*PI/180)`);
+      if (isVideoKeyframes(placed?.scale)) {
+        const s = expr(placed.scale, onChain("t"), 1, "scale");
+        chain.push(`scale=w='max(2,trunc(iw*(${s})/2)*2)':h='max(2,trunc(ih*(${s})/2)*2)':eval=frame`);
+      }
       chain.push(`setpts=PTS+${sec(t0)}/TB`);
       const cx = rect.x + rect.width / 2;
       const cy = rect.y + rect.height / 2;
+      const shifts = { x: [], y: [] };
+      const shiftBy = (direction, from, d, entering) => {
+        const dir = direction ?? "right";
+        const axis = dir === "left" || dir === "right" ? "x" : "y";
+        const size2 = axis === "x" ? W : H;
+        const sign = dir === "left" || dir === "up" ? -1 : 1;
+        const ease = `(1-cos(PI*clip((t-${sec(from)})/${sec(d)},0,1)))/2`;
+        shifts[axis].push(`${sign * size2}*(${ease}${entering ? "-1" : ""})`);
+      };
+      const into = lead ? clip.transition.type : void 0;
+      if (into === "push" || into === "slide") shiftBy(clip.transition.direction, clip.start - lead, 2 * lead, true);
+      const after = tail ? sortedVideoClips(track).find((c) => c !== clip && Math.abs(c.start - end) < 0.5 && c.transition) : void 0;
+      if (after?.transition.type === "push") shiftBy(after.transition.direction, end - tail, 2 * tail, false);
       const at = (axis, c) => {
         const v = placed?.[axis];
-        return isVideoKeyframes(v) ? `${axis}='${Math.round(axis === "x" ? project.width / 2 : project.height / 2)}+(${expr(v, onTimeline, 0, "position")})-${axis === "x" ? "w" : "h"}/2'` : `${axis}='${Math.round(c)}-${axis === "x" ? "w" : "h"}/2'`;
+        const extra = shifts[axis].map((s) => `+${s}`).join("");
+        return isVideoKeyframes(v) ? `${axis}='${Math.round(axis === "x" ? project.width / 2 : project.height / 2)}+(${expr(v, onTimeline, 0, "position")})-${axis === "x" ? "w" : "h"}/2${extra}'` : `${axis}='${Math.round(c)}-${axis === "x" ? "w" : "h"}/2${extra}'`;
       };
       graph.push(`${source.startsWith("[") ? source : `${source},`}${chain.join(",")}[l${next}]`);
-      graph.push(`[${cur}][l${next}]overlay=${at("x", cx)}:${at("y", cy)}:eof_action=pass:${enable}[${next}]`);
+      if (clip.blend && clip.blend !== "normal") {
+        graph.push(`color=c=black@0:s=${W}x${H}:r=${fps}:d=${sec(D)},format=yuva420p[t${next}]`);
+        graph.push(`[t${next}][l${next}]overlay=${at("x", cx)}:${at("y", cy)}:eof_action=pass:${enable},format=gbrap,split[f${next}][g${next}]`);
+        graph.push(`[${cur}]format=gbrap,split[c${next}][d${next}]`);
+        const layerFirst = clip.blend === "color-dodge" || clip.blend === "color-burn";
+        graph.push(`${layerFirst ? `[f${next}][c${next}]` : `[c${next}][f${next}]`}blend=all_mode=${FFMPEG_BLEND[clip.blend]}[b${next}]`);
+        graph.push(`[g${next}]alphaextract[m${next}]`);
+        graph.push(`[b${next}][m${next}]alphamerge[x${next}]`);
+        graph.push(`[d${next}][x${next}]overlay=format=gbrp,format=yuva420p[${next}]`);
+        blended.add(clip.blend);
+      } else graph.push(`[${cur}][l${next}]overlay=${at("x", cx)}:${at("y", cy)}:eof_action=pass:${enable}[${next}]`);
       cur = next;
       const before = clip.transition ? videoClipBefore(track, clip) : null;
       if (before && clip.transition.type === "dip") {
@@ -2082,6 +2403,7 @@ function buildFfmpeg(project, options, measure) {
     notes.push('Video assets are assumed to have sound; set "hasAudio": false on any that do not, or ffmpeg will stop at a missing audio stream.');
   if (animated.size)
     notes.push(`Keyframed ${[...animated].sort().join(", ")} ${animated.size > 1 ? "are" : "is"} rendered as straight lines between keys, with eased segments sampled every two frames${animated.has("scale") ? "; animated scale needs ffmpeg 5 or later (scale with eval=frame)" : ""}.`);
+  if (blended.has("soft-light")) notes.push("ffmpeg's soft-light blend uses a slightly different formula from the browser's, so the render can differ a little from the preview.");
   if (usesDrawtext) notes.push("Titles use drawtext, which needs an ffmpeg built with libfreetype (Homebrew's is not: check `ffmpeg -filters | grep drawtext`); pass titleImage to render them as images instead.");
   const filterComplex = graph.join(";");
   if (measure) {
@@ -2129,6 +2451,8 @@ var VideoPreviewEngine = class {
   unsubscribe;
   scheduled = false;
   destroyed = false;
+  filterHost = null;
+  filters = /* @__PURE__ */ new Set();
   createMedia(kind) {
     if (this.options.createMedia) return this.options.createMedia(kind);
     const el = document.createElement(kind);
@@ -2230,12 +2554,31 @@ var VideoPreviewEngine = class {
     const h = Math.max(1, Math.round(frame.height * resolution));
     if (this.canvas.width !== w) this.canvas.width = w;
     if (this.canvas.height !== h) this.canvas.height = h;
-    drawVideoFrame(this.ctx, frame, this.sourceFor, resolution);
+    drawVideoFrame(this.ctx, frame, this.sourceFor, resolution, { defineSvgFilter: this.defineSvgFilter });
     this.options.onFrame?.(frame);
   }
+  defineSvgFilter = (id, markup) => {
+    if (this.options.defineSvgFilter === null) return;
+    if (this.options.defineSvgFilter) return this.options.defineSvgFilter(id, markup);
+    if (this.filters.has(id) || typeof document === "undefined") return;
+    if (!this.filterHost) {
+      const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+      svg.setAttribute("width", "0");
+      svg.setAttribute("height", "0");
+      svg.setAttribute("aria-hidden", "true");
+      svg.setAttribute("style", "position:absolute;width:0;height:0;overflow:hidden");
+      document.body.appendChild(svg);
+      this.filterHost = svg;
+    }
+    this.filterHost.insertAdjacentHTML("beforeend", markup);
+    this.filters.add(id);
+  };
   /** Stops following the editor and releases every media element. */
   destroy() {
     this.destroyed = true;
+    this.filterHost?.remove();
+    this.filterHost = null;
+    this.filters.clear();
     this.unsubscribe();
     for (const entry of [...this.media.values()]) this.release(entry);
     this.images.clear();
@@ -2529,19 +2872,37 @@ var TRANSFORM = object(
 );
 var TRANSITION = object(
   {
-    type: { type: "string", enum: [...VIDEO_TRANSITION_TYPES], description: "crossfade (this clip fades up over the one before), dip (down into a colour and up out of it) or wipe (an edge travels across revealing this clip)." },
-    duration: { type: "number", exclusiveMinimum: 0, description: "Length in ms, centred on the cut. A crossfade or wipe needs half of it in media past the cut on both sides (handles); a dip needs none." },
+    type: { type: "string", enum: [...VIDEO_TRANSITION_TYPES], description: "crossfade (this clip fades up over the one before), dip (down into a colour and up out of it), wipe (an edge travels across revealing this clip), push (this clip slides in and pushes the one before out), slide (this clip slides in over the one before) or iris (a circle opens from the centre)." },
+    duration: { type: "number", exclusiveMinimum: 0, description: "Length in ms, centred on the cut. Every type but dip needs half of it in media past the cut on both sides (handles); a dip needs none." },
     color: COLOR("For dip: the colour passed through (default black)"),
-    direction: { type: "string", enum: [...VIDEO_WIPE_DIRECTIONS], description: "For wipe: the way the edge travels (default right)." }
+    direction: { type: "string", enum: [...VIDEO_WIPE_DIRECTIONS], description: "For wipe, push and slide: the way the edge or picture travels (default right, coming in from the left)." },
+    audioCurve: { type: "string", enum: [...VIDEO_FADE_CURVES], description: "Shape of the sound's fades through it: default equal-power for every type but dip (steady loudness while the two sounds overlap), linear for dip; or s-curve, exponential, logarithmic." }
   },
   ["type", "duration"],
   "A transition from the clip that ends where this one starts on the same track."
 );
+var GRADE = object(
+  Object.fromEntries(VIDEO_GRADE_CONTROLS.map((c) => [c.key, { type: "number", minimum: c.min, maximum: c.max, description: c.description }])),
+  [],
+  "Colour correction of the picture, applied in order: exposure, contrast, saturation, hue, white balance (temperature, tint). Leave a setting out for no change; the object replaces the clip's whole grade."
+);
+var ANIMATION = (when) => object(
+  {
+    effect: { type: "string", enum: [...VIDEO_CLIP_ANIMATION_EFFECTS], description: "fade; rise (up into place) or drop (down into place); slide-left / slide-right (moving that way); zoom (grows into place); pop (grows past its size and settles). Each also fades; an exit plays the movement backwards." },
+    duration: { type: "number", exclusiveMinimum: 0, description: "Length in ms (default 500)." }
+  },
+  ["effect"],
+  when
+);
 var CLIP_COMMON = {
   name: { type: "string", description: "A label for the clip." },
   opacity: { type: "number", minimum: 0, maximum: 1, description: "Opacity 0\u20131 (default 1). A number replaces any keyframes; set_video_keyframes animates it." },
   transform: TRANSFORM,
   fit: { type: "string", enum: [...VIDEO_FITS], description: "How the picture fits the frame before the transform, as CSS object-fit (default contain for media, fill for colours)." },
+  grade: GRADE,
+  animateIn: ANIMATION("How the picture enters, from the clip's start (on top of any fade in). Titles usually rise, pop or fade in."),
+  animateOut: ANIMATION("How the picture leaves, ending at the clip's end."),
+  blend: { type: "string", enum: [...VIDEO_BLEND_MODES], description: "How the picture mixes with what is beneath it, as CSS mix-blend-mode (default normal): multiply darkens (shadows, textures), screen and add lighten (light leaks, flares, glows), overlay and soft-light add contrast, difference and exclusion invert." },
   fadeIn: MS("Fade up from nothing (picture and sound) over this long"),
   fadeOut: MS("Fade down to nothing over this long")
 };
@@ -2702,7 +3063,7 @@ function createVideoEditorToolProvider(controller, options = {}) {
   const getFrame = {
     name: "get_video_frame",
     title: "What plays at a moment",
-    description: "Returns what plays at a time without changing anything: the pictures back to front (clip, track, asset, source time in ms, opacity, placement rect, rotation, any wipe) and the sounds (clip, source time, gain after volumes, fades and transitions).",
+    description: "Returns what plays at a time without changing anything: the pictures back to front (clip, track, asset, source time in ms, opacity, placement rect, rotation, any wipe or iris) and the sounds (clip, source time, gain after volumes, fades and transitions).",
     inputSchema: object({ time: MS("Time from the start (default: the playhead)") }),
     annotations: { title: "What plays at a moment", ...READ },
     handler: ({ time }) => {
@@ -2724,7 +3085,7 @@ function createVideoEditorToolProvider(controller, options = {}) {
   const checkProject = {
     name: "check_video_project",
     title: "Check the video project",
-    description: "Lists the project's problems, errors first, each with a code, the clip / track / asset it is about and how to fix it: missing assets, overlaps, clips past the end of their source, transitions without a cut or handles, fades longer than the clip, keyframes outside their clip, assets with no duration, unused assets.",
+    description: "Lists the project's problems, errors first, each with a code, the clip / track / asset it is about and how to fix it: missing assets, overlaps, clips past the end of their source, transitions without a cut or handles, fades or animations longer than the clip, animations a clip's own keyframes override, keyframes outside their clip, assets with no duration, unused assets.",
     inputSchema: object({}),
     annotations: { title: "Check the video project", ...READ },
     handler: () => {
@@ -2956,12 +3317,12 @@ function createVideoEditorToolProvider(controller, options = {}) {
   const updateClip = {
     name: "update_video_clip",
     title: "Change a clip",
-    description: `Changes a clip's properties (one undo step): opacity, transform, fit, fades, name; for media volume, mute, the sound's fade curves, speed (keeps the stretch of source, so the length changes) or asset; for titles text and style; for colours the colour. Fields in "remove" go back to their defaults. Use move / trim for timing. Returns the clip.`,
+    description: `Changes a clip's properties (one undo step): opacity, transform, fit, blend mode, colour grade, entrance and exit animations, fades, name; for media volume, mute, the sound's fade curves, speed (keeps the stretch of source, so the length changes) or asset; for titles text and style; for colours the colour. Fields in "remove" go back to their defaults. Use move / trim for timing. Returns the clip.`,
     inputSchema: object(
       {
         clip: CLIP_ID,
         set: object({ ...CLIP_COMMON, ...MEDIA_FIELDS, asset: { ...ASSET_ID, description: "For media: play another asset (same in point)." }, ...TEXT_FIELDS, color: COLOR("Text colour, or a colour clip's fill") }, [], "Fields to replace (only those that fit the clip's type)."),
-        remove: { type: "array", items: { type: "string", enum: ["name", "opacity", "transform", "fit", "fadeIn", "fadeOut", "fadeInCurve", "fadeOutCurve", "in", "speed", "volume", "muted", "fontSize", "fontFamily", "fontWeight", "background"] }, description: "Fields to reset to their defaults." }
+        remove: { type: "array", items: { type: "string", enum: ["name", "opacity", "transform", "fit", "blend", "grade", "animateIn", "animateOut", "fadeIn", "fadeOut", "fadeInCurve", "fadeOutCurve", "in", "speed", "volume", "muted", "fontSize", "fontFamily", "fontWeight", "background"] }, description: "Fields to reset to their defaults." }
       },
       ["clip"]
     ),
@@ -2969,17 +3330,60 @@ function createVideoEditorToolProvider(controller, options = {}) {
     handler: ({ clip, set, remove }) => {
       const current = clipOut(project(), clip);
       if (current && set) {
-        const allowed = /* @__PURE__ */ new Set(["name", "opacity", "transform", "fit", "fadeIn", "fadeOut", ...current.type === "media" ? ["in", "speed", "volume", "muted", "asset", "fadeInCurve", "fadeOutCurve"] : current.type === "text" ? Object.keys(TEXT_FIELDS) : ["color"]]);
+        const allowed = /* @__PURE__ */ new Set(["name", "opacity", "transform", "fit", "blend", "grade", "animateIn", "animateOut", "fadeIn", "fadeOut", ...current.type === "media" ? ["in", "speed", "volume", "muted", "asset", "fadeInCurve", "fadeOutCurve"] : current.type === "text" ? Object.keys(TEXT_FIELDS) : ["color"]]);
         const wrong = Object.keys(set).filter((k) => !allowed.has(k));
         if (wrong.length) throw new Error(`${wrong.map((k) => `"${k}"`).join(", ")} cannot be set on a ${current.type} clip; it takes ${[...allowed].join(", ")}.`);
       }
       return apply({ op: "update_clip", clip, set, remove }, "Change clip", (r) => ({ clip: clipOut(r.project, clip) }));
     }
   };
+  const gradeTargets = (ids) => {
+    const p = project();
+    for (const id of ids) {
+      const at = findVideoClip(p, id);
+      if (!at) throw new Error(`There is no clip "${id}"; get_video_project lists the clips.`);
+      const { clip } = at;
+      if (at.track.kind !== "video" || clip.type === "media" && p.assets.find((a) => a.id === clip.asset)?.kind === "audio")
+        throw new Error(`Clip "${id}" is sound only; grades change pictures. Pass clips on video tracks.`);
+    }
+  };
+  const applyGradePreset = {
+    name: "apply_video_grade_preset",
+    title: "Apply a colour look",
+    description: "Gives clips a named colour look at a strength (one undo step), replacing their grades: warm, cool, punchy (more contrast and colour), faded (lifted and muted), black-and-white, bleach-bypass (desaturated, contrasty), day-for-night (dark and blue). Returns each clip's resulting grade; tweak it with update_video_clip set.grade.",
+    inputSchema: object(
+      {
+        clips: { type: "array", items: CLIP_ID, minItems: 1, description: "Clips on video tracks to grade." },
+        preset: { type: "string", enum: [...VIDEO_GRADE_PRESET_NAMES], description: "The look." },
+        amount: { type: "number", minimum: 0, maximum: 1, description: "Strength, 0 (none) to 1 (full, the default); 0.5 is a subtler version." }
+      },
+      ["clips", "preset"]
+    ),
+    annotations: { title: "Apply a colour look", ...WRITE_IDEMPOTENT },
+    handler: ({ clips, preset, amount }) => {
+      gradeTargets(clips);
+      const grade = videoGradePreset(preset, amount ?? 1);
+      const edits = clips.map((clip) => grade ? { op: "update_clip", clip, set: { grade } } : { op: "update_clip", clip, remove: ["grade"] });
+      return apply(edits, `Apply ${preset} look`, (r) => ({ clips: clips.map((id) => ({ id, grade: findVideoClip(r.project, id)?.clip.grade ?? null })) }));
+    }
+  };
+  const copyGrade = {
+    name: "copy_video_grade",
+    title: "Copy a colour grade",
+    description: "Gives clips the same colour grade as another clip (one undo step), to match shots in a scene; a source with no grade clears theirs. Returns the grade copied and the clips changed.",
+    inputSchema: object({ from: { ...CLIP_ID, description: "The clip whose grade to copy." }, to: { type: "array", items: CLIP_ID, minItems: 1, description: "Clips on video tracks to give it to." } }, ["from", "to"]),
+    annotations: { title: "Copy a colour grade", ...WRITE_IDEMPOTENT },
+    handler: ({ from, to }) => {
+      gradeTargets([from, ...to]);
+      const grade = findVideoClip(project(), from).clip.grade;
+      const edits = to.map((clip) => grade ? { op: "update_clip", clip, set: { grade: { ...grade } } } : { op: "update_clip", clip, remove: ["grade"] });
+      return apply(edits, "Copy grade", () => ({ grade: grade ?? null, clips: to }));
+    }
+  };
   const setTransition = {
     name: "set_video_transition",
     title: "Set a transition",
-    description: "Sets (or with null removes) the transition into a clip from the clip that ends where it starts on the same track (one undo step). A crossfade or wipe plays half before and half after the cut, so both clips need that much media past the cut; when they do not, the error says the longest that fits. Returns the clip.",
+    description: "Sets (or with null removes) the transition into a clip from the clip that ends where it starts on the same track (one undo step). Every type but dip plays half before and half after the cut, so both clips need that much media past the cut; when they do not, the error says the longest that fits. Returns the clip.",
     inputSchema: object({ clip: { ...CLIP_ID, description: "The incoming clip (the one after the cut)." }, transition: { anyOf: [TRANSITION, { type: "null" }], description: "The transition, or null to remove it." } }, ["clip", "transition"]),
     annotations: { title: "Set a transition", ...WRITE_IDEMPOTENT },
     handler: ({ clip, transition }) => apply({ op: "set_transition", clip, transition }, transition ? "Set transition" : "Remove transition", (r) => ({ clip: clipOut(r.project, clip) }))
@@ -3194,7 +3598,7 @@ function createVideoEditorToolProvider(controller, options = {}) {
     }
   };
   const reads = [getProject, getFrame, findGaps, checkProject, renderFrame, exportFfmpeg, exportLoudnessMeasure, exportEdl, audioLevels, findSilences, seek];
-  const writes = [setSettings, addAsset, updateAsset, removeAsset, addTrack, updateTrack, removeTrack, moveTrack, addClip, moveClip, trimClip, splitClip, deleteClips, updateClip, setTransition, setKeyframes, removeKeyframes, slipClip, rollEdit, slideClip, liftRange, extractRange, splitAt, closeGaps, addMarker, removeMarker, editVideo, undo, redo];
+  const writes = [setSettings, addAsset, updateAsset, removeAsset, addTrack, updateTrack, removeTrack, moveTrack, addClip, moveClip, trimClip, splitClip, deleteClips, updateClip, setTransition, applyGradePreset, copyGrade, setKeyframes, removeKeyframes, slipClip, rollEdit, slideClip, liftRange, extractRange, splitAt, closeGaps, addMarker, removeMarker, editVideo, undo, redo];
   return {
     id: options.id ?? "video",
     namespace: options.namespace,
@@ -3230,6 +3634,39 @@ function videoClipShowsWaveform(clip, asset, mode = "audio") {
   if (clip.type !== "media" || mode === "none" || !videoAssetHasSound(asset)) return false;
   return mode === "all" || asset.kind === "audio";
 }
+var VIDEO_CLIP_ANIMATION_LABELS = {
+  fade: "Fade",
+  rise: "Rise",
+  drop: "Drop",
+  "slide-left": "Slide left",
+  "slide-right": "Slide right",
+  zoom: "Zoom",
+  pop: "Pop"
+};
+var VIDEO_TRANSITION_LABELS = {
+  crossfade: "Crossfade",
+  dip: "Dip to colour",
+  wipe: "Wipe",
+  push: "Push",
+  slide: "Slide",
+  iris: "Iris"
+};
+var videoTransitionHasDirection = (type) => type === "wipe" || type === "push" || type === "slide";
+var VIDEO_BLEND_MODE_LABELS = {
+  normal: "Normal",
+  multiply: "Multiply",
+  screen: "Screen",
+  overlay: "Overlay",
+  darken: "Darken",
+  lighten: "Lighten",
+  "color-dodge": "Colour dodge",
+  "color-burn": "Colour burn",
+  "hard-light": "Hard light",
+  "soft-light": "Soft light",
+  difference: "Difference",
+  exclusion: "Exclusion",
+  add: "Add"
+};
 var VIDEO_FADE_CURVE_LABELS = {
   linear: "Linear",
   "equal-power": "Equal power",
@@ -3400,6 +3837,11 @@ function videoKeyframeToggleEdit(project, clipId, property, time) {
   return { op: "set_keyframes", clip: clipId, property, keys: isVideoKeyframes(prop) ? setVideoKey(prop, { t, v }, fallback).keys : [{ t, v }] };
 }
 export {
+  VIDEO_BLEND_MODES,
+  VIDEO_BLEND_MODE_LABELS,
+  VIDEO_CLIP_ANIMATION_DURATION,
+  VIDEO_CLIP_ANIMATION_EFFECTS,
+  VIDEO_CLIP_ANIMATION_LABELS,
   VIDEO_CLIP_TYPES,
   VIDEO_DEFAULT_STILL_DURATION,
   VIDEO_DEFAULT_TITLE_DURATION,
@@ -3408,6 +3850,9 @@ export {
   VIDEO_FADE_CURVES,
   VIDEO_FADE_CURVE_LABELS,
   VIDEO_FITS,
+  VIDEO_GRADE_CONTROLS,
+  VIDEO_GRADE_PRESETS,
+  VIDEO_GRADE_PRESET_NAMES,
   VIDEO_ISSUE_CODES,
   VIDEO_KEYFRAME_LIMITS,
   VIDEO_KEYFRAME_PROPERTIES,
@@ -3415,6 +3860,7 @@ export {
   VIDEO_PLACEMENT_MODES,
   VIDEO_TIME_EPSILON,
   VIDEO_TRANSFORM_PROPERTIES,
+  VIDEO_TRANSITION_LABELS,
   VIDEO_TRANSITION_TYPES,
   VIDEO_WIPE_DIRECTIONS,
   VideoAudioPeaksCache,
@@ -3422,6 +3868,7 @@ export {
   VideoPreviewEngine,
   allVideoClipIds,
   applyVideoEdits,
+  applyVideoGrade,
   buildVideoAudioPeaks,
   checkVideoProject,
   createVideoEditorToolProvider,
@@ -3439,9 +3886,12 @@ export {
   isVideoDropFrameRate,
   isVideoKeyframes,
   nextFreeVideoSlot,
+  normalizeVideoGrade,
   parseVideoAnimatable,
   parseVideoAsset,
   parseVideoClip,
+  parseVideoClipAnimation,
+  parseVideoGrade,
   parseVideoKeyframes,
   parseVideoLoudnessMeasurement,
   parseVideoMarker,
@@ -3472,6 +3922,9 @@ export {
   videoAudioPeakSpans,
   videoAudioPeaksDuration,
   videoClipAfter,
+  videoClipAnimated,
+  videoClipAnimationProperties,
+  videoClipAnimationSpans,
   videoClipBefore,
   videoClipEnd,
   videoClipHandles,
@@ -3496,7 +3949,17 @@ export {
   videoFrameDuration,
   videoFrameToSvg,
   videoFrames,
+  videoGradeCssFilter,
+  videoGradeFfmpegFilters,
+  videoGradeGainsFilterId,
+  videoGradePreset,
+  videoGradeStepMatrix,
+  videoGradeStepSvgValues,
+  videoGradeSteps,
+  videoGradeSvgDefs,
+  videoGradeSvgFilter,
   videoHourFrames,
+  videoIrisRadius,
   videoIssueKey,
   videoKeyframeBreakpoints,
   videoKeyframeFfmpegExpr,
@@ -3515,6 +3978,9 @@ export {
   videoTitleFrame,
   videoTrackSyncLocked,
   videoTransformAt,
+  videoTransitionAudioCurve,
+  videoTransitionEase,
+  videoTransitionHasDirection,
   videoValueAt,
   videoWaveformPath,
   videoWipeRect