@docyrus/animaguru 0.6.0

package/templates/video/src/film.ts

@@ -0,0 +1,132 @@
+import { Application, Container, Graphics, Text } from "pixi.js";
+import config from "../film.config.json";
+import story from "../shared/locales/en/film.json";
+import { filmResources } from "./film-resources";
+
+export const chapters = story.chapters;
+const clamp = (value: number) => Math.max(0, Math.min(1, value));
+const ease = (value: number) => 1 - (1 - clamp(value)) ** 3;
+
+function text(value: string, size: number, color = "#16232A", weight: "400" | "700" = "700") {
+  return new Text({ text: value, style: { fontFamily: "Arial, sans-serif", fontSize: size, fontWeight: weight, fill: color, lineHeight: size * 1.06, letterSpacing: size > 60 ? -3 : 0 } });
+}
+
+/** Replace these demo scenes with the film. Keep all motion a function of seconds. */
+export class Film {
+  readonly stage = new Container();
+  readonly resources = filmResources(story, config);
+  private readonly scenes: { root: Container; art: Container; headline: Text; detail: Text }[] = [];
+  private readonly caption = text("", 30, "#FFFFFF", "400");
+  private readonly captionBack = new Graphics();
+  captions = true;
+  get cues() { return chapters.map((chapter,index)=>({id:`chapter-${index}`,time:chapter.start,label:chapter.label})); }
+  get texts() {
+    const result: { id:string; text:string; x:number; y:number; width:number; height:number }[]=[];
+    let index=0;
+    const visit=(node:Container,visible=true,alpha=1)=>{
+      const show=visible&&node.visible,opacity=alpha*node.alpha;
+      if(node instanceof Text) {
+        const id=`text-${index++}`;
+        if(show&&opacity>=.95) {const b=node.getBounds();result.push({id,text:node.text,x:b.x,y:b.y,width:b.width,height:b.height});}
+      }
+      for(const child of node.children)visit(child,show,opacity);
+    };
+    visit(this.stage);return result;
+  }
+
+  constructor(private readonly app: Application) {
+    app.stage.addChild(this.stage);
+    this.stage.scale.set(config.width / 1920, config.height / 1080);
+    this.stage.addChild(new Graphics().rect(0, 0, 1920, 1080).fill("#F4F1E9"));
+    // Deterministic paper flecks: never use Math.random() during frame rendering.
+    const grain = new Graphics();
+    for (let i = 0; i < 850; i++) grain.circle((i * 137.51) % 1920, (i * 71.73) % 1080, 1).fill({ color: "#23302D", alpha: 0.055 });
+    this.stage.addChild(grain);
+    chapters.forEach((chapter, index) => {
+      const root = new Container();
+      const art = new Container();
+      art.position.set(1440, 545);
+      art.addChild(new Graphics().circle(0, 0, 352).fill(chapter.color));
+      const orbit = new Graphics().circle(0, 0, 380).stroke({ color: "#24332D", alpha: 0.2, width: 2 });
+      orbit.rotation = -0.25;
+      art.addChild(orbit);
+      const paper = new Container();
+      paper.rotation = index === 1 ? 0.08 : -0.08;
+      paper.addChild(new Graphics().roundRect(-260, -274, 534, 572, 30).fill({ color: "#152520", alpha: 0.09 }));
+      paper.addChild(new Graphics().roundRect(-274, -290, 534, 572, 30).fill("#FFFDFA"));
+      const small = text(chapter.cardLabel, 21);
+      small.position.set(-230, -244);
+      paper.addChild(small);
+      const shape = new Graphics();
+      if (index === 0) {
+        shape.ellipse(0, 160, 152, 20).fill({ color: "#000000", alpha: 0.07 });
+        shape.roundRect(-106, -126, 210, 290, 70).fill("#2C6BD0");
+        shape.star(0, -4, 8, 104, 52).fill("#F2D68B");
+        shape.circle(0, -4, 30).fill("#FDFBF4");
+      } else if (index === 1) {
+        shape.roundRect(-168, -144, 334, 270, 24).fill("#DCE7BC");
+        shape.circle(88, -67, 36).fill("#F3D88D");
+        shape.poly([-166, 108, -55, -54, 32, 67, 95, 4, 166, 126, -166, 126]).fill("#2C6BD0");
+        shape.star(-148, -137, 4, 62, 17).fill("#263B32");
+      } else {
+        shape.circle(0, 0, 155).fill("#2C6BD0");
+        shape.poly([-34, -65, 75, 0, -34, 65]).fill("#FFFDFA");
+      }
+      paper.addChild(shape);
+      const cardCaption = text(chapter.cardCaption, 25, "#31443E", "400");
+      cardCaption.anchor.set(0.5);
+      cardCaption.position.set(-7, 216);
+      paper.addChild(cardCaption);
+      art.addChild(paper);
+      const sparkle = new Graphics().star(236, -310, 4, 67, 19).fill("#2C6BD0").star(-305, 230, 4, 34, 10).fill("#314B38");
+      art.addChild(sparkle);
+      const eyebrow = text(chapter.eyebrow, 23, "#4D6052");
+      eyebrow.position.set(120, 250);
+      const headline = text(chapter.headline, 112);
+      headline.position.set(114, 338);
+      const detail = text(chapter.detail, 32, "#59675F", "400");
+      detail.style.wordWrap = true;
+      detail.style.wordWrapWidth = 800;
+      detail.style.lineHeight = 46;
+      detail.position.set(120, 630);
+      root.addChild(art, eyebrow, headline, detail);
+      this.stage.addChild(root);
+      this.scenes.push({ root, art, headline, detail });
+    });
+    const mark = text(story.brand, 22);
+    mark.position.set(120, 88);
+    const preview = text(story.tagline, 20, "#637166");
+    preview.anchor.set(1, 0);
+    preview.position.set(1800, 88);
+    this.caption.anchor.set(0.5);
+    this.caption.position.set(960, 991);
+    this.stage.addChild(mark, preview, this.captionBack, this.caption);
+  }
+
+  /** Await video seeks/font readiness here before returning when adding media. */
+  async render(seconds: number) {
+    const time = Math.min(Math.max(seconds, 0), config.duration - 0.00001);
+    this.scenes.forEach((scene, index) => {
+      const chapter = chapters[index];
+      const local = time - chapter.start;
+      scene.root.visible = time >= chapter.start && time < chapter.end;
+      if (!scene.root.visible) return;
+      const enter = index === 0 ? 1 : 0.2 + 0.8 * ease(local / 0.85);
+      const leave = index === chapters.length - 1 ? 1 : clamp((chapter.end - time) / 0.3);
+      scene.root.alpha = enter * leave;
+      scene.headline.x = 114 - 36 * (1 - enter);
+      scene.detail.alpha = index === 0 ? 1 : ease((local - 0.25) / 0.8);
+      scene.art.scale.set(0.94 + 0.06 * enter);
+      scene.art.y = 545 + 50 * (1 - enter) + Math.sin(local * 0.85) * 10;
+      scene.art.rotation = Math.sin(local * 0.65) * 0.018;
+      this.caption.text = chapter.caption;
+    });
+    this.caption.visible = this.captions;
+    this.captionBack.visible = this.captions;
+    if (this.captions) {
+      const width = Math.min(1720, this.caption.width + 64);
+      this.captionBack.clear().roundRect(960 - width / 2, 956, width, 70, 18).fill({ color: "#172721", alpha: 0.92 });
+    }
+    this.app.render();
+  }
+}

