goosetools-worker 0.1.1 → 0.2.1

package/src/render.js

@@ -1,8 +1,10 @@
-import { readFileSync, readdirSync, mkdirSync, existsSync } from "node:fs";
+import { readFileSync, readdirSync, mkdirSync, existsSync, rmSync } from "node:fs";
 import { join, dirname, resolve, extname } from "node:path";
 import { fileURLToPath } from "node:url";
 import yaml from "js-yaml";
 import { chromium } from "playwright";
+import { FONT_SPECS, customFontFaces, sanitizeFonts } from "./fonts.js";
+import { assertFfmpeg, composite, posterFrame } from "./video.js";
 
 const ROOT = resolve(dirname(fileURLToPath(import.meta.url)), "..");
 
@@ -27,7 +29,12 @@ if (!carouselDir) {
   process.exit(1);
 }
 const dir = resolve(carouselDir);
-const brandBase = yaml.load(readFileSync(join(ROOT, "brand.yml"), "utf8"));
+// A carousel dir may carry its own brand.yml (written by the worker from the
+// user's saved brand); fall back to the repo brand for local CLI use.
+const brandPath = existsSync(join(dir, "brand.yml"))
+  ? join(dir, "brand.yml")
+  : join(ROOT, "brand.yml");
+const brandBase = yaml.load(readFileSync(brandPath, "utf8"));
 const spec = yaml.load(readFileSync(join(dir, "slides.yml"), "utf8"));
 
 // resolve active style: slides.yml `style:` > brand.yml defaultStyle
@@ -39,11 +46,46 @@ if (!existsSync(styleDir)) {
 }
 const stylePath = join(styleDir, "style.yml");
 const styleSpec = existsSync(stylePath) ? yaml.load(readFileSync(stylePath, "utf8")) : {};
-// shallow merge per top-level key (fonts/colors/style), style wins
+// Shallow merge per top-level key (fonts/colors/style). The style normally
+// wins — it was designed as a coherent look. But the carousel's brand.yml can
+// ask for the user's brand to win instead, per key: applyBrandFonts renders
+// the deck in their typography, applyBrandColors in their palette. The worker
+// writes those from the per-carousel checkboxes; a bare CLI render leaves them
+// unset and keeps the style's own look.
+const brandWins = {
+  fonts: brandBase.applyBrandFonts === true,
+  colors: brandBase.applyBrandColors === true,
+  style: false, // layout tokens (padding/radius) always belong to the style
+};
 const brand = { ...brandBase };
 for (const key of ["fonts", "colors", "style"]) {
-  if (styleSpec[key]) brand[key] = { ...brandBase[key], ...styleSpec[key] };
+  if (!styleSpec[key]) continue;
+  brand[key] = brandWins[key]
+    ? { ...styleSpec[key], ...brandBase[key] }
+    : { ...brandBase[key], ...styleSpec[key] };
+}
+// Fonts the user uploaded, sent with their brand. Declared as @font-face rules
+// below; named here because everything downstream has to treat them as valid
+// families even though the registry has never heard of them.
+const CUSTOM_FONTS = (brand.customFonts ?? []).filter((f) => f?.family);
+const customFamilies = new Set(CUSTOM_FONTS.map((f) => f.family));
+
+// per-carousel color overrides (slides.yml top-level `colors:`) win over the
+// style — the drafting pass sets them when the user's photos share a palette
+// worth building the deck from. Valid hex values on known keys only.
+if (spec.colors && typeof spec.colors === "object" && !Array.isArray(spec.colors)) {
+  const overrides = Object.fromEntries(
+    Object.entries(spec.colors).filter(
+      ([k, v]) => k in (brand.colors ?? {}) && /^#[0-9a-fA-F]{3,8}$/.test(String(v)),
+    ),
+  );
+  brand.colors = { ...brand.colors, ...overrides };
 }
