+ {block.text}
+ {block.emphasis && {block.emphasis}}
+
+ );
+ }
+
+ if (block.type === "quote") {
+ const size = sizeOf(block);
+ return (
+ <>
+
+ {"“"}{block.text}{"”"}
+
+ {block.attribution && (
+
+ {block.attribution}
+
+ )}
+
+ );
+ }
+
+ if (block.type === "list") {
+ const size = sizeOf(block);
+ return (
+ <>
+ {block.items.map((item, i) => (
+
+ {block.numbered ? (
+
+ {i + 1}
+
+ ) : (
+
+ )}
+
+ ))}
+
+ );
+ }
+
+ if (block.type === "bars") {
+ const top = Math.max(...block.rows.map((row) => row.value)) || 1;
+ return (
+ <>
+ {block.rows.map((row, i) => (
+
+ {item}
+
+
+
+ ))}
+
+ );
+ }
+
+ if (block.type === "meter") {
+ const share = Math.max(0, Math.min(1, block.value));
+ return (
+ <>
+
+
+ {row.label}
+
+
+ {row.display ?? row.value}
+
+
+
+
+ {block.display ?? `${Math.round(share * 100)}%`}
+
+
+
+
+
+ );
+ }
+
+ if (block.type === "steps") {
+ const last = block.points.length - 1;
+ return (
+
+ {block.points.map((point, i) => (
+
+ {i > 0 && (
+
+ )}
+
+ ))}
+
+ );
+ }
+
+ if (block.type === "chip") {
+ return (
+
+
+
+
+ {point.value}
+
+ {point.note && (
+
+ {point.note}
+
+ )}
+
+ {block.src && (
+ })
+ )}
+
+ );
+ }
+
+ if (!block.src) return null;
+
+ const Frame = getRemotionEnvironment().isRendering ? OffthreadVideo : Video;
+ return (
+ <>
+ {block.media === "video" ? (
+
+ ) : (
+
+
+
+ {block.name}
+
+ {block.note && (
+
+ {block.note}
+
+ )}
+
+ {block.caption}
+
+ )}
+
+ );
+};
+
+const Stack: React.FC<{
+ blocks: Block[];
+ layout?: Layout;
+ gap?: Gap;
+ paint: Paint;
+}> = ({ blocks, layout = "stack", gap = "group", paint }) => {
+ const drawn = blocks.filter((block) => block.type !== "group" || block.blocks.length);
+ if (!drawn.length) return null;
+
+ const gutter = GAP_SIZE[gap] * paint.unit;
+ const columns = layout === "grid" ? 2 : drawn.length;
+ const share = layout === "stack"
+ ? paint.width
+ : Math.max(1, (paint.width - gutter * (columns - 1)) / columns);
+
+ return (
+
+ {drawn.map((block, i) => (
+
+ );
+};
+
+/**
+ * How tall a media block is drawn, and how much the type has to give.
+ *
+ * Two passes rather than one, because the two shrink at different costs. A
+ * picture cropped a little tighter is still the picture; type shrunk to fit a
+ * picture that kept its full height is a card nobody reads at arm's length.
+ * So the media band gives up its room first, down to the height below which
+ * it stops saying anything, and only then does the type scale.
+ */
+export function fitScene(
+ blocks: Block[],
+ { layout = "stack", gap = "group", room, width = SCENE_WIDTH }: {
+ layout?: Layout; gap?: Gap; room: number; width?: number;
+ },
+): { fit: number; mediaHeight: number } {
+ const asked = MEDIA_HEIGHT.max;
+ const at = (height: number) =>
+ sceneHeight(withMediaHeight(blocks, height), layout, gap, width);
+
+ const wanted = at(asked);
+ if (!(room > 0) || wanted <= room) return { fit: 1, mediaHeight: asked };
+
+ const mediaHeight = Math.max(MEDIA_HEIGHT.min, asked - (wanted - room));
+ const left = at(mediaHeight);
+ return {
+ fit: left <= room ? 1 : Math.max(MIN_FIT, room / left),
+ mediaHeight,
+ };
+}
+
+const withMediaHeight = (blocks: Block[], height: number): Block[] =>
+ blocks.map((block) => {
+ if (block.type === "media") return { ...block, height };
+ if (block.type === "group") {
+ return { ...block, blocks: withMediaHeight(block.blocks, height) };
+ }
+ return block;
+ });
+
+export const Scene: React.FC<{
+ blocks: Block[];
+ layout?: Layout;
+ gap?: Gap;
+ brand: Brand;
+ accent: string;
+ /** Reference pixels to device pixels, before any fit shrink. */
+ scale: number;
+ /** Device pixels the scene has to sit inside. */
+ room: number;
+}> = ({ blocks, layout = "stack", gap = "group", brand, accent, scale, room }) => {
+ const { fit, mediaHeight } = fitScene(blocks, { layout, gap, room: room / scale });
+ const unit = scale * fit;
+
+ return (
+ /*
+ * Clipped at the room it was given, because the shrink has a floor.
+ *
+ * An arrangement that cannot fit even at the smallest size worth reading
+ * is a plan somebody has to fix. What this decides is which way it fails:
+ * cut off at the top, or drawn up across the speaker's face and down
+ * behind the caption pill. The first reads as a card that ran long; the
+ * second reads as a broken render.
+ */
+
+
+ ))}
+
+
+ );
+};
diff --git a/remotion/src/components/brand.ts b/remotion/src/components/brand.ts
new file mode 100644
index 0000000..66f3d5a
--- /dev/null
+++ b/remotion/src/components/brand.ts
@@ -0,0 +1,23 @@
+/**
+ * The show's colours, or ours when it has not set any.
+ *
+ * Three values rather than a palette: the one colour that means "this is the
+ * thing", what text is set in, and what it is set on. Everything else on a
+ * card is one of those three at a lower opacity, which is what keeps a card
+ * looking like the show rather than like a theme.
+ */
+export type Brand = { accent: string; ink: string; surface: string };
+
+export const DEFAULT_BRAND: Brand = {
+ accent: "#4C9DF5",
+ ink: "#FFFFFF",
+ surface: "#0A0D14",
+};
+
+/** Text that is not the point, and marks that are not the subject. */
+export const muted = (ink: string) => `color-mix(in oklab, ${ink} 62%, transparent)`;
+
+export const context = (ink: string) => `color-mix(in oklab, ${ink} 22%, transparent)`;
+
+/** A meter's unfilled remainder: the fill's own hue, several steps lighter. */
+export const track = (fill: string) => `color-mix(in oklab, ${fill} 22%, transparent)`;
diff --git a/remotion/src/scene.test.ts b/remotion/src/scene.test.ts
new file mode 100644
index 0000000..ede8fdf
--- /dev/null
+++ b/remotion/src/scene.test.ts
@@ -0,0 +1,85 @@
+import { describe, it, expect } from "vitest";
+import { blockHeight, countBlocks, blockDepth, fitScale, hasMedia, sceneHeight } from "./scene";
+import type { Block } from "./scene";
+import { cardAt } from "./cards";
+import type { Card } from "./cards";
+
+const text = (words: string, size: "sm" | "md" | "xl" | "xxl" = "md"): Block =>
+ ({ type: "text", text: words, size });
+
+describe("fitting a scene into the room it was given", () => {
+ it("leaves a card that already fits alone", () => {
+ expect(fitScale([text("Hiring stopped", "xl")], { room: 900 })).toBe(1);
+ });
+
+ it("scales a card down rather than letting it run past its room", () => {
+ const blocks = Array.from({ length: 6 }, (_, i) => text(`A line of some length ${i}`, "xl"));
+ const room = 900;
+ const fit = fitScale(blocks, { room });
+ expect(fit).toBeLessThan(1);
+ expect(sceneHeight(blocks, "stack", "group") * fit).toBeLessThanOrEqual(room + 1);
+ });
+
+ /**
+ * Past the floor the card is clipped rather than shrunk on, and the renderer
+ * answers by giving it the whole frame. Shrinking to fit whatever it is
+ * handed is how a card ends up technically inside its room and unreadable on
+ * a phone held at arm's length.
+ */
+ it("stops shrinking at the size below which the card is small, not fitted", () => {
+ const blocks = Array.from({ length: 20 }, (_, i) => text(`Another long line here ${i}`, "xxl"));
+ expect(fitScale(blocks, { room: 100 })).toBe(0.55);
+ });
+
+ it("measures a wrapped line as taller than one that fits across", () => {
+ const short = blockHeight(text("Short"), 888);
+ const long = blockHeight(
+ text("A sentence long enough to wrap across more than one line of this frame"),
+ 888,
+ );
+ expect(long).toBeGreaterThan(short);
+ });
+
+ it("gives a row the width it actually has rather than the whole frame", () => {
+ const words = "A sentence long enough to wrap when it only has half the frame";
+ const alone = sceneHeight([text(words)], "stack", "group");
+ const beside = sceneHeight(
+ [{ type: "group", layout: "row", blocks: [text(words), text(words)] }],
+ "stack",
+ "group",
+ );
+ expect(beside).toBeGreaterThan(alone);
+ });
+});
+
+describe("what a scene is made of", () => {
+ const nested: Block[] = [
+ text("top"),
+ { type: "group", layout: "row", blocks: [text("left"), { type: "media", media: "image", src: "a.png" }] },
+ ];
+
+ it("counts every block, groups included", () => {
+ expect(countBlocks(nested)).toBe(4);
+ expect(blockDepth(nested)).toBe(2);
+ });
+
+ it("finds a file however deep it sits", () => {
+ expect(hasMedia(nested)).toBe(true);
+ expect(hasMedia([text("nothing here")])).toBe(false);
+ });
+});
+
+describe("the card in front at a moment", () => {
+ it("lets a scene take its window like any other kind", () => {
+ const cards: Card[] = [
+ { kind: "quote", start: 0, end: 3, text: "first" },
+ { kind: "scene", start: 3, end: 6, blocks: [text("second")] },
+ ];
+ expect(cardAt(cards, 1)?.kind).toBe("quote");
+ expect(cardAt(cards, 4)?.kind).toBe("scene");
+ // Half-open, so a card ending where the next begins is a cut.
+ expect(cardAt(cards, 3)?.kind).toBe("scene");
+ expect(cardAt(cards, 6)).toBeNull();
+ });
+});
+
diff --git a/remotion/src/scene.ts b/remotion/src/scene.ts
new file mode 100644
index 0000000..c82f458
--- /dev/null
+++ b/remotion/src/scene.ts
@@ -0,0 +1,240 @@
+export type Tone = "ink" | "accent" | "muted" | "context";
+
+export type Size = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+
+export type Align = "start" | "center" | "end";
+
+export type Layout = "stack" | "row" | "grid";
+
+export type Gap = "tight" | "group" | "section";
+
+export type BarRow = {
+ label: string;
+ value: number;
+ display?: string;
+ subject?: boolean;
+};
+
+export type StepPoint = { value: string; note?: string };
+
+type Common = {
+ tone?: Tone;
+ align?: Align;
+ /** Share of a row's width, when the row has more than one child. */
+ grow?: number;
+};
+
+export type Block =
+ | (Common & {
+ type: "text";
+ text: string;
+ /** Set apart in the card's accent, appended to the text. */
+ emphasis?: string;
+ size?: Size;
+ caps?: boolean;
+ })
+ | (Common & { type: "quote"; text: string; attribution?: string; size?: Size })
+ | (Common & { type: "list"; items: string[]; numbered?: boolean; size?: Size })
+ | (Common & { type: "bars"; rows: BarRow[] })
+ | (Common & { type: "meter"; value: number; display?: string })
+ | (Common & { type: "steps"; points: StepPoint[] })
+ | (Common & { type: "chip"; name: string; note?: string; src?: string })
+ | (Common & {
+ type: "media";
+ media: "image" | "video";
+ src?: string;
+ fit?: "fit" | "fill";
+ startAt?: number;
+ caption?: string;
+ /** Reference-canvas height it asks for before the fit pass runs. */
+ height?: number;
+ })
+ | (Common & { type: "rule" })
+ | (Common & { type: "group"; layout?: Layout; gap?: Gap; blocks: Block[] });
+
+export type BlockType = Block["type"];
+
+export const BLOCK_TYPES: readonly BlockType[] = [
+ "text", "quote", "list", "bars", "meter", "steps", "chip", "media", "rule", "group",
+];
+
+/** Authored against the 1080x1920 canvas every other measurement here uses. */
+export const TYPE_SIZE: Record