@open-take/compositor 0.1.0

package/src/presets.ts

@@ -0,0 +1,147 @@
+// Curated preset vocabulary — the Screen-Studio move (named levels, not raw
+// numbers) applied to the conversational refine loop. The composition schema
+// stays raw numbers; presets are a dictionary the CLI/agent speak: the agent
+// writes numbers into composition.json, and `beats`/`ab` reverse-map numbers
+// back to names for display. A value matching no preset displays as "custom"
+// and must never be silently rounded to a named level (bbox-derived precision
+// is ground truth).
+
+import { DEFAULT_MOTION_BLUR } from "./types";
+import type { CursorConfig, FramingConfig, MotionBlurConfig } from "./types";
+
+// --- zoom levels (absolute stage scale; rest ≈ 0.92 at same-size output) ----
+// medium matches the planner's default cap (1.5), so agent-planned zooms land
+// on a named level; close stays under the validator's 2.5 soft cap.
+export const ZOOM_LEVELS = {
+  light: 1.25,
+  medium: 1.5,
+  tight: 1.8,
+  close: 2.2,
+} as const;
+export type ZoomLevelName = keyof typeof ZOOM_LEVELS;
+
+/** Name a scale if it sits within tolerance of a preset; else null (custom). */
+export function zoomLevelName(scale: number, tol = 0.07): ZoomLevelName | null {
+  let best: ZoomLevelName | null = null;
+  let bestD = tol;
+  for (const [name, v] of Object.entries(ZOOM_LEVELS) as [ZoomLevelName, number][]) {
+    const d = Math.abs(scale - v);
+    if (d <= bestD) {
+      best = name;
+      bestD = d;
+    }
+  }
+  return best;
+}
+
+// --- motion (pace) bundles ---------------------------------------------------
+// One name moves the whole feel together: cursor speed + hold + zoom ramps.
+// "natural" IS the shipped default (DEFAULT_CURSOR) — naming it makes the
+// default state speakable.
+export type MotionPreset = Pick<
+  CursorConfig,
+  "travelWidthsPerSec" | "holdMs" | "zoomInMs" | "zoomOutMs"
+>;
+export const MOTION: Record<"calm" | "natural" | "brisk", MotionPreset> = {
+  calm: { travelWidthsPerSec: 0.28, holdMs: 1500, zoomInMs: 950, zoomOutMs: 950 },
+  natural: { travelWidthsPerSec: 0.35, holdMs: 1100, zoomInMs: 760, zoomOutMs: 800 },
+  brisk: { travelWidthsPerSec: 0.45, holdMs: 750, zoomInMs: 560, zoomOutMs: 600 },
+};
+export type MotionName = keyof typeof MOTION;
+
+export function motionName(cursor: CursorConfig): MotionName | null {
+  for (const [name, m] of Object.entries(MOTION) as [MotionName, MotionPreset][]) {
+    if (
+      Math.abs(cursor.travelWidthsPerSec - m.travelWidthsPerSec) < 0.015 &&
+      Math.abs(cursor.holdMs - m.holdMs) < 60 &&
+      Math.abs(cursor.zoomInMs - m.zoomInMs) < 60 &&
+      Math.abs(cursor.zoomOutMs - m.zoomOutMs) < 60
+    )
+      return name;
+  }
+  return null;
+}
+
+// --- looks (backdrop bundles) ------------------------------------------------
+// A look is the WHOLE backdrop treatment as one coherent bundle — background
+// gradient + corner radius + shadow — so "paper" doesn't produce a light
+// backdrop with dark-tuned corners/shadow.
+export type LookPreset = Pick<FramingConfig, "background" | "cornerRadius" | "shadow">;
+const DARK_SHADOW: LookPreset["shadow"] = {
+  color: "rgba(0,0,0,0.55)",
+  blur: 60,
+  offset: { x: 0, y: 28 },
+};
+export const LOOKS: Record<string, LookPreset> = {
+  midnight: {
+    background: { from: "#1e1b3a", to: "#0a0e1c" },
+    cornerRadius: 28,
+    shadow: DARK_SHADOW,
+  },
+  ink: {
+    background: { from: "#16181d", to: "#07080a" },
+    cornerRadius: 28,
+    shadow: DARK_SHADOW,
+  },
+  slate: {
+    background: { from: "#232733", to: "#0e1116" },
+    cornerRadius: 28,
+    shadow: DARK_SHADOW,
+  },
+  ocean: {
+    background: { from: "#0c2b36", to: "#071019" },
+    cornerRadius: 28,
+    shadow: DARK_SHADOW,
+  },
+  plum: {
+    background: { from: "#2a1e3a", to: "#140a1c" },
+    cornerRadius: 28,
+    shadow: DARK_SHADOW,
+  },
+  ember: {
+    background: { from: "#38231d", to: "#1a0d09" },
+    cornerRadius: 28,
+    shadow: DARK_SHADOW,
+  },
+  paper: {
+    background: { from: "#f6f4ef", to: "#ddd8cd" },
+    cornerRadius: 22,
+    shadow: { color: "rgba(31,27,20,0.30)", blur: 45, offset: { x: 0, y: 20 } },
+  },
+  plain: {
+    background: { from: "#101014", to: "#101014", type: "solid" },
+    cornerRadius: 28,
+    shadow: DARK_SHADOW,
+  },
+};
+export type LookName = keyof typeof LOOKS;
+
+export function lookName(framing: FramingConfig): string | null {
+  const bg = framing.background;
+  for (const [name, l] of Object.entries(LOOKS)) {
+    if (
+      l.background.from.toLowerCase() === bg.from.toLowerCase() &&
+      l.background.to.toLowerCase() === bg.to.toLowerCase() &&
+      (l.background.type ?? "gradient") === (bg.type ?? "gradient")
+    )
+      return name;
+  }
+  return null;
+}
+
+// --- finish (motion blur) ----------------------------------------------------
+export const FINISH: Record<"smooth" | "crisp" | "heavy", MotionBlurConfig | undefined> = {
+  smooth: DEFAULT_MOTION_BLUR, // {samples: 6, shutter: 0.7}
+  crisp: undefined, // blur off — exports ~6× faster
+  heavy: { samples: 8, shutter: 0.85 },
+};
+export type FinishName = keyof typeof FINISH;
+
+export function finishName(mb: MotionBlurConfig | undefined): FinishName | null {
+  const active = !!mb && mb.samples > 1 && mb.shutter > 0;
+  if (!active) return "crisp";
+  for (const [name, f] of Object.entries(FINISH) as [FinishName, MotionBlurConfig | undefined][]) {
+    if (f && mb && f.samples === mb.samples && Math.abs(f.shutter - mb.shutter) < 0.03) return name;
+  }
+  return null;
+}

