@popcraft/kit 0.35.0 → 0.35.2

package/dist/chunks/chunk-IB6ZK2NZ.js

@@ -0,0 +1,363 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  ticker
+} from "./chunk-OVKSRHJS.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-4DM3IHDI.js";
+import {
+  shadow
+} from "./chunk-ZCSJ44TU.js";
+import {
+  pill
+} from "./chunk-ZCPFVBC3.js";
+import {
+  box
+} from "./chunk-47NL7EPT.js";
+import {
+  ease
+} from "./chunk-NY6HUCBI.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-APZ7CG5P.js";
+
+// templates/src/themes/april-fools-shared.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var FOOL = {
+  product: "Brisk",
+  /** The fake feature. 1,474 high-density disks of 1.44 MB is 2.1 GB; at 20 g a disk the box weighs 29.5 kg. */
+  disks: 1474,
+  was: 1474,
+  now: 19,
+  cents: ".95",
+  phone: "1-800-NO-FLOPPY",
+  /** The real offer. */
+  offer: "3 months of Pro, free.",
+  code: "NOFLOPPY",
+  ends: "Friday 3 April",
+  url: "brisk.app/real"
+};
+var COLORS = {
+  paper: "#F4EEDC",
+  text: "#17122E",
+  onPaper: "#4A4563",
+  primary: "#1B2BA6",
+  onPrimary: "#FFFFFF",
+  secondary: "#E1261C",
+  onSecondary: "#FFFFFF",
+  accent: "#FFD60A",
+  onAccent: "#17122E",
+  card: "#FFF9E6",
+  onCard: "#17122E",
+  cardMuted: "#5F5A75"
+};
+function foolBrand(k, fields, roles = Object.keys(COLORS)) {
+  k.brand(Object.fromEntries(roles.map((r) => [r, COLORS[r]])), fields);
+  k.palette({ cardShade: "#D8CCA4", cardTop: "#FFFDF5", disk: "#1E2030", diskEdge: "#383B52", metal: "#CBD0DA", metalShade: "#8D94A6", shadow: "#050830" });
+}
+var r3 = (n) => Math.round(n * 1e3) / 1e3;
+function oval(cx, cy, rx, ry, n = 48) {
+  return { closed: true, points: Array.from({ length: n }, (_, i) => {
+    const a = i / n * Math.PI * 2;
+    return { x: r3(cx + Math.cos(a) * rx), y: r3(cy + Math.sin(a) * ry) };
+  }) };
+}
+function roundRect(x, y, w, h, r, cut = 0) {
+  const pts = [];
+  const arc = (cx, cy, from) => {
+    for (let i = 0; i <= 5; i++) {
+      const a = (from + i * 18) * Math.PI / 180;
+      pts.push({ x: r3(cx + Math.cos(a) * r), y: r3(cy + Math.sin(a) * r) });
+    }
+  };
+  arc(x + r, y + r, 180);
+  if (cut) pts.push({ x: x + w - cut, y }, { x: x + w, y: y + cut });
+  else arc(x + w - r, y + r, 270);
+  arc(x + w - r, y + h - r, 0);
+  arc(x + r, y + h - r, 90);
+  return { closed: true, points: pts };
+}
+function burstPath(cx, cy, R, r, spikes, phase = 0) {
+  return { closed: true, points: Array.from({ length: spikes * 2 }, (_, i) => {
+    const a = (i / (spikes * 2) * 2 + phase) * Math.PI, d = i % 2 ? r : R;
+    return { x: r3(cx + Math.cos(a) * d), y: r3(cy + Math.sin(a) * d) };
+  }) };
+}
+var studioShadow = (k, u = 1, strength = 0.45) => [
+  shadow(k, "shadow", strength, Math.round(18 * u), Math.round(40 * u)),
+  shadow(k, "shadow", strength * 0.7, Math.round(3 * u), Math.round(6 * u))
+];
+function rays(k, parent, o) {
+  const n = o.n ?? 14, R = o.r;
+  const paths = Array.from({ length: n }, (_, i) => {
+    const a0 = i / n * Math.PI * 2, a1 = a0 + Math.PI / n;
+    return { closed: true, points: [{ x: R, y: R }, { x: r3(R + Math.cos(a0) * R), y: r3(R + Math.sin(a0) * R) }, { x: r3(R + Math.cos(a1) * R), y: r3(R + Math.sin(a1) * R) }] };
+  });
+  const id = k.vector(parent, R * 2, R * 2, paths, k.tint(o.ink, o.opacity ?? 0.08), { name: o.name ?? "Rays", absolute: { x: o.cx - R, y: o.cy - R } });
+  if (o.loopMs) k.behave(id, "rotation", [{ kind: "spin", rate: 360 / n * 1e3 / o.loopMs }]);
+  return id;
+}
+function placeRays(k, root, o) {
+  for (const id of k.named(root, o.name ?? "Rays")) k.patch(id, { x: o.cx - o.r, y: o.cy - o.r, width: o.r * 2, height: o.r * 2 });
+}
+function halftone(k, parent, o) {
+  const step = o.step ?? 26, cells = Math.floor(o.size / step);
+  const paths = [];
+  for (let j = 0; j < cells; j++) for (let i = 0; i < cells - j; i++) {
+    const far = (i + j) / cells;
+    const d = r3(step * 0.46 * (1 - far));
+    if (d < 1.2) continue;
+    const cx = (i + 0.5 + j % 2 * 0.5) * step, cy = (j + 0.5) * step;
+    const px = o.dx === 1 ? cx : o.size - cx, py = o.dy === 1 ? cy : o.size - cy;
+    paths.push({ closed: true, points: [{ x: px, y: py - d }, { x: px + d, y: py }, { x: px, y: py + d }, { x: px - d, y: py }] });
+  }
+  return k.vector(parent, o.size, o.size, paths, k.tint(o.ink, o.opacity ?? 0.14), { name: o.name ?? "Halftone", absolute: { x: o.dx === 1 ? o.x : o.x - o.size, y: o.dy === 1 ? o.y : o.y - o.size } });
+}
+function glint(k, parent, o) {
+  const R = o.size / 2, w = R * 0.16;
+  const pts = [{ x: R, y: 0 }, { x: R + w, y: R - w }, { x: R * 2, y: R }, { x: R + w, y: R + w }, { x: R, y: R * 2 }, { x: R - w, y: R + w }, { x: 0, y: R }, { x: R - w, y: R - w }];
+  const id = k.vector(parent, o.size, o.size, [{ closed: true, points: pts }], o.color, { name: o.name ?? "Glint", absolute: { x: o.cx - R, y: o.cy - R } });
+  if (o.loopMs) for (const axis of ["scaleX", "scaleY"]) k.behave(id, axis, [{ kind: "sine", amp: 0.4, freq: (o.cycles ?? 2) * 1e3 / o.loopMs, phase: o.phase ?? 0 }]);
+  return id;
+}
+function disk(k, parent, o) {
+  const s = o.size;
+  const f = k.frame(parent, { x: o.x, y: o.y, width: s, height: s }, { name: o.name ?? "Floppy disk", effects: studioShadow(k, (o.shadow ?? 1) * (s / 300), 0.4) });
+  k.vector(f, s, s, [roundRect(0, 0, s, s, s * 0.035, s * 0.085)], "disk", { name: "Plastic", absolute: { x: 0, y: 0 } });
+  k.vector(f, s, s, [
+    box(s * 0.17, 0, s * 0.63, s * 0.345),
+    { closed: true, points: [{ x: s * 0.06, y: s * 0.1 }, { x: s * 0.1, y: s * 0.045 }, { x: s * 0.14, y: s * 0.1 }] },
+    box(s * 0.035, s * 0.9, s * 0.045, s * 0.06),
+    box(s * 0.92, s * 0.9, s * 0.045, s * 0.06)
+  ], "diskEdge", { name: "Recess", absolute: { x: 0, y: 0 } });
+  k.vector(f, s, s, [roundRect(s * 0.3, 0, s * 0.47, s * 0.32, s * 0.012)], "metal", { name: "Shutter", absolute: { x: 0, y: 0 } });
+  k.vector(f, s, s, [box(s * 0.3, s * 0.262, s * 0.47, s * 0.014), box(s * 0.3, s * 0.05, s * 0.47, s * 8e-3)], "metalShade", { name: "Shutter lines", absolute: { x: 0, y: 0 } });
+  k.vector(f, s, s, [roundRect(s * 0.6, s * 0.05, s * 0.1, s * 0.2, s * 0.01)], "disk", { name: "Window", absolute: { x: 0, y: 0 } });
+  const lx = s * 0.1, ly = s * 0.43, lw = s * 0.8, lh = s * 0.57;
+  const label = k.stack(f, { width: r3(lw), height: r3(lh), fill: "card", clip: true, padding: { top: r3(s * 0.12), right: r3(s * 0.05), bottom: 0, left: r3(s * 0.05) }, gap: r3(s * 0.012), absolute: { x: r3(lx), y: r3(ly) }, name: "Label" });
+  k.rect(label, r3(lw), r3(s * 0.075), o.stripe ?? "secondary", { name: "Label stripe", absolute: { x: 0, y: 0 } });
+  const rules = [];
+  for (let i = 0; i < 4; i++) rules.push(box(s * 0.05, s * 0.2 + i * s * 0.095, lw - s * 0.1, Math.max(1, s * 6e-3)));
+  k.vector(label, r3(lw), r3(lh), rules, k.tint("cardMuted", 0.22), { name: "Label rules", absolute: { x: 0, y: 0 } });
+  if (o.title && o.styles) k.text(label, o.title, { style: o.styles.title, color: "onCard", name: "Disk title" });
+  if (o.note && o.styles) k.text(label, o.note, { style: o.styles.note, color: "onCard", name: "Disk note" });
+  if (o.rotation) k.patch(f, { rotation: o.rotation });
+  return f;
+}
+function stageStyles(k, o = {}) {
+  k.textStyle("Box brand 30", { size: 30, fontWeight: 900, letterSpacing: -0.6, lineHeight: 36 });
+  k.textStyle("Box title 46", { ...SERIF, size: 46, fontWeight: 900, fontStyle: "italic", letterSpacing: -1.2, lineHeight: 46 });
+  k.textStyle("Box spec 16", { ...MONO, size: 16, fontWeight: 700, lineHeight: 22 });
+  k.textStyle("Box strip 16", { size: 16, fontWeight: 800, letterSpacing: 0.8, lineHeight: 20 });
+  k.textStyle("Disk title 19", { size: 19, fontWeight: 900, letterSpacing: -0.3, lineHeight: 22 });
+  k.textStyle("Disk note 16", { ...MONO, size: 16, fontWeight: 700, letterSpacing: -0.4, lineHeight: 20 });
+  k.textStyle("Burst was 24", { ...MONO, size: 24, fontWeight: 800, lineHeight: 28, textAlign: "CENTER" });
+  k.textStyle("Burst now 16", { size: 16, fontWeight: 900, letterSpacing: 2.4, lineHeight: 18, textAlign: "CENTER" });
+  k.textStyle("Burst price 92", { size: 92, fontWeight: 900, fontStyle: "italic", letterSpacing: -4.5, lineHeight: 88, textAlign: "CENTER", fontFeatures: { tnum: 1 } });
+  k.textStyle("Burst note 16", { size: 16, fontWeight: 800, letterSpacing: 0.6, lineHeight: 18, textAlign: "CENTER" });
+  if (o.banner !== false) k.textStyle("Banner 50", { size: 50, fontWeight: 900, fontStyle: "italic", letterSpacing: -1.4, lineHeight: 54 });
+  k.textStyle("Seal 22", { size: 22, fontWeight: 900, letterSpacing: 0.4, lineHeight: 24, textAlign: "CENTER" });
+  k.textStyle("Seal small 16", { ...MONO, size: 16, fontWeight: 800, letterSpacing: 1, lineHeight: 20, textAlign: "CENTER" });
+}
+var STAGE = { w: 900, h: 900 };
+function stage(k, parent, at, o) {
+  const st = k.frame(parent, { x: at.x, y: at.y, width: STAGE.w, height: STAGE.h }, { name: o.name ?? "Stage" });
+  const beam = (fromX, a, b) => ({ closed: true, points: [{ x: fromX - 18, y: 0 }, { x: fromX + 18, y: 0 }, { x: b, y: 1290 }, { x: a, y: 1290 }] });
+  k.vector(st, 1300, 1300, [beam(40, 300, 900)], [k.gradient({ from: "onPrimary", to: "onPrimary", fromOpacity: 0.26, toOpacity: 0.02, angle: 90 })], { name: "Beam left", absolute: { x: -200, y: -500 } });
+  k.vector(st, 1300, 1300, [beam(1260, 400, 1e3)], [k.gradient({ from: "onPrimary", to: "onPrimary", fromOpacity: 0.26, toOpacity: 0.02, angle: 90 })], { name: "Beam right", absolute: { x: -200, y: -500 } });
+  k.vector(st, 1300, 60, [{ closed: true, points: [{ x: 0, y: 0 }, { x: 80, y: 0 }, { x: 66, y: 44 }, { x: 14, y: 44 }] }, { closed: true, points: [{ x: 1220, y: 0 }, { x: 1300, y: 0 }, { x: 1286, y: 44 }, { x: 1234, y: 44 }] }], "shadow", { name: "Lamps", absolute: { x: -200, y: -540 } });
+  k.ellipse(st, 820, [k.gradient({ kind: "RADIAL", from: "accent", to: "accent", fromOpacity: 0.42, toOpacity: 0, handles: [{ x: 0.5, y: 0.5 }, { x: 1, y: 0.5 }, { x: 0.5, y: 1 }] })], { name: "Spotlight", absolute: { x: 40, y: 20 } });
+  k.vector(st, 900, 900, [oval(450, 842, 400, 58), box(50, 772, 800, 70)], "shadow", { name: "Plinth side", absolute: { x: 0, y: 0 }, opacity: 0.55 });
+  k.vector(st, 900, 900, [oval(450, 772, 400, 58)], k.tint("onPrimary", 0.92), { name: "Plinth top", absolute: { x: 0, y: 0 } });
+  k.vector(st, 900, 900, [oval(450, 772, 400, 58)], [k.gradient({ from: "primary", to: "primary", fromOpacity: 0.55, toOpacity: 0.05, angle: 90 })], { name: "Plinth shade", absolute: { x: 0, y: 0 } });
+  k.vector(st, 900, 900, [oval(470, 776, 300, 34)], "shadow", { name: "Box shadow", absolute: { x: 0, y: 0 }, opacity: 0.4 });
+  disk(k, st, { x: 668, y: 512, size: 236, rotation: 14, title: "{{brand.name}} 4.0", note: "DISK 2 OF 1,474", styles: { title: "Disk title 19", note: "Disk note 16" }, stripe: "primary", name: "Disk right" });
+  const BX = 306, BY = 196, BW = 360, BH = 570, DX = 86, DY = -46;
+  const box2 = k.frame(st, { x: BX, y: BY + DY, width: BW + DX, height: BH - DY }, { name: "Box", effects: studioShadow(k, 1, 0.35) });
+  k.vector(box2, BW + DX, BH - DY, [{ closed: true, points: [{ x: BW, y: -DY }, { x: BW + DX, y: 0 }, { x: BW + DX, y: BH }, { x: BW, y: BH - DY }] }], "cardShade", { name: "Box side", absolute: { x: 0, y: 0 } });
+  const slant = (x0, x1, y0, y1) => ({ closed: true, points: [{ x: BW + x0, y: -DY + x0 / DX * DY + y0 }, { x: BW + x1, y: -DY + x1 / DX * DY + y0 }, { x: BW + x1, y: -DY + x1 / DX * DY + y1 }, { x: BW + x0, y: -DY + x0 / DX * DY + y1 }] });
+  k.vector(box2, BW + DX, BH - DY, [slant(0, DX, 0, 92)], "primary", { name: "Box side band", absolute: { x: 0, y: 0 } });
+  k.vector(box2, BW + DX, BH - DY, [slant(0, DX, 92, BH)], [k.gradient({ from: "shadow", to: "shadow", fromOpacity: 0, toOpacity: 0.34, angle: 0 })], { name: "Box side shade", absolute: { x: 0, y: 0 } });
+  const bars = [];
+  [0, 5, 8, 14, 17, 24, 27, 31, 38, 42, 45, 52].forEach((x, i) => bars.push(slant(16 + x, 16 + x + (i % 3 === 0 ? 3 : 2), BH - 110, BH - 40)));
+  k.vector(box2, BW + DX, BH - DY, bars, k.tint("onCard", 0.8), { name: "Box side barcode", absolute: { x: 0, y: 0 } });
+  k.vector(box2, BW + DX, BH - DY, [{ closed: true, points: [{ x: 0, y: -DY }, { x: DX, y: 0 }, { x: BW + DX, y: 0 }, { x: BW, y: -DY }] }], "cardTop", { name: "Box lid", absolute: { x: 0, y: 0 } });
+  const front = k.stack(box2, { width: BW, height: BH, fill: "card", clip: true, absolute: { x: 0, y: -DY }, name: "Box front" });
+  const band = k.stack(front, { direction: "HORIZONTAL", fill: "primary", gap: 12, align: "CENTER", padding: { top: 22, right: 24, bottom: 22, left: 24 }, name: "Box band" });
+  k.logo(band, 36, 36);
+  k.text(band, "{{brand.name}}", { style: "Box brand 30", color: "onPrimary", name: "Box brand" });
+  const art = k.stack(front, { height: 232, clip: true, name: "Box art" });
+  k.vector(art, 360, 232, [burstPath(180, 122, 150, 104, 18, 0.03)], "accent", { name: "Box art sun", absolute: { x: 0, y: 0 } });
+  disk(k, art, { x: 105, y: 46, size: 150, rotation: -9, shadow: 0.6, name: "Box art disk" });
+  const words = k.stack(front, { height: "FILL", padding: { top: 6, right: 24, bottom: 16, left: 24 }, gap: 10, justify: "SPACE_BETWEEN", name: "Box words" });
+  k.text(words, o.title, { style: "Box title 46", color: "onCard", name: "Box title" });
+  k.text(words, "1,474 \xD7 3.5\u2033 HD DISKS \xB7 2.1 GB\nIBM FORMATTED \xB7 29.5 KG", { style: "Box spec 16", color: "cardMuted", name: "Box spec" });
+  const strip = k.stack(front, { fill: "secondary", padding: { top: 12, right: 24, bottom: 12, left: 24 }, name: "Box strip" });
+  k.text(strip, "V4.0 \xB7 FOR HOME AND OFFICE", { style: "Box strip 16", color: "onSecondary", name: "Box strip words" });
+  disk(k, st, { x: 6, y: 500, size: 250, rotation: -13, title: "{{brand.name}} 4.0", note: "DISK 1,474 / 1,474", styles: { title: "Disk title 19", note: "Disk note 16" }, stripe: "accent", name: "Disk left" });
+  disk(k, st, { x: 78, y: 592, size: 212, rotation: 8, title: "{{brand.name}} 4.0", note: "DISK 1 OF 1,474", styles: { title: "Disk title 19", note: "Disk note 16" }, name: "Disk front" });
+  const seal = k.frame(st, { x: 84, y: 250, width: 196, height: 196 }, { name: "Seal" });
+  const sealIn = k.frame(seal, { x: 0, y: 0, width: 196, height: 196 }, { name: "Seal face", effects: studioShadow(k, 0.5, 0.4) });
+  k.vector(sealIn, 196, 196, [burstPath(98, 98, 98, 88, 28)], "card", { name: "Seal edge", absolute: { x: 0, y: 0 } });
+  k.vector(sealIn, 196, 196, [oval(98, 98, 78, 78, 56)], "card", { name: "Seal ring", absolute: { x: 0, y: 0 }, stroke: { color: "onCard", width: 2.5 } });
+  const sealWords = k.stack(sealIn, { width: 196, height: 196, align: "CENTER", justify: "CENTER", gap: 4, absolute: { x: 0, y: 0 }, name: "Seal words" });
+  k.text(sealWords, "AS SEEN", { style: "Seal small 16", color: "cardMuted", name: "Seal top" });
+  k.text(sealWords, "at 2:47\nin the\nmorning", { style: "Seal 22", color: "onCard", name: "Seal middle" });
+  k.patch(sealIn, { rotation: -12 });
+  const D = 400;
+  const burst = k.frame(st, { x: 512, y: 6, width: D, height: D }, { name: "Price burst" });
+  const face = k.frame(burst, { x: 0, y: 0, width: D, height: D }, { name: "Burst face" });
+  k.vector(face, D, D, [burstPath(D / 2 + 9, D / 2 + 11, D / 2 - 12, D / 2 - 46, 20, 0.05)], "secondary", { name: "Burst back", absolute: { x: 0, y: 0 }, effects: studioShadow(k, 0.8, 0.4) });
+  k.vector(face, D, D, [burstPath(D / 2, D / 2, D / 2 - 12, D / 2 - 46, 20)], "accent", { name: "Burst front", absolute: { x: 0, y: 0 } });
+  const tag = k.stack(face, { width: D, height: D, align: "CENTER", justify: "CENTER", gap: 2, absolute: { x: 0, y: 0 }, name: "Burst words" });
+  const was = k.stack(tag, { width: "HUG", name: "Was" });
+  const wasText = k.text(was, `WAS $${FOOL.was.toLocaleString("en-US")}`, { style: "Burst was 24", color: "onAccent", autoWidth: true, name: "Was price" });
+  k.stack(was, { width: Math.round(k.node(wasText).width) + 16, height: 5, fill: "secondary", clip: true, absolute: { x: -8, y: 12 }, name: "Was price strike" });
+  k.text(tag, "NOW ONLY", { style: "Burst now 16", color: "onAccent", autoWidth: true, name: "Now only" });
+  k.text(tag, `$${FOOL.now}${FOOL.cents}`, { style: "Burst price 92", color: "onAccent", autoWidth: true, name: "Price figure" });
+  k.text(tag, "PLUS SHIPPING AND\nA LOT OF HANDLING", { style: "Burst note 16", color: "onAccent", autoWidth: true, name: "Price note" });
+  k.patch(face, { rotation: 9 });
+  if (o.banner !== null) {
+    const banner = k.frame(st, { x: 150, y: 786, width: 640, height: 86 }, { name: "Banner" });
+    const tape = k.stack(banner, { direction: "HORIZONTAL", width: 640, height: 86, fill: "secondary", align: "CENTER", justify: "CENTER", absolute: { x: 0, y: 0 }, effects: studioShadow(k, 0.6, 0.5), name: "Banner tape" });
+    k.text(tape, o.banner ?? "But wait, there\u2019s more!", { style: "Banner 50", color: "onSecondary", autoWidth: true, name: "Banner words" });
+    k.patch(tape, { rotation: -3.5 });
+  }
+  const G = [[250, 160, 74, "onPrimary"], [476, 96, 44, "accent"], [868, 456, 60, "onPrimary"], [40, 468, 40, "accent"], [770, 480, 34, "onPrimary"]];
+  G.forEach(([cx, cy, size, color], i) => glint(k, st, { cx, cy, size, color, loopMs: o.loopMs, cycles: 2 + i % 2, phase: i * 0.23 }));
+  if (at.scale !== void 0) placeStage(k, parent, { x: at.x, y: at.y, scale: at.scale }, o.name);
+  return st;
+}
+function placeStage(k, root, at, name = "Stage") {
+  for (const id of k.named(root, name)) k.patch(id, { x: at.x, y: at.y, width: STAGE.w, height: STAGE.h, anchorX: 0, anchorY: 0, scaleX: at.scale, scaleY: at.scale });
+}
+function coupon(k, parent, o) {
+  const outer = k.stack(parent, { width: o.width ?? "FILL", fill: "card", radius: Math.round(o.pad * 0.3), padding: Math.round(o.pad * 0.32), effects: studioShadow(k, o.shadow ?? 1, 0.3), name: o.name ?? "Coupon" });
+  return k.stack(outer, { padding: o.pad * 0.68, gap: o.gap, radius: Math.round(o.pad * 0.16), stroke: { color: "cardMuted", width: Math.max(1.5, o.pad / 18) }, name: "Coupon cut line" });
+}
+function codeRow(k, parent, o) {
+  const [v, h] = o.pad ?? [10, 22];
+  if (!k.hasComponent("Promo code")) pill(k, "Promo code", { fill: o.fill ?? "primary", ink: o.ink ?? "onPrimary", style: o.codeStyle, label: FOOL.code, pad: [v, h], radius: 6 });
+  const row = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", gap: Math.round(h * 0.7), align: "CENTER", name: o.name ?? "Code row" });
+  k.text(row, o.label ?? "USE CODE", { style: o.labelStyle, color: o.labelInk ?? "cardMuted", autoWidth: true, name: "Code label" });
+  k.instance(row, "Promo code", { Label: FOOL.code }, { name: "Code chip" });
+  return row;
+}
+function flip(k, front, back, at, o = {}) {
+  const h = o.half ?? 200, b = o.backAt;
+  const close = ease.named("cubic", "in"), open = ease.back(1.4);
+  k.patch(front, { anchorX: 0.5, anchorY: 0.5 });
+  k.patch(back, { anchorX: 0.5, anchorY: 0.5 });
+  k.animate(front, "scaleX", [{ t: 0, v: 1, ease: ease.hold }, { t: at, v: 1, ease: close }, { t: at + h, v: 0, ...b !== void 0 ? { ease: ease.hold } : {} }, ...b !== void 0 ? [{ t: b + h, v: 0, ease: open }, { t: b + h * 2 + 80, v: 1 }] : []]);
+  k.animate(front, "opacity", [{ t: 0, v: 1, ease: ease.hold }, { t: at + h, v: 0, ...b !== void 0 ? { ease: ease.hold } : {} }, ...b !== void 0 ? [{ t: b + h, v: 1 }] : []]);
+  k.animate(back, "scaleX", [{ t: 0, v: 0, ease: ease.hold }, { t: at + h, v: 0, ease: open }, { t: at + h * 2 + 80, v: 1, ...b !== void 0 ? { ease: ease.hold } : {} }, ...b !== void 0 ? [{ t: b, v: 1, ease: close }, { t: b + h, v: 0 }] : []]);
+}
+var FACE_W = 1080;
+var FLOOR = [{ x: 30, y: -350, size: 320, rotation: -10, stripe: "accent" }, { x: 690, y: -372, size: 340, rotation: 11, stripe: "primary" }, { x: 368, y: -292, size: 300, rotation: 5, stripe: "secondary" }];
+function floorDisks(k, face, h, name) {
+  for (const d of FLOOR) disk(k, face, { x: d.x, y: h + d.y, size: d.size, rotation: d.rotation, stripe: d.stripe, name });
+}
+function faceStyles(k) {
+  k.textStyle("Bug 22", { ...MONO, size: 22, fontWeight: 800, letterSpacing: 1.2, lineHeight: 28 });
+  k.textStyle("Dateline 24", { ...MONO, size: 24, fontWeight: 800, letterSpacing: 1.2, lineHeight: 30 });
+  k.textStyle("Fools 210", { ...SERIF, size: 210, fontWeight: 900, fontStyle: "italic", letterSpacing: -9, lineHeight: 176 });
+  k.textStyle("Fools 150", { ...SERIF, size: 150, fontWeight: 900, fontStyle: "italic", letterSpacing: -6, lineHeight: 140 });
+  k.textStyle("Truth 44", { size: 44, fontWeight: 800, letterSpacing: -1, lineHeight: 52 });
+  k.textStyle("Offer 76", { size: 76, fontWeight: 900, letterSpacing: -3, lineHeight: 76 });
+  k.textStyle("Code label 24", { ...MONO, size: 24, fontWeight: 800, letterSpacing: 1, lineHeight: 30 });
+  k.textStyle("Code 40", { ...MONO, size: 40, fontWeight: 800, letterSpacing: 1, lineHeight: 46 });
+  k.textStyle("Terms 24", { ...MONO, size: 24, fontWeight: 500, lineHeight: 32 });
+}
+function pitchFace(k, sheet, p, o) {
+  const W = FACE_W;
+  const pitch = k.stack(sheet, { width: W, height: p.h, fill: "primary", clip: true, padding: p.pad, gap: o.gap ?? 16, absolute: { x: 0, y: 0 }, name: "Pitch" });
+  rays(k, pitch, { cx: W / 2, cy: p.rays, r: 1300, ink: "onPrimary", opacity: 0.07, loopMs: o.loopMs, name: "Studio rays" });
+  k.rect(pitch, W, 640, [k.gradient({ from: "shadow", to: "shadow", fromOpacity: 0, toOpacity: 0.72, angle: 90 })], { name: "Floor", absolute: { x: 0, y: p.h - 640 } });
+  halftone(k, pitch, { x: W, y: 0, dx: -1, dy: 1, size: 420, ink: "onPrimary", name: "Halftone top" });
+  halftone(k, pitch, { x: 0, y: p.h, dx: 1, dy: -1, size: 420, ink: "onPrimary", name: "Halftone foot" });
+  floorDisks(k, pitch, p.h, "Floor disk");
+  const bug = k.stack(pitch, { direction: "HORIZONTAL", gap: 14, align: "CENTER", name: "Bug" });
+  const live = k.stack(bug, { direction: "HORIZONTAL", width: "HUG", fill: "secondary", radius: 4, gap: 8, align: "CENTER", padding: { top: 4, right: 12, bottom: 4, left: 10 }, name: "Live" });
+  k.ellipse(live, 12, "onSecondary", { name: "Live dot" });
+  k.text(live, "LIVE", { style: "Bug 22", color: "onSecondary", autoWidth: true, name: "Live word" });
+  k.text(bug, "PAID PROGRAMMING \xB7 2:47 AM", { style: "Bug 22", color: "onPrimary", name: "Bug words" });
+  return pitch;
+}
+function lowerThird(k, pitch, p, o) {
+  const W = FACE_W;
+  k.textStyle("Third 30", { size: 30, fontWeight: 900, letterSpacing: 0.4, lineHeight: 36 });
+  k.textStyle("Third phone 30", { ...MONO, size: 30, fontWeight: 800, lineHeight: 36 });
+  k.textStyle("Ticker 24", { ...MONO, size: 24, fontWeight: 700, lineHeight: 30 });
+  const third = k.frame(pitch, { x: 0, y: p.third ?? 0, width: W, height: 88 }, { name: "Lower third", effects: studioShadow(k, 0.6, 0.5) });
+  const call = k.stack(third, { direction: "HORIZONTAL", width: 300, height: 88, fill: "secondary", align: "CENTER", justify: "CENTER", absolute: { x: 0, y: 0 }, name: "Call now" });
+  k.text(call, "CALL NOW", { style: "Third 30", color: "onSecondary", autoWidth: true, name: "Call now words" });
+  const phone = k.stack(third, { direction: "HORIZONTAL", width: 340, height: 88, fill: "accent", align: "CENTER", justify: "CENTER", absolute: { x: 300, y: 0 }, name: "Phone" });
+  k.text(phone, FOOL.phone, { style: "Third phone 30", color: "onAccent", autoWidth: true, name: "Phone number" });
+  const crawl = k.frame(third, { x: 640, y: 0, width: W - 640, height: 88 }, { name: "Crawl", clip: true });
+  ticker(k, crawl, { label: "OPERATORS ARE STANDING BY \xB7", item: 440, height: 88, fill: "card", ink: "onCard", style: "Ticker 24", rate: o.rate });
+}
+function realFace(k, sheet, p, o) {
+  const W = FACE_W;
+  if (o.button) k.textStyle("Claim 32", { size: 32, fontWeight: 800, lineHeight: 40 });
+  if (o.button) pill(k, "Claim button", { fill: "primary", ink: "onPrimary", style: "Claim 32", label: o.button, pad: [20, 40], radius: 8 });
+  const real = k.stack(sheet, { width: W, height: p.h, fill: "accent", clip: true, padding: p.pad, gap: o.gap ?? 26, justify: "CENTER", absolute: { x: 0, y: 0 }, name: "Real" });
+  rays(k, real, { cx: W / 2, cy: Math.round(p.h * 0.36), r: 1300, ink: "onAccent", opacity: 0.06, loopMs: o.loopMs, name: "Reveal rays" });
+  halftone(k, real, { x: W, y: 0, dx: -1, dy: 1, size: 420, ink: "onAccent", opacity: 0.16, name: "Halftone top" });
+  halftone(k, real, { x: 0, y: p.h, dx: 1, dy: -1, size: 420, ink: "onAccent", opacity: 0.16, name: "Halftone foot" });
+  floorDisks(k, real, p.h, "Gag disk");
+  k.text(real, "1 APRIL \xB7 A WORD FROM {{brand.name}}", { style: "Dateline 24", color: "onAccent", name: "Dateline" });
+  k.text(real, "April Fools.", { style: "Fools 210", color: "onAccent", name: "Fools" });
+  k.text(real, "There is no floppy edition.\nThis part is real:", { style: "Truth 44", color: "onAccent", name: "Truth" });
+  const offer = coupon(k, real, { pad: 44, gap: 20 });
+  k.text(offer, FOOL.offer, { style: "Offer 76", color: "onCard", name: "Offer" });
+  codeRow(k, offer, { labelStyle: "Code label 24", codeStyle: "Code 40" });
+  k.text(offer, `${FOOL.url} \xB7 ends ${FOOL.ends}`, { style: "Terms 24", color: "cardMuted", name: "Terms" });
+  if (o.button) k.instance(real, "Claim button", { Label: o.button }, { name: "Claim" });
+  return real;
+}
+function arrangeFaces(k, id, p) {
+  const W = FACE_W;
+  for (const name of ["Pitch", "Real"]) for (const n of k.named(id, name)) k.patch(n, { x: 0, y: 0, width: W, height: p.h, padding: p.pad });
+  placeStage(k, id, p.stage);
+  placeRays(k, id, { cx: W / 2, cy: p.rays, r: 1300, name: "Studio rays" });
+  placeRays(k, id, { cx: W / 2, cy: Math.round(p.h * 0.36), r: 1300, name: "Reveal rays" });
+  for (const n of k.named(id, "Floor")) k.patch(n, { x: 0, y: p.h - 640, width: W, height: 640 });
+  for (const n of k.named(id, "Halftone top")) k.patch(n, { x: W - 420, y: 0, width: 420, height: 420 });
+  for (const n of k.named(id, "Halftone foot")) k.patch(n, { x: 0, y: p.h - 420, width: 420, height: 420 });
+  if (p.caption !== void 0) for (const n of k.named(id, "Caption tape")) k.patch(n, { x: p.pad.left, y: p.caption, width: W - p.pad.left - p.pad.right });
+  for (const n of k.named(id, "Lower third")) k.patch(n, p.third === null ? { visible: false } : { x: 0, y: p.third, width: W, height: 88, visible: true });
+  for (const name of ["Floor disk", "Gag disk"]) k.named(id, name).forEach((n, i) => {
+    const d = FLOOR[i];
+    k.patch(n, p.gag ? { x: d.x, y: p.h + d.y, width: d.size, height: d.size, visible: true } : { visible: false });
+  });
+}
+
+export {
+  FOOL,
+  foolBrand,
+  studioShadow,
+  rays,
+  placeRays,
+  halftone,
+  glint,
+  disk,
+  stageStyles,
+  STAGE,
+  stage,
+  placeStage,
+  coupon,
+  codeRow,
+  flip,
+  FACE_W,
+  faceStyles,
+  pitchFace,
+  lowerThird,
+  realFace,
+  arrangeFaces
+};