package/templates/video/src/main.ts

@@ -0,0 +1,219 @@
+import { Application } from "pixi.js";
+import config from "../film.config.json";
+import copy from "../shared/locales/en/player.json";
+import { Film, chapters } from "./film";
+import { publicAsset } from "./assets";
+import { downloadHtml, downloadUrl } from "./download";
+import type { ResourceTimeline } from "./resource-timeline";
+import "./style.css";
+
+const root = document.querySelector<HTMLDivElement>("#app")!;
+// All variable copy is inserted as text, including agent-authored film titles.
+root.innerHTML = `<header class="masthead"><a class="brand" href="https://animaguru.com" target="_blank" rel="noreferrer"><img src="${publicAsset("brand/logo-mark.svg")}" alt=""/><strong>AnimaGuru</strong><span data-copy="studio"></span></a><span class="template" data-copy="template"></span></header>
+<main>
+<section id="theater"><div id="canvas-host"><p id="loading" role="status" data-copy="loading"></p></div><div class="transport"><button id="play" class="primary" data-copy="play"></button><span id="time">0:00 / 0:24</span><input id="timeline" type="range" min="0" value="0" step="0.01"/><div class="tools"><button id="sound" data-copy="unmute" aria-pressed="false"></button><button id="captions" aria-pressed="true">CC</button><div class="download-control"><button id="download" class="icon-button" aria-haspopup="menu" aria-expanded="false" aria-controls="download-menu"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12m-5-5 5 5 5-5M4 16v5h16v-5"/></svg></button><div id="download-menu" role="menu" hidden><button id="save" role="menuitem" tabindex="-1"><span data-copy="saveFrame"></span><small data-copy="pngFormat"></small></button><button id="export-html" role="menuitem" tabindex="-1"><span data-copy="exportHtml"></span><small data-copy="htmlFormat"></small></button></div></div><button id="fullscreen" class="icon-button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3H3v5m13-5h5v5M3 16v5h5m13-5v5h-5"/></svg></button></div></div></section>
+<p class="player-note"><span class="preview-meta"><span class="specs"></span><span aria-hidden="true">·</span><span data-copy="starter"></span></span><span data-copy="exportHint"></span></p><p id="status" role="status"></p>
+<section id="resource-timeline"></section>
+<details><summary data-copy="transcript"></summary><div id="transcript"></div></details>
+</main><footer><span data-copy="footer"></span><span data-copy="footerTagline"></span></footer>`;
+for (const element of document.querySelectorAll<HTMLElement>("[data-copy]")) element.textContent = copy[element.dataset.copy as keyof typeof copy];
+const element = <T extends HTMLElement>(id: string) => document.getElementById(id) as T;
+const playButton = element<HTMLButtonElement>("play");
+const soundButton = element<HTMLButtonElement>("sound");
+const captionsButton = element<HTMLButtonElement>("captions");
+const timeline = element<HTMLInputElement>("timeline");
+const theater = element<HTMLElement>("theater");
+const status = element<HTMLElement>("status");
+const params = new URLSearchParams(location.search);
+const embed = import.meta.env.MODE === "embed" || params.has("embed");
+const capture = params.has("capture");
+const exporting = !embed && params.has("export");
+const autoplay = embed && params.get("autoplay") === "1" && !matchMedia("(prefers-reduced-motion: reduce)").matches;
+const loop = embed && params.get("loop") === "1";
+if (capture) document.body.classList.add("capture");
+if (embed) document.body.classList.add("embed");
+if (embed && autoplay && params.get("controls") === "0") document.body.classList.add("no-controls");
+document.documentElement.lang = config.language;
+document.title = `${config.title} · AnimaGuru`;
+document.querySelector(".specs")!.textContent = `${config.width} × ${config.height} / ${config.fps} FPS`;
+timeline.max = String(config.duration);
+theater.setAttribute("aria-label", copy.videoPlayer);
+element("canvas-host").style.aspectRatio = `${config.width} / ${config.height}`;
+timeline.setAttribute("aria-label", copy.timeline);
+captionsButton.setAttribute("aria-label", copy.captions);
+for (const [id, label] of [["download", copy.download], ["fullscreen", copy.fullscreen], ["download-menu", copy.download]] as const) {
+  element(id).setAttribute("aria-label", label);
+  if (id !== "download-menu") element(id).title = label;
+}
+const format = (time: number) => `${Math.floor(time / 60)}:${String(Math.floor(time % 60)).padStart(2, "0")}`;
+
+async function start() {
+  await document.fonts.ready;
+  const app = new Application();
+  await app.init({ width: config.width, height: config.height, resolution: 1, autoStart: false, antialias: true, background: "#F4F1E9", preference: "webgl", preserveDrawingBuffer: true });
+  app.canvas.setAttribute("aria-label", config.title);
+  element("canvas-host").append(app.canvas);
+  element("loading").remove();
+  const film = new Film(app);
+  const audio = config.audio ? new Audio(publicAsset(String(config.audio))) : null;
+  if (audio) { audio.preload = "auto"; audio.muted = true; }
+  let time = Math.max(0, Math.min(Number(params.get("t")) || 0, config.duration));
+  let playing = false;
+  let muted = true;
+  let last = performance.now();
+  let renderQueue = Promise.resolve();
+  let playbackRequest = 0;
+  let resources: ResourceTimeline | undefined;
+  const update = () => {
+    playButton.textContent = playing ? copy.pause : time >= config.duration ? copy.replay : copy.play;
+    playButton.setAttribute("aria-label", playButton.textContent);
+    element("time").textContent = `${format(time)} / ${format(config.duration)}`;
+    timeline.value = String(time);
+    timeline.setAttribute("aria-valuetext", `${format(time)} / ${format(config.duration)}`);
+    soundButton.textContent = !audio ? copy.noAudio : muted ? copy.unmute : copy.mute;
+    soundButton.disabled = !audio;
+    soundButton.setAttribute("aria-pressed", String(!muted));
+    captionsButton.setAttribute("aria-pressed", String(film.captions));
+    resources?.update({ time, playing, captions: film.captions, muted });
+  };
+  const render = (seconds: number) => {
+    // Seeking and frame capture are serialized so decoded video frames cannot race.
+    renderQueue = renderQueue.then(() => film.render(seconds));
+    return renderQueue;
+  };
+  function pause() { playbackRequest++; playing = false; audio?.pause(); update(); }
+  async function seek(seconds: number) {
+    if (!Number.isFinite(seconds)) throw new Error("Seek time must be finite.");
+    time = Math.max(0, Math.min(seconds, config.duration)); pause();
+    if (audio) audio.currentTime = time;
+    await render(time); update();
+  }
+  async function play() {
+    if (exporting) return;
+    if (time >= config.duration) await seek(0);
+    const request = ++playbackRequest;
+    if (audio) {
+      audio.currentTime = time;
+      try { await audio.play(); } catch { status.textContent = copy.audioFailed; }
+    }
+    if (request !== playbackRequest) { audio?.pause(); return; }
+    last = performance.now(); playing = true; update();
+  }
+  function toggleSound() {
+    if (!audio) return;
+    muted = !muted; audio.muted = muted; update();
+  }
+  function setCaptions(value: boolean) { film.captions = value; void render(time); update(); }
+  async function fullscreen() {
+    try { if (document.fullscreenElement) await document.exitFullscreen(); else await theater.requestFullscreen(); }
+    catch { status.textContent = copy.fullscreenFailed; }
+  }
+  async function saveFrame() {
+    pause(); await render(time);
+    app.canvas.toBlob((blob) => {
+      if (!blob) return;
+      const url = URL.createObjectURL(blob);
+      downloadUrl(url, `${config.slug}-${Math.round(time * config.fps)}.png`);
+      setTimeout(() => URL.revokeObjectURL(url), 1000);
+    }, "image/png");
+  }
+  const downloadButton = element<HTMLButtonElement>("download");
+  const downloadMenu = element<HTMLElement>("download-menu");
+  const downloadItems = [...downloadMenu.querySelectorAll<HTMLButtonElement>("button")];
+  function closeDownloads(restoreFocus = false) {
+    downloadMenu.hidden = true;
+    downloadButton.setAttribute("aria-expanded", "false");
+    if (restoreFocus) downloadButton.focus();
+  }
+  function openDownloads(last = false) {
+    downloadMenu.hidden = false;
+    downloadButton.setAttribute("aria-expanded", "true");
+    downloadItems[last ? downloadItems.length - 1 : 0].focus();
+  }
+  downloadButton.addEventListener("click", () => { if (downloadMenu.hidden) openDownloads(); else closeDownloads(true); });
+  downloadButton.addEventListener("keydown", (event) => {
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") { event.preventDefault(); openDownloads(event.key === "ArrowUp"); }
+  });
+  downloadMenu.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") { event.preventDefault(); closeDownloads(true); }
+    if (event.key === "Tab") { event.preventDefault(); closeDownloads(true); }
+    const index = downloadItems.indexOf(document.activeElement as HTMLButtonElement);
+    if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
+      event.preventDefault();
+      const next = event.key === "Home" ? 0 : event.key === "End" ? downloadItems.length - 1 : (index + (event.key === "ArrowDown" ? 1 : -1) + downloadItems.length) % downloadItems.length;
+      downloadItems[next].focus();
+    }
+  });
+  document.addEventListener("click", (event) => { if (event.target instanceof Node && !element("download").parentElement!.contains(event.target)) closeDownloads(); });
+  element("export-html").addEventListener("click", async () => {
+    closeDownloads(true);
+    downloadButton.disabled = true;
+    downloadButton.setAttribute("aria-busy", "true");
+    status.textContent = copy.exportPreparing;
+    try { await downloadHtml(); status.textContent = copy.exportReady; }
+    catch (error) { status.textContent = copy.exportFailed; console.error(error); }
+    finally { downloadButton.disabled = false; downloadButton.removeAttribute("aria-busy"); }
+  });
+  for (const chapter of chapters) {
+    const paragraph = document.createElement("p"); paragraph.textContent = `${format(chapter.start)} — ${chapter.caption}`;
+    element("transcript").append(paragraph);
+  }
+  if (!embed && !capture) {
+    const { ResourceTimeline } = await import("./resource-timeline");
+    resources = new ResourceTimeline(element("resource-timeline"), {
+      duration: config.duration, fps: config.fps, tracks: film.resources, seek,
+      onError: (error) => { status.textContent = copy.failed; console.error(error); },
+    });
+  }
+  playButton.addEventListener("click", () => { if (playing) pause(); else void play(); });
+  soundButton.addEventListener("click", toggleSound);
+  captionsButton.addEventListener("click", () => setCaptions(!film.captions));
+  element("fullscreen").addEventListener("click", () => { void fullscreen(); });
+  element("save").addEventListener("click", () => { closeDownloads(true); void saveFrame(); });
+  timeline.addEventListener("input", () => { void seek(Number(timeline.value)); });
+  document.addEventListener("visibilitychange", () => { if (document.hidden && !exporting) pause(); });
+  document.addEventListener("keydown", (event) => {
+    if (exporting || event.target instanceof HTMLElement && event.target.closest("button,input,a,summary,textarea,select,[contenteditable]")) return;
+    if (event.code === "Space") { event.preventDefault(); if (playing) pause(); else void play(); }
+    if (event.code === "ArrowRight") { event.preventDefault(); void seek(time + 5); }
+    if (event.code === "ArrowLeft") { event.preventDefault(); void seek(time - 5); }
+    if (event.key.toLowerCase() === "m") toggleSound();
+    if (event.key.toLowerCase() === "c") setCaptions(!film.captions);
+    if (event.key.toLowerCase() === "f") void fullscreen();
+  });
+  async function tick(now: number) {
+    try {
+      if (playing) {
+        time = Math.min(config.duration, audio && !audio.paused ? audio.currentTime : time + (now - last) / 1000);
+        await render(time);
+        if (time >= config.duration) { if (loop) { await seek(0); await play(); } else pause(); }
+        update();
+      }
+      last = now;
+      requestAnimationFrame((next) => { void tick(next); });
+    } catch (error) { pause(); status.textContent = copy.failed; console.error(error); }
+  }
+  await render(time); update();
+  const api = {
+    ready: true, width: config.width, height: config.height, duration: config.duration, fps: config.fps, language: config.language, canvas: app.canvas,
+    get state() { return { time, playing, muted, captions: film.captions }; },
+    resources: film.resources,
+    get texts() { return film.texts; },
+    get cues() { return film.cues; },
+    seek, play, pause, setCaptions, saveFrame,
+    async renderFrame(frame: number, fps = config.fps) { await seek(frame / fps); },
+  };
+  Object.assign(window, { animaguru: api });
+  window.dispatchEvent(new Event("animaguru:ready"));
+  if (!embed && params.has("review")) {
+    const { reviewFilm } = await import("./review");
+    await reviewFilm(api, params.get("review")!);
+  } else if (exporting) {
+    const { exportMp4 } = await import("./exporter");
+    await exportMp4(api, params.get("export")!);
+  } else {
+    if (autoplay) await play();
+    requestAnimationFrame((next) => { void tick(next); });
+  }
+}
+void start().catch((error) => { status.textContent = copy.failed; element("loading")?.remove(); console.error(error); });

