@docyrus/animaguru 0.6.0

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

@@ -0,0 +1,46 @@
+export type MediaCue = {
+  start: number;
+  end: number;
+  sourceStart: number;
+  sourceDuration: number;
+  rate?: number;
+  loop?: boolean;
+};
+/** Map film seconds to a source frame without using the video's independent clock. */
+export function mediaTime(cue: MediaCue, seconds: number) {
+  const rate = cue.rate ?? 1;
+  if (![cue.start, cue.end, cue.sourceStart, cue.sourceDuration, rate, seconds].every(Number.isFinite) || cue.end <= cue.start || cue.sourceStart < 0 || cue.sourceDuration <= 0 || rate <= 0)
+    throw new Error("Invalid media cue.");
+  const local = Math.max(0, Math.min(cue.end - cue.start, seconds - cue.start)) * rate;
+  const available = cue.sourceDuration - cue.sourceStart;
+  if (available <= 0)
+    throw new Error("Media trim starts outside its source.");
+  return cue.sourceStart + (cue.loop ? local % available : Math.min(local, Math.max(0, available - .000001)));
+}
+/** Await seek and decoder readiness; callers upload their Pixi video texture afterwards. */
+export async function seekVideo(video: HTMLVideoElement, seconds: number) {
+  if (!Number.isFinite(seconds) || seconds < 0)
+    throw new Error("Invalid video time.");
+  if (video.readyState < 1)
+    await new Promise<void>((resolve, reject) => {
+      const timeout = setTimeout(() => { cleanup(); reject(new Error("Video metadata timed out.")); }, 15000);
+      const cleanup = () => { clearTimeout(timeout); video.removeEventListener("loadedmetadata", done); video.removeEventListener("error", fail); };
+      const done = () => { cleanup(); resolve(); };
+      const fail = () => { cleanup(); reject(new Error("Video metadata failed.")); };
+      video.addEventListener("loadedmetadata", done, { once: true });
+      video.addEventListener("error", fail, { once: true });
+    });
+  video.pause();
+  if (Math.abs(video.currentTime - seconds) > .0001)
+    await new Promise<void>((resolve, reject) => {
+      const timeout = setTimeout(() => { cleanup(); reject(new Error("Video seek timed out.")); }, 15000);
+      const cleanup = () => { clearTimeout(timeout); video.removeEventListener("seeked", done); video.removeEventListener("error", fail); };
+      const done = () => { cleanup(); resolve(); };
+      const fail = () => { cleanup(); reject(new Error("Video seek failed.")); };
+      video.addEventListener("seeked", done, { once: true });
+      video.addEventListener("error", fail, { once: true });
+      video.currentTime = seconds;
+    });
+  if (video.readyState < 2)
+    throw new Error("The requested video frame is not decoded.");
+}

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

@@ -0,0 +1,60 @@
+export type Gradient = {
+  from: [
+    number,
+    number
+  ];
+  to: [
+    number,
+    number
+  ];
+  stops: [
+    number,
+    string
+  ][];
+};
+export type Paint = string | Gradient;
+export type Transform = {
+  x?: number;
+  y?: number;
+  rotation?: number;
+  scaleX?: number;
+  scaleY?: number;
+};
+export type StudyNode = {
+  id: string;
+  kind: "rect" | "ellipse" | "path" | "text";
+  x: number;
+  y: number;
+  width?: number;
+  height?: number;
+  radius?: number;
+  d?: string;
+  text?: string;
+  size?: number;
+  font?: "sans" | "serif" | "mono";
+  weight?: "400" | "700";
+  align?: "left" | "center" | "right";
+  fill?: Paint;
+  stroke?: string;
+  strokeWidth?: number;
+  opacity?: number;
+  transform?: Transform;
+  clip?: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
+  resource?: string;
+};
+export type StudyFrame = {
+  nodes: StudyNode[];
+  cues: {
+    id: string;
+    time: number;
+    label: string;
+  }[];
+};
+export const STUDY_WIDTH = 960;
+export const STUDY_HEIGHT = 540;
+export const STUDY_DURATION = 8;

package/templates/video/src/studies/pixi-renderer.ts

