@docyrus/animaguru 0.20.0 → 0.23.0

package/templates/video/src/kit/anatomy/palette.ts

@@ -0,0 +1,41 @@
+import type { LineTone } from "./iso-kit";
+
+/** The vendored kit's ISO_CSS tokens as plain colours, for painting its paths outside a styled SVG (PixiJS, study nodes, raster previews). */
+export type AnatomyTheme = "light" | "dark";
+export type AnatomyPalette = {
+  page: string;
+  card: string;
+  text: string;
+  strong: string;
+  muted: string;
+  paper: string;
+  face: string;
+  top: string;
+  shades: readonly [string, string, string, string];
+  litTop: string;
+  litShade: string;
+  halo: string;
+  haloOpacity: number;
+  dot: string;
+  line: Record<LineTone, string>;
+};
+
+export const ANATOMY_PALETTES: Record<AnatomyTheme, AnatomyPalette> = {
+  light: {
+    page: "#f2f2ef", card: "#fbfbfa", text: "#57575a", strong: "#18181a", muted: "#8c8c90",
+    paper: "#fbfbfa", face: "#ffffff", top: "#ffffff",
+    shades: ["#dcdcd9", "#e5e5e2", "#ededea", "#f4f4f1"],
+    litTop: "#ffffff", litShade: "#eeeeeb", halo: "#8a8a80", haloOpacity: 0.32, dot: "#3a3a3e",
+    line: { hi: "#26262a", mid: "#8a8a8f", lo: "#b4b4b8", faint: "#d4d4d6", lit: "#000000", red: "#e5484d", green: "#30a46c", blue: "#3e63dd" },
+  },
+  dark: {
+    page: "#0b0b0b", card: "#131313", text: "#a3a3a3", strong: "#e6e6e6", muted: "#6e6e6e",
+    paper: "#131313", face: "#1b1b1b", top: "#1c1c1c",
+    shades: ["#0f0f0f", "#121212", "#151515", "#181818"],
+    litTop: "#262626", litShade: "#1d1d1d", halo: "#050505", haloOpacity: 0.9, dot: "#e6e6e6",
+    line: { hi: "#d4d4d4", mid: "#6a6a6a", lo: "#3e3e3e", faint: "#2a2a2a", lit: "#ffffff", red: "#ff6b6b", green: "#6be0a0", blue: "#6b9bff" },
+  },
+};
+
+/** Dot opacity per tone, as ISO_CSS draws screws and rivets. */
+export const DOT_OPACITY: Record<LineTone, number> = { hi: 0.85, mid: 0.45, lo: 0.22, faint: 0.12, lit: 0.85, red: 0.85, green: 0.85, blue: 0.85 };

package/templates/video/src/kit/anatomy/pixi.ts

@@ -0,0 +1,43 @@
+import type { Graphics } from "pixi.js";
+import type { Flat, LineTone, SolidPaths, Tone } from "./iso-kit";
+import { ANATOMY_PALETTES, DOT_OPACITY, type AnatomyTheme } from "./palette";
+
+/** Draws the vendored kit's paths with PixiJS Graphics, in the order and tones its solidSvg, lineSvg and dotsSvg use. */
+export type SolidStyle = { theme?: AnatomyTheme; tone?: Tone; crease?: Tone | "none"; lit?: boolean; flat?: boolean; width?: number };
+
+/** Trace a kit path (M, L and Z commands, as pathOf writes them) onto the active Graphics path. */
+export function tracePath(g: Graphics, d: string) {
+  const tokens = d.match(/[MLZ]|-?\d+(?:\.\d+)?/g) ?? [];
+  for (let i = 0; i < tokens.length;) {
+    const command = tokens[i++];
+    if (command === "Z") g.closePath();
+    else if (command === "M") g.moveTo(Number(tokens[i++]), Number(tokens[i++]));
+    else if (command === "L") g.lineTo(Number(tokens[i++]), Number(tokens[i++]));
+    else throw new Error(`Unsupported kit path command: ${command}`);
+  }
+  return g;
+}
+
+/** Paper fill, four side shades, top, crease and bevel, then the outline. A lit solid gets the white face and the lit edge. */
+export function drawSolid(g: Graphics, solid: SolidPaths, { theme = "light", tone = "hi", crease = "faint", lit = false, flat = false, width = 1 }: SolidStyle = {}) {
+  const c = ANATOMY_PALETTES[theme];
+  tracePath(g, solid.fill).fill(lit ? c.face : c.paper);
+  if (!flat) {
+    solid.shades.forEach((d, shade) => { if (d) tracePath(g, d).fill(lit ? c.litShade : c.shades[shade]); });
+    tracePath(g, solid.top).fill(lit ? c.litTop : c.top);
+  }
+  if (crease !== "none") for (const d of [solid.crease, solid.bevel ?? ""]) if (d) drawLine(g, d, { theme, tone: crease, width });
+  drawLine(g, solid.outline, { theme, tone: lit ? "lit" : tone, width });
+  return g;
+}
+
+export function drawLine(g: Graphics, d: string, { theme = "light", tone = "lo", width = 1, alpha = 1 }: { theme?: AnatomyTheme; tone?: LineTone; width?: number; alpha?: number } = {}) {
+  if (d) tracePath(g, d).stroke({ color: ANATOMY_PALETTES[theme].line[tone], width, alpha, cap: "round", join: "round" });
+  return g;
+}
+
+/** Screws and rivets: small round dots in the dot colour, faded by tone. */
+export function drawDots(g: Graphics, points: readonly Flat[], { theme = "light", tone = "mid", size = 0.5 }: { theme?: AnatomyTheme; tone?: LineTone; size?: number } = {}) {
+  for (const [x, y] of points) g.circle(x, y, size).fill({ color: ANATOMY_PALETTES[theme].dot, alpha: DOT_OPACITY[tone] });
+  return g;
+}

