overlay-factory-worker 0.1.0

package/src/lab/PillLab.tsx

@@ -0,0 +1,121 @@
+import React from "react";
+import { AbsoluteFill, staticFile } from "remotion";
+import { Video } from "@remotion/media";
+import { PixelText } from "../overlay/PixelText";
+import { sansFamily } from "../overlay/fonts";
+
+const DOT = { easy: "#22c55e", medium: "#eab308", hard: "#ef4444" } as const;
+const difficulty: keyof typeof DOT = "hard";
+const label = "Hard";
+
+// A — current: white pill, colored dot
+const OptionA: React.FC = () => (
+  <div
+    style={{
+      display: "inline-flex",
+      alignItems: "center",
+      gap: 20,
+      background: "white",
+      borderRadius: 24,
+      padding: "26px 44px",
+      boxShadow: "0 6px 30px rgba(0,0,0,0.35)",
+    }}
+  >
+    <div style={{ width: 44, height: 44, borderRadius: "50%", background: DOT[difficulty] }} />
+    <div style={{ fontFamily: sansFamily, fontWeight: 700, fontSize: 52, color: "#111" }}>{label}</div>
+  </div>
+);
+
+// B — pixel word, no container: echoes the title treatment
+const OptionB: React.FC = () => (
+  <PixelText text={label.toUpperCase()} fontFamily={sansFamily} fontWeight={500} rows={7} cell={11} gap={2} color={DOT[difficulty]} />
+);
+
+// C — pixel blocks as a difficulty meter, with a plain label
+const OptionC: React.FC = () => {
+  const filled = { easy: 1, medium: 2, hard: 3 }[difficulty];
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: 18 }}>
+      <div style={{ display: "flex", gap: 8 }}>
+        {[0, 1, 2].map((i) => (
+          <div
+            key={i}
+            style={{
+              width: 34,
+              height: 52,
+              background: i < filled ? DOT[difficulty] : "rgba(255,255,255,0.28)",
+              boxShadow: "0 4px 16px rgba(0,0,0,0.4)",
+            }}
+          />
+        ))}
+      </div>
+      <div
+        style={{
+          fontFamily: sansFamily,
+          fontWeight: 700,
+          fontSize: 50,
+          color: "white",
+          textShadow: "0 4px 18px rgba(0,0,0,0.6)",
+        }}
+      >
+        {label}
+      </div>
+    </div>
+  );
+};
+
+// D — dark glass chip, colored text
+const OptionD: React.FC = () => (
+  <div
+    style={{
+      display: "inline-flex",
+      alignItems: "center",
+      gap: 16,
+      background: "rgba(20,20,22,0.72)",
+      border: "3px solid rgba(255,255,255,0.16)",
+      borderRadius: 20,
+      padding: "22px 40px",
+      backdropFilter: "blur(14px)",
+    }}
+  >
+    <div style={{ width: 20, height: 20, background: DOT[difficulty] }} />
+    <div
+      style={{
+        fontFamily: sansFamily,
+        fontWeight: 700,
+        fontSize: 48,
+        color: "white",
+        letterSpacing: 2,
+        textTransform: "uppercase",
+      }}
+    >
+      {label}
+    </div>
+  </div>
+);
+
+const OPTIONS = [
+  { key: "A — current white pill", node: <OptionA /> },
+  { key: "B — pixel word", node: <OptionB /> },
+  { key: "C — pixel meter", node: <OptionC /> },
+  { key: "D — dark glass chip", node: <OptionD /> },
+];
+
+export const PillLab: React.FC = () => (
+  <AbsoluteFill>
+    <Video
+      src={staticFile("assets/b-roll/IMG_4858.MOV")}
+      muted
+      style={{ width: "100%", height: "100%", objectFit: "cover" }}
+    />
+    <AbsoluteFill style={{ background: "rgba(0,0,0,0.15)" }} />
+    <AbsoluteFill style={{ justifyContent: "center", gap: 90, paddingLeft: 90 }}>
+      {OPTIONS.map((o) => (
+        <div key={o.key} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
+          <div style={{ fontFamily: "monospace", fontSize: 28, color: "#ffe6a0" }}>{o.key}</div>
+          <div style={{ display: "flex" }}>{o.node}</div>
+        </div>
+      ))}
+    </AbsoluteFill>
+  </AbsoluteFill>
+);

package/src/overlay/Composition.tsx

