overlay-factory-worker 0.1.0

package/src/series/what-prints/CodeCard.tsx

@@ -0,0 +1,107 @@
+import React from "react";
+import { AbsoluteFill } from "remotion";
+import { loadFont as loadInter } from "@remotion/google-fonts/Inter";
+import { loadFont as loadRobotoMono } from "@remotion/google-fonts/RobotoMono";
+import {
+  CodeCardProps,
+  CARD_WIDTH,
+  cardHeight,
+  PAD,
+  LABEL_SIZE,
+  CODE_SIZE,
+  LINE_HEIGHT,
+} from "./codeCardTypes";
+
+// Söhne / Söhne Mono stand-ins — the chat-app code block the original cards
+// were screenshotted from uses a grotesk label over a neutral mono.
+const { fontFamily: uiFamily } = loadInter("normal", {
+  weights: ["500", "600"],
+  subsets: ["latin"],
+});
+const { fontFamily: monoFamily } = loadRobotoMono("normal", {
+  weights: ["400"],
+  subsets: ["latin"],
+});
+
+const EMOJI_STACK =
+  '"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif';
+
+// Sampled off the original screenshots: body #212121, label pure white,
+// One Dark-family syntax colors (see codeCardTypes.ts for the theme name).
+const BG = "#212121";
+const LABEL = "#ffffff";
+
+const RADIUS_PCT = 0.045;
+
+export const CodeCard: React.FC<CodeCardProps> = ({
+  showLanguage = true,
+  background,
+  radiusPct,
+  language,
+  lines,
+  codeScale = 1,
+}) => {
+  const codeSize = CODE_SIZE * codeScale;
+  return (
+    <AbsoluteFill style={{ backgroundColor: "transparent" }}>
+      <div
+        style={{
+          width: CARD_WIDTH,
+          height: cardHeight(lines.length, codeScale),
+          backgroundColor: background ?? BG,
+          borderRadius: Math.round(CARD_WIDTH * (radiusPct ?? RADIUS_PCT)),
+          padding: PAD,
+          boxSizing: "border-box",
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        {/* The language label is the whole header now. `space-between` only
+            existed to push a decorative copy glyph to the right edge — it was
+            a screenshot artefact of the chat app these cards imitate, and it
+            invites a tap that does nothing. */}
+        {showLanguage ? (
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+            }}
+          >
+            <span
+              style={{
+                fontFamily: uiFamily,
+                fontWeight: 500,
+                fontSize: LABEL_SIZE,
+                color: LABEL,
+                lineHeight: 1,
+              }}
+            >
+              {language}
+            </span>
+          </div>
+        ) : null}
+
+        <pre
+          style={{
+            margin: 0,
+            marginTop: PAD * 0.95,
+            fontFamily: `${monoFamily}, ${EMOJI_STACK}`,
+            fontSize: codeSize,
+            lineHeight: LINE_HEIGHT,
+            whiteSpace: "pre",
+          }}
+        >
+          {lines.map((tokens, i) => (
+            <div key={i} style={{ minHeight: codeSize * LINE_HEIGHT }}>
+              {tokens.map((t, j) => (
+                <span key={j} style={{ color: t.color }}>
+                  {t.content}
+                </span>
+              ))}
+            </div>
+          ))}
+        </pre>
+      </div>
+    </AbsoluteFill>
+  );
+};