@@ -0,0 +1,121 @@
+import { Container, FillGradient, Graphics, Matrix, Text } from "pixi.js";
+import type { Gradient, Paint, StudyFrame, StudyNode } from "./model";
+type Slot = {
+  root: Container;
+  shape: Graphics;
+  text: Text;
+  mask: Graphics;
+  paintKey?: string;
+  gradient?: FillGradient;
+};
+/** Retained Pixi objects consume the same geometry used by the gallery studies. */
+export class StudyRenderer {
+  readonly stage = new Container();
+  private readonly slots: Slot[] = [];
+  private readonly matrix = new Matrix();
+  private textBounds: {
+    id: string;
+    text: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  }[] = [];
+  constructor(parent: Container) { parent.addChild(this.stage); }
+  private slot(index: number) {
+    if (!this.slots[index]) {
+      const root = new Container(), shape = new Graphics(), mask = new Graphics();
+      const text = new Text({ text: "", style: { fontFamily: "Arial", fontSize: 24, fill: "#20302d", fontWeight: "700" } });
+      root.addChild(shape, text, mask);
+      this.stage.addChild(root);
+      this.slots[index] = { root, shape, text, mask };
+    }
+    return this.slots[index];
+  }
+  private paint(slot: Slot, paint: Paint) {
+    if (typeof paint === "string")
+      return paint;
+    const key = JSON.stringify(paint);
+    if (slot.paintKey !== key) {
+      slot.gradient?.destroy();
+      slot.gradient = new FillGradient({ type: "linear", textureSpace: "global", start: { x: paint.from[0], y: paint.from[1] }, end: { x: paint.to[0], y: paint.to[1] }, colorStops: paint.stops.map(([offset, color]) => ({ offset, color })) });
+      slot.paintKey = key;
+    }
+    return slot.gradient!;
+  }
+  render(frame: StudyFrame) {
+    this.textBounds = [];
+    for (let i = 0; i < frame.nodes.length; i++) {
+      const node = frame.nodes[i], slot = this.slot(i), { root, shape, text, mask } = slot;
+      root.visible = (node.opacity ?? 1) > .0001;
+      root.alpha = node.opacity ?? 1;
+      const tr = node.transform ?? {}, r = tr.rotation ?? 0, sx = tr.scaleX ?? 1, sy = tr.scaleY ?? 1;
+      this.matrix.set(Math.cos(r) * sx, Math.sin(r) * sx, -Math.sin(r) * sy, Math.cos(r) * sy, tr.x ?? 0, tr.y ?? 0);
+      root.setFromMatrix(this.matrix);
+      root.mask = null;
+      mask.clear();
+      if (node.clip) {
+        const c = node.clip;
+        mask.rect(c.x, c.y, c.width, c.height).fill("#ffffff");
+        root.mask = mask;
+      }
+      shape.visible = node.kind !== "text";
+      text.visible = node.kind === "text";
+      if (node.kind === "text") {
+        text.text = node.text ?? "";
+        text.style.fontFamily = node.font === "mono" ? "Courier New, monospace" : node.font === "serif" ? "Georgia, serif" : "Arial, sans-serif";
+        text.style.fontSize = node.size ?? 24;
+        text.style.fontWeight = node.weight ?? "700";
+        text.style.fill = typeof node.fill === "string" ? node.fill : "#20302d";
+        text.anchor.set(node.align === "center" ? .5 : node.align === "right" ? 1 : 0, 0);
+        text.position.set(node.x, node.y);
+        if (root.visible && root.alpha >= .95) {
+          const b = text.getBounds();
+          this.textBounds.push({ id: node.id, text: text.text, x: b.x, y: b.y, width: b.width, height: b.height });
+        }
+      }
+      else {
+        shape.clear();
+        if (node.kind === "rect")
+          shape.roundRect(node.x, node.y, node.width ?? 0, node.height ?? 0, node.radius ?? 0);
+        if (node.kind === "ellipse")
+          shape.ellipse(node.x, node.y, node.width ?? 0, node.height ?? 0);
+        if (node.kind === "path")
+          drawPath(shape, node.d ?? "M0,0");
+        if (node.fill && node.fill !== "none")
+          shape.fill(this.paint(slot, node.fill));
+        if (node.stroke)
+          shape.stroke({ color: node.stroke, width: node.strokeWidth ?? 2, cap: "round", join: "round" });
+      }
+    }
+    for (let i = frame.nodes.length; i < this.slots.length; i++)
+      this.slots[i].root.visible = false;
+  }
+  get texts() { return this.textBounds; }
+  destroy() {
+    for (const slot of this.slots)
+      slot.gradient?.destroy();
+    this.stage.destroy({ children: true });
+    this.slots.length = 0;
+  }
+}
+function drawPath(g: Graphics, d: string) {
+  const tokens = d.match(/[MLCQZ]|-?\d+(?:\.\d+)?(?:e[+-]?\d+)?/gi) ?? [];
+  let i = 0;
+  const n = () => Number(tokens[i++]);
+  while (i < tokens.length) {
+    const command = tokens[i++];
+    if (command === "M")
+      g.moveTo(n(), n());
+    else if (command === "L")
+      g.lineTo(n(), n());
+    else if (command === "C")
+      g.bezierCurveTo(n(), n(), n(), n(), n(), n());
+    else if (command === "Q")
+      g.quadraticCurveTo(n(), n(), n(), n());
+    else if (command === "Z")
+      g.closePath();
+    else
+      throw new Error(`Unsupported study path command: ${command}`);
+  }
+}

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