package/src/render.ts

@@ -0,0 +1,237 @@
+// renderTake: composition (or capture log) + captured video -> polished
+// mp4 + the editable composition written alongside it.
+//
+// Runs revideo headless (vite + chromium + ffmpeg). The renderer resolves
+// everything relative to process.cwd(), and injects `projectFile` verbatim
+// as an import specifier — so we chdir to the package root and use the
+// vite-root-absolute "/src/scene/project.ts" (a bare specifier hangs the
+// renderer forever; see spike-revideo/VERDICT.md).
+
+import { spawn } from "node:child_process";
+import { copyFile, mkdir, writeFile } from "node:fs/promises";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import { renderVideo } from "@revideo/renderer";
+import { resolveFfmpeg } from "./ffmpeg";
+import { type PlanOpts, planComposition } from "./plan";
+import { type CaptureLog, type TakeComposition, motionBlurActive } from "./types";
+import { type CompositionIssue, formatIssues, validateComposition } from "./validate";
+
+// dist/index.js -> package root
+const PKG_ROOT = resolve(dirname(fileURLToPath(import.meta.url)), "..");
+const PUBLIC_MP4 = resolve(PKG_ROOT, "public/capture.mp4");
+const COMP_JSON = resolve(PKG_ROOT, "src/scene/.composition.json");
+const RENDER_OUT = "out-render"; // relative to cwd (= PKG_ROOT at render time)
+
+export type RenderTakeOpts = {
+  /** input capture video (webm or mp4) */
+  videoPath: string;
+  /** output polished mp4 path */
+  outPath: string;
+  /** provide a capture log (auto-planned) ... */
+  log?: CaptureLog;
+  /** ... or a ready-made composition (editable artifact) */
+  composition?: TakeComposition;
+  planOpts?: PlanOpts;
+  logProgress?: boolean;
+  /** Chrome binary for the headless render. Pass the same Chrome-for-Testing
+   *  the capture path uses so a single browser serves both stages (no second
+   *  download). revideo forwards this to puppeteer.launch's executablePath;
+   *  if unset, revideo's bundled puppeteer resolves its own. */
+  chromePath?: string;
+  /** the capture log, for cross-checking that an edited composition didn't
+   *  drift an action's capture-locked tMs (see validateComposition). Optional —
+   *  the structural checks run regardless. */
+  captureLog?: CaptureLog;
+  /** skip the pre-render structural validation. Default false — we validate and
+   *  refuse to render an errored composition (a render is expensive; catch a bad
+   *  hand-edit in milliseconds instead). */
+  skipValidate?: boolean;
+  /** progress callback (0..1) forwarded from revideo's renderer. */
+  onProgress?: (progress: number) => void;
+  /** render only this window of the composition timeline, in SECONDS — the
+   *  windowed-render path behind A/B variant reels (a 4s window instead of the
+   *  whole take). With motion blur OFF, frames are identical to the same span
+   *  of a full render (the timeline is deterministic). With blur active the
+   *  content matches but not bit-exactly: the tmix shutter windows are phased
+   *  from the CLIP start, and the first frame's trailing window is truncated.
+   *  Forwarded to revideo's projectSettings.range. */
+  rangeSec?: [number, number];
+  /** write the editable `<out>.composition.json` sibling (default true). Review
+   *  copies and A/B reels are disposable — they skip the sibling. */
+  writeCompositionSibling?: boolean;
+};
+
+function run(cmd: string, args: string[]): Promise<void> {
+  return new Promise((res, rej) => {
+    const c = spawn(cmd, args, { stdio: ["ignore", "ignore", "pipe"] });
+    let err = "";
+    c.stderr.on("data", (d) => (err += d));
+    c.on("error", rej);
+    c.on("close", (code) => (code === 0 ? res() : rej(new Error(`${cmd} exited ${code}: ${err}`))));
+  });
+}
+
+/** Normalise the capture to a constant-fps mp4 the web decoder can read.
+ *  fps follows the composition so a hi-fps capture can render at 60 (the
+ *  render grid must match — a 30-grid would throw away the extra frames). */
+async function toMp4(videoPath: string, outMp4: string, fps: number): Promise<void> {
+  await mkdir(dirname(outMp4), { recursive: true });
+  await run(await resolveFfmpeg(), [
+    "-y",
+    "-loglevel",
+    "error",
+    "-i",
+    resolve(videoPath),
+    "-c:v",
+    "libx264",
+    "-pix_fmt",
+    "yuv420p",
+    "-crf",
+    "18",
+    "-r",
+    String(fps),
+    "-an",
+    outMp4,
+  ]);
+}
+
+/** Temporal-supersampling motion blur: the scene was rendered at fps·samples
+ *  (project.ts); average a trailing shutter window of sub-frames back down to the
+ *  output fps. `tmix=frames=M` averages M consecutive sub-frames; `fps=baseFps`
+ *  then decimates ≈every `samples`-th, so each output frame = the mean of the last
+ *  M sub-frames of its interval (a trailing shutter). Re-tags bt709/tv to match
+ *  the capture pipeline (the input is already bt709, but tmix→encode must keep it). */
+async function motionBlurMp4(
+  inMp4: string,
+  outMp4: string,
+  baseFps: number,
+  samples: number,
+  shutter: number,
+): Promise<void> {
+  const M = Math.max(1, Math.min(samples, Math.round(shutter * samples)));
+  const vf =
+    `tmix=frames=${M},fps=${baseFps},format=yuv420p,` +
+    "setparams=range=tv:colorspace=bt709:color_primaries=bt709:color_trc=bt709";
+  await run(await resolveFfmpeg(), [
+    "-y",
+    "-loglevel",
+    "error",
+    "-i",
+    resolve(inMp4),
+    "-vf",
+    vf,
+    "-c:v",
+    "libx264",
+    "-pix_fmt",
+    "yuv420p",
+    "-crf",
+    "18",
+    "-r",
+    String(baseFps),
+    "-an",
+    outMp4,
+  ]);
+}
+
+export async function renderTake(
+  opts: RenderTakeOpts,
+): Promise<{ mp4Path: string; compositionPath: string }> {
+  const composition: TakeComposition =
+    opts.composition ??
+    planComposition(
+      opts.log ??
+        (() => {
+          throw new Error("renderTake: provide `log` or `composition`");
+        })(),
+      opts.planOpts,
+    );
+
+  // 0. validate BEFORE the expensive render. A hand-edited composition (the
+  //    refine loop) can carry a malformed zoom or a capture-locked tMs drift;
+  //    catch it in milliseconds rather than after a multi-second render.
+  if (!opts.skipValidate) {
+    const issues: CompositionIssue[] = validateComposition(composition, {
+      captureLog: opts.captureLog ?? opts.log,
+    });
+    const errors = issues.filter((i) => i.severity === "error");
+    const warns = issues.filter((i) => i.severity === "warn");
+    if (opts.logProgress && warns.length)
+      process.stderr.write(`composition warnings:\n${formatIssues(warns)}\n`);
+    if (errors.length)
+      throw new Error(
+        `composition has ${errors.length} error(s) — refusing to render:\n${formatIssues(errors)}`,
+      );
+  }
+
+  // 1. serve the capture as /capture.mp4 (vite public dir under PKG_ROOT)
+  await toMp4(opts.videoPath, PUBLIC_MP4, composition.output.fps);
+
+  // 2. hand the composition to the scene (static import, rewritten per render)
+  await mkdir(dirname(COMP_JSON), { recursive: true });
+  await writeFile(COMP_JSON, JSON.stringify(composition, null, 2));
+
+  // 3. render headless, with cwd pinned to the package root.
+  // revideo's @revideo/telemetry phones home to PostHog by default; this is an
+  // all-local tool, so default it OFF (an explicit user-set value still wins).
+  if (process.env.DISABLE_TELEMETRY === undefined) process.env.DISABLE_TELEMETRY = "true";
+  const prevCwd = process.cwd();
+  process.chdir(PKG_ROOT);
+  let produced: string;
+  try {
+    produced = await renderVideo({
+      projectFile: "/src/scene/project.ts",
+      settings: {
+        outFile: "take.mp4",
+        outDir: RENDER_OUT,
+        workers: 1,
+        ...(opts.rangeSec ? { projectSettings: { range: opts.rangeSec } } : {}),
+        logProgress: opts.logProgress ?? false,
+        ...(opts.onProgress
+          ? { progressCallback: (_worker: number, progress: number) => opts.onProgress!(progress) }
+          : {}),
+        // Reuse the capture-managed Chrome-for-Testing when given (one browser
+        // for both stages); else let revideo's puppeteer resolve its own.
+        puppeteer: {
+          // --password-store/--use-mock-keychain: never touch the OS keychain, so
+          // macOS doesn't pop a "Chrome wants to use Chromium Safe Storage" prompt
+          // mid-render (matches the capture launch in runtime/cdp.ts).
+          args: [
+            "--no-sandbox",
+            "--disable-setuid-sandbox",
+            "--password-store=basic",
+            "--use-mock-keychain",
+          ],
+          ...(opts.chromePath ? { executablePath: opts.chromePath } : {}),
+        },
+      },
+    });
+  } finally {
+    process.chdir(prevCwd);
+  }
+
+  // 4. deliver mp4 (motion-blur down from fps·samples if configured) + the
+  //    editable composition. OFF ⇒ a plain copy (byte-identical to before).
+  await mkdir(dirname(resolve(opts.outPath)), { recursive: true });
+  const producedAbs = resolve(PKG_ROOT, produced);
+  if (motionBlurActive(composition.motionBlur)) {
+    await motionBlurMp4(
+      producedAbs,
+      resolve(opts.outPath),
+      composition.output.fps,
+      composition.motionBlur.samples,
+      composition.motionBlur.shutter,
+    );
+  } else {
+    await copyFile(producedAbs, resolve(opts.outPath));
+  }
+  const compositionPath = resolve(opts.outPath).replace(/\.mp4$/i, "") + ".composition.json";
+  if (opts.writeCompositionSibling !== false) {
+    // strip the render-time review decoration — the editable artifact is the
+    // clean composition, never the badged/watermarked variant of it.
+    const { review: _review, ...persisted } = composition;
+    await writeFile(compositionPath, JSON.stringify(persisted, null, 2));
+  }
+
+  return { mp4Path: resolve(opts.outPath), compositionPath };
+}