package/src/series/what-prints/Composition.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+import { AbsoluteFill, Img, Sequence, staticFile, useVideoConfig } from "remotion";
+import { Video } from "@remotion/media";
+import { Title } from "../../overlay/Title";
+import { DifficultyMeter } from "../../overlay/DifficultyMeter";
+import { SAFE_AREA, SAFE_CENTER_Y, CARD_MAX_HEIGHT } from "../../overlay/safeArea";
+import { CARD_WIDTH_PCT } from "../../overlay/cardLayout";
+import type { WhatPrintsProps } from "./types";
+
+export const WhatPrints: React.FC<WhatPrintsProps> = ({
+  broll,
+  card,
+  titleLine1,
+  titleLine2,
+  difficulty,
+  revealAtSec,
+  trimBeforeSec,
+  meterX,
+  meterY,
+  hideOverlays,
+}) => {
+  const { fps, width } = useVideoConfig();
+
+  return (
+    <AbsoluteFill style={{ background: "black" }}>
+      <Video
+        src={staticFile(broll)}
+        muted
+        loop
+        trimBefore={Math.round(trimBeforeSec * fps)}
+        style={{ width: "100%", height: "100%", objectFit: "cover" }}
+      />
+
+      {/*
+        Scrim under the title. The dot-matrix line is mostly gaps, so over
+        bright footage (a lit desk, a white keyboard) the squares stop reading
+        as letters — a soft gradient buys back contrast without touching the
+        typography. Kept out of the `hideOverlays` branch on purpose: it's the
+        background the title actually sits on, so the legibility check has to
+        measure against it.
+      */}
+      <AbsoluteFill
+        style={{
+          background:
+            "linear-gradient(to bottom, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.45) 22%, rgba(0,0,0,0) 40%)",
+        }}
+      />
+
+      {!hideOverlays && (
+        <>
+          {/* Title — upper area */}
+          <AbsoluteFill
+            style={{
+              alignItems: "center",
+              justifyContent: "flex-start",
+              // Clear of Instagram's status bar + Reels header, and of the 3:4
+              // crop the profile grid takes off the top.
+              paddingTop: SAFE_AREA.top + 12,
+            }}
+          >
+            <Title line1={titleLine1} line2={titleLine2} />
+          </AbsoluteFill>
+
+          {/*
+            Centred on the *uncovered* band, not the frame. Dead-centring puts
+            the card's lower edge under the like/comment rail, which starts
+            around y=1080 — visually centred, partly behind a button.
+          */}
+          <AbsoluteFill
+            style={{
+              alignItems: "center",
+              justifyContent: "center",
+              height: SAFE_CENTER_Y * 2,
+            }}
+          >
+            <Img
+              src={staticFile(card)}
+              style={{
+                // Bounded on both axes so a tall card shrinks to fit the
+                // uncovered band rather than growing into the action rail.
+                width: "auto",
+                height: "auto",
+                maxWidth: width * CARD_WIDTH_PCT,
+                maxHeight: CARD_MAX_HEIGHT,
+                filter: "drop-shadow(0 10px 40px rgba(0,0,0,0.45))",
+              }}
+            />
+          </AbsoluteFill>
+
+          {/* Difficulty meter — timed reveal, placed by scripts/place-overlay.ts */}
+          <Sequence from={Math.round(revealAtSec * fps)} layout="none">
+            <div
+              style={{
+                position: "absolute",
+                left: meterX ?? 90,
+                top: meterY ?? 1400,
+              }}
+            >
+              <DifficultyMeter difficulty={difficulty} />
+            </div>
+          </Sequence>
+        </>
+      )}
+    </AbsoluteFill>
+  );
+};

package/src/series/what-prints/codeCardTypes.ts

@@ -0,0 +1,105 @@
+import { z } from "zod";
+
+/**
+ * Geometry + theme shared by the CodeCard composition and scripts/make-card.ts.
+ * Everything scales off CARD_WIDTH, so bumping it just renders crisper cards at
+ * the same proportions as the original screenshots (1083x480 for 5 lines).
+ */
+export const CARD_WIDTH = 1300;
+
+export const PAD = Math.round(CARD_WIDTH * 0.044);
+export const LABEL_SIZE = Math.round(CARD_WIDTH * 0.034);
+export const CODE_SIZE = Math.round(CARD_WIDTH * 0.033);
+export const LINE_HEIGHT = 1.36;
+
+/** Roboto Mono advance width, as a fraction of font size. */
+const CHAR_RATIO = 0.6;
+
+/** How many characters fit on one line at full size. */
+export const MAX_COLUMNS = Math.floor(
+  (CARD_WIDTH - PAD * 2) / (CODE_SIZE * CHAR_RATIO),
+);
+
+/**
+ * Shrink factor for snippets whose longest line overruns the card. Cards stay a
+ * fixed width so the video overlay lands consistently, so the type gives way.
+ */
+export const fitScale = (widestLine: number) =>
+  widestLine <= MAX_COLUMNS ? 1 : MAX_COLUMNS / widestLine;
+
+/** Height needed for a snippet with `lineCount` code lines (blank lines count). */
+export const cardHeight = (lineCount: number, scale = 1) =>
+  Math.round(
+    PAD * 2 +
+      LABEL_SIZE +
+      PAD * 0.95 +
+      lineCount * CODE_SIZE * scale * LINE_HEIGHT,
+  );
+
+/**
+ * Sampled off the original cards: a deliberately quiet One Dark variant.
+ * Only keywords (purple), strings (green), numbers/constants (orange) and
+ * comments get color — function calls, operators and punctuation stay plain,
+ * which is what makes the cards read as prose instead of a rainbow.
+ */
+export const CARD_THEME = {
+  name: "what-prints",
+  type: "dark" as const,
+  colors: { "editor.background": "#212121", "editor.foreground": "#c5c8d4" },
+  settings: [
+    { settings: { foreground: "#c5c8d4", background: "#212121" } },
+    {
+      scope: ["comment", "punctuation.definition.comment"],
+      settings: { foreground: "#7c828f", fontStyle: "italic" },
+    },
+    {
+      scope: [
+        "keyword",
+        "storage",
+        "storage.type",
+        "keyword.control",
+        "keyword.operator.new",
+        "keyword.operator.expression",
+        "keyword.operator.logical",
+        "variable.language",
+      ],
+      settings: { foreground: "#c678dd" },
+    },
+    {
+      // Plain again: `=`, `*`, `+` read as punctuation on the originals.
+      // Listed after the keyword rule and more specific, so it wins.
+      scope: ["keyword.operator", "punctuation"],
+      settings: { foreground: "#c5c8d4" },
+    },
+    {
+      scope: ["string", "punctuation.definition.string", "string.quoted"],
+      settings: { foreground: "#98c379" },
+    },
+    {
+      scope: [
+        "constant.numeric",
+        "constant.language",
+        "constant.character",
+        "support.constant",
+      ],
+      settings: { foreground: "#d19a66" },
+    },
+  ],
+};
+
+const tokenSchema = z.object({
+  content: z.string(),
+  color: z.string(),
+});
+
+export const codeCardSchema = z.object({
+  /** Look overrides — see src/overlay/look.ts. Absent = the shipped design. */
+  showLanguage: z.boolean().optional(),
+  background: z.string().optional(),
+  radiusPct: z.number().optional(),
+  language: z.string(), // the label drawn top-left, e.g. "Python"
+  lines: z.array(z.array(tokenSchema)), // pre-highlighted by scripts/make-card.ts
+  codeScale: z.number().default(1), // < 1 when a long line has to be shrunk
+});
+
+export type CodeCardProps = z.infer<typeof codeCardSchema>;

