@docyrus/animaguru 0.24.0 → 0.26.0

package/templates/video/shared/locales/en/style-studies.json

@@ -300,6 +300,62 @@
         "Procedural graphics",
         "Rundown · tick · flip"
       ]
+    },
+    "aurora-glass": {
+      "name": "Aurora & Glass",
+      "lines": [
+        "Light, held in glass.",
+        "Original aurora and glass study · invented product",
+        "Halcyon"
+      ]
+    },
+    "liquid-motion": {
+      "name": "Liquid Motion",
+      "lines": [
+        "One drop becomes the mark.",
+        "Original liquid study",
+        "Pour · neck · snap · drip"
+      ]
+    },
+    "bauhaus-geometry": {
+      "name": "Bauhaus Geometry",
+      "lines": [
+        "Every move lands on the grid.",
+        "Original geometric study",
+        "Kreis · Dreieck · Quadrat"
+      ]
+    },
+    "synthwave-y2k": {
+      "name": "Synthwave & Y2K",
+      "lines": [
+        "Rewind to the future.",
+        "Original scene / tape variant",
+        "LASER COAST"
+      ]
+    },
+    "sticker-explainer": {
+      "name": "Sticker Explainer",
+      "lines": [
+        "One board, one camera, one fact per line.",
+        "Procedural stickers · illustrative figures",
+        "Every line brings a new sticker or chart"
+      ]
+    },
+    "variety-captions": {
+      "name": "Variety Captions",
+      "lines": [
+        "Every gag gets its caption.",
+        "Illustrative footage",
+        "...what mug?"
+      ]
+    },
+    "one-line-art": {
+      "name": "One-Line Art",
+      "lines": [
+        "One line, never lifted.",
+        "Invented brand",
+        "Sun · arches · profile · ring"
+      ]
     }
   }
 }

package/templates/video/src/exporter.ts