@@ -0,0 +1,410 @@
+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";
+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. */
+class Drawing {
+  nodes: StudyNode[] = [];
+  private count = 0;
+  constructor(readonly lines: readonly string[]) { }
+  add(node: Omit<StudyNode, "id">) { const result = { ...node, id: `n${this.count++}` }; this.nodes.push(result); return result; }
+  rect(x: number, y: number, w: number, h: number, fill: Paint, radius = 0, opacity = 1) {
+    return this.add({ kind: "rect", x, y, width: Math.max(0, w), height: Math.max(0, h), radius, fill, opacity });
+  }
+  ellipse(x: number, y: number, rx: number, ry: number, fill: Paint, opacity = 1) {
+    return this.add({ kind: "ellipse", x, y, width: rx, height: ry, fill, opacity });
+  }
+  path(d: string, fill = "none", stroke?: string, strokeWidth = 2, opacity = 1) {
+    return this.add({ kind: "path", x: 0, y: 0, d, fill, stroke, strokeWidth, opacity });
+  }
+  poly(points: readonly Point[], fill: Paint, stroke?: string, width = 2) {
+    const node = this.path(`M${points.map((p) => p.join(",")).join(" L")} Z`, "none", stroke, width);
+    node.fill = fill;
+    return node;
+  }
+  line(points: readonly Point[], color: string, width = 3, amount = 1) {
+    const p = strokePoints(points, amount);
+    return this.path(p.length ? `M${p.map((point) => point.join(",")).join(" L")}` : "M0,0", "none", color, width);
+  }
+  text(value: string, x: number, y: number, size = 24, fill = "#20302d", align: StudyNode["align"] = "left", font: StudyNode["font"] = "sans") {
+    return this.add({ kind: "text", x, y, size, text: value, fill, align, font, weight: "700", resource: "typography" });
+  }
+  title(color = "#26362e") { this.text(this.lines[0], 54, 55, 30, color); }
+  footer(color = "#6b786a") { this.text(this.lines[1], 54, 482, 13, color, "left", "mono"); }
+  grain(color: string, opacity = 0.08, count = 200) {
+    for (let i = 0; i < count; i++)
+      this.ellipse(hash(i + 2) * 960, hash(i + 905) * 540, 0.7 + hash(i) * 1.4, 0.7, color, opacity);
+  }
+  background(fill: Paint) { this.rect(0, 0, 960, 540, fill).resource = "material"; }
+}
+const gradient = (a: string, b: string, x = 0, y = 0, w = 960, h = 540): Paint => ({ from: [x, y], to: [w, h], stops: [[0, a], [1, b]] });
+const ring = (d: Drawing, x: number, y: number, r: number, color: string, width = 2, amount = 1) => {
+  const p: Point[] = Array.from({ length: 81 }, (_, i) => [x + Math.cos(i / 80 * Math.PI * 2) * r, y + Math.sin(i / 80 * Math.PI * 2) * r]);
+  d.line(p, color, width, amount);
+};
+function landscape(d: Drawing, x: number, y: number, w: number, h: number, hue = 0) {
+  const colors = [["#b8d7d6", "#729e98", "#315e61"], ["#e8c49c", "#bd8265", "#76554b"], ["#c8bbd7", "#8a88b1", "#585777"]][hue % 3];
+  d.rect(x, y, w, h, colors[0]);
+  d.ellipse(x + w * .75, y + h * .24, h * .1, h * .1, "#f8ecd0");
+  d.poly([[x, y + h * .8], [x + w * .26, y + h * .3], [x + w * .65, y + h * .8], [x + w * .8, y + h * .45], [x + w, y + h * .85], [x + w, y + h], [x, y + h]], colors[1]);
+  d.poly([[x, y + h * .9], [x + w * .5, y + h * .62], [x + w, y + h * .94], [x + w, y + h], [x, y + h]], colors[2]);
+}
+function block(d: Drawing, x: number, y: number, w: number, h: number, depth: number, color: string, top = "#e6dcc8", side = "#536f63") {
+  d.poly([[x, y], [x + w, y], [x + w + depth, y - depth * .55], [x + depth, y - depth * .55]], top);
+  d.poly([[x + w, y], [x + w + depth, y - depth * .55], [x + w + depth, y + h - depth * .55], [x + w, y + h]], side);
+  d.rect(x, y, w, h, color);
+}
+const scenes: Record<StudyId, (d: Drawing, t: number) => void> = {
+  "dark-tech-stage": (d, t) => {
+    d.background(gradient("#122423", "#061110"));
+    d.title("#ecf0e5");
+    d.footer("#91b9a6");
+    for (let i = 0; i < 10; i++)
+      d.line([[70 + i * 92, 110], [70 + i * 92, 433]], "#24403a", 1);
+    for (let i = 0; i < 12; i++) {
+      const p = progress(t, .15 + i * .12, .9), settle = progress(t, 2.4, 1.5);
+      const x = lerp(480 + Math.sin(i * 2.1) * 240, 110 + (i % 4) * 190, settle), y = lerp(245 + Math.cos(i * 1.7) * 100, 125 + Math.floor(i / 4) * 94, settle);
+      d.rect(x, y + 45 * (1 - p), 164, 74, "#213e36", 9, p);
+      d.rect(x + 12, y + 14, 26, 5, "#a7d08f", 2, p);
+      d.rect(x + 12, y + 31, 115, 4, "#698b7c", 2, p);
+      d.rect(x + 12, y + 46, 70, 4, "#45665c", 2, p);
+    }
+    const focus = progress(t, 4.2);
+    d.rect(87, 112, 754, 303, "#9ed699", 12, .07 * focus);
+    d.text(d.lines[2], 480, 450, 20, "#cae4bf", "center");
+  },
+  "studio-product-reveal": (d, t) => {
+    d.background(gradient("#14232c", "#040a12"));
+    d.title("#e5ecf1");
+    d.footer("#849db2");
+    d.ellipse(480, 409, 174, 23, "#2c4d62", .5);
+    const split = progress(t, 2.4) - progress(t, 5.1, .7), rise = progress(t, 0, 1.2);
+    d.rect(397, 171 - 65 * split + 80 * (1 - rise), 166, 47, gradient("#dde9ec", "#637f94", 397, 171, 563, 218), 17);
+    d.rect(414, 207 + 25 * split, 132, 184, gradient("#7996a7", "#1c3449", 414, 207, 546, 391), 30);
+    d.rect(438, 227 + 25 * split, 84, 140, gradient("#3a657a", "#102538", 438, 227, 522, 367), 15);
+    const sweep = 405 + ((t * .24) % 1) * 130;
+    d.rect(sweep, 224 + 25 * split, 9, 134, "#d7f3ef", 4, .35);
+    d.line([[414, 345], [414, 232], [431, 214]], "#b1d0d7", 2);
+    d.text(d.lines[2], 680, 258, 19, "#b9d5df");
+    d.line([[654, 277], [578, 277], [550, 301]], "#628fa4", 1);
+  },
+  "risograph-print": (d, t) => {
+    d.background("#f5efdd");
+    d.title();
+    d.footer();
+    const p = progress(t, .3, 1.8), q = progress(t, 1.7, 1.8), shift = 8 * Math.exp(-Math.max(0, t - 4) * 5) * Math.sin(t * 9);
+    d.poly([[80, 415], [242, 168], [417, 415]], "#168c9e").opacity = p;
+    d.ellipse(560 + shift, 262, 155, 155, "#ed8159", q);
+    d.poly([[405, 415], [542, 189], [720, 415]], "#984f64").opacity = Math.min(p, q);
+    for (let y = 170; y < 395; y += 13)
+      for (let x = 99; x < 773; x += 13) {
+        if ((x - 560) ** 2 + (y - 262) ** 2 < 155 ** 2)
+          d.ellipse(x + shift, y, 1.3, 1.3, "#f5efdd", .34 * q);
+      }
+    d.grain("#5d5146", .07, 160);
+    d.text(d.lines[2], 795, 291, 16, "#514451", "center");
+  },
+  "halftone-editorial": (d, t) => {
+    d.background("#f0e5c7");
+    d.title();
+    d.footer();
+    d.rect(48, 107, 865, 340, "#273637");
+    d.rect(65, 122, 548, 306, "#ebcc80");
+    const p = progress(t, .2, 1);
+    for (let y = 150; y < 402; y += 15)
+      for (let x = 82; x < 594; x += 15)
+        d.ellipse(x, y, Math.max(.5, 3.4 * (x - 82) / 512), Math.max(.5, 3.4 * (x - 82) / 512), "#493b37", .55);
+    d.text("01", ninety(t), 170 + 75 * (1 - p), 124, "#273637");
+    d.text(d.lines[2], 87, 345, 22, "#273637");
+    const stamp = spring(t - 3, 1.8, 1, 11);
+    const n = d.rect(-104, -43, 208, 86, "#da6553", 3, progress(t, 3, .15));
+    n.transform = { x: 748, y: 285, rotation: -.12, scaleX: stamp, scaleY: stamp };
+    const label = d.text("PRINT", 0, -17, 30, "#f8eed3", "center");
+    label.transform = n.transform;
+    label.opacity = n.opacity;
+  },
+  "silkscreen-poster": (d, t) => {
+    d.background("#f6e8c9");
+    d.title();
+    d.footer();
+    d.rect(258, 100, 446, 340, "#e8d9b8");
+    d.rect(275, 115, 410, 310, "#edb954").clip = { x: 275, y: 115, width: 410, height: 310 * clamp((t - .3) / 1.4) };
+    const mountain = d.poly([[277, 415], [407, 176], [479, 293], [531, 235], [683, 415]], "#3d7770");
+    mountain.clip = { x: 275, y: 115, width: 410 * clamp((t - 1.9) / 1.5), height: 310 };
+    const dark = d.poly([[276, 415], [407, 176], [429, 334], [500, 416]], "#254d4c");
+    dark.clip = mountain.clip;
+    d.ellipse(581, 164, 29, 29, "#e68149", progress(t, 3.5, .3));
+    d.text(d.lines[2], 480, 383, 19, "#f4e5c3", "center").opacity = progress(t, 4.3);
+    const pull = 115 + 310 * clamp((t - .3) / 1.4);
+    d.rect(266, pull - 4, 429, 8, "#273e37", 2, 1 - progress(t, 1.7, .2));
+    d.grain("#614d35", .065, 180);
+  },
+  "art-deco-motion": (d, t) => {
+    d.background("#17241d");
+    d.title("#edd3a0");
+    d.footer("#b89b6b");
+    const open = progress(t, .4, 1.8);
+    const gold = "#d9b96e";
+    for (let i = 0; i < 17; i++) {
+      const a = Math.PI + i / 16 * Math.PI;
+      d.line([[480, 410], [480 + Math.cos(a) * 340 * open, 410 + Math.sin(a) * 290 * open]], gold, 2);
+    }
+    for (let i = 0; i < 5; i++)
+      d.rect(325 + i * 21, 156 + i * 21, 310 - i * 42, 247 - i * 21, "#1e3127", 0, progress(t, 1 + i * .12));
+    for (let i = 0; i < 5; i++)
+      d.line([[325 + i * 21, 403], [325 + i * 21, 156 + i * 21], [635 - i * 21, 156 + i * 21], [635 - i * 21, 403]], gold, 2);
+    d.ellipse(480, 300, 54, 54, gradient("#695a34", "#e8d492", 426, 245, 534, 355));
+    d.line([[480, 300], [480 + Math.sin(t * .6) * 35, 300 - Math.cos(t * .6) * 35]], "#25372b", 3);
+    d.text(d.lines[2], 480, 427, 20, "#ebd5a6", "center", "serif");
+  },
+  "blueprint-drafting": (d, t) => {
+    d.background("#17476b");
+    d.title("#e9eadd");
+    d.footer("#a5c3d2");
+    for (let i = 0; i < 23; i++)
+      d.line([[40 + i * 40, 97], [40 + i * 40, 454]], "#275678", 1);
+    for (let i = 0; i < 9; i++)
+      d.line([[40, 97 + i * 40], [920, 97 + i * 40]], "#275678", 1);
+    const parts = [[[262, 349], [262, 226], [376, 184], [579, 184], [676, 229], [676, 349], [262, 349]], [[306, 307], [306, 246], [599, 246], [599, 307], [306, 307]], [[340, 377], [340, 349]], [[601, 377], [601, 349]]] as Point[][];
+    parts.forEach((p, i) => d.line(p, "#d3e8e9", i === 0 ? 3 : 2, progress(t, .2 + i * .6, 1.1)));
+    const offset = 56 * (progress(t, 3.3) - progress(t, 5.8));
+    d.line([[304, 222 - offset], [599, 222 - offset]], "#b4d7e2", 4, progress(t, 2));
+    d.line([[696, 184], [712, 184], [712, 349], [696, 349]], "#8eb7c9", 1, progress(t, 2.6));
+    d.text(d.lines[2], 726, 253, 14, "#c6dfeb", "left", "mono").opacity = progress(t, 2.6);
+    d.rect(740, 359, 148, 62, "#123b5a");
+    d.text("FIG. 01", 755, 379, 18, "#dbedf0", "left", "mono");
+  },
+  "holographic-scan": (d, t) => {
+    d.background(gradient("#07262c", "#030d18"));
+    d.title("#c7ece6");
+    d.footer("#73b9b5");
+    const color = "#6be3dc", scan = 400 - 300 * clamp(t / 2.7);
+    d.ellipse(480, 417, 230, 17, "#173c44");
+    for (let i = 0; i < 7; i++)
+      d.line([[283 + i * 56, 417], [480, 389]], "#31696b", 1);
+    const yaw = .2 * Math.sin(t * .65), explode = progress(t, 3.6) - progress(t, 6.2);
+    const project = (x: number, y: number, z: number): Point => [480 + x * Math.cos(yaw) + z * Math.sin(yaw), 286 + y + z * .32];
+    for (let part = 0; part < 3; part++) {
+      const cx = (part - 1) * 99 * (1 + explode * .6), w = part === 1 ? 125 : 75, h = part === 1 ? 146 : 104;
+      const v = [project(cx - w / 2, -h / 2, -30), project(cx + w / 2, -h / 2, -30), project(cx + w / 2, h / 2, -30), project(cx - w / 2, h / 2, -30), project(cx - w / 2, -h / 2, 30), project(cx + w / 2, -h / 2, 30), project(cx + w / 2, h / 2, 30), project(cx - w / 2, h / 2, 30)];
+      for (const [a, b] of [[0, 1], [1, 2], [2, 3], [3, 0], [4, 5], [5, 6], [6, 7], [7, 4], [0, 4], [1, 5], [2, 6], [3, 7]])
+        d.line([v[a], v[b]], color, 2, clamp((Math.max(v[a][1], v[b][1]) - scan) / 20));
+    }
+    d.line([[244, scan], [717, scan]], "#b5ffff", 2, 1 - progress(t, 2.8, .2));
+    d.line([[600, 249], [694, 181], [811, 181]], color, 1, progress(t, 3));
+    d.text(d.lines[2], 704, 150, 16, "#b5ece7").opacity = progress(t, 3);
+  },
+  "paper-popup": (d, t) => {
+    d.background("#e7dfcd");
+    d.title();
+    d.footer();
+    d.poly([[177, 363], [488, 433], [805, 358], [488, 272]], "#c9bfa8");
+    d.poly([[180, 346], [488, 413], [796, 343], [488, 267]], "#f5edda", "#b7ac95", 2);
+    const fold = progress(t, .3, 1.6), angle = lerp(.05, 1, fold);
+    for (let i = 0; i < 5; i++) {
+      const p = progress(t, .6 + i * .22), x = 295 + i * 92, y = 350 - i * 7;
+      d.ellipse(x, y + 4, 44, 10, "#aea590", .2 * p);
+      const n = d.poly([[-31, 0], [-31, -80 * angle * p], [0, -111 * angle * p], [31, -80 * angle * p], [31, 0]], i % 2 ? "#dba763" : "#749987", "#fbf5e5", 5);
+      n.transform = { x, y, rotation: .08 * Math.sin(t * .8 + i) };
+      d.line([[x - 24, y], [x + 24, y]], "#c9bca0", 2);
+    }
+    d.text(d.lines[2], 480, 447, 20, "#5b6652", "center");
+    d.grain("#70644e", .06, 130);
+  },
+  "shadow-theatre": (d, t) => {
+    d.background(gradient("#e8c488", "#c08e62"));
+    d.title("#503f33");
+    d.footer("#665145");
+    d.rect(70, 104, 820, 336, "#ecce99", 8);
+    d.rect(88, 121, 784, 303, "#f5ddb1");
+    d.grain("#a0794d", .08, 180);
+    d.poly([[92, 425], [242, 370], [365, 389], [551, 333], [716, 382], [872, 416]], "#7c6448");
+    const x = 365 + Math.sin(t * .5) * 27, y = 301;
+    d.ellipse(x, y - 61, 28, 28, "#45382f");
+    d.poly([[x - 20, y - 37], [x + 20, y - 37], [x + 31, y + 44], [x - 32, y + 44]], "#45382f");
+    const hand: Point = [x + 70, y - 35 + Math.sin(t * 1.1) * 23];
+    d.line([[x + 14, y - 30], [x + 43, y - 13], hand], "#45382f", 13);
+    d.line([[x - 14, y + 43], [x - 31, y + 94]], "#45382f", 12);
+    d.line([[x + 14, y + 43], [x + 34, y + 94]], "#45382f", 12);
+    d.poly([[587, 404], [576, 252], [587, 150], [600, 253], [611, 404]], "#4e4333");
+    for (let i = 0; i < 5; i++)
+      d.ellipse(590 + Math.sin(i * 2.1) * 53, 220 + i * 15, 66, 35, "#5e4e37");
+    for (let i = 0; i < 16; i++)
+      d.ellipse(640 + hash(i) * 128, 220 + hash(i + 30) * 113, 3, 3, "#f7e4b7");
+    d.text(d.lines[2], 660, 388, 17, "#f8e8c9", "center");
+  },
+  "engraved-relief-print": (d, t) => {
+    d.background("#efe4c8");
+    d.title();
+    d.footer();
+    d.rect(205, 104, 550, 336, "#e1d5b7");
+    d.rect(214, 114, 531, 315, "#f7efd9");
+    const outer: Point[] = Array.from({ length: 101 }, (_, i) => { const a = i / 100 * Math.PI * 2; return [480 + Math.cos(a) * 155 * (1 + .06 * Math.sin(a * 6)), 272 + Math.sin(a) * 118]; });
+    d.line(outer, "#493f36", 2.5, progress(t, .2, 2));
+    for (let i = 0; i < 57; i++) {
+      const y = 170 + i * 3.6, q = (y - 272) / 117, x = Math.sqrt(Math.max(0, 1 - q * q)) * 153;
+      const p = progress(t, 1.5 + i * .045, .9);
+      d.line([[480 - x, y], [480 + x * .65, y + Math.sin(i * .2) * 9]], "#685346", .8, p);
+    }
+    for (let i = 0; i < 23; i++)
+      d.line([[378 + i * 8, 197], [395 + i * 7, 357]], "#765d49", .7, progress(t, 4 + i * .03));
+    d.text(d.lines[2], 480, 396, 18, "#4e4436", "center", "serif");
+    d.grain("#6b5943", .075, 170);
+  },
+  "ascii-crt": (d, t) => {
+    d.background("#111c16");
+    d.title("#d5c482");
+    d.footer("#a79457");
+    const glyphs = " .:-=+*#@", on = progress(t, .1, .7);
+    for (let row = 0; row < 22; row++)
+      for (let col = 0; col < 60; col++) {
+        const x = 180 + col * 10, y = 135 + row * 12, r = Math.hypot((x - 480) / 1.3, y - 262);
+        const density = clamp((1 - Math.abs(r - (82 + 18 * Math.sin(t * .8))) / 33) * on);
+        d.text(glyphs[Math.floor(density * (glyphs.length - 1))], x, y, 13, "#dcb46b", "left", "mono").opacity = .2 + .8 * density;
+      }
+    const text = d.lines[2].slice(0, Math.floor(Math.max(0, t - 1) * 14));
+    d.text(text, 480, 428, 20, "#e5c580", "center", "mono");
+    for (let y = 108; y < 443; y += 5)
+      d.rect(114, y, 731, 1, "#030803", 0, .18);
+    d.rect(118, 105, 725, 337, "#d8bb62", 20, .025);
+  },
+  "analog-film-tape": (d, t) => {
+    d.background("#302c28");
+    d.title("#e2d7c0");
+    d.footer("#c5b99f");
+    const st = sampled(t, 12), jitter = hash(Math.floor(t * 24)) * 2 - 1;
+    d.rect(158 + jitter, 103, 641, 338, "#c6baa0");
+    d.poly([[160, 413], [275, 265], [397, 345], [564, 182], [797, 414]], "#716c60");
+    d.ellipse(611, 166, 35, 35, "#e7dbc0");
+    d.rect(320 + Math.sin(st * .9) * 65, 245, 68, 122, "#3f443c", 8);
+    d.ellipse(354 + Math.sin(st * .9) * 65, 234, 25, 25, "#3f443c");
+    for (let i = 0; i < 70; i++)
+      d.ellipse(160 + hash(i + Math.floor(t * 24)) * 638, 103 + hash(i + 200) * 334, 1.1, .6, "#efeadb", .12);
+    for (let i = 0; i < 3; i++)
+      d.line([[227 + i * 201 + hash(Math.floor(t * 8)) * 8, 105], [229 + i * 201, 437]], "#e2d6bb", .8);
+    d.rect(165, 413, 626, 28, "#1e211d", 0, .83);
+    d.text(d.lines[2], 480, 417, 14, "#ece0c7", "center", "serif");
+  },
+  "glass-mosaic": (d, t) => {
+    d.background("#172c31");
+    d.title("#dce4d3");
+    d.footer("#b8c9bc");
+    const colors = ["#2d888b", "#7da883", "#ddb165", "#d27856", "#54758c"];
+    for (let row = 0; row < 5; row++)
+      for (let col = 0; col < 9; col++) {
+        const i = row * 9 + col, p = progress(t, hash(i) * 1.8, 1.1), x = 202 + col * 62, y = 118 + row * 60;
+        const n = d.poly([[0, 0], [57, 0], [57, 55], [0, 55]], colors[(row + col) % 5], "#10262b", 3);
+        n.transform = { x: x + ((col - 4) * 28) * (1 - p), y: y + ((row - 2) * 45) * (1 - p), rotation: (hash(i + 42) - .5) * (1 - p) };
+        n.opacity = p;
+        const light = .09 + .19 * Math.max(0, 1 - Math.abs(x - (170 + t * 81)) / 160);
+        d.rect(x + 6, y + 5, 42, 44, "#ffe8a0", 1, light * p);
+      }
+    d.text(d.lines[2], 480, 443, 18, "#c9dacb", "center");
+  },
+  "portal-zoom": (d, t) => {
+    d.background("#e3dfca");
+    d.title();
+    d.footer();
+    const segment = Math.floor(t / 4), u = (t / 4) % 1, scale = Math.exp(u * Math.log(830 / 200)), w = 200 * scale, h = w * 340 / 830;
+    landscape(d, 65, 106, 830, 340, segment);
+    const clip = { x: 65, y: 106, width: 830, height: 340 };
+    d.rect(480 - w / 2 - 12, 275 - h / 2 - 12, w + 24, h + 24, "#efe4c9", 14).clip = clip;
+    const before = d.nodes.length;
+    landscape(d, 480 - w / 2, 276 - h / 2, w, h, 1 + segment);
+    d.nodes.slice(before).forEach((n) => n.clip = clip);
+    const iw = w * 200 / 830, ih = h * 200 / 830;
+    d.rect(480 - iw / 2 - 7, 276 - ih / 2 - 7, iw + 14, ih + 14, "#eae5d4", 8).clip = clip;
+    const begin = d.nodes.length;
+    landscape(d, 480 - iw / 2, 276 - ih / 2, iw, ih, 2 + segment);
+    d.nodes.slice(begin).forEach((n) => n.clip = clip);
+    d.text(d.lines[2], 480, 451, 17, "#526351", "center");
+  },
+  "photo-footage-editorial": (d, t) => {
+    d.background("#eee9dc");
+    d.title();
+    d.footer();
+    const shift = progress(t, 2, 1.4) * 220;
+    for (let i = 0; i < 5; i++) {
+      const x = 57 + i * 204 - shift, y = 145 + Math.sin(i) * 9;
+      const clip = { x: 57, y: 112, width: 848, height: 328 };
+      d.rect(x - 7, y - 7, 188, 252, "#fcf8ee", 3).clip = clip;
+      const start = d.nodes.length;
+      landscape(d, x, y, 174, 193, i);
+      d.nodes.slice(start).forEach((n) => n.clip = clip);
+      d.rect(x + 12, y + 211, 97, 4, "#98a698", 2).clip = clip;
+      d.rect(x + 12, y + 223, 134, 3, "#c1c7b6", 2).clip = clip;
+    }
+    d.text(d.lines[2], 480, 434, 19, "#59675a", "center");
+  },
+  "stop-motion-objects": (d, t) => {
+    d.background("#ebe4d5");
+    d.title();
+    d.footer();
+    d.ellipse(480, 418, 259, 24, "#9c927a", .2);
+    const st = sampled(t, 10), colors = ["#cc875c", "#80997a", "#517877", "#dab47b"];
+    for (let i = 0; i < 7; i++) {
+      const p = progress(st, .3 + i * .4, .7), x = 338 + (i % 3) * 92, y = 365 - Math.floor(i / 3) * 61;
+      block(d, x, y - 95 * (1 - p), 82, 56, 17, colors[i % 4], "#e9cfa5", "#547264");
+      for (let j = 0; j < 3; j++)
+        d.ellipse(x + 18 + j * 22, y - 8 - 95 * (1 - p), 8, 4, "#ead2aa");
+    }
+    d.text(d.lines[2], 480, 453, 18, "#607059", "center");
+  },
+  "miniature-diorama": (d, t) => {
+    d.background(gradient("#bad5d0", "#e8e6d3"));
+    d.title();
+    d.footer();
+    d.ellipse(480, 417, 233, 28, "#668e88", .24);
+    d.poly([[218, 346], [480, 238], [747, 344], [480, 447]], "#83aaa0");
+    d.poly([[218, 346], [480, 447], [480, 466], [218, 365]], "#5d837b");
+    d.poly([[480, 447], [747, 344], [747, 363], [480, 466]], "#47796f");
+    for (let i = 0; i < 6; i++) {
+      const p = progress(t, .2 + i * .28), x = 330 + (i % 3) * 91, y = 314 + Math.floor(i / 3) * 68;
+      block(d, x, y - 60 * p, 59, 60 * p, 28, ["#d2b882", "#d19778", "#dfcba2"][i % 3], "#eee1c0", "#887a62");
+      if (p > .1)
+        d.rect(x + 23, y - 37 * p, 13, 23 * p, "#587c76", 2);
+    }
+    d.text(d.lines[2], 480, 483, 16, "#5b7367", "center");
+  },
+  "sand-drawing": (d, t) => {
+    d.background(gradient("#c4a36d", "#e1c38b"));
+    d.title("#654f30");
+    d.footer("#795e38");
+    const p = clamp(t / 3), sweep = progress(t, 4.4, 1.8);
+    for (let i = 0; i < 1400; i++) {
+      const x = 150 + hash(i) * 660, y = 124 + hash(i + 3100) * 303;
+      const silhouette = ((x - 480) / 176) ** 2 + ((y - 278) / 111) ** 2;
+      const aperture = ((x - 480) / 89) ** 2 + ((y - 278) / 57) ** 2;
+      const cut = silhouette < 1 && aperture > 1 && (x - 300) / 360 < p;
+      const swept = x < 150 + 660 * sweep && y > 275 + Math.sin(x * .014) * 58;
+      d.ellipse(x, y, .7 + hash(i + 22) * 1.7, .6 + hash(i + 44), cut && !swept ? "#5c4326" : "#af8a51", cut && !swept ? .94 : .27);
+    }
+    d.text(d.lines[2], 480, 443, 19, "#6f5734", "center");
+  },
+  "generative-light-signal": (d, t) => {
+    d.background("#101b25");
+    d.title("#d7e8db");
+    d.footer("#98b9b0");
+    for (let j = 0; j < 7; j++) {
+      const points: Point[] = Array.from({ length: 121 }, (_, i) => { const x = 76 + i / 120 * 808; return [x, 275 + Math.sin(i * .12 - t * 1.1 + j * .24) * (35 + j * 9) + Math.sin(i * .052 + t * .6) * 20]; });
+      d.line(points, ["#729997", "#84b8ac", "#bddcae"][j % 3], 1.3 + j * .16, progress(t, .15 + j * .08, 1.5));
+    }
+    for (let i = 0; i < 25; i++) {
+      const u = (hash(i) + t * .045) % 1, x = 76 + u * 808, y = 275 + Math.sin(u * 14 - t * 1.1) * 90;
+      d.ellipse(x, y, 3.1, 3.1, "#c9e7b6", .8);
+    }
+    d.text(d.lines[2], 480, 437, 20, "#c3d9c6", "center");
+  },
+};
+function ninety(t: number) { return 87 + 9 * (1 - progress(t, .2)); }
+export function studyFrame(id: StudyId, seconds: number): StudyFrame {
+  if (!(id in scenes))
+    throw new Error(`Unknown study: ${id}`);
+  const d = new Drawing(copy.styles[id].lines);
+  const t = clamp(Number.isFinite(seconds) ? seconds : 0, 0, STUDY_DURATION - 0.000001);
+  scenes[id](d, t);
+  for (const node of d.nodes)
+    node.resource ??= "artwork";
+  return { nodes: d.nodes, cues: [{ id: "reveal", time: .3, label: d.lines[0] }, { id: "detail", time: 3, label: d.lines[2] }, { id: "hold", time: 6, label: d.lines[1] }] };
+}