package/templates/video/src/resource-timeline.ts

@@ -0,0 +1,193 @@
+import copy from "../shared/locales/en/timeline.json";
+import { clipRange, createSeekQueue, frameTime, rulerTicks, timecode, type ResourceClip, type ResourceTrack } from "./timeline-model";
+
+type PlaybackState = { time: number; playing: boolean; captions: boolean; muted: boolean };
+type TimelineOptions = { duration: number; fps: number; tracks: ResourceTrack[]; seek: (seconds: number) => Promise<void>; onError: (error: unknown) => void };
+const message = (value: string, values: Record<string, string | number>) => value.replace(/\{(\w+)\}/g, (_, name: string) => String(values[name] ?? ""));
+const icon = (path: string) => `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="${path}"/></svg>`;
+const icons = {
+  graphics: "m12 3 9 9-9 9-9-9Z", image: "M3 3h18v18H3zM3 17l6-6 4 4 3-3 5 5M15 7h.01",
+  video: "M3 5h13v14H3zM16 9l5-3v12l-5-3", text: "M4 5h16M12 5v15M8 20h8",
+  captions: "M3 5h18v14H3zM10 9H7v6h3m7-6h-3v6h3", audio: "M4 9v6m4-10v14m4-16v18m4-15v12m4-9v6",
+};
+
+/** A navigable resource view. It changes the playhead, never the film's clip timing. */
+export class ResourceTimeline {
+  private readonly viewport: HTMLDivElement;
+  private readonly content: HTMLDivElement;
+  private readonly ruler: HTMLDivElement;
+  private readonly ticks: HTMLDivElement;
+  private readonly playhead: HTMLDivElement;
+  private readonly handle: HTMLDivElement;
+  private readonly clock: HTMLElement;
+  private readonly selection: HTMLElement;
+  private readonly zoomLabel: HTMLElement;
+  private readonly zoomOut: HTMLButtonElement;
+  private readonly zoomIn: HTMLButtonElement;
+  private readonly rows: { kind: ResourceTrack["kind"]; element: HTMLElement; state: HTMLElement }[] = [];
+  private readonly clips: { clip: ResourceClip; button: HTMLButtonElement }[] = [];
+  private readonly observer: ResizeObserver;
+  private readonly queue: ReturnType<typeof createSeekQueue>;
+  private zoom = 1;
+  private width = 600;
+  private labelWidth = 160;
+  private time = 0;
+  private dragging = false;
+  private selected?: HTMLButtonElement;
+  private lastFrame = -1;
+
+  constructor(private readonly host: HTMLElement, private readonly options: TimelineOptions) {
+    host.classList.add("resource-timeline");
+    host.innerHTML = `<div class="timeline-toolbar"><div><h2 class="eyebrow"></h2><span class="timeline-count"></span></div><div class="timeline-zoom"><output class="timeline-clock"></output><button class="zoom-out">${icon("M5 12h14")}</button><span class="zoom-level"></span><button class="zoom-in">${icon("M5 12h14M12 5v14")}</button><button class="zoom-fit"></button></div></div><div class="timeline-viewport"><div class="timeline-content"><div class="timeline-ruler-row"><div class="timeline-corner"></div><div class="timeline-ruler" role="slider" tabindex="0" aria-valuemin="0"><div class="timeline-ticks"></div><div class="timeline-handle"></div></div></div><div class="timeline-rows"></div><div class="resource-playhead"></div></div></div><div class="timeline-inspector" role="status"></div>`;
+    const find = <T extends HTMLElement>(selector: string) => host.querySelector<T>(selector)!;
+    find("h2").textContent = copy.title;
+    host.setAttribute("aria-label", copy.title);
+    find(".timeline-count").textContent = message(copy.trackCount, { tracks: options.tracks.length, clips: options.tracks.reduce((count, track) => count + track.clips.length, 0) });
+    find(".timeline-corner").textContent = copy.resources;
+    this.viewport = find<HTMLDivElement>(".timeline-viewport");
+    this.content = find<HTMLDivElement>(".timeline-content");
+    this.ruler = find<HTMLDivElement>(".timeline-ruler");
+    this.ticks = find<HTMLDivElement>(".timeline-ticks");
+    this.playhead = find<HTMLDivElement>(".resource-playhead");
+    this.handle = find<HTMLDivElement>(".timeline-handle");
+    this.clock = find(".timeline-clock");
+    this.clock.setAttribute("aria-live", "off");
+    this.selection = find(".timeline-inspector");
+    this.selection.textContent = copy.hint;
+    this.zoomLabel = find(".zoom-level");
+    this.zoomOut = find<HTMLButtonElement>(".zoom-out");
+    this.zoomIn = find<HTMLButtonElement>(".zoom-in");
+    this.ruler.setAttribute("aria-label", copy.playhead);
+    this.ruler.setAttribute("aria-valuemax", String(options.duration));
+    for (const [button, label] of [[this.zoomOut, copy.zoomOut], [this.zoomIn, copy.zoomIn], [find<HTMLButtonElement>(".zoom-fit"), copy.fitTitle]] as const) {
+      button.setAttribute("aria-label", label); button.title = label;
+    }
+    find(".zoom-fit").textContent = copy.fit;
+    this.zoomOut.addEventListener("click", () => this.setZoom(this.zoom / 2));
+    this.zoomIn.addEventListener("click", () => this.setZoom(this.zoom * 2));
+    find(".zoom-fit").addEventListener("click", () => this.setZoom(1));
+    this.queue = createSeekQueue(options.seek, (error) => { this.selection.textContent = copy.seekFailed; options.onError(error); });
+
+    for (const track of options.tracks) {
+      const row = document.createElement("div"); row.className = `resource-row kind-${track.kind}`;
+      const label = document.createElement("div"); label.className = "resource-label";
+      const badge = document.createElement("span"); badge.className = "resource-icon"; badge.innerHTML = icons[track.kind] ? icon(icons[track.kind]) : "";
+      const name = document.createElement("span"); name.className = "resource-name"; name.textContent = track.label; name.title = track.label;
+      const state = document.createElement("small"); state.className = "resource-state";
+      label.append(badge, name, state);
+      const lane = document.createElement("div"); lane.className = "resource-lane";
+      lane.addEventListener("click", (event) => { if (event.target === lane) this.seekAt(event.clientX, lane); });
+      for (const clip of track.clips) {
+        const range = clipRange(clip, options.duration);
+        if (!range) continue;
+        const button = document.createElement("button"); button.className = "resource-clip";
+        button.style.left = `${range.left}%`; button.style.width = `${range.width}%`;
+        const text = document.createElement("span"); text.textContent = clip.label.replace(/\s+/g, " "); button.append(text);
+        button.title = `${clip.label}\n${timecode(range.start, options.fps)} — ${timecode(range.end, options.fps)}${clip.source ? `\n${clip.source}` : ""}`;
+        button.setAttribute("aria-label", message(copy.seekTo, { label: clip.label, start: timecode(range.start, options.fps), end: timecode(range.end, options.fps) }));
+        button.addEventListener("click", (event) => {
+          this.selected?.classList.remove("selected");
+          this.selected?.setAttribute("aria-pressed", "false");
+          this.selected = button; button.classList.add("selected"); button.setAttribute("aria-pressed", "true");
+          const name = document.createElement("strong"); name.textContent = clip.label.replace(/\s+/g, " ");
+          const info = document.createElement("span"); info.textContent = message(copy.selection, { kind: copy[track.kind], start: timecode(range.start, options.fps), end: timecode(range.end, options.fps), duration: Number((range.end - range.start).toFixed(2)) });
+          this.selection.replaceChildren(name, info);
+          if (clip.source) { const source = document.createElement("span"); source.textContent = message(copy.source, { source: clip.source }); this.selection.append(source); }
+          if (event.detail === 0) this.requestSeek(range.start); else this.seekAt(event.clientX, lane);
+        });
+        lane.append(button); this.clips.push({ clip, button });
+      }
+      row.append(label, lane); find(".timeline-rows").append(row);
+      this.rows.push({ kind: track.kind, element: row, state });
+    }
+
+    this.ruler.addEventListener("pointerdown", (event) => {
+      if (event.button !== 0) return;
+      event.preventDefault(); this.ruler.focus(); this.dragging = true;
+      this.ruler.setPointerCapture(event.pointerId); this.seekAt(event.clientX, this.ruler);
+    });
+    this.ruler.addEventListener("pointermove", (event) => { if (this.dragging) this.seekAt(event.clientX, this.ruler); });
+    const finishDrag = () => { this.dragging = false; };
+    this.ruler.addEventListener("pointerup", finishDrag);
+    this.ruler.addEventListener("pointercancel", finishDrag);
+    this.ruler.addEventListener("lostpointercapture", finishDrag);
+    this.ruler.addEventListener("keydown", (event) => {
+      const step = event.shiftKey ? 1 : 1 / options.fps;
+      const target = event.key === "Home" ? 0 : event.key === "End" ? options.duration : event.key === "ArrowRight" ? this.time + step : event.key === "ArrowLeft" ? this.time - step : undefined;
+      if (target !== undefined) { event.preventDefault(); event.stopPropagation(); this.requestSeek(target); }
+    });
+    this.observer = new ResizeObserver(() => this.measure());
+    this.observer.observe(this.viewport);
+    this.measure();
+  }
+
+  private seekAt(clientX: number, lane: HTMLElement) {
+    this.requestSeek((clientX - lane.getBoundingClientRect().left) / this.width * this.options.duration);
+  }
+  private requestSeek(seconds: number) {
+    const time = frameTime(seconds, this.options.duration, this.options.fps);
+    this.time = time; this.positionPlayhead();
+    if (!this.dragging) this.followPlayhead();
+    this.queue.request(time);
+  }
+  private setZoom(zoom: number) {
+    this.zoom = Math.max(1, Math.min(8, zoom)); this.measure();
+    this.viewport.scrollLeft = Math.max(0, this.time / this.options.duration * this.width - (this.viewport.clientWidth - this.labelWidth) / 2);
+  }
+  private measure() {
+    this.labelWidth = this.viewport.clientWidth < 540 ? 126 : 160;
+    this.width = Math.max(260, this.viewport.clientWidth - this.labelWidth) * this.zoom;
+    this.host.style.setProperty("--resource-label-width", `${this.labelWidth}px`);
+    this.content.style.width = `${this.labelWidth + this.width}px`;
+    this.zoomLabel.textContent = `${Math.round(this.zoom * 100)}%`;
+    this.zoomOut.disabled = this.zoom <= 1; this.zoomIn.disabled = this.zoom >= 8;
+    this.ticks.replaceChildren();
+    const ticks = rulerTicks(this.options.duration, this.width, this.options.fps);
+    for (const tick of ticks) {
+      const marker = document.createElement("span"); marker.className = "timeline-tick";
+      if (tick === 0) marker.classList.add("first");
+      if (tick === this.options.duration) marker.classList.add("last");
+      marker.style.left = `${tick / this.options.duration * 100}%`;
+      marker.textContent = timecode(tick, this.options.fps).slice(0, tick % 1 === 0 ? 5 : 8);
+      this.ticks.append(marker);
+    }
+    const step = ticks.length > 2 ? ticks[1] : this.options.duration;
+    this.host.style.setProperty("--resource-grid-step", `${step / this.options.duration * this.width}px`);
+    this.positionPlayhead();
+  }
+  private positionPlayhead() {
+    const left = this.time / this.options.duration * this.width;
+    this.playhead.style.left = `${this.labelWidth + left}px`;
+    this.handle.style.left = `${left}px`;
+    this.clock.textContent = timecode(this.time, this.options.fps);
+    this.ruler.setAttribute("aria-valuenow", String(this.time));
+    this.ruler.setAttribute("aria-valuetext", this.clock.textContent);
+  }
+  private followPlayhead() {
+    const position = this.labelWidth + this.time / this.options.duration * this.width;
+    if (position > this.viewport.scrollLeft + this.viewport.clientWidth - 18 || position < this.viewport.scrollLeft + this.labelWidth) {
+      this.viewport.scrollLeft = Math.max(0, position - this.labelWidth - (this.viewport.clientWidth - this.labelWidth) * 0.2);
+    }
+  }
+
+  update(state: PlaybackState) {
+    const previous = this.time;
+    if (!this.dragging) this.time = frameTime(state.time, this.options.duration, this.options.fps);
+    this.positionPlayhead();
+    const frame = Math.round(this.time * this.options.fps);
+    if (frame !== this.lastFrame) {
+      const at = Math.min(this.time, this.options.duration - 1 / this.options.fps);
+      for (const { clip, button } of this.clips) button.classList.toggle("active", at >= clip.start && at < clip.end);
+      this.lastFrame = frame;
+    }
+    for (const row of this.rows) {
+      const off = row.kind === "captions" && !state.captions || row.kind === "audio" && state.muted;
+      row.element.classList.toggle("resource-off", off);
+      row.state.textContent = off ? row.kind === "audio" ? copy.muted : copy.hidden : "";
+    }
+    if (!this.dragging && this.time !== previous && (state.playing || Math.abs(this.time - previous) > 0.1)) {
+      this.followPlayhead();
+    }
+  }
+  destroy() { this.observer.disconnect(); this.queue.cancel(); this.host.replaceChildren(); }
+}