@@ -24,11 +24,13 @@ export async function exportMp4(api: CaptureApi, token: string) {
   status.style.cssText = "position:fixed;z-index:100;left:24px;bottom:24px;padding:16px 22px;border-radius:12px;background:#162224ed;color:white;font:15px Arial,sans-serif;box-shadow:0 8px 30px #0002;max-width:calc(100vw - 48px)";
   status.textContent = copy.preparing;
   document.body.append(status);
+  // With --watermark, finishing also encodes the watermarked copy, which takes longer.
+  let finishTimeout = 180000;
   const request = async (route: string, body?: BodyInit, type = "application/json") => {
     const attempts = route.startsWith("frame?") ? 3 : 1;
     for (let attempt = 0; attempt < attempts; attempt++) {
       try {
-        const response = await fetch(`/__export/${route}`, { method: "POST", headers: { "Content-Type": type, "X-AnimaGuru-Export": token }, body, signal: AbortSignal.timeout(route === "finish" ? 180000 : 45000) });
+        const response = await fetch(`/__export/${route}`, { method: "POST", headers: { "Content-Type": type, "X-AnimaGuru-Export": token }, body, signal: AbortSignal.timeout(route === "finish" ? finishTimeout : 45000) });
         if (!response.ok) throw new Error(await response.text());
         return await response.json();
       } catch (error) {
@@ -46,6 +48,14 @@ export async function exportMp4(api: CaptureApi, token: string) {
     const settings = await request("start", JSON.stringify({ width: api.width, height: api.height, duration: api.duration, fps: api.fps, language, subtitles }));
     // The export command decides: captions drawn into the picture, or saved as .srt/.vtt files beside a clean MP4.
     api.setCaptions(settings.burnCaptions === true);
+    if (settings.watermark) {
+      // --watermark: the badge is drawn here once, before any frame, and the export command lays it over a copy.
+      status.textContent = copy.watermark;
+      const { watermarkBadge } = await import("./watermark");
+      const badge = await watermarkBadge(api.width, api.height, settings.watermark);
+      await request(`watermark?x=${badge.x}&y=${badge.y}`, badge.image, "image/png");
+      finishTimeout = 15 * 60000;
+    }
     state.total = settings.frames;
     state.status = "rendering";
     for (let frame = 0; frame < settings.frames; frame++) {

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

@@ -775,6 +775,397 @@ const scenes: Record<StudyId, (d: Drawing, t: number) => void> = {
     d.footer("#8b9097");
     d.text(d.lines[2], 480, 40, 18, "#f2cf1d", "center").opacity = progress(t, 7, .4);
   },
+  "aurora-glass": (d, t) => {
+    d.background(gradient("#07061a", "#0c0a28", 0, 0, 0, 540));
+    // Aurora: stacked translucent ellipses stand in for blurred colour fields; each drifts on its own slow loop.
+    const fields: [string, number, number, number, number][] = [["#7b4dff", 230, 170, 230, .3], ["#3c5bff", 560, 330, 260, 1.9], ["#2aa7ff", 790, 160, 200, 3.1], ["#1fd3c0", 380, 470, 230, 4.4]];
+    for (const [color, x, y, r, phase] of fields) {
+      const cx = x + Math.sin(t * .2 + phase) * 60, cy = y + Math.cos(t * .16 + phase) * 28;
+      for (let i = 0; i < 16; i++) d.ellipse(cx, cy, r * (1 - i * .058), r * .68 * (1 - i * .058), color, .045);
+    }
+    // Sine easing only: nothing overshoots. The cards fade back as the lens becomes the title capsule.
+    const calm = (at: number, duration: number) => .5 - .5 * Math.cos(Math.PI * clamp((t - at) / duration));
+    const widen = calm(6, .9), fade = 1 - .6 * widen, words = 1 - .95 * widen;
+    // Frosted cards: a lifted shadow, a faint white fill and a hairline edge; the nearer card drifts further.
+    const glass = (x: number, y: number, w: number, h: number, at: number, depth: number) => {
+      const k = calm(at, 1.2) * fade, px = x + Math.sin(t * .33 + depth) * 5 * depth, py = y + 12 * (1 - calm(at, 1.2));
+      d.rect(px + 4, py + 14, w - 8, h, "#040312", 24, .3 * k);
+      d.rect(px, py, w, h, "#ffffff", 24, .1 * k);
+      const edge = d.rect(px, py, w, h, "none", 24, .4 * k);
+      edge.stroke = "#ffffff";
+      edge.strokeWidth = 1;
+      return [px, py] as const;
+    };
+    // Text enters only with opacity and an 8 px rise.
+    const rise = (value: string, x: number, y: number, size: number, at: number, fill = "#ffffff", weight: "400" | "700" = "400") => {
+      const k = calm(at, .7), node = d.text(value, x, y + 8 * (1 - k), size, fill);
+      node.weight = weight;
+      node.opacity = k * words;
+      return node;
+    };
+    const [ax, ay] = glass(120, 150, 280, 210, .2, .5);
+    rise("TODAY", ax + 24, ay + 22, 11, .8, "#c9c2ff", "700");
+    ["Deep work  09:30", "Design review  13:00", "Evening walk  18:15"].forEach((row, i) => rise(row, ax + 24, ay + 58 + i * 46, 17, .9 + i * .18, "#e4e0ff"));
+    const [bx, by] = glass(360, 190, 420, 190, .7, 1);
+    rise("What matters most today?", bx + 26, by + 40, 25, 1.3);
+    rise("Two quiet hours before noon.", bx + 26, by + 84, 17, 2.6, "#d6d2f5");
+    for (let i = 0; i < 22; i++) {
+      const h = 4 + 16 * (1 - .75 * calm(2.6, .8)) * (.5 + .5 * Math.sin(t * 5 + i * .6)) * Math.sin(Math.PI * (i + .5) / 22);
+      d.rect(bx + 30 + i * 7, by + 150 - h / 2, 3, h, "#9fc0ff", 1.5, calm(1.8, .7) * words);
+    }
+    // A clear lens glides across the question, then slows and widens into the title capsule.
+    if (t > 3.8) {
+      const glide = calm(3.8, 2.2), cx = lerp(-80, 480, glide), cy = lerp(240, 270, widen), hw = lerp(70, 210, widen), hh = lerp(70, 48, widen);
+      d.rect(cx - hw + 4, cy - hh + 12, hw * 2 - 8, hh * 2, "#040312", Math.min(hw, hh), .25);
+      const lens = d.rect(cx - hw, cy - hh, hw * 2, hh * 2, "#ffffff", Math.min(hw, hh), .07 + .1 * widen);
+      lens.stroke = "#ffffff";
+      lens.strokeWidth = 1.5;
+      d.ellipse(cx - hw * .42, cy - hh * .58, hw * .26, hh * .08, "#ffffff", .4 * (1 - widen));
+      const title = calm(6.4, .8), name = d.text(d.lines[2], 480, 248 + 8 * (1 - title), 34, "#ffffff", "center");
+      name.weight = "400";
+      name.opacity = title;
+    }
+    d.title("#f2efff");
+    d.footer("#a9a3d9");
+  },
+  "liquid-motion": (d, t) => {
+    // Drops hit a pool, three blobs tear free on thinning necks and fuse, two wave fronts flood across, and the
+    // fused drop stretches into a pill and pours into a word, then a drip snaps off its p.
+    const flung = (k: number) => 1 - (1 - clamp(k)) ** 4, violet = "#7a36ff", pool = 420;
+    const drops: [number, number, string][] = [[280, .4, "#ff3f8c"], [640, .7, violet], [470, .95, "#ffae2a"]];
+    d.background(gradient("#2c0f45", "#12061e", 0, 0, 0, 540));
+    const surface: Point[] = [[0, 540]];
+    for (let x = 0; x <= 960; x += 16) {
+      let y = pool + Math.sin(x * .012 + t * 1.4) * 5;
+      for (const [at, hit] of drops) if (t > hit) y += 16 * Math.exp(-(((x - at) / 34) ** 2) - 5 * (t - hit)) * Math.cos(14 * (t - hit));
+      surface.push([x, y]);
+    }
+    surface.push([960, 540]);
+    d.poly(surface, "#ff7b1c");
+    for (const [x, hit, color] of drops) {
+      const k = hit - t;
+      if (k > 0 && k < .5) d.ellipse(x, pool - 18 - 1800 * k * k, 14, 20, color);
+      // Crown droplets follow the splash a few frames late and fall back into the pool.
+      if (k <= -.08 && k > -.5) for (const side of [-1, 1]) d.ellipse(x + side * 110 * (-k - .08), pool - 8 - 150 * (-k - .08) + 400 * (k + .08) ** 2, 4.5, 4, color);
+    }
+    const blobs: [number, number, number, string, number][] = [[480, 225, 58, violet, 1.2], [370, 250, 34, "#ff3f8c", 1.32], [590, 246, 30, "#ffae2a", 1.4]];
+    const fuse = flung((t - 2.1) / .5);
+    // Followers are drawn first so they sink into the leader as they fuse.
+    if (t < 3.3) [2, 1, 0].forEach((i) => {
+      const [x, y, r, color, launch] = blobs[i];
+      if (t <= launch) return;
+      const k = flung((t - launch) / .8), after = t - launch - .3, base = lerp(x, 480, .5);
+      const cx = lerp(base, x, k), cy = lerp(pool + r * .4, y, k), size = i ? lerp(r, r * .2, fuse) : lerp(r, 72, fuse);
+      // The neck thins until it snaps; the blob then rings back from a stretch to round.
+      if (after < 0) d.line([[base, pool], [cx, cy + r * .6]], color, lerp(r * .5, r * .12, (t - launch) / .3));
+      const ring = after < 0 ? 1.15 : 1 + .12 * Math.exp(-9 * after) * Math.cos(26 * after);
+      d.ellipse(i ? lerp(cx, 480 + (i === 1 ? -14 : 14), fuse) : cx, i ? lerp(cy, 228, fuse) : cy, size / Math.sqrt(ring), size * ring, color).opacity = i ? 1 - fuse : 1;
+    });
+    // Two fronts with four bulges each that swell out of phase; the second one becomes the new ground.
+    for (const [color, start] of [["#ff4b45", 2.62], ["#f6ecdf", 2.86]] as const) {
+      if (t < start) continue;
+      const sweep = -240 + 1500 * flung((t - start) / 1), front: Point[] = [[-20, 0]];
+      for (let y = 0; y <= 540; y += 10) front.push([sweep + .2 * (y - 270) + [80, 210, 345, 470].reduce((sum, at, b) => sum + 70 * Math.exp(-(((y - at) / 45) ** 2)) * (.6 + .4 * Math.sin(8 * t + b * 1.7)), 0), y]);
+      front.push([-20, 540]);
+      d.poly(front, color);
+    }
+    if (t >= 3.3) {
+      // Drop, then a pill, then the word: a simple intermediate shape keeps the pour readable.
+      const pill = flung((t - 3.58) / .4), word = flung((t - 3.9) / .7), squash = progress(t, 3.36, .22) * (1 - pill);
+      if (word < 1) d.rect(lerp(408, 300, pill), lerp(156, 196, pill) + 20 * squash, lerp(144, 360, pill), lerp(144, 92, pill) * (1 - .3 * squash), violet, lerp(72, 46, pill), 1 - word);
+      const mark = d.text("pour.", 0, -60, 128, violet, "center");
+      mark.opacity = word;
+      mark.transform = { x: 480, y: 250, scaleX: 1 + .06 * Math.exp(-6 * Math.max(0, t - 4.6)) * Math.cos(14 * (t - 4.6)), scaleY: 1 };
+      if (t > 5.6) {
+        const sag = clamp((t - 5.85) / 1) ** 2.2 * 60, fall = Math.max(0, t - 6.9), y = 342 + sag + 1600 * fall * fall;
+        if (t < 6.9) d.line([[337, 328], [337, y - 8]], violet, lerp(9, 2.4, sag / 60));
+        if (y < 560) d.ellipse(337, y, 10, 12 + Math.min(6, fall * 30), violet);
+      }
+      d.text(d.lines[2], 480, 430, 18, "#3b1658", "center").opacity = progress(t, 5.15, .5);
+    }
+    d.title(t < 3.1 ? "#f3e9ff" : "#3b1658");
+    d.footer(t < 3.1 ? "#b9a4cf" : "#7a6488");
+  },
+  "bauhaus-geometry": (d, t) => {
+    d.background("#f1e9da");
+    d.title("#151413");
+    d.footer("#6d6558");
+    // A 16 × 8 grid of 40 px modules centred on the frame; one action per half-second beat, eased without overshoot.
+    const M = 40, gx = (c: number) => 160 + c * M, gy = (r: number) => 110 + r * M, beat = (k: number) => k * .5;
+    const quad = (x: number) => { const k = clamp(x); return k < .5 ? 2 * k * k : 1 - (-2 * k + 2) ** 2 / 2; };
+    const act = (k: number, length = .3) => quad((t - beat(k)) / length);
+    for (let r = 0; r <= 8; r++) d.line([[gx(0), gy(r)], [gx(16), gy(r)]], "#cdc2ae", 1, clamp((t - r * .03) / .3));
+    for (let c = 0; c <= 16; c++) d.line([[gx(c), gy(0)], [gx(c), gy(8)]], "#cdc2ae", 1, clamp((t - .1 - c * .02) / .3));
+    // Positions are the finished poster; until beat 8 everything is shown turned 180° about the frame centre.
+    const spin = (p: Point, a: number, o: Point): Point => [o[0] + (p[0] - o[0]) * Math.cos(a) - (p[1] - o[1]) * Math.sin(a), o[1] + (p[0] - o[0]) * Math.sin(a) + (p[1] - o[1]) * Math.cos(a)];
+    const turn = Math.PI * (1 - act(8, .5)), place = (points: Point[]) => points.map((p) => spin(p, turn, [gx(8), gy(4)]));
+    const quarter = (o: Point, r: number, from: number): Point[] => [o, ...Array.from({ length: 13 }, (_, i): Point => [o[0] + Math.cos(from + i / 24 * Math.PI) * r, o[1] + Math.sin(from + i / 24 * Math.PI) * r])];
+    const box = (x: number, y: number, w: number, h: number): Point[] => [[x, y], [x + w, y], [x + w, y + h], [x, y + h]];
+    // Beat 1 the circle slides eight modules in, beat 6 two more; beat 2 a bar runs out at constant speed.
+    if (t >= beat(1)) {
+      const [c] = place([[gx(t < beat(6) ? lerp(-6, 2, act(1)) : lerp(2, 4, act(6))), gy(3)]]);
+      d.ellipse(c[0], c[1], 2 * M, 2 * M, "#e03c31");
+    }
+    if (t >= beat(2)) d.poly(place(box(gx(-4), gy(5), (gx(10) - gx(-4)) * clamp((t - beat(2)) / .32), M / 2)), "#151413");
+    // Beat 3 the triangle swings about its right angle; beat 4 the quarter disc sweeps about its corner.
+    if (t >= beat(3)) {
+      const a: Point = [gx(10), gy(5)], swing = Math.PI / 2 * (1 - act(3));
+      d.poly(place([a, spin([gx(6), gy(5)], swing, a), spin([gx(10), gy(1)], swing, a)]), "#f2b705");
+    }
+    if (t >= beat(4)) d.poly(place(quarter([gx(0), gy(8)], 2 * M, -Math.PI / 2 - Math.PI / 2 * (1 - act(4)))), "#1e4fa3");
+    // Beat 5 an array of quarter discs lights column by column; beats 9–11 send three phase-offset waves through it.
+    const inks = ["#e03c31", "#f2b705", "#1e4fa3", "#151413"];
+    for (let j = 0; j < 2; j++) for (let i = 0; i < 8; i++) {
+      if (t < beat(5) + (i * 2 + j) * .028) continue;
+      let turns = 0, colour = ([[0, 1, 3, 3, 2, 0, 1, 1], [3, 2, 0, 1, 1, 3, 2, 0]][j][i] + 3) % 4;
+      for (const [k, dir, recolour] of [[9, 1, 0], [10, 1, 1], [11, -1, 0]]) {
+        const q = quad((t - beat(k) - (dir > 0 ? i : 7 - i) * .042 - j * .021) / .16);
+        turns += q;
+        if (recolour && q >= .5) colour++;
+      }
+      const corner = ([[2, 3, 1, 0, 2, 3, 1, 0], [1, 0, 3, 2, 1, 0, 3, 2]][j][i] + 1) % 4, x = gx(3 + i), y = gy(6 + j);
+      const corners: Point[] = [[x, y], [x + M, y], [x + M, y + M], [x, y + M]], centre: Point = [x + M / 2, y + M / 2];
+      const disc = quarter(corners[corner], M, corner * Math.PI / 2).map((p) => spin(p, turns * Math.PI / 2, centre));
+      d.poly(place(disc), inks[colour % 4]);
+    }
+    // Beat 7 a rule fences off the type column; beat 12 the title cuts in; beat 13 the small caps and a red bar.
+    if (t >= beat(7)) d.poly(place(box(gx(11.5) - 2, gy(0), 4, (gy(8) - gy(0)) * clamp((t - beat(7)) / .3))), "#151413");
+    if (t >= beat(12)) d.text("FORM", 0, 0, 92, "#151413").transform = { x: gx(12) + 34, y: gy(8), rotation: -Math.PI / 2 };
+    if (t >= beat(13)) {
+      d.text(d.lines[2].toUpperCase(), 0, 0, 13, "#151413", "left", "mono").transform = { x: gx(12) + 4, y: gy(8), rotation: -Math.PI / 2 };
+      d.rect(lerp(gx(3), gx(6), act(13)), gy(1) - 14, 3 * M, 6, "#e03c31");
+    }
+  },
+  "synthwave-y2k": (d, t) => {
+    // A neon grid runs at a slatted sun, a chrome title slams in, then a pop-up is dragged aside and the tape glitches.
+    const hz = 318, st = t > 5.4 && t < 6 ? sampled(t, 15) : t, sunY = hz + 30 - 150 * progress(st, .2, 2.4);
+    d.background(gradient("#05021a", "#c42b7f", 0, 0, 0, hz));
+    for (let i = 0; i < 70; i++)
+      d.ellipse(hash(i + 7) * 960, hash(i + 70) * 250, .8 + hash(i) * 1.1, .8 + hash(i) * 1.1, "#f4e8ff", (.3 + .5 * hash(i + 3)) * (.6 + .4 * Math.sin(st * 2 + i)));
+    d.ellipse(480, sunY, 112, 112, gradient("#fff4a3", "#ff2b9c", 0, sunY - 112, 0, sunY + 112));
+    // Slats cut into the sun's lower half, sliding down; each is painted in the sky colour behind it.
+    for (let i = 0; i < 6; i++) {
+      const y = sunY + 10 + i * 17 + (st * 10) % 17;
+      if (y < hz) d.rect(360, y, 240, 2 + i * 1.5, "#8a1f73");
+    }
+    d.poly([[0, hz], [0, 250], [70, 228], [150, 262], [230, 216], [330, hz]], "#14062d", "#38d8ff", 1.5);
+    d.poly([[960, hz], [960, 236], [880, 210], [800, 258], [720, 232], [630, hz]], "#14062d", "#38d8ff", 1.5);
+    d.rect(0, hz, 960, 540 - hz, gradient("#3d0d55", "#07021a", 0, hz, 0, 540));
+    for (let i = -12; i <= 12; i++)
+      d.line([[480 + i * 16, hz], [480 + i * 150, 540]], "#ff35c8", 1.4);
+    for (let k = 0; k < 14; k++) {
+      const z = k + 1 - (st * 2.4) % 1, y = hz + 230 / z;
+      if (y < 540) d.line([[0, y], [960, y]], "#ff35c8", 1.2 + 6 / z);
+    }
+    d.rect(0, hz - 1, 960, 2, "#ff9ad2");
+    // Chrome title: a stepped extrusion, a bright face and a hot outline, scaled down hard into place.
+    const slam = st < 2.8 ? 0 : spring(st - 2.8, 3, 1, 14), visible = progress(st, 2.8, .1);
+    for (let i = 7; i >= 0; i--) {
+      const n = d.text(d.lines[2], i * .8, i * 1.1 - 34, 62, i === 0 ? "#e8f6ff" : i === 7 ? "#ff2fb8" : "#3a1060", "center");
+      n.transform = { x: 480, y: 210, scaleX: slam, scaleY: slam };
+      n.opacity = visible;
+    }
+    if (st > 3.3 && st < 3.9)
+      d.ellipse(300 + 360 * progress(st, 3.3, .6), 182, 18, 2, "#ffffff", Math.sin((st - 3.3) / .6 * Math.PI));
+    // A pop-up window: dragged aside as a dashed outline, then closed like a tube switching off.
+    const pop = st < 4.6 ? 0 : spring(st - 4.6, 0, 1, 16), drag = progress(st, 5.4, .5), close = 1 - progress(st, 6.6, .25);
+    if (pop > .01 && close > .01) {
+      const x = 330 - 210 * drag, y = 330 + 40 * drag;
+      const win = d.rect(-150, -70, 300, 140, "#ece8ff", 8);
+      const bar = d.rect(-150, -70, 300, 22, gradient("#c8ff2e", "#8a2bff", -150, 0, 150, 0), 8);
+      const label = d.text("TAPE.EXE · Play the night?", -138, -34, 14, "#1b0d42");
+      const play = d.rect(30, 26, 100, 28, "#b6f22a", 14), go = d.text("PLAY", 80, 31, 14, "#1d3300", "center");
+      for (const n of [win, bar, label, play, go]) n.transform = { x: x + 150, y: y + 70, scaleX: pop, scaleY: pop * close };
+    }
+    d.title("#f4e8ff");
+    d.footer("#c9a8e8");
+    // The tape: scanlines everywhere, and a tracking tear once a second.
+    for (let y = 0; y < 540; y += 4)
+      d.rect(0, y, 960, 1.5, "#000000", 0, .12);
+    const tear = (t % 1) < .06 ? 1 : 0;
+    if (tear) d.rect(0, 380 + hash(Math.floor(t)) * 120, 960, 10, "#f4e8ff", 0, .35);
+  },
+  "sticker-explainer": (d, t) => {
+    d.background("#e6ebef");
+    // One board, one camera: a die-cut sticker, a chart, then the board pulled back to the sum. Board nodes share
+    // the camera transform; the title, footer and narration line stay fixed on screen.
+    const cup = [480, 270, 1], chart = [1300, 270, 1], board = [880, 460, .5];
+    const move = (from: number[], to: number[], at: number, length: number, dip: number) => {
+      const k = clamp((t - at) / length), e = k * k * (3 - 2 * k);
+      return [lerp(from[0], to[0], e), lerp(from[1], to[1], e), lerp(from[2], to[2], e) * (1 - dip * Math.sin(Math.PI * k))];
+    };
+    const [cx, cy, z] = t < 4.6 ? move(cup, chart, 2.2, 1, .3) : move(chart, board, 4.6, 1.2, 0);
+    const view = { x: 480 - cx * z, y: 270 - cy * z, scaleX: z, scaleY: z };
+    const on = (node: StudyNode) => { node.transform = view; return node; };
+    for (let i = 0; i < 220; i++)
+      on(d.ellipse((i % 22) * 80 + 20, Math.floor(i / 22) * 80 + 20, 2, 2, "#b9c4ce", .7));
+    // The cup sticker drops onto the board: a white die-cut margin, a soft shadow, then the "photo" inside it.
+    const s = t < .15 ? 0 : spring(t - .15, 1.3, 1, 14);
+    if (s > 0) {
+      const local = { x: view.x + 300 * z, y: view.y + 290 * z, rotation: -.06, scaleX: z * s, scaleY: z * s };
+      const art = (node: StudyNode) => { node.transform = local; return node; };
+      art(d.ellipse(7, 10, 100, 100, "#1d2834", .16));
+      art(d.ellipse(0, 0, 98, 98, "#ffffff"));
+      art(d.ellipse(0, 0, 86, 86, "#f3f1ec"));
+      art(d.rect(44, -9, 34, 18, "#f7f5f0", 9));
+      art(d.ellipse(-4, -4, 56, 56, "#fbfaf7"));
+      art(d.ellipse(-4, -4, 47, 47, "#9a5a2e"));
+      art(d.ellipse(-13, -10, 11, 11, "#f2e6d3"));
+      art(d.ellipse(5, -10, 11, 11, "#f2e6d3"));
+      art(d.poly([[-23, -6], [15, -6], [-4, 18]], "#f2e6d3"));
+    }
+    on(d.line([[384, 336], [440, 360]], "#1d2834", 2, progress(t, .6, .3)));
+    on(d.text("cappuccino · one shot", 448, 350, 18, "#1d2834")).opacity = progress(t, .8, .3);
+    on(d.text("How many beans", 470, 196, 44, "#1d2834")).opacity = progress(t, .3, .4);
+    on(d.text("make one cup?", 470, 246, 44, "#1d2834")).opacity = progress(t, .4, .4);
+    // A thread links the facts; the camera travels along it.
+    on(d.line([[850, 250], [930, 200], [1010, 205], [1090, 240]], "#93a1ae", 3, progress(t, 2, 1.2)));
+    // Exact bars on one zero-based scale, growing one after another.
+    on(d.text("Top growers · million bags", 1110, 150, 20, "#1d2834")).opacity = progress(t, 2.8, .3);
+    ([["Brazil", 66], ["Vietnam", 27], ["Colombia", 12], ["Ethiopia", 8]] as const).forEach(([name, value], i) => {
+      const grow = progress(t, 3 + i * .12, .6), y = 190 + i * 44;
+      on(d.text(name, 1100, y + 4, 17, "#1d2834", "right")).opacity = grow;
+      on(d.rect(1110, y, value * 5 * grow, 30, i === 0 ? "#ff5a36" : "#1d2834", 2));
+      on(d.text(String(Math.round(value * grow)), 1120 + value * 5 * grow, y + 4, 17, i === 0 ? "#ff5a36" : "#1d2834")).opacity = grow;
+    });
+    // The sum waits in the middle of the board until the camera pulls back to it.
+    const sum = progress(t, 5.6, 1);
+    on(d.text(`≈ ${Math.round(6250 * sum).toLocaleString("en-US")}`, 880, 560, 110, "#1d2834", "center")).opacity = progress(t, 5.5, .3);
+    on(d.rect(700, 690, 360 * progress(t, 6.4, .5), 10, "#ff5a36"));
+    on(d.text("espressos from one 60 kg sack", 880, 712, 30, "#5a6b7c", "center")).opacity = progress(t, 6.2, .4);
+    d.rect(250, 418, 460, 36, "#16202b", 18, .88);
+    d.text(d.lines[2], 480, 426, 17, "#ffffff", "center");
+    d.title("#1d2834");
+    d.footer("#5a6b7c");
+  },
+  "variety-captions": (d, t) => {
+    // Stand-in vlog footage (a cat, a mug, a counter edge) with a caption landing a beat after every gag.
+    const freeze = t >= 3 && t < 4, ft = freeze ? 3 : t, beat = 2.5 / 24;
+    const pop = (k: number) => k <= 0 ? 0 : k >= 1 ? 1 : k < .55 ? 1.15 * ease(k / .55) : 1.15 - .15 * ((k - .55) / .45);
+    const wiggle = (seed: number) => Math.sin(t * 7.1 + seed * 2.3);
+    // Three layers per caption: a coloured outline, a white outline and the fill, outlines as rings of offset copies.
+    const caption = (text: string, x: number, y: number, size: number, fill: string, outer: string, k: number, rotation = 0) => {
+      const s = pop(k);
+      if (s <= 0) return;
+      const transform = { x, y, rotation, scaleX: s, scaleY: s };
+      for (const [color, r] of [[outer, size * .17], ["#ffffff", size * .09]] as const)
+        for (let i = 0; i < 12; i++) d.text(text, Math.cos(i / 12 * Math.PI * 2) * r, Math.sin(i / 12 * Math.PI * 2) * r - size * .55, size, color, "center").transform = transform;
+      d.text(text, 0, -size * .55, size, fill, "center").transform = transform;
+    };
+    d.background(gradient("#f1e9dc", "#dccfba", 0, 0, 0, 540));
+    // Defocused kitchen and the counter.
+    d.ellipse(150, 170, 80, 56, "#b9d39d", .55);
+    d.ellipse(260, 240, 60, 60, "#e8a463", .5);
+    d.ellipse(800, 220, 90, 44, "#f0b55c", .45);
+    d.rect(0, 372, 960, 70, gradient("#e3c497", "#c9a476", 0, 372, 0, 442));
+    d.rect(0, 440, 960, 100, "#7f978a");
+    // The cat; its paw reaches for the mug, then goes up to its mouth after the cut.
+    const groom = t >= 5.2, blink = groom ? .8 : hash(Math.floor(t * 2)) > .9 ? .9 : 0;
+    d.ellipse(380, 320, 78, 72, "#f0a24a");
+    d.ellipse(380, 336, 40, 52, "#fbf2e4");
+    d.poly([[336, 168], [346, 112], [380, 150]], "#f0a24a");
+    d.poly([[424, 168], [414, 112], [380, 150]], "#f0a24a");
+    d.ellipse(380, 196, 56, 48, "#f0a24a");
+    for (const ex of [358, 402]) {
+      d.ellipse(ex, 192, 11, 12 * (1 - blink) + .5, "#d8df4a");
+      d.ellipse(ex, 192, 2.5, 9 * (1 - blink) + .5, "#1b1408");
+    }
+    d.ellipse(380, 214, 6, 4, "#f2a3a6");
+    const reach = t >= 4 ? 0 : clamp(Math.sin(Math.max(0, ft - 1.5) * 10.5) * .6 + (ft > 2.6 ? 1 : 0), 0, 1);
+    const paw: Point = groom ? [392, 232 + Math.sin(t * 19) * 4] : [lerp(420, 492, reach), lerp(390, 352, reach)];
+    d.line([[410, 300], paw], "#f0a24a", 22);
+    d.ellipse(paw[0], paw[1], 13, 10, "#fbf2e4");
+    // The mug slides to the edge and tips over; it is gone after the freeze.
+    if (t < 4) {
+      const slide = progress(ft, 2.62, .14), tip = clamp((ft - 2.76) / .3);
+      const m = d.rect(-30, -70, 60, 70, "#e9897c", 8);
+      m.transform = { x: 520 + slide * 60 + tip * 30, y: 410 + tip * tip * 40, rotation: tip * .7 };
+      d.rect(-30, -44, 60, 9, "#f6e8d6").transform = m.transform;
+    }
+    if (freeze) {
+      // Freeze frame: a white flash, converging speed lines, then the burst frame with the shock line.
+      for (let i = 0; i < 40; i++) {
+        const a = hash(i + Math.floor(t * 12) * 41) * Math.PI * 2, w = .012;
+        d.poly([[560 + Math.cos(a) * 200, 330 + Math.sin(a) * 200], [560 + Math.cos(a + w) * 700, 330 + Math.sin(a + w) * 700], [560 + Math.cos(a - w) * 700, 330 + Math.sin(a - w) * 700]], "#ffffff");
+      }
+      d.rect(0, 0, 960, 540, "#ffffff", 0, clamp(1 - (t - 3) / .12));
+      const k = clamp((t - 3 - beat) / .33), burst: Point[] = [];
+      for (let i = 0; i < 36; i++) {
+        const a = i / 36 * Math.PI * 2, r = i % 2 ? .82 : 1.12 + hash(i) * .2;
+        burst.push([Math.cos(a) * 270 * r, Math.sin(a) * 82 * r]);
+      }
+      const shake = 10 * Math.exp(-(t - 3 - beat) * 9) * Math.sin(t * 90);
+      d.poly(burst, "#ffe14a", "#ff2d55", 8).transform = { x: 480 + shake, y: 120, rotation: -.06, scaleX: pop(k), scaleY: pop(k) };
+      caption("NOT THE MUG!!", 480 + shake, 146, 52, "#ff3d6a", "#a8001c", k, -.06);
+    }
+    // Curiosity: a question mark a beat after each tap.
+    [1.68, 1.98, 2.28].forEach((tap, i) => { if (t < 2.62) caption("?", 600 + i * 70, 250 - i * 30, 46 + i * 8, "#3fd6ff", "#1d2b6b", clamp((t - tap - beat) / .33), (i % 2 ? .15 : -.18) + wiggle(i) * .05); });
+    // Awkward: the deadpan line and a sliding sweat drop.
+    if (t >= 4 && t < 5.2) {
+      caption(d.lines[2], 480, 470, 44, "#c9b6ff", "#4a2f9e", clamp((t - 4.3 - beat) / .33), wiggle(3) * .03);
+      const drop = clamp((t - 4.4) / .8);
+      d.path(`M${466},${120 + drop * 50} C${476},${136 + drop * 50} ${478},${148 + drop * 50} ${466},${152 + drop * 50} C${454},${148 + drop * 50} ${456},${136 + drop * 50} ${466},${120 + drop * 50} Z`, "#7fd0ff", "#2a5bd7", 2).opacity = clamp((t - 4.35) * 6);
+    }
+    // Delight: sparkles, then the stamp slams down.
+    if (groom) {
+      caption("ZERO REGRETS", 720, 300, 50, "#ff5cb0", "#4b1c7a", clamp((t - 5.45) / .33), wiggle(5) * .04);
+      for (let i = 0; i < 5; i++) {
+        const r = 10 * pop(clamp((t - 5.7 - i * .08) / .3)) * (.7 + .3 * Math.sin(t * 10 + i));
+        const [x, y] = [[580, 230], [880, 250], [600, 360], [860, 350], [500, 140]][i];
+        d.path(`M${x},${y - r} Q${x},${y} ${x + r},${y} Q${x},${y} ${x},${y + r} Q${x},${y} ${x - r},${y} Q${x},${y} ${x},${y - r} Z`, "#fff6a8", "#ffffff", 1.5);
+      }
+      const ks = clamp((t - 6.6) / .12), sc = 1.8 - .8 * ease(ks);
+      if (ks > 0) {
+        const stamp = { x: 740, y: 140, rotation: -.16, scaleX: sc, scaleY: sc };
+        const frame = d.rect(-110, -38, 220, 76, "#ffffff", 14, ks);
+        frame.fill = "none"; frame.stroke = "#d4232b"; frame.strokeWidth = 6; frame.transform = stamp;
+        d.text("CERTIFIED MENACE", 0, -12, 22, "#d4232b", "center").transform = stamp;
+      }
+    }
+    d.title("#3a2a5a");
+    d.footer("#6b5f7a");
+  },
+  "one-line-art": (d, t) => {
+    d.background(gradient("#101a2b", "#070b13"));
+    // One champagne line that never lifts: a sun on the horizon, three arches, a profile, then a ring that fills with gold.
+    const path: Point[] = [[40, 400], [180, 400]];
+    const arc = (cx: number, cy: number, r: number, a0: number, a1: number) => {
+      for (let i = 1; i <= 40; i++) path.push([cx + Math.cos(lerp(a0, a1, i / 40)) * r, cy + Math.sin(lerp(a0, a1, i / 40)) * r]);
+    };
+    arc(180, 345, 55, Math.PI / 2, -Math.PI * 1.5);
+    path.push([300, 400]);
+    for (let i = 0; i < 3; i++) {
+      const x = 300 + i * 80;
+      path.push([x, 335]);
+      arc(x + 30, 335, 30, Math.PI, Math.PI * 2);
+      path.push([x + 60, 400]);
+      if (i < 2) path.push([x + 80, 400]);
+    }
+    path.push([560, 400], [586, 398], [600, 388], [606, 370], [603, 352]);
+    arc(592, 340, 12, 0.8, 0.8 - Math.PI * 2);
+    arc(640, 312, 46, Math.PI * 0.95, Math.PI * 1.9);
+    path.push([688, 305], [685, 313], [699, 329], [693, 333], [695, 341], [690, 343], [692, 349], [691, 358], [686, 366], [671, 371], [675, 400],
+      [790, 400], [814, 398], [834, 388], [850, 365]);
+    arc(850, 300, 65, Math.PI / 2, -Math.PI * 1.5);
+    const letter: Point[] = [[850, 365], [838, 350], [836, 262], [844, 258], [842, 270], [842, 345], [880, 345], [888, 336]];
+    path.push(...letter.slice(1));
+    const drawn = clamp((t - 0.05) / 5.8), visible = strokePoints(path, drawn), tip = visible[visible.length - 1];
+    d.line(path, "#e9d7a5", 2, drawn);
+    const fill = progress(t, 5.9, 0.8);
+    if (fill > 0) {
+      d.ellipse(850, 300, 62 * fill, 62 * fill, gradient("#f6e6b8", "#9a7838", 790, 240, 910, 360));
+      d.line(letter, "#0b1320", 2, 1).opacity = fill;
+    }
+    if (drawn < 1) {
+      d.ellipse(tip[0], tip[1], 12, 12, "#fff4d6", 0.16);
+      d.ellipse(tip[0], tip[1], 3, 3, "#fff8e6", 1);
+    }
+    const mark = progress(t, 6.5, 0.7);
+    d.text("MAISON LIGNÉE", 480, 462, 24, "#ecdcb0", "center", "serif").opacity = mark;
+    d.text(d.lines[2], 480, 486, 11, "#cdbb8e", "center").opacity = progress(t, 6.9, 0.6) * 0.8;
+    d.title("#ecdcb0");
+    d.footer("#8f8566");
+  },
 };
 function ninety(t: number) { return 87 + 9 * (1 - progress(t, .2)); }
 export function studyFrame(id: StudyId, seconds: number): StudyFrame {

package/templates/video/src/watermark.ts

@@ -0,0 +1,50 @@
+/*
+  The "Made with AnimaGuru" badge of an AnimaGuru lead film, drawn the way AnimaGuru's web app draws it in the viewer's
+  browser, with the same Instrument Sans and logo files, which the export command sends. `npm run export:mp4 --
+  --watermark` lays it over a copy of the film, so the copy matches one made on animaguru.com.
+*/
+const FAMILY = "AnimaGuru Watermark Sans";
+export const WATERMARK_LEAD = "Made with ";
+export const WATERMARK_NAME = "AnimaGuru";
+
+/** The badge's sizes for a width×height picture, from its shorter side so portrait and landscape videos match. */
+export function watermarkMetrics(width: number, height: number) {
+  const short = Math.min(width, height);
+  const font = Math.min(64, Math.max(12, Math.round(short * 0.028)));
+  const badge = Math.round(font * 2.1);
+  return { font, badge, logo: Math.round(font * 1.4), gap: Math.round(font * 0.45), padding: Math.round(font * 0.75), margin: Math.max(8, Math.round(short * 0.035)) };
+}
+/** Where a badge of `size` goes in the picture: the bottom-right corner, shrunk when it would cover too much of a small video. */
+export function watermarkPlacement(width: number, height: number, size: { width: number; height: number }, margin: number) {
+  const scale = Math.min(1, (width * 0.6) / size.width, (height * 0.2) / size.height);
+  const w = Math.round(size.width * scale), h = Math.round(size.height * scale);
+  return { x: Math.round(width - margin - w), y: Math.round(height - margin - h), width: w, height: h };
+}
+
+const bytes = (base64: string) => Uint8Array.from(atob(base64), (character) => character.charCodeAt(0));
+
+/** The badge for a width×height film as a PNG at its final size, and where it goes. `files` holds the font and logo as base64. */
+export async function watermarkBadge(width: number, height: number, files: { font: string; logo: string }) {
+  const size = watermarkMetrics(width, height);
+  document.fonts.add(await new FontFace(FAMILY, bytes(files.font), { weight: "400 700" }).load());
+  const lead = `500 ${size.font}px "${FAMILY}"`, name = `700 ${size.font}px "${FAMILY}"`;
+  const logo = await createImageBitmap(new Blob([bytes(files.logo)], { type: "image/png" }));
+  const measure = new OffscreenCanvas(1, 1).getContext("2d")!;
+  measure.font = lead; const leadWidth = measure.measureText(WATERMARK_LEAD).width;
+  measure.font = name; const nameWidth = measure.measureText(WATERMARK_NAME).width;
+  const inset = (size.badge - size.logo) / 2;
+  const canvas = new OffscreenCanvas(Math.ceil(inset + size.logo + size.gap + leadWidth + nameWidth + size.padding), size.badge);
+  const context = canvas.getContext("2d")!;
+  context.fillStyle = "rgba(12, 14, 18, 0.58)";
+  context.beginPath(); context.roundRect(0, 0, canvas.width, canvas.height, canvas.height / 2); context.fill();
+  context.drawImage(logo, inset, inset, size.logo, size.logo); logo.close();
+  context.textBaseline = "middle";
+  const x = inset + size.logo + size.gap, y = canvas.height / 2 + size.font * 0.04;
+  context.font = lead; context.fillStyle = "rgba(255, 255, 255, 0.82)"; context.fillText(WATERMARK_LEAD, x, y);
+  context.font = name; context.fillStyle = "#ffffff"; context.fillText(WATERMARK_NAME, x + leadWidth, y);
+  // The web app scales the badge as it draws it on each frame; here it is scaled once, so FFmpeg lays it over as it is.
+  const place = watermarkPlacement(width, height, canvas, size.margin);
+  const placed = new OffscreenCanvas(place.width, place.height);
+  placed.getContext("2d")!.drawImage(canvas, 0, 0, place.width, place.height);
+  return { image: await placed.convertToBlob({ type: "image/png" }), x: place.x, y: place.y, width: place.width, height: place.height };
+}

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

@@ -13,5 +13,9 @@
     "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. editDocumentaryCommit pins lemo-opuscar's Edit & Documentary category (caption-news, newsreel, countdown, city-symphony, visual-investigation, kino-montage, telestrator, news-package); none of its archive footage, documents or audio are bundled, only guidance."
+  "mg-styles-15": {
+    "url": "https://github.com/Vincentwei1021/mg-styles-15",
+    "commit": "49052d80bfaf9fa8412cc9710530e5e95a3b8d8c"
+  },
+  "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. editDocumentaryCommit pins lemo-opuscar's Edit & Documentary category (caption-news, newsreel, countdown, city-symphony, visual-investigation, kino-montage, telestrator, news-package); none of its archive footage, documents or audio are bundled, only guidance. mg-styles-15 supplied the signature features of aurora-glass, liquid-motion, bauhaus-geometry, synthwave-y2k, sticker-explainer, variety-captions and one-line-art; none of its code, films, photos, fonts or audio samples are bundled, only guidance."
 }