@gentbajko/slopify 2.3.0 → 2.4.0

package/dist/slices/video/ffmpeg.js

@@ -1,6 +1,8 @@
 import { spawn } from "node:child_process";
 import { isAbsolute, resolve as resolvePath } from "node:path";
+import { gradeFilter, lookChain, lookEncoding, placed } from "./look.js";
 import { decimal, zoomRange } from "./plan.js";
+import { segments, transitionHalves } from "./transitions.js";
 // Hand-rolled per the standards: the filtergraph is the load-bearing part of this slice
 // and a wrapper would hide it. Every value goes into an argument array, never a shell
 // string, so a title or a filename cannot become a command.
@@ -33,49 +35,173 @@ export function resolveFfmpeg(env, bundled) {
 export function slideshowClips(edit) {
     const clips = [];
     const named = new Map();
-    const order = edit.shots.map((shot) => {
-        // The motion is plain data built in a fixed key order, so equal motions stringify
-        // alike.
-        const key = JSON.stringify([shot.source, shot.motion, shot.frames]);
+    const order = segments(edit.shots).map((segment) => {
+        const key = clipKey(edit, segment);
         let name = named.get(key);
         if (name === undefined) {
             name = `c${clips.length + 1}.mp4`;
             named.set(key, name);
-            clips.push({ name, shot });
+            const shot = edit.shots[segment.kind === "shot" ? segment.shot : segment.to];
+            if (shot === undefined)
+                throw new Error("Slopify hit an internal error (the video's edit list lost a shot). Use Re-run section on Video; if it happens again, use Download diagnostics in Settings and report it.");
+            clips.push({ name, segment, shot, frames: segment.count });
         }
         return name;
     });
     return { clips, order };
 }
+// What makes two clips the same encode. The motion is plain data built in a fixed key order,
+// so equal motions stringify alike. A whole shot keeps the key it always had, so an edit
+// list without transitions or a Look dedupes exactly as before.
+function clipKey(edit, segment) {
+    const at = placed(edit, segment.start, segment.count) ? segment.start : null;
+    if (segment.kind === "transition") {
+        const from = edit.shots[segment.from];
+        const to = edit.shots[segment.to];
+        return JSON.stringify([
+            "transition",
+            from?.source,
+            from?.motion,
+            from?.frames,
+            to?.source,
+            to?.motion,
+            to?.frames,
+            to?.transition,
+            at,
+        ]);
+    }
+    const shot = edit.shots[segment.shot];
+    const whole = segment.from === 0 && segment.count === shot?.frames;
+    return JSON.stringify(whole && at === null
+        ? [shot?.source, shot?.motion, shot?.frames]
+        : [shot?.source, shot?.motion, shot?.frames, segment.from, segment.count, at]);
+}
 // Clips that are joined by copying get the final encode's settings. Clips that will be
 // decoded again under burned-in captions are kept closer to the source, so the second
 // encode is not a visible second generation.
 const intermediateCrf = "16";
+// A whole shot as one clip.
 export function clipArgs(frame, shot, output, intermediate = false) {
-    const move = zoompan(shot.motion, shot.frames);
-    // A still that does not move has no sub-pixel steps to smooth, so it is not prescaled.
-    const factor = move === undefined ? 1 : prescale;
-    const wide = frame.width * factor;
-    const tall = frame.height * factor;
+    return segmentArgs({ ...frame, shots: [shot] }, { kind: "shot", shot: 0, from: 0, count: shot.frames, start: 0 }, output, intermediate);
+}
+// One clip of the slideshow: part of a shot, or a transition between two, with the Look.
+export function segmentArgs(edit, segment, output, intermediate = false, 
+// The clip's own chapter-card script, beside it in the working folder (`cards.ts`).
+cardsFile = "cards.ass") {
+    const inputs = [];
+    const chains = [];
+    const picture = (shot, from, label) => {
+        if (shot === undefined)
+            throw new Error("Slopify hit an internal error (the video's edit list lost a shot). Use Re-run section on Video; if it happens again, use Download diagnostics in Settings and report it.");
+        const at = inputs.filter((one) => one === "-i").length;
+        const built = pictureChain(edit, shot, from, segment.count, at, label, gradeFilter(edit.look));
+        inputs.push(...built.inputs);
+        chains.push(built.chain);
+    };
+    const look = lookChain(edit, segment.start, segment.count, "[p]", "[v]", cardsFile);
+    const picked = look === undefined ? "[v]" : "[p]";
+    if (segment.kind === "shot")
+        picture(edit.shots[segment.shot], segment.from, picked);
+    else {
+        const before = edit.shots[segment.from];
+        const after = edit.shots[segment.to];
+        const halves = transitionHalves(segment.count);
+        picture(before, (before?.frames ?? 0) - halves.tail, "[ta]");
+        picture(after, -halves.tail, "[tb]");
+        const style = after?.transition?.kind ?? "crossfade";
+        chains.push(`[ta][tb]xfade=transition=${xfadeNames[style]}:duration=${seconds6(segment.count / edit.fps)}:offset=0${picked}`);
+    }
+    if (look !== undefined)
+        chains.push(look);
     return [
         ...progressArgs,
-        "-i",
-        shot.source.path,
+        ...inputs,
         "-filter_complex",
-        `[0:v]trim=end_frame=1,setpts=PTS-STARTPTS,` +
-            // Cover the frame and centre-crop, never letterbox.
-            `scale=${wide}:${tall}:force_original_aspect_ratio=increase,crop=${wide}:${tall},` +
-            `zoompan=z='${move?.z ?? "1"}':d=${shot.frames}:` +
-            `x='${move?.x ?? centredX}':y='${move?.y ?? centredY}':` +
-            `s=${frame.width}x${frame.height}:fps=${frame.fps},setsar=1[v]`,
+        chains.join(";"),
         "-map",
         "[v]",
+        // The clip is exactly its frames, whatever a filter's rounding of seconds would give.
+        ...(segment.kind === "shot" && segment.from === 0 && look === undefined
+            ? []
+            : ["-frames:v", String(segment.count)]),
         ...videoCodec,
+        ...lookEncoding(edit.look),
         ...(intermediate ? ["-crf", intermediateCrf] : []),
         "-an",
         output,
     ];
 }
+const xfadeNames = {
+    crossfade: "fade",
+    fadeblack: "fadeblack",
+    slide: "slideleft",
+    wipe: "wipeleft",
+};
+// The picture of `count` frames of `shot` from its own frame `from`, into `label`. A frame
+// before the shot's first shows its first, and one past its last shows its last (a still's
+// motion holds) or plays on (a clip keeps running), which is what a transition overlapping
+// the cut shows.
+function pictureChain(frame, shot, from, count, input, label, grade) {
+    const source = shot.source;
+    if (source.kind === "video") {
+        const { width, height, fps } = frame;
+        const pad = Math.max(0, -from);
+        const first = from + pad;
+        return {
+            // Looped for as long as the shot needs; trim ends the stream.
+            inputs: ["-stream_loop", "-1", "-i", source.path],
+            chain: `[${String(input)}:v]setpts=(PTS-STARTPTS)*${slowdown(source.seconds, shot.frames / fps)},` +
+                `fps=${String(fps)},` +
+                `scale=${String(width)}:${String(height)}:force_original_aspect_ratio=increase,` +
+                `crop=${String(width)}:${String(height)},setsar=1,` +
+                (grade === undefined ? "" : `${grade},`) +
+                (pad > 0 ? `tpad=start=${String(pad)}:start_mode=clone,` : "") +
+                `trim=start_frame=${String(first)}:end_frame=${String(first + count)},` +
+                // Padding and trimming drop the declared rate, which a transition needs to match.
+                `setpts=PTS-STARTPTS,fps=${String(fps)},format=yuv420p${label}`,
+        };
+    }
+    const move = zoompan(shot.motion, shot.frames, frameExpression(from, count, shot.frames));
+    // A still that does not move has no sub-pixel steps to smooth, so it is not prescaled.
+    const factor = move === undefined ? 1 : prescale;
+    const wide = frame.width * factor;
+    const tall = frame.height * factor;
+    // Clips that meet in a transition are brought to one pixel format first, since xfade
+    // refuses to blend two that differ; a plain shot is left as it always was.
+    const plain = from === 0 && count === shot.frames;
+    return {
+        inputs: ["-i", source.path],
+        chain: `[${String(input)}:v]trim=end_frame=1,setpts=PTS-STARTPTS,` +
+            // The grade is applied here, to the one still frame, rather than to every frame after.
+            (grade === undefined ? "" : `${grade},`) +
+            // Cover the frame and centre-crop, never letterbox.
+            `scale=${wide}:${tall}:force_original_aspect_ratio=increase,crop=${wide}:${tall},` +
+            `zoompan=z='${move?.z ?? "1"}':d=${count}:` +
+            `x='${move?.x ?? centredX}':y='${move?.y ?? centredY}':` +
+            `s=${frame.width}x${frame.height}:fps=${frame.fps},setsar=1${plain ? "" : ",format=yuv420p"}${label}`,
+    };
+}
+// ceiling: a clip shorter than its shot is slowed to at most half speed, which still reads
+// as natural motion; past that it loops.
+const slowestSpeed = 2;
+// How much a clip of `clip` seconds is stretched to fill a shot of `shot` seconds, as exact
+// decimal text: 1 when it is long enough.
+export function slowdown(clip, shot) {
+    if (!(clip > 0) || shot <= clip)
+        return "1";
+    return decimal(Math.round(Math.min(slowestSpeed, shot / clip) * 1000));
+}
+// zoompan's `on` counts the clip's own frames from 0; a clip that starts `from` frames into
+// its shot adds that, and one that reaches before or past the shot holds at its ends.
+function frameExpression(from, count, frames) {
+    const shifted = from === 0 ? "on" : `(on${from > 0 ? "+" : "-"}${String(Math.abs(from))})`;
+    return from < 0 || from + count > frames
+        ? `clip(${shifted},0,${String(Math.max(0, frames - 1))})`
+        : shifted;
+}
+function seconds6(value) {
+    return value.toFixed(6);
+}
 // The concat demuxer's own format. Names are resolved beside the list and are this
 // module's `cN.mp4`, so nothing in them needs quoting.
 export function concatList(order) {
@@ -110,7 +236,7 @@ export function joinArgs(edit, output, list, burnSubtitles = false) {
         "-map",
         burnSubtitles ? "[v]" : "0:v",
         ...(edit.audio.length > 0 ? ["-map", "[a]"] : []),
-        ...(burnSubtitles ? videoCodec : ["-c:v", "copy"]),
+        ...(burnSubtitles ? [...videoCodec, ...lookEncoding(edit.look)] : ["-c:v", "copy"]),
         ...(edit.audio.length > 0 ? ["-c:a", "aac"] : ["-an"]),
         "-movflags",
         "+faststart",
@@ -132,10 +258,10 @@ const videoCodec = ["-c:v", "libx264", "-pix_fmt", "yuv420p"];
 const centredX = "iw/2-(iw/zoom/2)";
 const centredY = "ih/2-(ih/zoom/2)";
 // zoompan's expressions for a motion, or undefined for one that does not move. `on` is
-// zoompan's output frame counter, 0 to d-1, and a one-frame shot has no span to divide
-// by, so it holds where it starts. `zoom` in x and y is the current zoom, so iw-iw/zoom
-// is the room the crop window has to travel in.
-function zoompan(motion, frames) {
+// zoompan's output frame counter, 0 to d-1 (`at` shifts it for part of a shot), and a
+// one-frame shot has no span to divide by, so it holds where it starts. `zoom` in x and y is
+// the current zoom, so iw-iw/zoom is the room the crop window has to travel in.
+function zoompan(motion, frames, at = "on") {
     if (motion.kind === "still")
         return undefined;
     const range = zoomRange(motion.percent);
@@ -147,27 +273,27 @@ function zoompan(motion, frames) {
         const z = motion.direction === "in"
             ? span < 1
                 ? range.from
-                : `${range.from}+${range.by}*on/${span}`
+                : `${range.from}+${range.by}*${at}/${span}`
             : span < 1
                 ? range.to
-                : `${range.to}-${range.by}*on/${span}`;
+                : `${range.to}-${range.by}*${at}/${span}`;
         return { z, x: centredX, y: centredY };
     }
     return {
         z: range.to,
-        x: `(iw-iw/zoom)*(${travel(motion.from.x, motion.to.x, span)})`,
-        y: `(ih-ih/zoom)*(${travel(motion.from.y, motion.to.y, span)})`,
+        x: `(iw-iw/zoom)*(${travel(motion.from.x, motion.to.x, span, at)})`,
+        y: `(ih-ih/zoom)*(${travel(motion.from.y, motion.to.y, span, at)})`,
     };
 }
 // A share of the room from `from` to `to`, linear over the shot. Built in whole
 // thousandths as decimal text, like the zoom, so 1 - 0.5 reads 0.5 and never
 // 0.49999999999999994.
-function travel(from, to, span) {
+function travel(from, to, span, at) {
     const start = Math.round(from * 1000);
     const by = Math.round(to * 1000) - start;
     if (span < 1 || by === 0)
         return decimal(start);
-    return `${decimal(start)}${by > 0 ? "+" : "-"}${decimal(Math.abs(by))}*on/${span}`;
+    return `${decimal(start)}${by > 0 ? "+" : "-"}${decimal(Math.abs(by))}*${at}/${span}`;
 }
 function seconds(value) {
     return value.toFixed(3);

package/dist/slices/video/look.js

@@ -0,0 +1,164 @@
+// The Look: filters appended to each clip's picture before it is encoded, so they cost one
+// pass over frames that are being made anyway and the render stays clip by clip. Everything
+// is ffmpeg's own filters with fixed numbers: no footage, no LUT files, and the same project
+// renders the same frames every time.
+//
+// The colour grade is applied to each source before its picture is built (`gradeFilter`):
+// once on a still, before zoompan turns it into frames, rather than on every frame. So the
+// overlay and the vignette sit on graded colour. Order matters for the rest: the atmosphere
+// first; then the vignette darkens both; the chapter card is drawn on top of that
+// so its text stays clean; the grain last, over everything, as film grain is.
+// ceiling: the owner's eye on test renders. Subtle darkens the corners a little, strong
+// makes a clear frame of shadow.
+const vignetteAngle = {
+    subtle: "0.45",
+    strong: "0.75",
+};
+// Temporal noise on brightness only, so the grain moves like film and never tints.
+const grainStrength = {
+    subtle: 8,
+    strong: 16,
+};
+// The encoder settings a Look asks for: x264 smooths fine noise away at its default tuning,
+// so grain is encoded with its grain tuning. Every clip of one render has the same Look, so
+// the clips still join by copying.
+export function lookEncoding(look) {
+    return look !== undefined && look.grain !== "off" ? ["-tune", "grain"] : [];
+}
+const grades = {
+    // Golden highlights, a touch of amber in the mids, cooler shadows kept for depth.
+    warm: "colorbalance=rs=0.02:bs=0.04:rm=0.08:gm=0.02:bm=-0.07:rh=0.07:gh=0.03:bh=-0.08," +
+        "eq=saturation=1.12:contrast=1.04",
+    // Blue-green shadows and mids, highlights barely touched.
+    cold: "colorbalance=rs=-0.06:bs=0.08:rm=-0.05:gm=0.01:bm=0.06:rh=-0.02:bh=0.03,eq=saturation=0.9",
+    desaturated: "eq=saturation=0.55:contrast=1.06",
+    // The classic sepia matrix.
+    sepia: "colorchannelmixer=rr=0.393:rg=0.769:rb=0.189:gr=0.349:gg=0.686:gb=0.168:br=0.272:bg=0.534:bb=0.131",
+};
+// The grade as a filter for a picture's source, or undefined for none: a still is graded once,
+// a clip frame by frame.
+export function gradeFilter(look) {
+    return look === undefined || look.grade === "none" ? undefined : grades[look.grade];
+}
+export function hasLook(look) {
+    return (look !== undefined &&
+        (look.vignette !== "off" ||
+            look.grain !== "off" ||
+            look.grade !== "none" ||
+            look.atmosphere !== "none"));
+}
+// The cards a clip at `start` of `count` frames shows any part of.
+export function cardsIn(cards, start, count) {
+    return (cards ?? []).filter((card) => card.startFrame < start + count && card.startFrame + card.frames > start);
+}
+// Whether a clip's pixels depend on where it sits on the timeline: an atmosphere drifts with
+// the video's clock and a card is drawn at its own time, so such a clip is never reused at
+// another place.
+export function placed(edit, start, count) {
+    return ((edit.look !== undefined && edit.look.atmosphere !== "none") ||
+        cardsIn(edit.cards, start, count).length > 0);
+}
+// The filters that take the clip's picture from `input` to `output`, or undefined when there
+// is nothing to add. `start` is the clip's first frame on the timeline. Cards are read from
+// `cardsFile`, the clip's own script with its times counted from the clip's first frame
+// (`cards.ts`), and `fonts/`, both in the render's working folder.
+export function lookChain(edit, start, count, input, output, cardsFile = "cards.ass") {
+    const look = edit.look;
+    const steps = [];
+    let at = input;
+    let n = 0;
+    const next = () => {
+        n += 1;
+        return `[look${String(n)}]`;
+    };
+    const simple = (filters) => {
+        if (filters.length === 0)
+            return;
+        const label = next();
+        steps.push(`${at}${filters.join(",")}${label}`);
+        at = label;
+    };
+    if (look !== undefined && look.atmosphere !== "none") {
+        const texture = next();
+        const blended = next();
+        steps.push(`${atmosphereSource(edit, look.atmosphere, start)}${texture}`);
+        // Laid over the picture by its alpha, in the picture's own YUV: converting every frame
+        // to RGB for a screen blend doubled a clip's render time.
+        steps.push(`${at}${texture}overlay=shortest=1:format=yuv420${blended}`);
+        at = blended;
+    }
+    const after = [];
+    if (look !== undefined && look.vignette !== "off")
+        after.push(`vignette=angle=${vignetteAngle[look.vignette]}`);
+    if (cardsIn(edit.cards, start, count).length > 0)
+        after.push(`ass=filename=${cardsFile}:fontsdir=fonts`);
+    if (look !== undefined && look.grain !== "off")
+        after.push(`noise=c0s=${String(grainStrength[look.grain])}:c0f=t+u`);
+    simple(after);
+    if (steps.length === 0)
+        return undefined;
+    const last = steps.length - 1;
+    steps[last] = `${(steps[last] ?? "").slice(0, -at.length)}${output}`;
+    return steps.join(";");
+}
+const atmosphereOpacity = {
+    embers: "1",
+    dust: "0.6",
+    fog: "1",
+};
+// A still texture made once per clip, then moved: embers rise and drift left, dust wanders,
+// fog rolls sideways along the bottom of the frame. `scroll` wraps the texture round, which
+// leaves no seam for sparse specks, and the fog is mirrored side to side first so its wrap
+// has none either. The scroll starts where the timeline has it at the clip's first frame, so
+// the overlay runs on unbroken across cuts.
+//
+// The specks come from ffmpeg's `noise` (geq's random() repeats in visible columns): one
+// grey level of uniform noise marks about 1% of the pixels, and multiplying by a second,
+// flipped noise field thins them and varies their brightness. Everything is fixed numbers,
+// so the texture is the same on every run.
+function atmosphereSource(frame, atmosphere, start) {
+    const { width, height, fps } = frame;
+    const size = `${String(width)}x${String(height)}`;
+    const grid = (divisor) => `${String(Math.max(2, Math.round(width / divisor)))}x${String(Math.max(2, Math.round(height / divisor)))}`;
+    // A grey field of `grid` with about one pixel in a hundred lit, thinned by a second field
+    // cut at `cut` and scaled by `gain`; into `label`, still the grid's size.
+    const specks = (at, seed, cut, gain, label) => `color=c=0x808080:s=${at}:r=${String(fps)}:d=1,format=gbrp,split[${label}a][${label}b];` +
+        `[${label}a]noise=c0s=100:c0f=u:c0_seed=${String(seed)},lutrgb=g='if(eq(val,177),255,0)'[${label}c];` +
+        `[${label}b]noise=c0s=100:c0f=u:c0_seed=${String(seed + 2)},` +
+        `lutrgb=g='max(0,min(255,(val-${String(cut)})*${String(gain)}))',hflip,vflip[${label}d];` +
+        `[${label}c][${label}d]blend=all_mode=multiply[${label}]`;
+    // The green plane carries the texture; the mixer tints it into all three.
+    const tint = (r, g, b) => `colorchannelmixer=rr=0:rg=${String(r)}:rb=0:gr=0:gg=${String(g)}:gb=0:br=0:bg=${String(b)}:bb=0`;
+    // The texture as light over a transparent frame, made once before it loops: each pixel keeps
+    // its hue at full brightness, and how bright it was (times the atmosphere's strength)
+    // becomes how opaque it is, which is a screen blend's look for a dark background.
+    const peak = "max(r(X,Y),max(g(X,Y),b(X,Y)))";
+    const lit = (plane) => `if(gt(${peak},0),255*${plane}(X,Y)/${peak},0)`;
+    const light = `format=gbrap,geq=r='${lit("r")}':g='${lit("g")}':b='${lit("b")}':` +
+        `a='${peak}*${atmosphereOpacity[atmosphere]}',format=yuva420p`;
+    const moving = (h, v) => `${light},loop=loop=-1:size=1,setpts=N/(${String(fps)}*TB),` +
+        `scroll=h=${String(h)}:v=${String(v)}:hpos=${position(h, start)}:vpos=${position(v, start)}`;
+    if (atmosphere === "embers")
+        // Small sparks and a few large soft glows, orange, rising.
+        return (`${specks(grid(4), 7, 168, 24, "es")};${specks(grid(20), 3, 142, 7, "eb")};` +
+            `[es]scale=${size}:flags=bicubic,gblur=sigma=1.3,lutrgb=g='min(255,val*2.4)'[esx];` +
+            `[eb]scale=${size}:flags=bicubic,gblur=sigma=14,lutrgb=g='min(255,val*6)'[ebx];` +
+            `[esx][ebx]blend=all_mode=addition,${tint(1, 0.48, 0.12)},${moving(0.0003, 0.0022)}`);
+    if (atmosphere === "dust")
+        // Fine warm-white motes drifting slowly across.
+        return (`${specks(grid(3), 17, 160, 12, "ds")};` +
+            `[ds]scale=${size}:flags=bicubic,gblur=sigma=1.1,lutrgb=g='min(255,val*2)',` +
+            `${tint(1, 0.95, 0.85)},${moving(0.0005, -0.00025)}`);
+    // Soft blotches from a tiny noise field blown up and blurred, faded out towards the top.
+    return (`color=c=0x808080:s=${grid(80)}:r=${String(fps)}:d=1,format=gbrp,` +
+        "noise=c0s=100:c0f=u:c0_seed=23," +
+        `scale=${size}:flags=bicubic,gblur=sigma=70,lutrgb=g='max(0,min(255,(val-95)*3.2))',` +
+        "geq=r='g(X,Y)*pow(Y/H,1.6)':g='g(X,Y)*pow(Y/H,1.6)':b='g(X,Y)*pow(Y/H,1.6)'," +
+        "colorchannelmixer=rr=0.92:gg=0.95:bb=1,split[fa][fb];[fb]hflip[fc];[fa][fc]hstack," +
+        `${moving(0.0006, 0)},crop=${String(width)}:${String(height)}:0:0`);
+}
+// Where a texture scrolling `speed` of its size per frame has got to by frame `start`.
+function position(speed, start) {
+    const travelled = (((speed * start) % 1) + 1) % 1;
+    return travelled.toFixed(6);
+}

package/dist/slices/video/plan.js

@@ -1,5 +1,9 @@
+import { chapterCuts, narrationShotFrames } from "./cuts.js";
 import { editListVersion, } from "./edit-list.js";
+import { chapterCardSeconds } from "./edit-settings.js";
+import { hasLook } from "./look.js";
 import { motionFor } from "./motion.js";
+import { withTransitions } from "./transitions.js";
 // 30 fps, 1920×1080 for 16:9 and 1080×1920 for 9:16.
 export const fps = 30;
 const frames = {
@@ -39,6 +43,22 @@ export function planRender(input) {
         ? input.images.length * input.imageSeconds
         : audio.reduce((sum, segment) => sum + segment.seconds, 0);
     const totalFrames = Math.max(1, Math.round(totalSeconds * fps));
+    const edit = input.edit;
+    const narration = input.body === undefined ? undefined : edit?.narration;
+    const lengths = narration === undefined
+        ? everyLengths(Math.max(1, Math.round(input.imageSeconds * fps)), totalFrames)
+        : narrationShotFrames({
+            totalFrames,
+            fps,
+            imageSeconds: input.imageSeconds,
+            cutPoints: narration.cutPoints,
+            chapterStarts: narration.chapterStarts,
+        });
+    const planned = shots(input, lengths);
+    const transition = edit?.transition;
+    const cards = edit?.cards === undefined
+        ? []
+        : chapterCards(edit.cards.chapters, narration?.cutPoints ?? [], totalFrames);
     return {
         gapSeconds: input.gapSeconds,
         edgeSeconds: input.edgeSeconds,
@@ -51,13 +71,39 @@ export function planRender(input) {
             height: frame.height,
             fps,
             audio,
-            shots: shots(input, Math.max(1, Math.round(input.imageSeconds * fps)), totalFrames),
+            shots: transition === undefined
+                ? planned
+                : withTransitions(planned, transition.kind, Math.round(transition.seconds * fps)),
+            ...(edit?.look !== undefined && hasLook(edit.look) ? { look: edit.look } : {}),
+            ...(cards.length > 0 && edit?.cards !== undefined
+                ? { cards, cardFont: edit.cards.font }
+                : {}),
         },
         totalFrames,
         totalSeconds,
         output: input.output,
     };
 }
+// A card at each chapter start, on the cut the chapter's shot starts with (a chapter at the
+// very start stays there), for 2.5 s or what is left of the video.
+function chapterCards(chapters, cutPoints, totalFrames) {
+    const length = Math.round(chapterCardSeconds * fps);
+    const cards = [];
+    for (const chapter of chapters) {
+        const title = chapter.title.trim();
+        const moved = chapter.start < 1 / fps ? [] : chapterCuts([chapter.start], cutPoints, Infinity);
+        const startFrame = Math.max(0, Math.round((moved[0] ?? chapter.start) * fps));
+        const frames = Math.min(length, totalFrames - startFrame);
+        if (title === "" || frames < 1)
+            continue;
+        // Two chapters inside 2.5 s would stack their cards; the second is left out.
+        const previous = cards.at(-1);
+        if (previous !== undefined && startFrame < previous.startFrame + previous.frames)
+            continue;
+        cards.push({ title, startFrame, frames });
+    }
+    return cards;
+}
 export function spoken(kind) {
     return kind !== "gap" && kind !== "edge";
 }
@@ -92,15 +138,26 @@ export function audioTimeline(input, minimumGap = 1 / fps) {
     }
     return segments;
 }
-// The images take turns in slideshow order, each for `each` frames, starting over after the
-// last until the timeline is full; the last shot is cut to what is left. A timeline shorter
-// than one shot is a single shot. The motion goes by the shot's place, not the image
-// (`motion.ts`), so an image that comes round again may move another way.
-function shots(input, each, totalFrames) {
+// Every N seconds: each shot `each` frames until the timeline is full; the last shot is cut
+// to what is left. A timeline shorter than one shot is a single shot.
+function everyLengths(each, totalFrames) {
     const count = Math.ceil(totalFrames / each);
-    return Array.from({ length: count }, (_value, at) => ({
-        source: { kind: "image", path: input.images[at % input.images.length] ?? "" },
-        frames: Math.min(each, totalFrames - each * at),
-        motion: motionFor(input.motionStyle, at, input.zoomPercent),
-    }));
+    return Array.from({ length: count }, (_value, at) => Math.min(each, totalFrames - each * at));
+}
+// The images take turns in slideshow order, one per shot, starting over after the last until
+// the timeline is full. The motion goes by the shot's place, not the image (`motion.ts`), so
+// an image that comes round again may move another way. A moving clip in an image's place
+// plays as it is, with no motion of its own.
+function shots(input, lengths) {
+    return lengths.map((frames, at) => {
+        const index = at % input.images.length;
+        const clip = input.edit?.clips?.[index];
+        return clip === undefined
+            ? {
+                source: { kind: "image", path: input.images[index] ?? "" },
+                frames,
+                motion: motionFor(input.motionStyle, at, input.zoomPercent),
+            }
+            : { source: clip, frames, motion: { kind: "still" } };
+    });
 }

package/dist/slices/video/slideshow.js

@@ -1,6 +1,8 @@
-import { mkdtempSync, rmSync, writeFileSync } from "node:fs";
-import { join } from "node:path";
-import { clipArgs, concatList, joinArgs, runFfmpeg, slideshowClips } from "./ffmpeg.js";
+import { copyFileSync, mkdirSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { extname, join } from "node:path";
+import { cardsAss } from "./cards.js";
+import { concatList, joinArgs, runFfmpeg, segmentArgs, slideshowClips } from "./ffmpeg.js";
+import { cardsIn } from "./look.js";
 // estimate: a zoompan frame from a 4x still costs several plain encoded frames, and a
 // copying join is nearly free, so progress is weighted by that rather than by clock time.
 const clipWeight = 4;
@@ -12,24 +14,38 @@ export async function renderSlideshow(run) {
     const joinMs = msOf(edit.shots.reduce((sum, shot) => sum + shot.frames, 0));
     // Progress is reported against the video's length, the longer of picture and sound.
     const totalMs = Math.max(joinMs, edit.audio.reduce((sum, segment) => sum + segment.seconds * 1000, 0));
-    const clipMs = clips.reduce((sum, clip) => sum + msOf(clip.shot.frames), 0);
+    const clipMs = clips.reduce((sum, clip) => sum + msOf(clip.frames), 0);
     const work = clipMs * clipWeight + joinMs * (run.burnSubtitles ? 1 : copyWeight);
     const report = (done) => {
         run.onProgress(work > 0 ? Math.round((Math.min(done, work) / work) * totalMs) : 0);
     };
     const workspace = mkdtempSync(join(run.scratch, "render-"));
     try {
+        // Chapter cards are drawn by the clips from a script and a font beside them.
+        const cards = edit.cards ?? [];
+        const font = edit.cardFont;
+        if (cards.length > 0) {
+            if (font === undefined)
+                throw new Error("Slopify hit an internal error (the chapter cards have no font). Use Re-run section on Video; if it happens again, use Download diagnostics in Settings and report it.");
+            mkdirSync(join(workspace, "fonts"), { mode: 0o700 });
+            copyFileSync(font.path, join(workspace, "fonts", `card${extname(font.path)}`));
+        }
         let rendered = 0;
         for (const clip of clips) {
             const before = rendered;
+            const script = clip.name.replace(/\.mp4$/, ".ass");
+            const shown = cardsIn(cards, clip.segment.start, clip.segment.count);
+            if (shown.length > 0 && font !== undefined)
+                writeFileSync(join(workspace, script), cardsAss(edit, shown, font.name, clip.segment.start), { mode: 0o600 });
             await runFfmpeg({
                 bin: run.bin,
-                args: clipArgs(edit, clip.shot, join(workspace, clip.name), run.burnSubtitles),
+                ...(cards.length > 0 ? { cwd: workspace } : {}),
+                args: segmentArgs(edit, clip.segment, join(workspace, clip.name), run.burnSubtitles, script),
                 signal: run.signal,
                 log: run.log,
                 onProgress: (elapsedMs) => report(before + elapsedMs * clipWeight),
             });
-            rendered += msOf(clip.shot.frames) * clipWeight;
+            rendered += msOf(clip.frames) * clipWeight;
         }
         const list = join(workspace, "slides.ffconcat");
         writeFileSync(list, concatList(order), { mode: 0o600 });

package/dist/slices/video/transitions.js

@@ -0,0 +1,51 @@
+// Transitions without a longer render. The slideshow is still encoded clip by clip and
+// joined by the concat demuxer (`ffmpeg.ts`); a transition is one more short clip between
+// two shots. The shot before gives up its last floor(T / 2) frames and the shot after its
+// first ceil(T / 2), and the T-frame transition clip plays the first shot's picture from
+// where it was cut, running on past its end, blended into the second's from half a
+// transition before its start. Every frame of the timeline is still played exactly once, so
+// the video stays as long as its sound.
+// The frames a transition of `frames` takes from the shot before and the shot after.
+export function transitionHalves(frames) {
+    const tail = Math.floor(frames / 2);
+    return { tail, head: frames - tail };
+}
+// Gives every shot after the first a transition of `frames` frames, shortened where a shot is
+// too short to give up its share and still show at least one frame of its own, and left a
+// hard cut where under two frames would remain.
+export function withTransitions(shots, kind, frames) {
+    return shots.map((shot, index) => {
+        const before = shots[index - 1];
+        if (before === undefined)
+            return shot;
+        const room = Math.floor((Math.min(before.frames, shot.frames) - 1) / 2);
+        const length = Math.min(Math.round(frames), room);
+        return length < 2 ? shot : { ...shot, transition: { kind, frames: length } };
+    });
+}
+// The clips in timeline order, adding up to the shots' frames exactly.
+export function segments(shots) {
+    const out = [];
+    let start = 0;
+    for (const [index, shot] of shots.entries()) {
+        const entering = shot.transition;
+        const leaving = shots[index + 1]?.transition;
+        const head = entering === undefined ? 0 : transitionHalves(entering.frames).head;
+        const tail = leaving === undefined ? 0 : transitionHalves(leaving.frames).tail;
+        if (entering !== undefined) {
+            const before = transitionHalves(entering.frames).tail;
+            out.push({
+                kind: "transition",
+                from: index - 1,
+                to: index,
+                count: entering.frames,
+                start: start - before,
+            });
+            start += head;
+        }
+        const count = shot.frames - head - tail;
+        out.push({ kind: "shot", shot: index, from: head, count, start });
+        start += count + tail;
+    }
+    return out;
+}