@@ -0,0 +1,297 @@
+import React, { useEffect, useState } from "react";
+import {
+  AbsoluteFill,
+  Img,
+  Sequence,
+  continueRender,
+  delayRender,
+  interpolate,
+  spring,
+  staticFile,
+  useCurrentFrame,
+  useVideoConfig,
+} from "remotion";
+import { Title } from "./Title";
+import { DifficultyMeter } from "./DifficultyMeter";
+import { SAFE_AREA, SAFE_CENTER_Y, CARD_MAX_HEIGHT } from "./safeArea";
+import { CARD_WIDTH_PCT } from "./cardLayout";
+import { PixelText } from "./PixelText";
+import { sansFamily } from "./fonts";
+import { brandFontsReady } from "./brandFonts";
+import type { OverlayLayer, OverlayProps } from "./types";
+
+/**
+ * The overlay layers with nothing behind them.
+ *
+ * There is no <Video> here on purpose. Rendering 4K footage through Remotion
+ * means screenshotting a 2160x3840 browser frame for every frame of the clip,
+ * which is slow and re-encodes footage that was already fine. Instead this
+ * renders alpha-only (ProRes 4444 via scripts/render-overlay.ts) and ffmpeg
+ * composites it over the untouched original — so the footage never enters
+ * Chrome and keeps its original quality.
+ *
+ * WhatPrints still composites its own <Video> directly; it's a fixed format
+ * where that's simpler. This composition is the one the Overlay Factory tool
+ * drives, where the footage is whatever the user just uploaded.
+ */
+
+/** A URL passes through; anything else is a path under public/. */
+const resolveSrc = (src: string) =>
+  /^https?:\/\//.test(src) ? src : staticFile(src);
+
+/**
+ * Generated templates are HTML, and HTML can carry things that have no business
+ * running inside a render. The series contract already forbids scripts and
+ * external URLs; this enforces it rather than trusting it, because a template
+ * is written by a model from a user's own instructions and nobody reads it
+ * before it renders.
+ */
+const sanitize = (html: string) =>
+  html
+    .replace(/<script[\s\S]*?<\/script>/gi, "")
+    .replace(/<iframe[\s\S]*?<\/iframe>/gi, "")
+    .replace(/\son\w+\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/gi, ""); // onclick=, onerror=
+
+/**
+ * Point root-relative sources at Remotion's static server.
+ *
+ * The worker substitutes photos as "/assets/…" because it has no way to build
+ * a render URL — staticFile only exists inside the composition. A bare root
+ * path does NOT resolve during a render (the page isn't served from the public
+ * directory's root), so the image silently fails to load and the layout draws
+ * an empty hole. This rewrites those paths at the only point that can.
+ */
+const localSrc = (html: string) =>
+  html.replace(
+    /(<img[^>]*\ssrc=")\/([^"]+)(")/gi,
+    (_, before: string, path: string, after: string) =>
+      before + staticFile(path) + after,
+  );
+
+/** Entrance motion, driven by Remotion's clock — see htmlLayer in types.ts. */
+const HtmlBlock: React.FC<{
+  html: string;
+  enter?: "none" | "fade" | "slide-up" | "slide-down" | "pop";
+}> = ({ html, enter = "fade" }) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const s = spring({ frame, fps, config: { damping: 14 } });
+
+  const style: React.CSSProperties =
+    enter === "none"
+      ? {}
+      : enter === "fade"
+        ? { opacity: s }
+        : enter === "pop"
+          ? { opacity: s, transform: `scale(${interpolate(s, [0, 1], [0.86, 1])})` }
+          : {
+              opacity: s,
+              transform: `translateY(${interpolate(
+                s,
+                [0, 1],
+                [enter === "slide-up" ? 60 : -60, 0],
+              )}px)`,
+            };
+
+  return (
+    <div
+      style={style}
+      dangerouslySetInnerHTML={{ __html: localSrc(sanitize(html)) }}
+    />
+  );
+};
+
+const Layer: React.FC<{ layer: OverlayLayer }> = ({ layer }) => {
+  const { width: layerWidth } = useVideoConfig();
+
+  switch (layer.type) {
+    case "title":
+      return (
+        <>
+          {layer.scrim !== false && (
+            <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%)",
+              }}
+            />
+          )}
+          <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: layer.y ?? SAFE_AREA.top + 12,
+            }}
+          >
+            <Title
+              line1={layer.line1}
+              line2={layer.line2}
+              sansSize={layer.sansSize}
+              rows={layer.rows}
+              cell={layer.cell}
+              gap={layer.gap}
+              weight={layer.weight}
+              family={layer.family}
+            />
+          </AbsoluteFill>
+        </>
+      );
+
+    case "pixelText":
+      return (
+        <div
+          style={{
+            position: "absolute",
+            left: layer.x ?? SAFE_AREA.left,
+            top: layer.y ?? SAFE_CENTER_Y,
+          }}
+        >
+          <PixelText
+            text={layer.text}
+            fontFamily={sansFamily}
+            fontWeight={300}
+            rows={layer.rows ?? 10}
+            cell={layer.cell ?? 15}
+            gap={layer.gap ?? 3}
+            color={layer.color ?? "white"}
+          />
+        </div>
+      );
+
+    case "image": {
+      const img = (
+        <Img
+          src={resolveSrc(layer.src)}
+          style={{
+            width: "auto",
+            height: "auto",
+            // Bounded on both axes so a tall card shrinks to fit the uncovered
+            // band rather than growing into the action rail.
+            maxWidth: layerWidth * (layer.widthPct ?? CARD_WIDTH_PCT),
+            maxHeight: layer.maxHeight ?? CARD_MAX_HEIGHT,
+            filter: "drop-shadow(0 10px 40px rgba(0,0,0,0.45))",
+            opacity: layer.opacity ?? 1,
+          }}
+        />
+      );
+      // `y` on a card means its CENTRE, not its top — that's what
+      // place-overlay.ts computes and what "move it down off her face" means.
+      // Centring is done by shrinking the wrapper and centre-justifying, so
+      // the card's own height never has to be known here.
+      // Both axes are CENTRES — that's what place-overlay.ts computes, what
+      // "move it down off her face" means, and what a drag hands back. The
+      // card's own size never has to be known here: the wrapper is shrunk to
+      // twice the centre and the image is centred inside it.
+      const centerY = layer.y ?? SAFE_CENTER_Y;
+      return (
+        <AbsoluteFill
+          style={{
+            alignItems: "center",
+            justifyContent: "center",
+            height: centerY * 2,
+            ...(layer.x === undefined ? {} : { width: layer.x * 2 }),
+          }}
+        >
+          {img}
+        </AbsoluteFill>
+      );
+    }
+
+    case "html": {
+      const block = <HtmlBlock html={layer.html} enter={layer.enter} />;
+      const width = layerWidth * (layer.widthPct ?? 0.86);
+
+      if (layer.x !== undefined || layer.y !== undefined) {
+        return (
+          <div
+            style={{ position: "absolute", left: layer.x ?? 0, top: layer.y ?? 0, width }}
+          >
+            {block}
+          </div>
+        );
+      }
+
+      // Anchored. `center` is the band Instagram never covers, not the frame's
+      // middle — see safeArea.ts for why those differ.
+      const anchor = layer.anchor ?? "center";
+      return (
+        <AbsoluteFill
+          style={{
+            alignItems: "center",
+            justifyContent:
+              anchor === "top" ? "flex-start" : anchor === "bottom" ? "flex-end" : "center",
+            paddingTop: anchor === "top" ? SAFE_AREA.top + 12 : undefined,
+            paddingBottom: anchor === "bottom" ? SAFE_AREA.bottom : undefined,
+            height: anchor === "center" ? SAFE_CENTER_Y * 2 : undefined,
+          }}
+        >
+          <div style={{ width }}>{block}</div>
+        </AbsoluteFill>
+      );
+    }
+
+    case "meter":
+      return (
+        <div
+          style={{
+            position: "absolute",
+            left: layer.x ?? 90,
+            top: layer.y ?? 1400,
+          }}
+        >
+          <DifficultyMeter difficulty={layer.difficulty} />
+        </div>
+      );
+  }
+};
+
+export const Overlay: React.FC<OverlayProps> = ({ layers, fonts }) => {
+  const { fps, durationInFrames } = useVideoConfig();
+
+  // Hold the frame until the brand faces are usable. Without this the renderer
+  // captures while they're still loading and the text silently comes out in
+  // the fallback — which reads as "the brand didn't apply" with nothing to
+  // debug, because the colours land correctly and only the type is wrong.
+  const [fontHandle] = useState(() => delayRender("Loading brand fonts"));
+  useEffect(() => {
+    brandFontsReady.then(
+      () => continueRender(fontHandle),
+      () => continueRender(fontHandle), // a font that won't load must not hang the render
+    );
+  }, [fontHandle]);
+
+  // Uploaded faces, verified by the worker and served from public/. Declared
+  // here rather than loaded through @remotion/google-fonts because they aren't
+  // Google fonts — but the same rule applies: naming one isn't loading it, so
+  // font-display:block holds the frame until it's usable.
+  const faces = (fonts ?? [])
+    .map(
+      (f) =>
+        `@font-face{font-family:"${f.family}";src:url("${staticFile(f.file)}") format("${f.format}");font-display:block;}`,
+    )
+    .join("\n");
+
+  return (
+    // No background — the alpha channel is the whole point.
+    <AbsoluteFill>
+      {faces ? <style dangerouslySetInnerHTML={{ __html: faces }} /> : null}
+      {layers.map((layer, i) => {
+        const from = Math.round((layer.fromSec ?? 0) * fps);
+        // A layer's own animation (the meter's spring, for one) is written
+        // against frame 0 of its Sequence, so wrapping is what makes fromSec
+        // read as "pop in here" rather than "appear mid-animation".
+        const to =
+          layer.toSec === undefined
+            ? durationInFrames - from
+            : Math.round(layer.toSec * fps) - from;
+        return (
+          <Sequence key={i} from={from} durationInFrames={Math.max(1, to)} layout="none">
+            <Layer layer={layer} />
+          </Sequence>
+        );
+      })}
+    </AbsoluteFill>
+  );
+};