+// per-carousel font overrides (slides.yml top-level `fonts:`) win over the
+// style — set when the user asks for a deck-wide typography change (e.g.
+// "use my brand font"). Registry families only.
+const fontOverrides = sanitizeFonts(spec.fonts, [...customFamilies]);
+if (fontOverrides) brand.fonts = { ...brand.fonts, ...fontOverrides };
 const slides = spec.slides ?? [];
 if (!slides.length) {
   console.error("slides.yml has no slides");
@@ -76,33 +118,99 @@ function photoDataUri(photoPath) {
   return `data:${mime};base64,${readFileSync(p).toString("base64")}`;
 }
 
+// Real zoom: cut a window out of the photo CENTERED on the focus point, so
+// the subject lands in the middle of the slide by construction (CSS
+// object-position keeps the subject at its original frame position, which
+// reads as off-center — this doesn't).
+async function croppedPhotoDataUri(pg, photoPath, fx, fy, zoom) {
+  const src = photoDataUri(photoPath);
+  return pg.evaluate(
+    async ({ src, fx, fy, zoom }) => {
+      const img = new Image();
+      await new Promise((ok, err) => {
+        img.onload = ok;
+        img.onerror = err;
+        img.src = src;
+      });
+      const W = img.naturalWidth;
+      const H = img.naturalHeight;
+      const sw = W / zoom;
+      const sh = H / zoom;
+      const sx = Math.min(Math.max(fx * W - sw / 2, 0), W - sw);
+      const sy = Math.min(Math.max(fy * H - sh / 2, 0), H - sh);
+      const canvas = document.createElement("canvas");
+      canvas.width = Math.round(sw);
+      canvas.height = Math.round(sh);
+      canvas.getContext("2d").drawImage(img, sx, sy, sw, sh, 0, 0, sw, sh);
+      return canvas.toDataURL("image/jpeg", 0.92);
+    },
+    { src, fx, fy, zoom },
+  );
+}
+
+const FOCUS_KEYWORDS = {
+  "top": [0.5, 0], "center": [0.5, 0.5], "bottom": [0.5, 1],
+  "left": [0, 0.5], "right": [1, 0.5],
+  "left top": [0, 0], "left bottom": [0, 1],
+  "right top": [1, 0], "right bottom": [1, 1],
+};
+
+function focusPoint(focus) {
+  if (typeof focus !== "string") return { fx: 0.5, fy: 0.5 };
+  const kw = FOCUS_KEYWORDS[focus.trim()];
+  if (kw) return { fx: kw[0], fy: kw[1] };
+  const m = /^(\d{1,3})% (\d{1,3})%$/.exec(focus.trim());
+  if (!m) return { fx: 0.5, fy: 0.5 };
+  return { fx: Math.min(100, Number(m[1])) / 100, fy: Math.min(100, Number(m[2])) / 100 };
+}
+
+function zoomOf(slide) {
+  const z = Number(slide.zoom);
+  return Number.isFinite(z) && z > 1 && z <= 3 ? z : 0;
+}
+
+async function slidePhotoSrc(slide, photoPath) {
+  const z = zoomOf(slide);
+  if (!z) return photoDataUri(photoPath);
+  const { fx, fy } = focusPoint(slide.focus);
+  return croppedPhotoDataUri(page, photoPath, fx, fy, z);
+}
+
+// A video slide's still: the poster frame, cached next to the clip. It is both
+// what the drafting/self-check passes look at and the PNG fallback, so the
+// deck still makes sense if the video never composites.
+async function posterFor(slide) {
+  const src = resolve(dir, slide.video);
+  const out = src.replace(/\.[^.]+$/, "") + ".poster.jpg";
+  return posterFrame(src, out);
+}
+
 // which templates sit on a light background (UI chrome adapts)
-const LIGHT_TEMPLATES = new Set(["light", "resource", "cover", "text", "cta"]);
+const LIGHT_TEMPLATES = new Set(["light", "resource", "cover", "text", "cta", "closer", "detail"]);
 
 // no per-slide chrome — arrows, counters, and progress bars all rejected (Erin, 2026-07-14)
 function slideUi() {
   return "";
 }
 
-// per-family axis specs — some families don't ship every weight
-const FONT_SPECS = {
-  "Instrument Serif": "ital@0;1",
-  "Fraunces": "ital,wght@0,400;0,500;0,600;1,400;1,500",
-  "Silkscreen": "wght@400;700",
-  "Pixelify Sans": "wght@400;500;700",
-  "Doto": "wght@400;700;900",
-  "VT323": "wght@400",
-  "Space Mono": "wght@400;700",
-  "Geist Mono": "wght@400;500",
-};
+// An uploaded family MUST be kept out of the Google Fonts URL: css2 answers
+// 400 for a family it doesn't know, which drops the whole stylesheet and takes
+// every other font on the slide down with it.
+const customFaces = await customFontFaces(CUSTOM_FONTS);
+
 const fontFamilies = [brand.fonts.heading, brand.fonts.body, brand.fonts.mono, brand.fonts.pixel]
   .filter(Boolean)
+  .filter((f) => !customFamilies.has(f))
   .map((f) => `family=${f.replace(/ /g, "+")}:${FONT_SPECS[f] ?? "wght@400;500;700"}`)
   .join("&");
 
 // style background — flat patterns only (no visual gradients)
 const [gr, gg, gb] = (brand.colors.primary.match(/\w\w/g) ?? []).map((h) => parseInt(h, 16));
 function styleBg() {
+  if (styleSpec.background === "flat") {
+    return `
+    background-color: ${brand.colors.lightBg};`;
+  }
   if (styleSpec.background === "dots") {
     // offset polka dots in pale brand blue
     const dot = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88'%3E%3Ccircle cx='22' cy='22' r='9' fill='rgba(${gr},${gg},${gb},0.14)'/%3E%3Ccircle cx='66' cy='66' r='9' fill='rgba(${gr},${gg},${gb},0.14)'/%3E%3C/svg%3E`;
@@ -124,8 +232,9 @@ const GRID_BG = styleBg();
 
 function pageHtml(slideHtml) {
   return `<!doctype html><html><head><meta charset="utf-8">
-<link href="https://fonts.googleapis.com/css2?${fontFamilies}&display=block" rel="stylesheet">
+${fontFamilies ? `<link href="https://fonts.googleapis.com/css2?${fontFamilies}&display=block" rel="stylesheet">` : ""}
 <style>
+  ${customFaces}
   * { margin: 0; box-sizing: border-box; }
   html, body { width: ${WIDTH}px; height: ${HEIGHT}px; overflow: hidden; }
   .slide { position: relative; width: ${WIDTH}px; height: ${HEIGHT}px; padding: ${brand.style.padding}px; overflow: hidden; }
@@ -135,7 +244,23 @@ function pageHtml(slideHtml) {
 const outDir = outOverride ? resolve(outOverride) : join(dir, "output");
 mkdirSync(outDir, { recursive: true });
 
-const browser = await chromium.launch();
+// The extra args stop Chromium probing macOS media services (Apple Music /
+// media library), which otherwise triggers a permission prompt for "node"
+// on every worker run.
+const browser = await chromium.launch({
+  args: [
+    "--mute-audio",
+    "--disable-features=MediaRouter,AudioServiceOutOfProcess",
+    "--use-mock-keychain",
+    "--disable-component-update",
+    // Stop Chromium probing other apps / default-browser state — each probe
+    // is a macOS "access data from other apps" permission prompt.
+    "--no-default-browser-check",
+    "--disable-default-apps",
+    "--no-first-run",
+    "--disable-sync",
+  ],
+});
 const page = await browser.newPage({ viewport: { width: WIDTH, height: HEIGHT }, deviceScaleFactor: 2 });
 
 // live screenshot of a resource's site, embedded as a receipt on the slide
@@ -151,6 +276,25 @@ async function siteScreenshot(url) {
   }
 }
 
+// Video slides need ffmpeg (a native binary npm can't install for the user).
+// A deck with no clips never checks; a deck with clips stops here rather than
+// quietly rendering them as stills.
+const hasVideo = slides.some((s) => s.video);
+if (hasVideo) {
+  try {
+    await assertFfmpeg();
+  } catch (e) {
+    console.error(e.message);
+    process.exit(1);
+  }
+}
+
+// Artwork-only pass: strip every background the slide paints so the clip
+// shows through. Child backgrounds (caption boxes, scrims) survive on
+// purpose — those ARE the overlay.
+const TRANSPARENT_CSS =
+  '<style>html, body, .slide { background: transparent !important; background-image: none !important; }</style>';
+
 for (const [i, slide] of slides.entries()) {
   const templatePath = join(styleDir, "templates", `${slide.template}.html`);
   if (!existsSync(templatePath)) throw new Error(`Unknown template: ${slide.template}`);
@@ -158,14 +302,42 @@ for (const [i, slide] of slides.entries()) {
   if (slide.url && !slide.screenshot) {
     console.log(`  capturing ${slide.url} ...`);
   }
+  // Optional per-slide color swatches (e.g. palette-presentation formats):
+  // slides.yml `swatches: ["#aabbcc", ...]` renders as .swatch spans that the
+  // template lays out and styles.
+  const swatches = Array.isArray(slide.swatches)
+    ? slide.swatches
+        .filter((c) => /^#[0-9a-fA-F]{3,8}$/.test(String(c)))
+        .map(
+          (c) =>
+            `<span class="swatch" style="background:${c}"><span class="swatch-label">${c}</span></span>`,
+        )
+        .join("")
+    : "";
+  // The still this slide is built on: an attached photo, or — for a video
+  // slide — a frame pulled out of the clip.
+  let stillPath = slide.photo ?? null;
+  if (!stillPath && slide.video) {
+    try {
+      stillPath = await posterFor(slide);
+    } catch (e) {
+      throw new Error(`Couldn't read a frame from ${slide.video}: ${e.message}`);
+    }
+  }
   const ctx = {
     ...brand,
     gridBg: GRID_BG,
     text: richText(slide.text ?? ""),
     name: escapeHtml(slide.name ?? ""),
     subtitle: escapeHtml(slide.subtitle ?? ""),
+    swatches,
+    // "flip" mirrors a template's movable overlay to the opposite side —
+    // templates opt in by putting {{variant}} in their root class list.
+    variant: slide.variant === "flip" ? "flip" : "",
     handle: brand.handle,
-    photoSrc: slide.photo ? photoDataUri(slide.photo) : "",
+    photoSrc: stillPath ? await slidePhotoSrc(slide, stillPath) : "",
+    logoSrc: slide.logo ? photoDataUri(slide.logo) : "",
+    cutoutSrc: slide.cutout ? photoDataUri(slide.cutout) : "",
     screenshotSrc: slide.screenshot
       ? photoDataUri(slide.screenshot)
       : slide.url
@@ -173,11 +345,68 @@ for (const [i, slide] of slides.entries()) {
         : "",
     ui: slideUi(i, slides.length, isLight, i === slides.length - 1),
   };
-  const html = pageHtml(fill(readFileSync(templatePath, "utf8"), ctx));
-  await page.setContent(html, { waitUntil: "networkidle" });
-  const out = join(outDir, `slide-${String(i + 1).padStart(2, "0")}.png`);
+  const templateSrc = readFileSync(templatePath, "utf8");
+  // Same template, same fixups, twice: once with the still behind it, once
+  // with nothing behind it (the artwork a video slide gets burned over).
+  function buildSlide(slideCtx) {
+    let slideHtml = fill(templateSrc, slideCtx);
+    // Drop image tags whose source resolved to nothing (e.g. a photo-optional
+    // template used without a photo) — otherwise they render broken-image icons.
+    slideHtml = slideHtml.replace(/<img\b[^>]*src=""[^>]*>/g, "");
+    // A blank brand handle (campaign decks running on someone else's channel)
+    // drops the handle label entirely — otherwise the bare "[ ]" brackets render.
+    if (!brand.handle) {
+      slideHtml = slideHtml.replace(/<div class="(?:handle|follow)">[^<]*<\/div>/g, "");
+    }
+    // focus without zoom: no crop window to center, so aim object-fit instead.
+    if (!zoomOf(slide) && typeof slide.focus === "string" && slide.focus.trim()) {
+      slideHtml += `<style>.slide img { object-position: ${slide.focus} !important; }</style>`;
+    }
+    // With a pre-cropped window the subject sits at the window's center —
+    // override template object-position (e.g. "left top") so it stays there.
+    if (stillPath && zoomOf(slide)) {
+      slideHtml += `<style>.slide img { object-position: center !important; }</style>`;
+    }
+    return slideHtml;
+  }
+
+  const stem = `slide-${String(i + 1).padStart(2, "0")}`;
+  await page.setContent(pageHtml(buildSlide(ctx)), { waitUntil: "networkidle" });
+  const out = join(outDir, `${stem}.png`);
   await page.screenshot({ path: out });
   console.log(`✓ ${out}`);
+
+  // Video slide: re-shoot the same slide with nothing behind the artwork, then
+  // let ffmpeg burn that over the clip. The PNG above stays on disk as the
+  // fallback and as what the worker's framing self-check inspects.
+  if (slide.video) {
+    const overlayPng = join(outDir, `.${stem}-overlay.png`);
+    const mp4 = join(outDir, `${stem}.mp4`);
+    try {
+      await page.setContent(pageHtml(buildSlide({ ...ctx, photoSrc: "" })) + TRANSPARENT_CSS, {
+        waitUntil: "networkidle",
+      });
+      await page.screenshot({ path: overlayPng, omitBackground: true });
+      const { fx, fy } = focusPoint(slide.focus);
+      await composite({
+        videoPath: resolve(dir, slide.video),
+        overlayPath: overlayPng,
+        outPath: mp4,
+        W: WIDTH,
+        H: HEIGHT,
+        fx,
+        fy,
+        zoom: zoomOf(slide),
+      });
+      console.log(`✓ ${mp4}`);
+    } catch (e) {
+      // A half-written MP4 is worse than none: it would upload as the slide.
+      rmSync(mp4, { force: true });
+      throw new Error(`Video slide ${i + 1} (${slide.video}) failed to render: ${e.message}`);
+    } finally {
+      rmSync(overlayPng, { force: true });
+    }
+  }
 }
 
 await browser.close();

package/src/video.js

@@ -0,0 +1,205 @@
+// Video slides — the ffmpeg half of the render engine.
+//
+// A video slide is a photo slide whose background moves: the template renders
+// exactly as always, but its artwork (text, scrim, caption box) is captured as
+// a TRANSPARENT PNG and burned over the user's clip instead of over a still.
+// So every style's photo template gets video support for free — no new
+// templates, no per-style work.
+//
+// Two things the rest of the engine needs from here:
+//   posterFrame()  — a still from the clip, so the drafting pass and the
+//                    framing self-check can SEE what the video shows (Claude
+//                    reads images, not MP4s) and so a video slide still has a
+//                    PNG fallback.
+//   composite()    — overlay PNG + clip → a 1080-wide MP4 Instagram accepts.
+
+import { execFile } from "node:child_process";
+import { existsSync } from "node:fs";
+import { promisify } from "node:util";
+
+const execFileAsync = promisify(execFile);
+
+export const VIDEO_EXTS = new Set([".mp4", ".mov", ".m4v", ".webm"]);
+
+export function isVideoPath(p) {
+  const dot = String(p).lastIndexOf(".");
+  return dot !== -1 && VIDEO_EXTS.has(String(p).slice(dot).toLowerCase());
+}
+
+// Instagram plays carousel video slides up to 60s; anything longer is the
+// user's mistake, not ours to guess at, so we take the first minute.
+export const MAX_SECONDS = 60;
+
+let ffmpegChecked = null;
+
+// ffmpeg is not a dependency npm can install for the user (it's a native
+// binary), so it stays an optional setup step — checked only when a carousel
+// actually has a clip on it.
+export async function hasFfmpeg() {
+  if (ffmpegChecked !== null) return ffmpegChecked;
+  try {
+    await execFileAsync("ffmpeg", ["-version"], { timeout: 15_000 });
+    await execFileAsync("ffprobe", ["-version"], { timeout: 15_000 });
+    ffmpegChecked = true;
+  } catch {
+    ffmpegChecked = false;
+  }
+  return ffmpegChecked;
+}
+
+// The one command that fixes it, for the machine we're actually on.
+export const FFMPEG_INSTALL_CMD =
+  process.platform === "win32"
+    ? "winget install Gyan.FFmpeg"
+    : process.platform === "darwin"
+      ? "brew install ffmpeg"
+      : "sudo apt install ffmpeg";
+
+// ffmpeg is optional right up until a carousel actually has a clip on it —
+// then it is the whole feature, and silently shipping stills would hand back a
+// deck that looks finished and isn't. So this reads as a fixable setup step,
+// not a failure of the request.
+export const FFMPEG_HELP =
+  `Video slides need ffmpeg, and it isn't installed on this computer.\n` +
+  `Install it, then try again:\n\n` +
+  `    ${FFMPEG_INSTALL_CMD}\n\n` +
+  `(Photo-only carousels don't need it.)`;
+
+// Throws unless BOTH binaries are present — ffprobe ships alongside ffmpeg in
+// every packaged build, so one without the other means a partial install.
+export async function assertFfmpeg() {
+  if (!(await hasFfmpeg())) throw new Error(FFMPEG_HELP);
+}
+
+// Native pixel dimensions, duration, and whether there's a sound track.
+// ffprobe reports the STORED dimensions; phone clips are often stored
+// sideways with a rotation flag, so we swap w/h when the display matrix says
+// the picture is quarter-turned — otherwise every portrait iPhone clip gets
+// cropped as if it were landscape.
+export async function probe(path) {
+  const { stdout } = await execFileAsync(
+    "ffprobe",
+    [
+      "-v", "error",
+      "-show_entries", "stream=index,codec_type,width,height,duration:stream_side_data=rotation:format=duration",
+      "-of", "json",
+      path,
+    ],
+    { timeout: 60_000, maxBuffer: 10 * 1024 * 1024 },
+  );
+  const info = JSON.parse(stdout);
+  const streams = info.streams ?? [];
+  const v = streams.find((s) => s.codec_type === "video");
+  if (!v?.width || !v?.height) throw new Error(`no video track in ${path}`);
+
+  const rotation = Number(
+    v.side_data_list?.find((d) => d.rotation !== undefined)?.rotation ?? 0,
+  );
+  const quarterTurned = Math.abs(rotation) % 180 === 90;
+
+  const duration =
+    Number(v.duration) || Number(info.format?.duration) || 0;
+
+  return {
+    width: quarterTurned ? v.height : v.width,
+    height: quarterTurned ? v.width : v.height,
+    duration: duration > 0 ? duration : MAX_SECONDS,
+    hasAudio: streams.some((s) => s.codec_type === "audio"),
+  };
+}
+
+// A representative still. Grabbing frame 0 tends to catch a black or blurry
+// first frame, so we seek a little way in (but never past a short clip).
+export async function posterFrame(videoPath, outPath, { at } = {}) {
+  if (existsSync(outPath)) return outPath;
+  let seek = at;
+  if (seek === undefined) {
+    const { duration } = await probe(videoPath);
+    seek = Math.min(1, duration / 4);
+  }
+  await execFileAsync(
+    "ffmpeg",
+    [
+      "-y",
+      "-ss", String(seek),
+      "-i", videoPath,
+      "-frames:v", "1",
+      // Bake in the rotation flag the same way a browser would, so focus/zoom
+      // coordinates read off the poster match the composited video.
+      "-vf", "scale=iw:ih",
+      "-q:v", "3",
+      outPath,
+    ],
+    { timeout: 5 * 60_000, maxBuffer: 10 * 1024 * 1024 },
+  );
+  return outPath;
+}
+
+// The crop window, in scaled-video pixels. Same model as the photo path:
+// "cover" the slide, then slide the window so the focus point sits at its
+// center — which puts the subject dead center of the slide by construction.
+export function cropWindow({ width, height, W, H, fx, fy, zoom }) {
+  const scale = Math.max(W / width, H / height) * (zoom > 1 ? zoom : 1);
+  // Even dimensions keep yuv420p happy.
+  const even = (n) => Math.max(2, Math.round(n / 2) * 2);
+  const sw = even(width * scale);
+  const sh = even(height * scale);
+  const x = Math.round(Math.min(Math.max(fx * sw - W / 2, 0), sw - W));
+  const y = Math.round(Math.min(Math.max(fy * sh - H / 2, 0), sh - H));
+  return { sw, sh, x, y };
+}
+
+// Burn the slide's artwork over the clip and encode what Instagram wants:
+// H.264 / yuv420p, even dimensions, faststart, AAC audio if the clip had any.
+export async function composite({
+  videoPath,
+  overlayPath,
+  outPath,
+  W,
+  H,
+  fx = 0.5,
+  fy = 0.5,
+  zoom = 0,
+  fps = 30,
+}) {
+  const meta = await probe(videoPath);
+  const { sw, sh, x, y } = cropWindow({
+    width: meta.width,
+    height: meta.height,
+    W,
+    H,
+    fx,
+    fy,
+    zoom,
+  });
+
+  const filter = [
+    `[0:v]scale=${sw}:${sh},crop=${W}:${H}:${x}:${y},setsar=1,fps=${fps}[bg]`,
+    // The overlay is screenshotted at deviceScaleFactor 2, so it comes in at
+    // 2x and gets scaled back down here — which also anti-aliases the text.
+    `[1:v]scale=${W}:${H}[ov]`,
+    `[bg][ov]overlay=0:0:format=auto[v]`,
+  ].join(";");
+
+  const args = [
+    "-y",
+    "-t", String(Math.min(meta.duration, MAX_SECONDS)),
+    "-i", videoPath,
+    "-i", overlayPath,
+    "-filter_complex", filter,
+    "-map", "[v]",
+    ...(meta.hasAudio ? ["-map", "0:a:0", "-c:a", "aac", "-b:a", "128k"] : ["-an"]),
+    "-c:v", "libx264",
+    "-preset", "medium",
+    "-crf", "20",
+    "-pix_fmt", "yuv420p",
+    "-profile:v", "high",
+    "-movflags", "+faststart",
+    outPath,
+  ];
+  await execFileAsync("ffmpeg", args, {
+    timeout: 20 * 60_000,
+    maxBuffer: 20 * 1024 * 1024,
+  });
+  return outPath;
+}

package/styles/graph-paper/templates/closer.html

@@ -0,0 +1,47 @@
+<div class="slide closer">
+  <div class="inner">
+    <div class="handle">[ {{handle}} ]</div>
+    <div class="text">{{text}}</div>
+    <div class="button">{{subtitle}}</div>
+  </div>
+  {{ui}}
+</div>
+<style>
+  .closer {
+    {{gridBg}}
+    color: {{colors.textOnLight}};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+  }
+  .closer .handle {
+    font-family: "{{fonts.pixel}}", monospace;
+    text-transform: uppercase;
+    font-size: 42px;
+    color: {{colors.primary}};
+    margin-bottom: 72px;
+  }
+  .closer .text {
+    font-family: "{{fonts.heading}}", serif;
+    font-weight: {{fonts.headingWeight}};
+    font-size: 108px;
+    line-height: 1.12;
+    white-space: pre-wrap;
+    margin-bottom: 88px;
+  }
+  .closer .text i { font-style: italic; }
+  .closer .text em { font-style: normal; color: {{colors.primary}}; }
+  .closer .button {
+    display: inline-block;
+    font-family: "{{fonts.pixel}}", monospace;
+    text-transform: uppercase;
+    font-size: 52px;
+    letter-spacing: 0.02em;
+    color: {{colors.text}};
+    background: {{colors.primary}};
+    padding: 28px 64px;
+    border: 4px solid {{colors.textOnLight}};
+    box-shadow: 12px 12px 0 {{colors.textOnLight}};
+  }
+</style>

package/styles/graph-paper/templates/cover.html

@@ -1,6 +1,10 @@
 <div class="slide cover">
+  <img class="bg" src="{{photoSrc}}" alt="" />
+  <div class="veil"></div>
   <div class="handle">[ {{handle}} ]</div>
   <div class="hook">{{text}}<div class="subtitle">{{subtitle}}</div></div>
+  <img class="logo" src="{{logoSrc}}" alt="" />
+  <img class="cutout" src="{{cutoutSrc}}" alt="" />
   {{ui}}
 </div>
 <style>
@@ -40,4 +44,53 @@
     letter-spacing: 0;
     color: {{colors.primary}};
   }
+  .cover .logo {
+    height: 170px;
+    margin-bottom: 24px;
+    /* multiply drops a white logo background into the paper color */
+    mix-blend-mode: multiply;
+  }
+  /* the human behind the deck — big in the bottom-right corner. The hook
+     and logo shift left (scoped to :has(.cutout)) so she stays fully
+     visible instead of hiding behind centered text. */
+  .cover .cutout {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    height: 780px;
+    filter: drop-shadow(-18px 0 40px rgba(0, 0, 0, 0.18));
+  }
+  .cover:has(.cutout) { align-items: flex-start; text-align: left; }
+  .cover:has(.cutout) .hook { margin-bottom: 340px; }
+  .cover:has(.cutout) .logo { align-self: flex-start; margin-left: 8px; }
+  /* Photo cover: a full-bleed photo behind the hook. A flat dark veil (NO
+     gradients — brand hard rule) keeps the text readable; the chrome flips
+     to the dark-slide palette. All scoped to :has(.bg) so a photo-less
+     cover renders exactly as before. */
+  .cover .bg {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+  .cover .veil { display: none; }
+  .cover:has(.bg) .veil {
+    display: block;
+    position: absolute;
+    inset: 0;
+    background: rgba(5, 7, 31, 0.34);
+  }
+  .cover:has(.bg) .handle,
+  .cover:has(.bg) .hook,
+  .cover:has(.bg) .logo { position: relative; }
+  .cover:has(.bg) { color: {{colors.text}}; }
+  /* photo covers: hook compact in the lower band, over the subject's body
+     rather than their face */
+  .cover:has(.bg) .hook { margin-top: auto; margin-bottom: 48px; font-size: 104px; }
+  .cover:has(.bg) .handle { color: {{colors.accent}}; }
+  .cover:has(.bg) .hook em { color: {{colors.accent}}; }
+  .cover:has(.bg) .subtitle { color: {{colors.accent}}; }
+  /* photo covers pair with a light logo variant — no blend trick needed */
+  .cover:has(.bg) .logo { mix-blend-mode: normal; }
 </style>