package/templates/video/src/review.ts

@@ -0,0 +1,50 @@
+type TextBounds = {
+  id: string;
+  text: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+};
+type ReviewApi = {
+  width: number;
+  height: number;
+  duration: number;
+  fps: number;
+  canvas: HTMLCanvasElement;
+  seek: (t: number) => Promise<void>;
+  texts: TextBounds[];
+  cues: unknown[];
+};
+export async function reviewFilm(api: ReviewApi, token: string) {
+  const samples: {
+    time: number;
+    texts: TextBounds[];
+  }[] = [];
+  const frames: {
+    time: number;
+    image: string;
+  }[] = [];
+  const reference = new Map<number, string>();
+  const points = [0, api.duration * .25, api.duration * .5, api.duration * .75, Math.max(0, api.duration - 1 / api.fps)];
+  for (let t = 0; t < api.duration; t += .2) {
+    await api.seek(t);
+    samples.push({ time: t, texts: api.texts.map((b) => ({ ...b })) });
+  }
+  for (const time of points) {
+    await api.seek(time);
+    const image = api.canvas.toDataURL("image/jpeg", .92);
+    reference.set(time, image);
+    frames.push({ time, image });
+  }
+  const seekMatches = [];
+  for (const time of [...points].reverse()) {
+    await api.seek(time);
+    seekMatches.push({ time, match: reference.get(time) === api.canvas.toDataURL("image/jpeg", .92) });
+  }
+  const response = await fetch("/__review/report", { method: "POST", headers: { "Content-Type": "application/json", "x-animaguru-review": token }, body: JSON.stringify({ samples, frames, seekMatches, cues: api.cues }) });
+  if (!response.ok)
+    throw new Error(await response.text());
+  console.log("AnimaGuru review", await response.json());
+  await api.seek(0);
+}

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