package/src/scene/project.ts

@@ -0,0 +1,19 @@
+// Excluded from tsc (src/scene/**); compiled by revideo's vite at render.
+import { makeProject } from "@revideo/core";
+import scene from "./scene";
+import comp from "./.composition.json";
+
+// Motion blur = temporal supersampling: render at fps·samples and let render.ts
+// average sub-frames back down to the output fps (ffmpeg tmix). Off (samples ≤ 1
+// or shutter 0) ⇒ just the output fps, i.e. unchanged.
+const mb = comp.motionBlur;
+const subSamples = mb && mb.samples > 1 && mb.shutter > 0 ? mb.samples : 1;
+
+export default makeProject({
+  scenes: [scene],
+  settings: {
+    shared: { size: { x: comp.output.width, y: comp.output.height } },
+    // honour the composition's fps (default 30) — a hi-fps capture renders at 60
+    rendering: { fps: comp.output.fps * subSamples },
+  },
+});

package/src/scene/scene.tsx

@@ -0,0 +1,231 @@
+// Generic revideo scene: renders ANY TakeComposition. Compiled by
+// revideo's vite at render time (NOT typechecked by tsc — excluded).
+// renderTake writes ./.composition.json before each render.
+import { makeScene2D, Rect, Video, Line, Circle, Node, Gradient, Txt } from "@revideo/2d";
+import { createSignal, tween, linear } from "@revideo/core";
+import {
+  buildStageKeyframes,
+  buildLegs,
+  cursorPos,
+  isDragging,
+  keyvalN,
+  keyvalP,
+  clampCenter,
+  stageEasing,
+  panEasing,
+  gradientEndpoints,
+  restStageScale,
+  smoother,
+} from "../math";
+import comp from "./.composition.json";
+
+const vW = comp.source.videoWidth,
+  vH = comp.source.videoHeight;
+const oW = comp.output.width,
+  oH = comp.output.height;
+const stage = buildStageKeyframes(comp);
+const legs = buildLegs(comp);
+const rest = restStageScale(vW, vH, oW, oH, comp.framing.insetFrac);
+
+// video-px -> stage-local coords (stage local origin = video centre)
+const lx = (px) => px - vW / 2;
+const ly = (py) => py - vH / 2;
+
+// arrow cursor (tip at local 0,0), scaled
+const S = comp.cursor.scale;
+const CURSOR = [
+  [0, 0],
+  [0, 17],
+  [4.5, 13],
+  [7.5, 19.5],
+  [10, 18.3],
+  [7, 11.7],
+  [12, 11.7],
+].map(([x, y]) => [x * S, y * S]);
+
+export default makeScene2D("take", function* (view) {
+  const t = createSignal(0);
+
+  // zoom/pan stage easing (scale + center in unison): spring → bezier → smoother
+  const scaleEase = stageEasing(comp.cursor); // zoom-IN: spring allowed
+  const panEase = panEasing(comp.cursor); // zoom-OUT scale + centre: smooth bezier
+  // spring in / bezier out (smooth settle); Math.max(rest,…) is a floor. Mirrors derive.ts.
+  const scaleAt = () => Math.max(rest, keyvalN(t(), stage.z, scaleEase, panEase));
+  const centerAt = () => clampCenter(keyvalP(t(), stage.c, panEase), scaleAt(), vW, vH, oW, oH);
+
+  // Composition camera: ONE camera zooms the WHOLE
+  // composition (backdrop + the inset framed screen) together. At rest the
+  // camera shows the full composition (backdrop margin around the inset screen);
+  // a zoom crops into the screen (so it fills the frame — backdrop cropped out).
+  // Because the backdrop scales/pans WITH everything (it's inside the camera, not
+  // a static layer the video overfills), zoom-OUT is one uniform motion field —
+  // the backdrop slides back in at the edges with no static-edge *reveal*, which
+  // is what removes the old two-stage zoom-out stutter.
+  //
+  // Geometry: cameraNode scale = s/rest, position = -(c-vW/2)·s. Inside it the
+  // screen group is drawn at scale `rest` (the inset), so the video's NET scale
+  // is (s/rest)·rest = s and its NET position is s·(px−c) — identical to before,
+  // i.e. the video/cursor render exactly as they did; only the backdrop moved
+  // inside the camera. The backdrop Rect fills the composition (oW×oH); at rest
+  // (s=rest ⇒ camera scale 1, centred) it covers the output exactly.
+  const fr = comp.framing;
+  const bg = comp.framing.background;
+  const ge = gradientEndpoints(bg.angle, oW, oH);
+  view.add(
+    <Node
+      position={() => {
+        const s = scaleAt(),
+          c = centerAt();
+        return [-(c.x - vW / 2) * s, -(c.y - vH / 2) * s];
+      }}
+      scale={() => {
+        const z = scaleAt() / rest;
+        return [z, z];
+      }}
+    >
+      {/* backdrop — part of the composition, zoomed by the camera */}
+      <Rect
+        width={oW}
+        height={oH}
+        fill={
+          bg.type === "solid"
+            ? bg.from
+            : new Gradient({
+                type: "linear",
+                from: [ge.x0 - oW / 2, ge.y0 - oH / 2],
+                to: [ge.x1 - oW / 2, ge.y1 - oH / 2],
+                stops: [
+                  { offset: 0, color: bg.from },
+                  { offset: 1, color: bg.to },
+                ],
+              })
+        }
+      />
+
+      {/* screen group: the inset framed recording (scale `rest`), so the video
+          fills the composition's content area minus the backdrop margin. */}
+      <Node scale={[rest, rest]}>
+        {/* framing rendered IN revideo: rounded mask + drop shadow */}
+        <Rect
+          width={vW}
+          height={vH}
+          radius={fr.cornerRadius}
+          clip
+          fill={"#0a0e1c"}
+          shadowColor={fr.shadow.color}
+          shadowBlur={fr.shadow.blur}
+          shadowOffset={[fr.shadow.offset.x, fr.shadow.offset.y]}
+        >
+          <Video src={comp.source.videoUrl} width={vW} height={vH} play={true} />
+        </Rect>
+
+        {/* click ripples — pointer-landing beats only (scroll/press have no
+          spatial click point, so they get no ripple) */}
+        {comp.events
+          .filter((e) => e.kind !== "scroll" && e.kind !== "press")
+          .map((e) => {
+            const ms = comp.cursor.rippleMs / 1000;
+            const prog = () => {
+              const dt = t() - e.tMs / 1000;
+              return dt >= 0 && dt <= ms ? dt / ms : -1;
+            };
+            return (
+              <Circle
+                position={[lx(e.point.x), ly(e.point.y)]}
+                size={() => {
+                  const p = prog();
+                  return p < 0 ? 0 : (12 + 60 * smoother(p)) * 2;
+                }}
+                stroke={"white"}
+                lineWidth={4}
+                opacity={() => {
+                  const p = prog();
+                  return p < 0 ? 0 : (150 * (1 - p)) / 255;
+                }}
+              />
+            );
+          })}
+
+        {/* synthetic cursor on ground-truth waypoints */}
+        <Node
+          position={() => {
+            const c = cursorPos(t(), legs, comp);
+            return [lx(c.x), ly(c.y)];
+          }}
+        >
+          {/* pressed-state ring while a drag is mid-stroke (button held) */}
+          <Circle
+            size={() => (isDragging(t(), legs) ? 30 : 0)}
+            fill={"rgba(255,255,255,0.16)"}
+            stroke={"white"}
+            lineWidth={2}
+          />
+          <Line
+            points={CURSOR.map(([x, y]) => [x + 2.5, y + 2.5])}
+            closed
+            fill={"rgba(0,0,0,0.35)"}
+          />
+          <Line points={CURSOR} closed fill={"rgb(20,20,24)"} stroke={"white"} lineWidth={2} />
+        </Node>
+      </Node>
+    </Node>,
+  );
+
+  // Review decoration (badges / watermark / variant label) — SCREEN space,
+  // added AFTER the camera node so it draws on top and never rides the zoom.
+  // Only present on review copies and A/B reels (composition.review), never on
+  // the postable master. Text renders in Chrome, so no ffmpeg font filters.
+  const review = comp.review;
+  if (review) {
+    const k = oH / 1080; // scale UI with output size
+    const FONT = "system-ui, -apple-system, 'Segoe UI', 'Noto Sans', sans-serif";
+    const pad = 36 * k;
+    if (review.watermark) {
+      view.add(
+        <Txt
+          text={review.watermark}
+          position={[oW / 2 - pad, -oH / 2 + pad]}
+          offset={[1, -1]}
+          fontFamily={FONT}
+          fontSize={24 * k}
+          letterSpacing={4 * k}
+          fontWeight={600}
+          fill={"rgba(255,255,255,0.34)"}
+        />,
+      );
+    }
+    const pill = (text, opacity, big) => (
+      <Rect
+        layout
+        padding={[10 * k, 16 * k]}
+        radius={8 * k}
+        fill={"rgba(0,0,0,0.55)"}
+        position={[-oW / 2 + pad, oH / 2 - pad]}
+        offset={[-1, 1]}
+        opacity={opacity}
+      >
+        <Txt
+          text={text}
+          fontFamily={FONT}
+          fontSize={(big ? 30 : 25) * k}
+          fontWeight={500}
+          fill={"rgba(255,255,255,0.94)"}
+        />
+      </Rect>
+    );
+    for (const b of review.badges ?? []) {
+      // 120ms fade at each end so badge swaps don't pop
+      const op = () => {
+        const ms = t() * 1000;
+        if (ms < b.fromMs || ms >= b.toMs) return 0;
+        const inF = Math.min(1, (ms - b.fromMs) / 120);
+        const outF = Math.min(1, (b.toMs - ms) / 120);
+        return Math.min(inF, outF);
+      };
+      view.add(pill(b.text, op, false));
+    }
+    if (review.label) view.add(pill(review.label, 1, true));
+  }
+
+  yield* tween(stage.T, (v) => t(v * stage.T), linear);
+});