package/dist/chunks/chunk-IBUYZ5MX.js

@@ -0,0 +1,88 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  SCENE_BUILDERS
+} from "./chunk-R4ZB64UK.js";
+import {
+  COLORS,
+  DURATION_MS,
+  FPS,
+  SCENES,
+  hexColor
+} from "./chunk-T2JLKCUZ.js";
+import {
+  trailerType
+} from "./chunk-NKEGBCI7.js";
+import {
+  BEAT_LOOP_MS
+} from "./chunk-O5CWD7D7.js";
+import {
+  BEAT_LOOP_HASH
+} from "./chunk-ZGT53ZH2.js";
+import {
+  defineTemplate
+} from "./chunk-76OE66SX.js";
+import {
+  Kit,
+  preset
+} from "./chunk-G63TLLXA.js";
+import {
+  sceneSequence
+} from "./chunk-NY6HUCBI.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-APZ7CG5P.js";
+
+// templates/src/motion/launch-trailer/index.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var launch_trailer_default = defineTemplate({
+  id: "motion-launch-trailer",
+  meta: {
+    name: "PopCraft launch trailer",
+    description: "PopCraft's 52-second desktop launch trailer at 1920\xD71080, 60 fps: a yellow pop, the Mac, six modes on circle wipes, a scrolling wall of templates with a live count, six GPU effects on a noisy wipe, a bento of features, four people editing one board live, and the end card \u2014 ten scenes in one composition, ready to re-brand and export",
+    category: "animation",
+    tags: ["animation", "trailer", "launch", "video", "product", "app", "scenes", "composition", "popcraft", "showcase"],
+    platforms: ["youtube", "x", "linkedin", "web"],
+    formats: ["video", "intro", "ad"],
+    useCases: ["launch", "announcement", "brand-intro"],
+    created: "2026-09-29",
+    updated: "2026-09-30",
+    featured: 1,
+    pinned: true
+  },
+  sequence: true,
+  // The Mac desktop draws the macOS menu bar (its eight menu titles and clock) across its top 36 px.
+  depictedScreenText: 8,
+  build() {
+    const k = new Kit("Launch trailer", preset("video-1080p"));
+    k.brand({ ...COLORS });
+    trailerType(k);
+    const sheets = [];
+    for (const [i, sc] of SCENES.entries()) {
+      const id = i === 0 ? k.sheet : k.addSheet(void 0, sc.name);
+      k.nameSheet(id, sc.name);
+      k.flowSheet(id, 0, 0, sc.key === "s2" || sc.key === "sB" ? "pop" : sc.key === "sD" ? "popPaper" : sc.key === "sC" ? "black" : "popInk", sc.key === "sB" ? "CENTER" : "MIN", sc.key === "sB" ? "CENTER" : "MIN");
+      k.timeline(id, { duration: sc.ms, fps: FPS });
+      SCENE_BUILDERS[sc.key](k, id);
+      sheets.push(id);
+    }
+    k.setCover(sheets[0]);
+    const doc = k.finish();
+    const comp = sceneSequence(doc.nodes, { id: "comp-launch-trailer", name: "Launch trailer", frames: sheets, fps: FPS, background: hexColor(COLORS.popInk) });
+    const markers = comp.clips.map((c, i) => ({ id: `scene-${i + 1}`, t: c.start, label: SCENES[i].name }));
+    const passes = Math.ceil(DURATION_MS / BEAT_LOOP_MS);
+    const audio = Array.from({ length: passes }, (_, p) => {
+      const start = p * BEAT_LOOP_MS, out = Math.min(BEAT_LOOP_MS, DURATION_MS - start);
+      return { id: `music-${p + 1}`, mediaHash: BEAT_LOOP_HASH, name: "Pop Drop (120 BPM loop, CC0)", start, in: 0, out, lane: 0, ...p === 0 ? { fadeIn: 300 } : {}, ...p === passes - 1 ? { fadeOut: Math.min(out, 1800) } : {} };
+    });
+    return { ...doc, compositions: { [comp.id]: { ...comp, markers, audio } } };
+  }
+});
+
+export {
+  launch_trailer_default
+};