package/src/overlay/DifficultyMeter.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { spring, useCurrentFrame, useVideoConfig } from "remotion";
+import { sansFamily } from "./fonts";
+
+const LOOKS = {
+  easy: { color: "#22c55e", label: "Easy", filled: 1 },
+  medium: { color: "#eab308", label: "Medium", filled: 2 },
+  hard: { color: "#ef4444", label: "Hard", filled: 3 },
+} as const;
+
+export type Difficulty = keyof typeof LOOKS;
+
+const BLOCK_W = 34;
+const BLOCK_H = 52;
+const BLOCK_GAP = 8;
+
+/** Approximate on-screen size, used by the overlay placement script. */
+export const METER_SIZE = { width: 400, height: 112 };
+
+// Taken from the code cards themselves: solid #212121 body, and the rounded
+// corner prep-card.ts cuts (4.5% of card width) scaled to its on-screen size.
+const CARD_BACKGROUND = "#212121";
+const CARD_RADIUS = 42;
+
+// Three blocks filled by difficulty, next to a plain label. Blocks pop in one
+// after another; wrap in a <Sequence> so frame 0 is the reveal moment.
+export const DifficultyMeter: React.FC<{ difficulty: Difficulty }> = ({
+  difficulty,
+}) => {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const { color, label, filled } = LOOKS[difficulty];
+
+  const labelIn = spring({ frame: frame - 8, fps, config: { damping: 14 } });
+
+  return (
+    <div
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 22,
+        // Matches the code card exactly: same solid fill, same corner radius and
+        // shadow, so the two overlays read as one system.
+        background: CARD_BACKGROUND,
+        borderRadius: CARD_RADIUS,
+        padding: "26px 42px",
+        filter: "drop-shadow(0 10px 40px rgba(0,0,0,0.45))",
+      }}
+    >
+      <div style={{ display: "flex", gap: BLOCK_GAP }}>
+        {[0, 1, 2].map((i) => {
+          const on = i < filled;
+          const scale = spring({
+            frame: frame - i * 4,
+            fps,
+            config: { damping: 12, mass: 0.5 },
+          });
+          return (
+            <div
+              key={i}
+              style={{
+                width: BLOCK_W,
+                height: BLOCK_H,
+                background: on ? color : "rgba(255,255,255,0.22)",
+                borderRadius: 4,
+                transform: `scale(${scale})`,
+                transformOrigin: "bottom center",
+              }}
+            />
+          );
+        })}
+      </div>
+      <div
+        style={{
+          fontFamily: sansFamily,
+          fontWeight: 700,
+          fontSize: 54,
+          color: "white",
+          opacity: labelIn,
+        }}
+      >
+        {label}
+      </div>
+    </div>
+  );
+};