package/templates/video/src/player.ts

@@ -73,6 +73,26 @@ export async function mountPlayer({ config, Film, chapters, branding, exportEndp
   type WebkitDocument = Document & { webkitFullscreenElement?: Element | null; webkitExitFullscreen?: () => void };
   type WebkitElement = HTMLElement & { webkitRequestFullscreen?: () => void };
   const fullscreenElement = () => document.fullscreenElement ?? (document as WebkitDocument).webkitFullscreenElement ?? null;
+  // The page's player fits the window (style.css). This measures the page above it and the controls under its picture,
+  // which change as the window resizes and the transport wraps. Full screen keeps the last measures for its way back; an
+  // embed or a capture fills its frame instead.
+  if (!embed && !capture) {
+    const main = theater.parentElement!, picture = element("canvas-host");
+    let frame = 0;
+    const measure = () => {
+      frame = 0;
+      if (fullscreenElement() || theater.classList.contains("expanded")) return;
+      const box = theater.getBoundingClientRect();
+      main.style.setProperty("--player-above", `${Math.round(box.top + scrollY)}px`);
+      main.style.setProperty("--player-controls", `${Math.ceil(box.height - picture.getBoundingClientRect().height)}px`);
+    };
+    main.style.setProperty("--film-aspect", `${config.width} / ${config.height}`);
+    main.classList.add("fit-window");
+    measure();
+    // A measure waits for the next frame, so the resize it causes is not reported as a loop.
+    const observer = new ResizeObserver(() => { frame ||= requestAnimationFrame(measure); });
+    for (const target of [theater, document.querySelector(".masthead")!]) observer.observe(target);
+  }
 
   async function start() {
     await document.fonts.ready;

package/templates/video/src/studies/anatomy-plotter.ts

@@ -0,0 +1,179 @@
+import * as K from "../kit/anatomy/iso-kit";
+import { ANATOMY_PALETTES, DOT_OPACITY, type AnatomyTheme } from "../kit/anatomy/palette";
+import { clamp, lerp, spring } from "./timing";
+
+/**
+ * Machine Anatomy study figure: one dispensing head on a gantry visits a 4 × 4 tray of wells in a serpentine pass.
+ * Original geometry built with the vendored anatomy kit. The readout, the reservoir level and every moving part read
+ * the same schedule, so the numbers on screen are the machine's own. Shared by the starter study and the gallery preview.
+ */
+export type PlotterMark =
+  | { kind: "path"; d: string; fill?: string; stroke?: string; width?: number; opacity?: number; dy: number; halo?: boolean }
+  | { kind: "dot"; x: number; y: number; r: number; fill: string; opacity: number; dy: number };
+export type PlotterOptions = { width: number; height: number; theme?: AnatomyTheme; line?: number; start?: number; step?: number; intro?: boolean };
+export type PlotterFrame = { marks: PlotterMark[]; well: number; filled: number; dispensed: number; phase: "moving" | "dispensing" | "settled" };
+
+export const WELL_COUNT = 16;
+export const WELL_ML = 2;
+const PREFILLED = 5;
+const PLATE = { x: -150, y: -110, w: 300, d: 220, r: 10 };
+const TRAY = { x: -84, y: -84, w: 168, d: 168, r: 8 };
+const LABEL = { x: -114, y: 91, w: 58, d: 12, r: 1.5 };
+const RULER = { x: 137, y: -92, w: 7, d: 184, r: 1 };
+const PITCH = [-57, -19, 19, 57];
+const RAIL_X = 128, TRAY_TOP = 10, BEAM_Z = 87, BEAM_TOP = 97, RAISED = 58, PLUNGED = 15, NOZZLE_Y = 14;
+
+/** Serpentine order: along x across a row, then the gantry steps to the next row. */
+export function wellAt(index: number): [number, number] {
+  const row = Math.floor(index / 4), column = row % 2 ? 3 - (index % 4) : index % 4;
+  return [PITCH[column], PITCH[row]];
+}
+
+const inOut = (k: number) => { const x = clamp(k); return x < 0.5 ? 4 * x ** 3 : 1 - (-2 * x + 2) ** 3 / 2; };
+const projections = new Map<string, K.Projection>();
+function projectionOf(width: number, height: number) {
+  const key = `${width}x${height}`;
+  let P = projections.get(key);
+  if (!P) {
+    // Fit what is really there: the plate on its feet and the gantry's full travel, not a box as tall as the head.
+    const reach = [...K.boxCorners(PLATE, -18, 0), ...K.boxCorners({ x: -136, y: -77, w: 272, d: 141, r: 0 }, 0, 104)];
+    projections.set(key, P = K.fitProjection(reach, width, height, { pad: 6, azimuth: 52, elevation: 33 }));
+  }
+  return P;
+}
+
+/** Where the head is and how full each well is at time t, from one schedule. */
+function schedule(t: number, start: number, step: number) {
+  const fill = Array.from({ length: WELL_COUNT }, (_, i): number => (i < PREFILLED ? 1 : 0));
+  const visits = Math.min(WELL_COUNT - PREFILLED, Math.max(0, Math.floor((7.6 - start) / step)));
+  let [x, y] = wellAt(PREFILLED - 1), tip = RAISED, well = PREFILLED - 1, phase: PlotterFrame["phase"] = "settled";
+  for (let v = 0; v < visits; v++) {
+    const index = PREFILLED + v, at = start + v * step, k = (t - at) / step;
+    if (k < 0) break;
+    const from = wellAt(index - 1), to = wellAt(index), travel = inOut(k / 0.48);
+    [x, y] = [lerp(from[0], to[0], travel), lerp(from[1], to[1], travel)];
+    well = index;
+    const down = clamp((k - 0.48) / 0.14), up = clamp((k - 0.84) / 0.14);
+    tip = lerp(RAISED, PLUNGED, down * down * (3 - 2 * down) * (1 - up * up * (3 - 2 * up)));
+    fill[index] = clamp((k - 0.6) / 0.22);
+    phase = k < 0.48 ? "moving" : k < 0.84 ? "dispensing" : "settled";
+  }
+  return { x, y, tip, fill, well: well + 1, phase };
+}
+
+export function plotterFrame(t: number, { width, height, theme = "light", line = 1, start = 1.6, step = 0.72, intro = true }: PlotterOptions): PlotterFrame {
+  const P = projectionOf(width, height), c = ANATOMY_PALETTES[theme], marks: PlotterMark[] = [];
+  const s = schedule(t, start, step), gy = s.y - NOZZLE_Y, hx = s.x;
+  const dispensed = s.fill.reduce((sum, value) => sum + value, 0) * WELL_ML;
+  // Each assembly settles from above in turn; the mechanism only runs once everything has landed.
+  const lift = (at: number) => (intro ? -K.screenRise(spring(t - at, 34, 0, 9), P) : 0);
+  let dy = 0;
+  const path = (d: string, fill?: string, stroke?: string, width = line, opacity = 1) => { if (d) marks.push({ kind: "path", d, fill, stroke, width, opacity, dy }); };
+  const stroke = (d: string, tone: K.LineTone, width = line, opacity = 1) => path(d, undefined, c.line[tone], width, opacity);
+  const dots = (points: K.Point3[], tone: K.LineTone = "mid", r = 0.55) => {
+    for (const [x, y] of K.pointsAt(points, P)) marks.push({ kind: "dot", x, y, r: r * P.scale, fill: c.dot, opacity: DOT_OPACITY[tone], dy });
+  };
+  const solid = (paths: K.SolidPaths, { tone = "hi" as K.Tone, crease = "faint" as K.Tone | "none", lit = false, inner = [] as [string, K.LineTone][] } = {}) => {
+    path(paths.fill, lit ? c.face : c.paper);
+    paths.shades.forEach((d, shade) => path(d, lit ? c.litShade : c.shades[shade]));
+    path(paths.top, lit ? c.litTop : c.top);
+    if (crease !== "none") { stroke(paths.crease, crease); if (paths.bevel) stroke(paths.bevel, crease); }
+    for (const [d, tone] of inner) stroke(d, tone);
+    stroke(paths.outline, lit ? "lit" : tone, lit ? line * 1.25 : line);
+  };
+  const screw = (x: number, y: number, z: number) => { stroke(K.ring(x, y, 2.4, z, P, 16), "lo"); dots([[x, y, z]], "mid"); };
+  const byDepth = (points: [number, number][]) => [...points].sort((a, b) => K.depthOf([a[0], a[1], 0], P) - K.depthOf([b[0], b[1], 0], P));
+
+  // Base: halo, feet, plate on feet, groove, corner screws, ruler strip beside the front rail, label plate.
+  dy = lift(0);
+  marks.push({ kind: "path", d: K.haloOf(PLATE, -18, 12, P), fill: c.halo, opacity: c.haloOpacity, dy, halo: true });
+  for (const [x, y] of byDepth(K.corners(PLATE, 24))) {
+    solid(K.cylinder(x, y, 9, -18, 2, P, 28), { tone: "lo" });
+    solid(K.cylinder(x, y, 7, -16, 4, P, 28), { tone: "mid" });
+  }
+  solid(K.slabOf(PLATE, -12, 12, P, 8, 1.6), { tone: "mid", inner: [[K.sideSeam(PLATE, -5, P, 8), "faint"]] });
+  stroke(K.planOutline(K.insetPlan(PLATE, 5), 0, P), "faint");
+  for (const [x, y] of K.corners(PLATE, 10)) screw(x, y, 0);
+  solid(K.slabOf(RULER, 0, 0.6, P, 3), { tone: "lo", crease: "none" });
+  const ticks = K.topTicks(RULER.y + 4, RULER.y + RULER.d - 4, 4, 5, RULER.x + 0.6, 0.6, [2, 3.6], P, "y");
+  stroke(ticks.minor, "lo");
+  stroke(ticks.major, "mid");
+  solid(K.slabOf(LABEL, 0, 0.8, P, 4), { tone: "lo", crease: "none" });
+  stroke(K.planOutline(K.insetPlan(LABEL, 1.6), 0.8, P), "faint");
+  [[0.62, 3.4], [0.44, 6], [0.3, 8.6]].forEach(([share, y]) => stroke(K.lineOnTop([LABEL.x + 4.5, LABEL.y + y], [LABEL.x + 4.5 + (LABEL.w - 13) * share, LABEL.y + y], 0.8, P), "lo"));
+  dots([[LABEL.x + LABEL.w - 4, LABEL.y + 3.4, 0.8], [LABEL.x + LABEL.w - 4, LABEL.y + 8.6, 0.8]], "mid", 0.45);
+
+  const rail = (x: number) => {
+    dy = lift(0.18);
+    solid(K.slabOf({ x: x - 5, y: -104, w: 10, d: 208, r: 1.5 }, 0, 7, P, 3, 0.5), { tone: "mid" });
+    dots([-80, -40, 0, 40, 80].map((y) => [x, y, 7] as K.Point3), "mid", 0.45);
+    for (const y of [-104, 99]) {
+      solid(K.slabOf({ x: x - 7, y, w: 14, d: 5, r: 1.2 }, 0, 12, P, 3, 0.5), { tone: "mid" });
+      dots([[x - 3.5, y + 2.5, 12], [x + 3.5, y + 2.5, 12]], "mid", 0.45);
+    }
+  };
+  const tower = (x: number) => {
+    dy = lift(0.5);
+    const carriage = { x: x - 8, y: gy - 12, w: 16, d: 24, r: 2.5 };
+    solid(K.slabOf(carriage, 7, 6, P, 4, 0.6), { tone: "mid", inner: [[K.sideSeam(carriage, 10, P, 4), "faint"]] });
+    dots(K.corners(carriage, 3).map(([px, py]) => [px, py, 13] as K.Point3), "mid", 0.45);
+    // An index bracket hangs from the front carriage to just above the ruler and reads the gantry's travel.
+    if (x > 0) solid(K.slabOf({ x: x + 8, y: gy - 1.2, w: 1.8, d: 2.4, r: 0.3 }, 1.2, 11.8, P, 2), { tone: "hi", crease: "none" });
+    solid(K.cylinder(x, gy, 7, 13, 4, P, 28, 0.5), { tone: "lo" });
+    solid(K.cylinder(x, gy, 5, 17, BEAM_Z - 17, P, 28), { tone: "mid", crease: "none", inner: [[K.sideArc(x, gy, 5, 42, P, 16), "faint"], [K.sideArc(x, gy, 5, 66, P, 16), "faint"]] });
+  };
+
+  rail(-RAIL_X);
+  tower(-RAIL_X);
+
+  // The tray is the subject: sixteen shallow wells, each filled by the head in turn.
+  dy = lift(0.34);
+  solid(K.slabOf(TRAY, 0, TRAY_TOP, P, 8, 1), { tone: "hi", crease: "lo", inner: [[K.sideSeam(TRAY, 4, P, 8), "faint"]] });
+  for (const [x, y] of K.corners(TRAY, 7)) screw(x, y, TRAY_TOP);
+  for (let i = 0; i < WELL_COUNT; i++) {
+    const [x, y] = wellAt(i), k = s.fill[i];
+    path(K.onTop(K.circleRing(x, y, 13, 48), TRAY_TOP, P, true), c.shades[0]);
+    path(K.onTop(K.circleRing(x, y, 10.6, 40), TRAY_TOP - 2, P, true), c.shades[2]);
+    if (k > 0) path(K.onTop(K.circleRing(x, y, 10.4 * Math.sqrt(0.18 + 0.82 * k), 40), TRAY_TOP - 2 + 1.4 * k, P, true), c.line.blue, undefined, line, 0.35 + 0.55 * k);
+    stroke(K.ring(x, y, 13, TRAY_TOP, P, 48), "lo");
+    stroke(K.ring(x, y, 10.6, TRAY_TOP - 2, P, 40), "faint");
+  }
+
+  rail(RAIL_X);
+  tower(RAIL_X);
+
+  // The beam carries a guide rail and a ruler; the head runs on the guide.
+  dy = lift(0.66);
+  const beam = { x: -136, y: gy - 6, w: 272, d: 12, r: 2 };
+  solid(K.slabOf(beam, BEAM_Z, BEAM_TOP - BEAM_Z, P, 4, 0.8), { tone: "mid", inner: [[K.sideSeam(beam, BEAM_Z + 3, P, 4), "faint"]] });
+  const strip = { x: -122, y: gy + 0.8, w: 244, d: 4.6, r: 0.6 };
+  solid(K.slabOf(strip, BEAM_TOP, 0.4, P, 3), { tone: "lo", crease: "none" });
+  const scale = K.topTicks(strip.x + 2, strip.x + strip.w - 2, 6, 5, strip.y + strip.d - 0.4, BEAM_TOP + 0.4, [-1.6, -3], P, "x");
+  stroke(scale.minor, "lo");
+  stroke(scale.major, "mid");
+  for (const x of [-RAIL_X, RAIL_X]) screw(x, gy - 3, BEAM_TOP);
+  solid(K.slabOf({ x: -124, y: gy + 6, w: 248, d: 1.5, r: 0.4 }, BEAM_Z + 2, 6, P, 2), { tone: "lo" });
+
+  dy = lift(0.82);
+  const body = { x: hx - 12, y: gy + 7.5, w: 24, d: 13, r: 2 };
+  solid(K.cylinder(hx, gy + NOZZLE_Y, 2, s.tip, 68 - s.tip, P, 20), { lit: true });
+  solid(K.cylinder(hx, gy + NOZZLE_Y, 4.4, 68, 4, P, 24, 0.4), { tone: "lo" });
+  solid(K.slabOf(body, 72, 28, P, 4, 0.8), { tone: "hi", crease: "lo", inner: [[K.sideSeam(body, 77, P, 4), "faint"]] });
+  // Reservoir window on the front face: the ink drains as the wells fill.
+  const face = body.y + body.d, level = 1 - (dispensed - PREFILLED * WELL_ML) / ((WELL_COUNT - PREFILLED + 2) * WELL_ML);
+  const window = (z0: number, z1: number) => K.pathOf(K.pointsAt([[hx - 5, face, z0], [hx + 5, face, z0], [hx + 5, face, z1], [hx - 5, face, z1]], P), true);
+  path(window(80, 95), c.shades[0]);
+  path(window(80, 80 + 15 * clamp(level)), c.line.blue, undefined, line, 0.75);
+  stroke(window(80, 95), "lo");
+  dots([[hx - 8.5, face, 97.5], [hx + 8.5, face, 97.5]], "mid", 0.45);
+  solid(K.cylinder(hx, gy + NOZZLE_Y, 4.2, 100, 4, P, 28), { tone: "mid" });
+  stroke(K.knurl(hx, gy + NOZZLE_Y, 4.2, 100, 104, 28, P), "lo");
+  stroke(K.lineOnTop([hx - 2.6, gy + NOZZLE_Y], [hx + 3.4, gy + NOZZLE_Y], 104, P), "hi");
+
+  const filled = s.fill.filter((value) => value >= 1).length;
+  return { marks, well: s.well, filled, dispensed, phase: s.phase };
+}
+
+/** The live readout for the card's bottom-right corner; the pattern takes {well}, {count} and {ml}. */
+export const plotterReadout = (frame: PlotterFrame, pattern = "well {well} / {count} · {ml} ml") =>
+  pattern.replace("{well}", String(frame.well).padStart(2, "0")).replace("{count}", String(WELL_COUNT)).replace("{ml}", frame.dispensed.toFixed(1));

package/templates/video/src/studies/scenes.ts

@@ -1,6 +1,8 @@
 import copy from "../../shared/locales/en/style-studies.json";
 import { clamp, ease, hash, lerp, progress, sampled, spring, strokePoints, type Point } from "./timing";
 import { type Paint, type StudyNode, type StudyFrame, STUDY_DURATION } from "./model";
+import { plotterFrame, plotterReadout } from "./anatomy-plotter";
+import { ANATOMY_PALETTES } from "../kit/anatomy/palette";
 export const STUDY_IDS = Object.keys(copy.styles) as (keyof typeof copy.styles)[];
 export type StudyId = keyof typeof copy.styles;
 /** Original geometry and choreography; source inspirations are recorded in skill references. */
@@ -175,6 +177,25 @@ const scenes: Record<StudyId, (d: Drawing, t: number) => void> = {
     d.rect(740, 359, 148, 62, "#123b5a");
     d.text("FIG. 01", 755, 379, 18, "#dbedf0", "left", "mono");
   },
+  "machine-anatomy": (d, t) => {
+    const c = ANATOMY_PALETTES.light;
+    d.background(c.page);
+    d.rect(36, 28, 888, 470, c.card).resource = "material";
+    d.path("M36,28 L924,28 L924,498 L36,498 Z", "none", c.line.mid, 1).resource = "material";
+    const figure = plotterFrame(t, { width: 828, height: 368, start: .8, step: .82, intro: false });
+    for (const mark of figure.marks) {
+      if (mark.kind === "path" && mark.halo)
+        continue;
+      const node = mark.kind === "dot" ? d.ellipse(mark.x, mark.y, mark.r, mark.r, mark.fill, mark.opacity) : d.path(mark.d, mark.fill ?? "none", mark.stroke, mark.width, mark.opacity);
+      node.transform = { x: 66, y: 86 + mark.dy };
+    }
+    const label = (text: string, x: number, y: number, color: string, align: StudyNode["align"]) => { d.text(text, x, y, 12, color, align, "mono").weight = "400"; };
+    label("Fig 1", 60, 44, c.text, "left");
+    label(d.lines[0].replace(/\.$/, "").toUpperCase(), 900, 44, c.muted, "right");
+    label(d.lines[2].toUpperCase(), 60, 470, c.muted, "left");
+    label(plotterReadout(figure, copy.styles["machine-anatomy"].readout), 900, 470, c.text, "right");
+    label(d.lines[1], 36, 512, c.muted, "left");
+  },
   "holographic-scan": (d, t) => {
     d.background(gradient("#07262c", "#030d18"));
     d.title("#c7ece6");
@@ -396,6 +417,156 @@ const scenes: Record<StudyId, (d: Drawing, t: number) => void> = {
     }
     d.text(d.lines[2], 480, 437, 20, "#c3d9c6", "center");
   },
+  "satellite-briefing": (d, t) => {
+    d.background(gradient("#3a3f42", "#121619"));
+    d.grain("#d6dbde", .07, 320);
+    // Each dated pass leaves its shoreline; the current one is white, earlier ones stay as dimmer history.
+    const shore = (r: number): Point[] => Array.from({ length: 49 }, (_, i) => { const a = i / 48 * Math.PI * 2, k = r * (1 + .17 * Math.sin(a * 3 + 1) + .07 * Math.sin(a * 7 + 2)); return [470 + Math.cos(a) * k * 1.45, 278 + Math.sin(a) * k]; });
+    const sizes = [118, 96, 76, 58], passes = [.5, 1.8, 3, 4.1];
+    const current = passes.filter((at) => t >= at).length - 1, scan = progress(t, passes[Math.max(0, current)], .7);
+    d.poly(shore(sizes[Math.max(0, current)]), "#0c1418");
+    for (let i = 0; i <= current; i++)
+      d.line(shore(sizes[i]), i === current ? "#f2f5f6" : "#9aa4a9", i === current ? 2 : 1.2, i === current ? scan : 1);
+    if (scan < 1) d.rect(0, 100 + scan * 350, 960, 22, "#ffffff", 0, .07);
+    const grow = progress(t, 5.1, 1.2), from = 470 + sizes[0] * 1.45 * 1.05, to = 470 + sizes[3] * 1.45 * .95;
+    if (grow > 0) d.line([[from, 278], [lerp(from, to, grow), 278]], "#ffbe55", 3);
+    d.text(`${Math.round(64 * grow)} km`, 690, 168, 40, "#ffbe55").opacity = progress(t, 5.1, .3);
+    d.title("#e9eef0");
+    d.footer("#9aa6ab");
+    d.text(d.lines[2], 480, 448, 17, "#c9d1d5", "center", "mono");
+  },
+  "briefing-board": (d, t) => {
+    d.background(gradient("#f4f4f0", "#e3e4e0"));
+    d.rect(18, 18, 924, 504, "#d4d6d8", 4, .25);
+    d.title("#2b2d31");
+    d.footer("#5d6066");
+    // Graphite for rules, blue for measurement, red only for the decision.
+    const limit = 640;
+    if (t > .4) d.line([[limit, 120], [limit, 430]], "#1f5fbf", 2, progress(t, .4, .6));
+    const ranges = [330, 560, 760];
+    ranges.forEach((end, i) => {
+      const y = 170 + i * 105, at = .9 + i * 1.1;
+      d.rect(60, y - 28, 110, 56, "#fbfbf8", 3).opacity = progress(t, at, .3);
+      d.ellipse(115, y - 30, 7, 7, "#2a2c30", progress(t, at + .1, .1));
+      if (t > at + .2) d.line([[200, y], [200 + (end - 200) * progress(t, at + .2, .6), y]], "#1f5fbf", 4);
+      if (t <= at + .8) return;
+      if (end < limit) d.line([[70, y - 20], [160, y + 20]], "#d8322b", 4, progress(t, at + .8, .25));
+      else d.line(Array.from({ length: 33 }, (_, k): Point => [end + Math.cos(k / 32 * Math.PI * 2) * 34, y + Math.sin(k / 32 * Math.PI * 2) * 22]), "#d8322b", 3, progress(t, at + .8, .4));
+    });
+    const stamp = spring(t - 5, 1.6, 1, 12), n = d.rect(-120, -34, 240, 68, "#d8322b", 6, progress(t, 5, .1) * .9);
+    n.transform = { x: 790, y: 120, rotation: -.14, scaleX: stamp, scaleY: stamp };
+    const label = d.text(d.lines[2], 0, -12, 17, "#fff6f2", "center");
+    label.transform = n.transform;
+    label.opacity = n.opacity;
+  },
+  "lidar-survey": (d, t) => {
+    d.background("#05080a");
+    d.title("#e8efe9");
+    d.footer("#7f948a");
+    // Returns colour by height; a cutting plane lifts the canopy away, then the ground condenses behind a front.
+    const plane = 60 - 58 * progress(t, 1.6, 2.2), front = 120 + 760 * progress(t, 4, 1.6), colors = ["#1f3f35", "#3f7a62", "#7fb894", "#e2f3dc"];
+    for (let i = 0; i < 900; i++) {
+      const x = 90 + hash(i) * 780, base = 360 + Math.sin(x * .012) * 26, h = hash(i + 700) < .55 ? hash(i + 1400) * 70 : 0;
+      if (h > plane) continue;
+      if (x < front && h === 0) continue;
+      d.ellipse(x, base - h, 1.4, 1.4, h ? colors[Math.min(3, Math.floor(h / 18))] : "#c8b38c", Math.abs(h - plane) < 3 ? 1 : .8);
+    }
+    const ground: Point[] = Array.from({ length: 41 }, (_, i) => { const x = 90 + i * 19.5; return [x, 360 + Math.sin(x * .012) * 26]; });
+    if (t > 4) d.poly([...ground.filter(([x]) => x <= front), [Math.min(front, 870), 430], [90, 430]], gradient("#d6cfc0", "#7b7466", 0, 330, 0, 430));
+    if (t > 5.6) d.line([[220, 352], [420, 368], [610, 345]], "#ffb347", 3, progress(t, 5.6, 1));
+    d.line([[40, 140], [40, 400]], "#9fb3aa", 1);
+    d.line([[34, 400 - 4 * plane], [70, 400 - 4 * plane]], "#d4fff0", 2, t < 4 ? 1 : 0);
+    d.text(d.lines[2], 700, 168, 18, "#ffb347").opacity = progress(t, 5.6, .4);
+  },
+  "white-model-projection": (d, t) => {
+    d.background(gradient("#14171b", "#050608"));
+    d.title("#f2f2ee");
+    d.footer("#9a9fa6");
+    // House lights cut; each block switches on in its decade, then a level of light climbs every facade.
+    const house = t < 1.3 ? 1 : .18, ramp = ["#2f5bff", "#2aa7ff", "#6fe7f5", "#f2fdff"];
+    for (let i = 0; i < 12; i++) {
+      const col = i % 4, row = Math.floor(i / 4), x = 250 + col * 112 - row * 46, y = 340 + row * 46, h = 30 + hash(i) * 90, decade = Math.floor(hash(i + 20) * 4);
+      const lit = progress(t, 1.6 + decade * .55, .15) * (1 - progress(t, 4.2, .3)), level = Math.min(h, 150 * progress(t, 4.6, 1.6));
+      const white = Math.round(40 + 200 * house).toString(16).padStart(2, "0");
+      block(d, x, y - h, 70, h, 34, `#${white}${white}${white}`, "#e8e8e4", "#9a9a96");
+      d.rect(x, y - h, 70, h, ramp[decade], 0, lit * .85);
+      d.rect(x, y - level, 70, level, gradient("#ffb38a", "#6a3cff", 0, y - 150, 0, y), 0, progress(t, 4.6, .3) * (1 - progress(t, 6.6, .4)) * .9);
+    }
+    d.text(d.lines[2], 680, 168, 18, "#e5e8ec").opacity = progress(t, 1.6, .4);
+  },
+  "data-physicalization": (d, t) => {
+    d.background(gradient("#e6e0d6", "#c4beb4"));
+    d.title("#1c1d20");
+    d.footer("#6c6a66");
+    d.poly([[110, 420], [850, 420], [890, 460], [70, 460]], "#5b3a26");
+    // Plates land one by one; every tenth is brass, so each stack is its own ruler.
+    const series = [[22, 20, 18, 14, 13, 12], [5, 8, 11, 15, 19, 26]];
+    series.forEach((values, s) => values.forEach((count, year) => {
+      const x = 150 + year * 120 + s * 46;
+      for (let i = 0; i < count; i++) {
+        const at = .4 + year * .55 + s * .2 + i * .02, drop = (1 - progress(t, at, .2)) * 30;
+        if (t < at - .2) continue;
+        d.rect(x, 410 - i * 9 - drop, 40, 7, (i + 1) % 10 === 0 ? "#d2b07a" : s ? "#8fcfd2" : "#c8ccd1", 1);
+      }
+    }));
+    d.text(d.lines[2], 120, 150, 20, "#d4521c").opacity = progress(t, 4.8, .4);
+  },
+  "exploded-teardown": (d, t) => {
+    d.background(gradient("#34363a", "#0d0e10"));
+    d.title("#f1efe9");
+    d.footer("#8b8984");
+    // Layers lift on one axis, top first; labels land in a fixed column, then the product closes again.
+    const layers = [["#e9e6df", 5], ["#3d4046", 4], ["#d9dfe2", 3], ["#1b5238", 2], ["#c3c6cc", 1], ["#3d4046", 0]] as const;
+    layers.forEach(([color, index], k) => {
+      const open = progress(t, 1 + (5 - index) * .15, 1) * (1 - progress(t, 5.6 + index * .1, .4)), y = 360 - index * 12 - index * 34 * open;
+      d.poly([[260, y], [520, y - 40], [640, y], [380, y + 40]], color, "#00000055", 1);
+      if (index === 2) for (let i = 0; i < 6; i++) d.ellipse(340 + i * 38, y + 6 - i * 6, 10, 5, "#ffb340", progress(t, 2.8, .5) * open * .8);
+      const label = progress(t, 2.6 + k * .2, .3) * (1 - progress(t, 5.2, .3));
+      if (label > 0) d.line([[640, y], [700, 130 + k * 52]], "#f1efe9", 1, label);
+      d.text(`0${k + 1}`, 712, 120 + k * 52, 14, "#ff6b3d", "left", "mono").opacity = label;
+    });
+    d.text(d.lines[2], 740, 120, 18, "#f1efe9").opacity = progress(t, 2.6, .3) * (1 - progress(t, 5.2, .3));
+  },
+  "microscope-story": (d, t) => {
+    d.background(gradient("#2a3036", "#0b0d0f"));
+    d.title("#f4f1ec");
+    d.footer("#9ea6ad");
+    // One continuous dive about a fixed point: cells grow from specks to bodies with nuclei, then a circle is counted.
+    const zoom = Math.exp(Math.log(5) * progress(t, .8, 3.2)), field = { x: 120, y: 96, width: 720, height: 356 };
+    d.rect(120, 96, 720, 356, "#f4f1ec").clip = field;
+    for (let row = -16; row <= 16; row++)
+      for (let col = -30; col <= 30; col++) {
+        const i = (row + 40) * 100 + col + 50, x = 480 + (col * 24 + (hash(i) - .5) * 10) * zoom, y = 274 + (row * 24 + (hash(i + 7) - .5) * 10) * zoom, r = 10 * zoom;
+        if (x < 120 - r || x > 840 + r || y < 96 - r || y > 452 + r) continue;
+        const septum = Math.abs(Math.sin(col * .35 + row * .2)) < .22;
+        d.ellipse(x, y, r, r * .9, septum ? "#4a6cc0" : "#c44e5c", .9).clip = field;
+        if (zoom > 2 && !septum && hash(i + 3) < .75) d.ellipse(x, y, r * .36, r * .34, "#34244f").clip = field;
+      }
+    const ring = progress(t, 4.4, .6);
+    if (ring > 0) d.line(Array.from({ length: 49 }, (_, i): Point => [480 + Math.cos(i / 48 * Math.PI * 2) * 120, 274 + Math.sin(i / 48 * Math.PI * 2) * 120]), "#ffffff", 2, ring);
+    d.rect(140, 410, 120, 3, "#ffffff");
+    d.text(`${Math.round(2 + 3 * progress(t, .8, 3.2))}x`, 268, 400, 14, "#ffffff", "left", "mono");
+    d.text(d.lines[2], 480, 462, 17, "#78f0cd", "center").opacity = progress(t, 5.2, .4);
+  },
+  "archive-light-table": (d, t) => {
+    d.background(gradient("#f7f9fb", "#e3e8ec"));
+    d.title("#15171a");
+    d.footer("#6a7076");
+    // Objects lie on the light; the loupe lands on one and the negative turns positive inside its rim.
+    const power = t < .3 ? .4 : 1;
+    landscape(d, 90, 150, 240, 180, 0);
+    d.rect(90, 150, 240, 180, "#ffffff", 0, 1 - power);
+    d.rect(380, 130, 260, 200, "#1d1f22");
+    landscape(d, 395, 145, 230, 170, 2);
+    d.rect(395, 145, 230, 170, "#f0ece4", 0, .8 * (1 - progress(t, 3, 1.4)));
+    d.rect(680, 230, 190, 140, "#d9d4c8", 2);
+    for (let i = 0; i < 5; i++) d.rect(700, 255 + i * 20, 150 - (i % 2) * 40, 5, "#3a3d44", 1, i === 2 ? 1 : .55);
+    const land = spring(t - 2, 1.35, 1, 14), loupe = d.ellipse(510, 232, 70 * land, 70 * land, "#ffffff", progress(t, 1.95, .1) * .12);
+    loupe.stroke = "#111214";
+    loupe.strokeWidth = 9;
+    if (t > 4.6) d.line([[700, 306], [850, 306]], "#ff5a1f", 2, progress(t, 4.6, .5));
+    d.text(d.lines[2], 680, 410, 17, "#15171a").opacity = progress(t, 3, .5);
+  },
 };
 function ninety(t: number) { return 87 + 9 * (1 - progress(t, .2)); }
 export function studyFrame(id: StudyId, seconds: number): StudyFrame {

package/templates/video/src/style.css

@@ -15,7 +15,18 @@ button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visibl
 main { max-width: 1380px; margin: auto; padding: 45px 48px 15px; }
 .eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1.9px; margin: 0 0 12px; color: #667660; }
 .specs { font: 10px monospace; color: #6a7668; white-space: nowrap; }
-#theater { border-radius: 17px; overflow: hidden; border: 1px solid #d9ddcf; background: #f4f1e9; box-shadow: 0 16px 60px #1726240d; }
+#theater { container: theater / inline-size; border-radius: 17px; overflow: hidden; border: 1px solid #d9ddcf; background: #f4f1e9; box-shadow: 0 16px 60px #1726240d; }
+/* The page's player fits the window: its width follows the height left for the picture below the page header and above
+   the controls, so the picture and the controls show without scrolling and the timeline follows below. The player
+   measures that header and those controls (--player-above, --player-controls). The small viewport height keeps the
+   size steady while a phone's toolbars come and go. The picture keeps 240px of height where the window has it: a header
+   that leaves less scrolls away instead, as on a phone on its side. The player keeps a width its controls fit, and a
+   tall film narrower than that shows with bars at its sides, as on a phone. */
+.fit-window { --player-room: calc(100vh - var(--player-controls) - 16px); }
+@supports (height: 100svh) { .fit-window { --player-room: calc(100svh - var(--player-controls) - 16px); } }
+.fit-window { --player-fit: max(var(--player-room) - var(--player-above), min(var(--player-room), 240px)); }
+.fit-window #theater:not(.expanded):not(:fullscreen), .fit-window .player-note { min-width: min(100%, 360px); max-width: calc(var(--player-fit) * var(--film-aspect) + 2px); margin-inline: auto; }
+.fit-window #theater:not(.expanded):not(:fullscreen) #canvas-host { max-height: var(--player-fit); }
 #canvas-host { width: 100%; position: relative; aspect-ratio: 16 / 9; }
 #canvas-host canvas { display: block; width: 100%; height: 100%; object-fit: contain; }
 #loading { position: absolute; inset: 45% 0 auto; text-align: center; color: #788073; }
@@ -33,7 +44,7 @@ main { max-width: 1380px; margin: auto; padding: 45px 48px 15px; }
 #download-menu button { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 12px 10px; text-align: left; font-size: 12px; }
 #download-menu small { color: #77836f; font-size: 10px; }
 #captions[aria-pressed="true"] { background: #e7ecdc; font-weight: 700; }
-.player-note { display: flex; justify-content: space-between; gap: 15px; color: #7b8174; font-size: 10px; margin: 14px 2px 0; }
+.player-note { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 15px; color: #7b8174; font-size: 10px; margin: 14px 2px 0; }
 .preview-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
 #status { color: #9a391c; font-size: 13px; margin: 10px 0; }
 .resource-timeline { min-width: 0; margin: 32px 0; border: 1px solid #daddcf; border-radius: 12px; overflow: hidden; background: #fbf9f3; }
@@ -108,11 +119,16 @@ body:not(.capture) #canvas-host canvas { cursor: pointer; }
 @media (max-width: 750px) {
   .masthead { padding: 20px; }.brand span { display: none; }.brand strong { font-size: 20px; }.template { font-size: 9px; padding: 8px 10px; }
   main { padding: 30px 20px 10px; }
-  .transport { flex-wrap: wrap; gap: 12px; padding: 12px; }.tools { justify-content: space-between; width: 100%; }.tools button { min-height: 36px; }
   .player-note { flex-direction: column; gap: 6px; font-size: 9px; }
   .timeline-toolbar { flex-wrap: wrap; padding: 13px; }.timeline-zoom { margin-left: auto; }.timeline-clock { margin-right: 4px; }
   footer { padding: 25px 20px; }footer span:last-child { display: none; }
 }
+/* A short window, such as a phone on its side, keeps more of its height for the picture. */
+@media (max-height: 560px) { .masthead { padding-block: 12px; } main { padding-top: 16px; } }
+/* The transport wraps by the player's width, which a tall film keeps narrow on a wide screen too. */
+@container theater (max-width: 600px) {
+  .transport { flex-wrap: wrap; gap: 12px; padding: 12px; }.tools { justify-content: space-between; width: 100%; }.tools button { min-height: 36px; }
+}
 @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }
 
 #audio-status { margin: 0; padding: 9px 16px; font-size: 12px; color: #8b2f25; background: #fff1eb; }

package/templates/video/style-source-provenance.json

@@ -1,11 +1,16 @@
 {
   "lemo-opuscar": {
     "url": "https://github.com/lemomo-ai/lemo-opuscar",
-    "commit": "b65efe6ea393fdc71212898ea4c57c754cfefa46"
+    "commit": "b65efe6ea393fdc71212898ea4c57c754cfefa46",
+    "evidenceFilmsCommit": "b5e8ef93930b6d828f352055a689320f138237b1"
   },
   "awesome-opus5-5-videos": {
     "url": "https://github.com/yihui-dev/awesome-opus5-5-videos",
     "commit": "3d54892e2ae5b0e8d337171e6508bba4cec01ab8"
   },
-  "scope": "Material and motion guidance; original scene study implementations. No source demo assets or creator footage bundled."
+  "anatomy": {
+    "url": "https://github.com/wheresryan22/anatomy",
+    "commit": "1482e8469b0a9e0d8cc18ea2740a01423d29ae80"
+  },
+  "scope": "Material and motion guidance; original scene study implementations. No source demo assets, data or creator footage bundled. The Machine Anatomy kit file src/kit/anatomy/iso-kit.ts is vendored unchanged from anatomy."
 }