package/dist/chunks/chunk-IECJ5JKE.js

@@ -0,0 +1,187 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  CLAY_FPS,
+  arrives,
+  clayBall,
+  clayBrand,
+  clayCloud,
+  clayFx,
+  claySet,
+  claySun,
+  fitClaySet,
+  fitLooseClay,
+  hop,
+  land,
+  looseClay,
+  pip,
+  pipBox,
+  scaleAt,
+  weekBeads
+} from "./chunk-FOMWFIXZ.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-4DM3IHDI.js";
+import {
+  outro,
+  pill,
+  postVariants
+} from "./chunk-ZCPFVBC3.js";
+import {
+  defineTemplate
+} from "./chunk-76OE66SX.js";
+import {
+  Kit,
+  preset
+} from "./chunk-G63TLLXA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-APZ7CG5P.js";
+
+// templates/src/social/claymation-streak-post.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 7e3;
+var OUT = 5800;
+var EVERY = 400;
+var SCENE = { w: 700, h: 470, ground: 440 };
+var WEEK = { bead: 96, step: 140 };
+var PIP = 300;
+var MEDAL = 216;
+var SQUARE = {
+  set: { w: 1080, h: 1080, horizon: 600, u: 1 },
+  scene: { x: 384, ground: 828, f: 1 },
+  week: { x: 72, y: 884, f: 1 },
+  sun: { x: 850, y: 60, f: 1.1 },
+  cloud: { x: 884, y: 318, f: 0.7 },
+  loose: [[60, 690, 30, "clayPink"], [230, 770, 44, "clayGreen"], [1040, 850, 36, "clayBlue"], [330, 650, 22, "clayYellow"], [150, 840, 26, "clayBlue"], [1030, 660, 24, "clayGreen"]]
+};
+var PORTRAIT = {
+  set: { w: 1080, h: 1350, horizon: 780, u: 1 },
+  scene: { x: 300, ground: 1030, f: 1.1 },
+  week: { x: 72, y: 1120, f: 1 },
+  sun: { x: 868, y: 40, f: 1 },
+  cloud: { x: 50, y: 650, f: 1 },
+  loose: [[60, 890, 30, "clayPink"], [200, 990, 44, "clayGreen"], [1030, 1090, 36, "clayBlue"], [300, 850, 22, "clayYellow"], [120, 1080, 26, "clayBlue"], [1020, 850, 24, "clayGreen"]]
+};
+var STORY = {
+  set: { w: 1080, h: 1920, horizon: 1010, u: 1 },
+  scene: { x: 100, ground: 1250, f: 1.28 },
+  week: { x: 146, y: 1310, f: 0.842 },
+  sun: { x: 60, y: 46, f: 1 },
+  cloud: { x: 800, y: 560, f: 1 },
+  // Under the week the table runs on to the near edge (where the apps lay their own buttons): clay waiting for next week.
+  loose: [[60, 1100, 30, "clayPink"], [90, 1270, 44, "clayGreen"], [1030, 1280, 36, "clayBlue"], [1e3, 1080, 22, "clayYellow"], [330, 1650, 90, "clayBlue"], [700, 1760, 110, "clayYellow"], [560, 1570, 50, "clayGreen"], [880, 1590, 40, "clayPink"], [200, 1540, 34, "clayYellow"]],
+  near: [{ x: -100, y: 1690 }, { x: 850, y: 1720 }]
+};
+function arrange(k, id, l) {
+  fitClaySet(k, id, l.set);
+  for (const s of k.named(id, "Scene")) scaleAt(k, s, l.scene.x, l.scene.ground - SCENE.ground * l.scene.f, l.scene.f);
+  for (const s of k.named(id, "Week")) scaleAt(k, s, l.week.x, l.week.y, l.week.f);
+  for (const s of k.named(id, "Sun")) scaleAt(k, s, l.sun.x, l.sun.y, l.sun.f);
+  for (const s of k.named(id, "Cloud")) scaleAt(k, s, l.cloud.x, l.cloud.y, l.cloud.f);
+  fitLooseClay(k, id, l.loose);
+  k.named(id, "Near clay").forEach((c, i) => k.patch(c, l.near?.[i] ? { ...l.near[i], visible: true } : { visible: false }));
+}
+var DAYS = Array.from({ length: 7 }, (_, i) => `Bead ${i + 1}`);
+var counts = [{ layer: "Medal figure", at: 0, duration: EVERY * 6, counter: { from: 1, to: 7 }, tick: EVERY }];
+var cues = [
+  { layer: "Eyebrow", preset: "fade-in", at: 0, params: { duration: 400 } },
+  { layer: "Headline", preset: "pop-in", at: 0, params: { duration: 420 } },
+  // The figure is pressed in with the first bead, so it can be smoothed away at the end instead of snapping 7 to 1.
+  { layer: "Medal figure", preset: "fade-in", at: 0, params: { duration: 300 } },
+  { layer: "Says", preset: "rise-in", at: 500, params: { duration: 500 } },
+  { layer: "Call", preset: "pop-in", at: 900, params: { duration: 450 } },
+  { layer: "Medal", preset: "wobble", at: 3300, params: { duration: 900 } },
+  { layer: "Headline", preset: "pulse", at: 4400, params: { duration: 700, amount: 0.04 } },
+  // Stop motion: Monday's bead is on the table from the first frame; the other six are put down one by one.
+  { ...arrives(DAYS.slice(1), EVERY), stagger: { delay: EVERY, order: "selection" } },
+  // The loop: the words leave, and the beads are picked back up, Sunday first.
+  outro(["Eyebrow", "Headline", "Says", "Call", "Medal figure"], OUT),
+  outro(DAYS.slice(1), OUT + 100, { preset: "pop-out", gap: 100, duration: 300 })
+];
+var claymation_streak_post_default = defineTemplate({
+  id: "motion-claymation-streak-post",
+  meta: {
+    name: "Clay streak post (animated)",
+    description: "A seven-second looping stop-motion post modelled in clay about the day a habit usually dies: seven beads land along a table one by one, the figure pressed into a clay medal counts with them to 7, and the mascot hops \u2014 held poses, squash and stretch, thumbprints. Square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "claymation", "clay", "plasticine", "stop motion", "mascot", "streak", "habit tracker", "onboarding", "encouragement", "counter", "family", "saas", "post", "playful"],
+    platforms: ["instagram", "threads", "linkedin", "x", "tiktok"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["onboarding", "milestone", "tips"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, loop: true },
+  build() {
+    const k = new Kit("Clay streak post", preset("ig-post"));
+    k.quantizeGeometry = true;
+    clayBrand(k);
+    k.textStyle("Eyebrow 24", { size: 24, fontWeight: 800, letterSpacing: 4, lineHeight: 30, textCase: "UPPER" });
+    k.textStyle("Display 112", { size: 112, fontWeight: 900, letterSpacing: -5, lineHeight: 104 });
+    k.textStyle("Display 96", { size: 96, fontWeight: 900, letterSpacing: -4, lineHeight: 92 });
+    k.textStyle("Says 32", { ...SERIF, size: 32, fontStyle: "italic", fontWeight: 500, lineHeight: 42 });
+    k.textStyle("Medal 110", { size: 110, fontWeight: 900, letterSpacing: -4, lineHeight: 110, textAlign: "CENTER" });
+    k.textStyle("Day 26", { ...MONO, size: 26, fontWeight: 800, lineHeight: 30, textAlign: "CENTER" });
+    k.textStyle("Chip 26", { size: 26, fontWeight: 800, lineHeight: 32 });
+    pill(k, "Chip", { fill: "primary", ink: "onPrimary", style: "Chip 26", label: "Start a streak, free", pad: [14, 30] });
+    k.patch(k.componentIdOf("Chip"), { effects: clayFx(60) });
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Streak post");
+    k.flowSheet(sheet, 0, 72, "paper", "MIN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: CLAY_FPS });
+    claySet(k, sheet, SQUARE.set);
+    claySun(k, sheet, 100, { x: 0, y: 0 }, { boil: 1e3 });
+    clayCloud(k, sheet, 220, { x: 0, y: 0 }, { seed: 1, boil: 1e3 });
+    looseClay(k, sheet, STORY.loose);
+    const scene = k.frame(sheet, { x: 0, y: 0, width: SCENE.w, height: SCENE.h }, { name: "Scene" });
+    const mascot = pip(k, scene, { s: PIP, absolute: { x: SCENE.w - pipBox(PIP).w, y: SCENE.ground - pipBox(PIP).footY }, look: -0.9, lookY: 0.9, loopMs: DURATION, blinkAt: [1500, 5e3] });
+    const medal = k.frame(scene, { x: 20, y: SCENE.ground - MEDAL - 62, width: MEDAL + 20, height: MEDAL + 70 }, { name: "Medal" });
+    const ribbon = (x, lean) => ({ closed: true, points: [{ x, y: 0 }, { x: x + 46, y: 0 }, { x: x + 46 + lean, y: 96 }, { x: x + lean, y: 96 }] });
+    k.vector(medal, MEDAL + 20, 100, [ribbon(50, 34), ribbon(140, -34)], "clayBlue", { name: "Ribbon", absolute: { x: 0, y: 0 }, effects: clayFx(46) });
+    const disc = k.frame(medal, { x: 10, y: 62, width: MEDAL, height: MEDAL }, { name: "Medal disc" });
+    clayBall(k, disc, MEDAL, "clayYellow", { name: "Medal clay", seed: 91, absolute: { x: 0, y: 0 } });
+    k.ellipse(disc, MEDAL - 44, k.tint("shine", 1e-3), { name: "Medal ring", stroke: { color: "dent", width: 5 }, opacity: 0.22, absolute: { x: 22, y: 22 } });
+    const figure = k.stack(disc, { width: MEDAL, height: MEDAL, align: "CENTER", justify: "CENTER", name: "Medal face", absolute: { x: 0, y: 0 } });
+    k.text(figure, "7", { style: "Medal 110", color: "clayInk", autoWidth: true, name: "Medal figure" });
+    const { beads } = weekBeads(k, sheet, { bead: WEEK.bead, step: WEEK.step, style: "Day 26", absolute: { x: 0, y: 0 } });
+    for (const [d, color, seed] of [[330, "clayPink", 71], [300, "clayGreen", 72]]) k.patch(clayBall(k, sheet, d, color, { name: "Near clay", h: d * 0.82, seed, absolute: { x: 0, y: 0 } }), { effects: clayFx(d) });
+    const top = k.stack(sheet, { gap: 18, name: "Top" });
+    k.text(top, "{{brand.site}} \xB7 streaks made of clay", { style: "Eyebrow 24", color: "onPaper", name: "Eyebrow" });
+    k.text(top, "Day 7 is the hard one.", { style: "Display 112", color: "text", width: 760, name: "Headline" });
+    k.text(top, "So on day seven Pip presses your kid a medal. No guilt, no red crosses: a missed day just leaves a gap to fill.", { style: "Says 32", color: "onPaper", width: 560, name: "Says" });
+    k.instance(top, "Chip", { Label: "Start a streak, free" }, { name: "Call" });
+    arrange(k, sheet, SQUARE);
+    beads.forEach((b, i) => {
+      if (i) land(k, b, i * EVERY, { from: 80 });
+    });
+    hop(k, k.named(mascot, "Pip body")[0], EVERY * 6 + 300, 64);
+    hop(k, k.named(mascot, "Pip body")[0], EVERY * 6 + 1300, 40);
+    land(k, disc, EVERY * 6 + 100);
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    k.variants(sheet, postVariants({ portrait: 72 }, {
+      portrait: (kit, id) => arrange(kit, id, PORTRAIT),
+      vertical: (kit, id) => {
+        for (const n of kit.named(id, "Headline")) {
+          kit.restyle(n, "Display 96");
+          kit.patch(n, { width: 640 });
+        }
+        arrange(kit, id, STORY);
+      }
+    }));
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  claymation_streak_post_default
+};