package/src/overlay/PixelText.tsx

@@ -0,0 +1,134 @@
+import React, { useEffect, useState } from "react";
+import { continueRender, delayRender } from "remotion";
+
+/**
+ * Renders text as a dot-matrix: real bold type rasterized onto a coarse grid,
+ * then drawn back as separated squares.
+ *
+ * Using a pixel *font* (Handjet, Silkscreen) caps stroke weight at one cell.
+ * Rasterizing instead means stroke thickness comes from the source font, so a
+ * heavy face gives the 3-cells-thick stems the title inspiration has.
+ */
+type Props = {
+  text: string;
+  fontFamily: string;
+  fontWeight?: number;
+  /** Cap height in grid cells — the main thickness control. More rows = thicker strokes. */
+  rows?: number;
+  /** On-screen size of one grid cell, in px. */
+  cell?: number;
+  /** Gap between squares, in px. */
+  gap?: number;
+  color?: string;
+};
+
+const rasterize = (
+  text: string,
+  fontFamily: string,
+  fontWeight: number,
+  rows: number,
+): { grid: boolean[][]; width: number; height: number } => {
+  // Cap height is ~0.72em in most geometric sans faces, so this puts the
+  // capitals across `rows` cells.
+  const fontSize = rows / 0.72;
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d")!;
+  const font = `${fontWeight} ${fontSize}px ${fontFamily}`;
+
+  ctx.font = font;
+  const metrics = ctx.measureText(text);
+  const width = Math.ceil(metrics.width) + 2;
+  const height = Math.ceil(fontSize * 1.45);
+
+  canvas.width = width;
+  canvas.height = height;
+  const c = canvas.getContext("2d")!;
+  c.font = font;
+  c.textBaseline = "alphabetic";
+  c.fillStyle = "#fff";
+  c.fillText(text, 1, Math.round(fontSize));
+
+  const { data } = c.getImageData(0, 0, width, height);
+  const grid: boolean[][] = [];
+  for (let y = 0; y < height; y++) {
+    const row: boolean[] = [];
+    for (let x = 0; x < width; x++) {
+      row.push(data[(y * width + x) * 4 + 3] > 110);
+    }
+    grid.push(row);
+  }
+
+  // Trim fully empty rows/columns so the block sits tight.
+  const rowFilled = grid.map((r) => r.some(Boolean));
+  const top = rowFilled.indexOf(true);
+  const bottom = rowFilled.lastIndexOf(true);
+  const colFilled = Array.from({ length: width }, (_, x) =>
+    grid.some((r) => r[x]),
+  );
+  const left = colFilled.indexOf(true);
+  const right = colFilled.lastIndexOf(true);
+
+  const trimmed = grid.slice(top, bottom + 1).map((r) => r.slice(left, right + 1));
+  return {
+    grid: trimmed,
+    width: right - left + 1,
+    height: bottom - top + 1,
+  };
+};
+
+export const PixelText: React.FC<Props> = ({
+  text,
+  fontFamily,
+  fontWeight = 700,
+  rows = 14,
+  cell = 13,
+  gap = 3,
+  color = "white",
+}) => {
+  const [handle] = useState(() => delayRender("Rasterizing pixel title"));
+  const [raster, setRaster] = useState<ReturnType<typeof rasterize> | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    document.fonts.ready.then(() => {
+      if (cancelled) return;
+      setRaster(rasterize(text, fontFamily, fontWeight, rows));
+      continueRender(handle);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [text, fontFamily, fontWeight, rows, handle]);
+
+  if (!raster) return null;
+
+  const square = cell - gap;
+  return (
+    <svg
+      width={raster.width * cell}
+      height={raster.height * cell}
+      // Two shadows, not one: a tight dark halo gives every square its own
+      // edge against light footage, and the soft one keeps the block grounded.
+      // A single wide blur just tints the area and the dots still disappear.
+      style={{
+        filter:
+          "drop-shadow(0 0 3px rgba(0,0,0,0.95)) drop-shadow(0 4px 16px rgba(0,0,0,0.6))",
+      }}
+    >
+      {raster.grid.map((row, y) =>
+        row.map((on, x) =>
+          on ? (
+            <rect
+              key={`${x}-${y}`}
+              x={x * cell}
+              y={y * cell}
+              width={square}
+              height={square}
+              fill={color}
+            />
+          ) : null,
+        ),
+      )}
+    </svg>
+  );
+};