package/src/series/what-prints/types.ts

@@ -0,0 +1,22 @@
+import { z } from "zod";
+
+export const whatPrintsSchema = z.object({
+  broll: z.string(), // path under public/, e.g. "assets/b-roll/IMG_4858.MOV"
+  card: z.string(), // processed card PNG, e.g. "assets/cards/IMG_4030.png"
+  titleLine1: z.string(),
+  titleLine2: z.string(),
+  difficulty: z.enum(["easy", "medium", "hard"]),
+  durationSec: z.number(), // total video length
+  revealAtSec: z.number(), // when the difficulty pill pops in
+  trimBeforeSec: z.number(), // skip this much of the b-roll clip
+  // Difficulty meter position, chosen by scripts/place-overlay.ts against the
+  // actual footage so it never lands on Erin or a busy part of the frame.
+  meterX: z.number().optional(),
+  meterY: z.number().optional(),
+  // Renders the background (b-roll + scrim) without the title, card or meter.
+  // scripts/check-legibility.ts diffs this against the full frame to work out
+  // which pixels are overlay and what each one is sitting on top of.
+  hideOverlays: z.boolean().optional(),
+});
+
+export type WhatPrintsProps = z.infer<typeof whatPrintsSchema>;

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2018",
+    "module": "Preserve",
+    "moduleResolution": "Bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "lib": ["es2015"],
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "noUnusedLocals": true,
+    "resolveJsonModule": true
+  },
+  "exclude": ["remotion.config.ts"]
+}

package/worker/cli.mjs