@@ -0,0 +1,26 @@
+import type { Application } from "pixi.js";
+import copy from "../../shared/locales/en/style-studies.json";
+import type { ResourceTrack } from "../timeline-model";
+import { StudyRenderer } from "./pixi-renderer";
+import { studyFrame, type StudyId } from "./scenes";
+import { STUDY_DURATION } from "./model";
+export function studyChapters(id: StudyId) {
+  return [{ start: 0, end: STUDY_DURATION, label: copy.styles[id].name, caption: copy.styles[id].lines[0] }];
+}
+export class StyleStudyFilm {
+  private readonly renderer: StudyRenderer;
+  captions = true;
+  readonly resources: ResourceTrack[];
+  constructor(private readonly app: Application, private readonly id: StudyId) {
+    this.renderer = new StudyRenderer(app.stage);
+    this.renderer.stage.scale.set(app.screen.width / 960, app.screen.height / 540);
+    this.resources = [
+      { id: "material", label: copy.resourceMaterial, kind: "graphics", clips: [{ id: "surface", label: copy.styles[id].name, start: 0, end: STUDY_DURATION }] },
+      { id: "artwork", label: copy.resourceArt, kind: "graphics", clips: [{ id: "scene", label: copy.styles[id].name, start: 0, end: STUDY_DURATION }] },
+      { id: "typography", label: copy.resourceText, kind: "text", clips: copy.styles[id].lines.map((label, i) => ({ id: `text-${i}`, label, start: 0, end: STUDY_DURATION })) },
+    ];
+  }
+  get texts() { return this.renderer.texts; }
+  get cues() { return studyFrame(this.id, 0).cues; }
+  async render(seconds: number) { this.renderer.render(studyFrame(this.id, seconds)); this.app.render(); }
+}