@@ -0,0 +1,151 @@
+#!/usr/bin/env node
+// overlay-factory-worker entrypoint — the Overlay Factory's half of "connect
+// your computer". Same verbs as the other three workers, so `npx goosetools
+// install` can run all four in a row:
+//
+//   install    save token + register a login service (worker runs forever)
+//   update     pull the newest code into the background copy + restart
+//   status     what's installed, whether it's running, recent log lines
+//   doctor     check everything a render needs, and say what's missing
+//   uninstall  remove the service (keeps your puzzles, looks and cards)
+//   run        run the worker loop in this window (default)
+//
+// The worker itself is TypeScript — the compositions it renders are TSX, and
+// the render pipeline shares their types. It runs through tsx rather than a
+// build step, which is also how it runs from a checkout.
+
+import { execFileSync, execSync, spawnSync } from "node:child_process";
+import { existsSync } from "node:fs";
+import { createRequire } from "node:module";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const ROOT = resolve(dirname(fileURLToPath(import.meta.url)), "..");
+const WORKER_TS = join(ROOT, "scripts", "overlay-worker.ts");
+const require = createRequire(join(ROOT, "package.json"));
+
+const command = [
+  "install",
+  "update",
+  "status",
+  "uninstall",
+  "run",
+  "doctor",
+].includes(process.argv[2])
+  ? process.argv[2]
+  : "run";
+
+function flag(name) {
+  const i = process.argv.indexOf(name);
+  return i !== -1 ? process.argv[i + 1] : undefined;
+}
+
+function has(cmd) {
+  try {
+    execSync(`command -v ${cmd}`, { stdio: "ignore", shell: true });
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+function tsxCli() {
+  const cli = join(dirname(require.resolve("tsx/package.json")), "dist", "cli.mjs");
+  if (!existsSync(cli)) {
+    throw new Error(`tsx not found at ${cli} — reinstall the worker package.`);
+  }
+  return cli;
+}
+
+// Remotion renders in a headless Chrome it downloads itself. Doing it here
+// means the first reel doesn't stall for several minutes on a download that
+// looks like a hung job — and if it fails, this is a warning, not a wall:
+// Remotion will fetch it again at render time.
+function ensureRenderBrowser({ fatal = false } = {}) {
+  try {
+    console.log("Checking the render browser (first run can take a few minutes)…");
+    execFileSync("npx", ["--yes", "remotion", "browser", "ensure"], {
+      cwd: ROOT,
+      stdio: ["ignore", "pipe", "pipe"],
+      shell: process.platform === "win32",
+    });
+    return true;
+  } catch (err) {
+    const detail = err?.stderr?.toString().trim();
+    if (detail) console.error(detail);
+    console[fatal ? "error" : "warn"](
+      "Couldn't set up the render browser — Remotion will try again on the first reel.",
+    );
+    if (fatal) process.exit(1);
+    return false;
+  }
+}
+
+// These only inspect or tear down what's already there, so they skip the
+// preflight below — `status` in particular has to work precisely when
+// something IS wrong.
+if (command === "uninstall") {
+  const { uninstall } = await import("./service.mjs");
+  uninstall();
+  process.exit(0);
+}
+
+if (command === "status") {
+  const { status } = await import("./service.mjs");
+  status();
+  process.exit(0);
+}
+
+if (command === "doctor") {
+  const { hasFfmpeg } = await import("./service.mjs");
+  const checks = [
+    ["macOS", process.platform === "darwin", "reels render with Apple's videotoolbox encoder"],
+    ["Node 20+", Number(process.versions.node.split(".")[0]) >= 20, "install a newer Node"],
+    ["ffmpeg + ffprobe", hasFfmpeg(), "brew install ffmpeg"],
+    ["Claude Code", has("claude"), "npm install -g @anthropic-ai/claude-code"],
+  ];
+  for (const [label, pass, hint] of checks) {
+    console.log(`${pass ? "✓" : "✗"} ${label}${pass ? "" : `  — ${hint}`}`);
+  }
+  process.exit(checks.every(([, pass]) => pass) ? 0 : 1);
+}
+
+if (command === "run") {
+  // Hand the process over to the worker loop. stdio is inherited so launchd's
+  // log files get the worker's own output, and the exit code is passed through
+  // so KeepAlive restarts on a crash the way it always has.
+  const result = spawnSync(process.execPath, [tsxCli(), WORKER_TS], {
+    cwd: ROOT,
+    stdio: "inherit",
+  });
+  process.exit(result.status ?? 1);
+}
+
+// ── install / update ────────────────────────────────────────────────────────
+
+// Claude Code writes the puzzles, series and looks this worker renders. The
+// other agent CLIs are picked per-account in Setup and checked per job; this
+// is the one that has to be here before "connected" means anything.
+if (!has("claude")) {
+  console.error(
+    "\nClaude Code isn't installed yet (it writes the puzzles and looks).\n" +
+      "Install it with:  npm install -g @anthropic-ai/claude-code\n" +
+      "Then run:         claude   (once, to sign in — type /exit to leave)\n" +
+      "Then run this command again.\n",
+  );
+  process.exit(1);
+}
+
+ensureRenderBrowser();
+
+if (command === "install") {
+  const { install } = await import("./service.mjs");
+  install({
+    url: (flag("--url") ?? "https://goosetools.com").replace(/\/$/, ""),
+    token: flag("--token"),
+    root: ROOT,
+  });
+} else {
+  const { update } = await import("./service.mjs");
+  update({ root: ROOT });
+}