@popcraft/kit 0.53.3 → 0.53.5

package/dist/chunks/chunk-2MJKBOCU.js

@@ -0,0 +1,198 @@
+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 {
+  COLUMN,
+  float,
+  lineGrid,
+  redrawLines,
+  reelCuts,
+  reelSheet,
+  section,
+  wideCut
+} from "./chunk-YUJ6YBZ6.js";
+import {
+  captionStrip,
+  captionSwap
+} from "./chunk-3YQOE5KZ.js";
+import {
+  hide,
+  patchAll,
+  restyle
+} from "./chunk-LWSZATOL.js";
+import {
+  shadow
+} from "./chunk-YORIY3BT.js";
+import {
+  pill
+} from "./chunk-KOAJ6HD2.js";
+import {
+  box
+} from "./chunk-EJLCQVQK.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  ease
+} from "./chunk-PLZLKHOI.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/motion/saas-before-after.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var S = section("acoustic", 2, 6);
+var { beat } = S;
+var STAGE = { width: COLUMN, height: 640 };
+var SPLIT = 236;
+var AFTER = { width: STAGE.width - SPLIT, height: STAGE.height };
+var WIPE = { at: beat(8), duration: 1100 };
+var LEDGER = { only: "y", stepY: 64, weight: 2, opacity: 1, name: "Ledger rules" };
+var SCRAPS = ["Spreadsheet", "Email thread", "Sticky note", "Overdue"];
+var swaps = [captionSwap(["Sunday night. Three unpaid invoices.", "A spreadsheet. Notes. Awkward emails.", "Fennel sends each invoice itself.", "It reminds, then it reconciles.", "Paid in two days flat.", "Your Sunday is yours again."], beat(0.5), S.duration - 30, { stagger: 60 })];
+var counts = [{ layer: "Invoice total", at: WIPE.at + 500, duration: beat(2), counter: { from: 0, to: 4800, prefix: "$", separator: "," } }];
+var cues = [
+  { layer: "Kicker", preset: "fade-in", at: 0, params: { duration: 400 } },
+  { layer: "Hook", preset: "words-in", at: 0, params: { duration: 500, amount: 70 } },
+  { layer: "Stage", preset: "fade-in", at: 300, params: { duration: 450 } },
+  { layer: "Caption strip", preset: "fade-in", at: beat(0.5), params: { duration: 300 } },
+  ...SCRAPS.map((name, i) => ({ layer: name, preset: i === 3 ? "pop-in" : "drop-in", at: beat(1 + i * 1.5), params: { duration: 420 } })),
+  { layer: "Before", preset: "shake", at: beat(5.5) + 420, params: { duration: 400, distance: 8 } },
+  { layer: "After", preset: "wipe-in", at: WIPE.at, params: { duration: WIPE.duration, direction: "left", ease: ease.inOut("cubic") } },
+  { layer: "Step", preset: "fade-in", at: beat(12), params: { duration: 350 }, stagger: { delay: beat(1) } },
+  { layer: "Paid stamp", preset: "pop-in", at: beat(15), params: { duration: 380, amount: 0.5 } },
+  { layer: "Call", preset: "rise-in", at: beat(18), params: { duration: 500 } },
+  { layer: "Call", preset: "pulse", at: beat(20), params: { duration: 700, amount: 0.05 } }
+];
+var saas_before_after_default = defineTemplate({
+  id: "motion-saas-before-after",
+  meta: {
+    name: "SaaS short: before and after",
+    description: "A 15-second before-and-after reel in a warm editorial serif look: the old way piles up on the desk (spreadsheet, email thread, sticky note, an overdue stamp), a marigold slider is drawn across, and the new way is one calm invoice whose total counts up and is stamped paid, the pile still in view beside it. Music, burned-in captions, 9:16 with square, 4:5 and 16:9 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "before after", "comparison", "editorial", "serif", "invoice", "wipe", "captions", "music", "audio", "reel", "tiktok", "shorts"],
+    platforms: ["tiktok", "instagram", "youtube", "linkedin", "x"],
+    formats: ["reel", "short", "story", "post", "portrait-post", "ad", "video"],
+    useCases: ["comparison", "launch", "case-study"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, swaps },
+  build() {
+    const k = new Kit("SaaS short: before and after", preset("ig-story"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#F1ECE0", text: "#183326", onPaper: "#475A4D", primary: "#183326", onPrimary: "#F6F1E5", accent: "#E3A008", onAccent: "#1D1500", card: "#FCFAF4", onCard: "#183326" },
+      { name: "Fennel", hook: "Invoicing shouldn\u2019t take your Sunday." }
+    );
+    k.palette({ rule: "#CFC6AE", margin: "#C7533B", desk: "#DDD3BB", scrap: "#FFFFFF", onScrap: "#2A2A26", scrapMuted: "#5F5E57", note: "#F4D35E", onNote: "#3B2D00", overdue: "#A8281C", cell: "#D5E3D3", cardMuted: "#54655A", shade: "#3A3320", onShade: "#F6F1E5" });
+    const serif = { fontFamily: "Source Serif 4" }, mono = { fontFamily: "JetBrains Mono" };
+    k.textStyle("Hook 84", { ...serif, size: 84, fontWeight: 600, letterSpacing: -2.4, lineHeight: 86 });
+    k.textStyle("Hook 58", { ...serif, size: 58, fontWeight: 600, letterSpacing: -1.4, lineHeight: 62 });
+    k.textStyle("Kicker 22", { ...mono, size: 22, fontWeight: 600, letterSpacing: 2.4, lineHeight: 28, textCase: "UPPER" });
+    k.textStyle("Caption 38", { ...serif, size: 38, fontWeight: 600, fontStyle: "italic", letterSpacing: -0.4, lineHeight: 46 });
+    k.textStyle("Button 32", { size: 32, fontWeight: 700, letterSpacing: -0.4, lineHeight: 40 });
+    k.textStyle("Scrap 22", { ...mono, size: 22, fontWeight: 500, lineHeight: 30 });
+    k.textStyle("Note 30", { ...serif, size: 30, fontWeight: 700, fontStyle: "italic", lineHeight: 34 });
+    k.textStyle("Stamp 52", { size: 52, fontWeight: 900, letterSpacing: 3, lineHeight: 56, textCase: "UPPER" });
+    k.textStyle("Stamp 40", { size: 40, fontWeight: 900, letterSpacing: 3, lineHeight: 44, textCase: "UPPER" });
+    k.textStyle("Invoice 38", { ...serif, size: 38, fontWeight: 700, letterSpacing: -0.8, lineHeight: 44 });
+    k.textStyle("Total 150", { ...serif, size: 150, fontWeight: 700, letterSpacing: -6, lineHeight: 144, fontFeatures: { tnum: 1 } });
+    k.textStyle("Row 26", { size: 26, fontWeight: 600, letterSpacing: -0.3, lineHeight: 34 });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 32", label: "Send your first invoice free", pad: [20, 36], radius: 6 });
+    const sheet = reelSheet(k, S, { name: "Before and after", gap: 22 });
+    lineGrid(k, sheet, k.tint("text", 0.13), LEDGER);
+    k.rect(sheet, 3, 1920, "margin", { name: "Margin rule", absolute: { x: 104, y: 0 }, opacity: 0.55 });
+    k.ellipse(sheet, 980, "accent", { name: "Sun", absolute: { x: 50, y: 1560 } });
+    k.text(sheet, "The freelancer\u2019s ledger \xB7 {{brand.name}}", { style: "Kicker 22", color: "onPaper", name: "Kicker" });
+    k.text(sheet, "{{brand.hook}}", { style: "Hook 84", color: "text", name: "Hook" });
+    const stage = k.stack(sheet, { ...STAGE, clip: true, radius: 6, fill: "desk", effects: [shadow(k, "shade", 0.22, 18, 44)], name: "Stage" });
+    const before = k.frame(stage, { x: 0, y: 0, ...STAGE }, { name: "Before", fill: "desk" });
+    const tag = (parent, label, fill, ink, name) => {
+      const t = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", fill, radius: 4, padding: { top: 8, right: 16, bottom: 8, left: 16 }, name, absolute: { x: 28, y: 28 } });
+      k.text(t, label, { style: "Kicker 22", color: ink, autoWidth: true, name: `${name} label` });
+    };
+    const paper = [shadow(k, "shade", 0.25, 8, 18)];
+    const sheetScrap = k.stack(before, { width: 610, fill: "scrap", padding: 26, gap: 12, effects: paper, name: "Spreadsheet", absolute: { x: 30, y: 120 } });
+    k.text(sheetScrap, "invoices_2026_FINAL(2).xlsx", { style: "Scrap 22", color: "onScrap", name: "File name" });
+    const cells = [];
+    for (let r = 0; r < 6; r++) for (let c = 0; c < 4; c++) cells.push(box(c * 141, r * 40, 135, 34));
+    k.vector(sheetScrap, 558, 234, cells, "cell", { name: "Cells" });
+    k.text(sheetScrap, "Acme   4,800   sent??   \u2014", { style: "Scrap 22", color: "scrapMuted", name: "Row note" });
+    k.patch(sheetScrap, { rotation: -4 });
+    const mail = k.stack(before, { width: 520, fill: "scrap", padding: 26, gap: 10, effects: paper, name: "Email thread", absolute: { x: 258, y: 372 } });
+    k.text(mail, "Re: Re: Fwd: invoice_v3.pdf", { style: "Scrap 22", color: "onScrap", name: "Subject" });
+    k.text(mail, "\u201CHi, just circling back on this\u2026\u201D", { style: "Scrap 22", color: "scrapMuted", name: "Body" });
+    k.vector(mail, 468, 46, [box(0, 0, 468, 10), box(0, 18, 410, 10), box(0, 36, 270, 10)], "cell", { name: "Quoted lines" });
+    k.patch(mail, { rotation: 3 });
+    const note = k.stack(before, { width: 204, fill: "note", padding: { top: 24, right: 20, bottom: 34, left: 20 }, effects: paper, name: "Sticky note", absolute: { x: 16, y: 318 } });
+    k.text(note, "Chase Acme!! (third time)", { style: "Note 30", color: "onNote", name: "Note words" });
+    k.patch(note, { rotation: -5 });
+    const over = k.stack(before, { width: "HUG", stroke: { color: "overdue", width: 6, align: "INSIDE" }, radius: 6, padding: { top: 10, right: 22, bottom: 10, left: 22 }, name: "Overdue", absolute: { x: 44, y: 530 } });
+    k.text(over, "Overdue 47 days", { style: "Stamp 52", color: "overdue", autoWidth: true, name: "Overdue words" });
+    k.patch(over, { rotation: -6 });
+    tag(before, "Before", "shade", "onShade", "Before tag");
+    const after = k.frame(stage, { x: SPLIT, y: 0, ...AFTER }, { name: "After", fill: "card", clip: true });
+    const inv = k.stack(after, { ...AFTER, padding: { top: 96, right: 36, bottom: 36, left: 40 }, gap: 20, name: "Invoice", absolute: { x: 0, y: 0 } });
+    k.text(inv, "Invoice 0042 \xB7 Acme Studio", { style: "Invoice 38", color: "onCard", name: "Invoice title" });
+    k.rect(inv, "FILL", 2, "rule", { name: "Invoice rule" });
+    k.text(inv, "$4,800", { style: "Total 150", color: "onCard", name: "Invoice total" });
+    k.rect(inv, "FILL", 2, "rule", { name: "Invoice rule" });
+    for (const [what, when] of [["Sent with a pay link", "Mon 09:02"], ["Reminder, written for you", "Tue 09:00"], ["Paid and reconciled", "Wed 14:10"]]) {
+      const row = k.stack(inv, { direction: "HORIZONTAL", gap: 16, align: "CENTER", name: "Step" });
+      k.ellipse(row, 16, "accent", { name: "Step dot" });
+      k.text(row, what, { style: "Row 26", color: "onCard", name: "Step what" });
+      k.text(row, when, { style: "Scrap 22", color: "cardMuted", autoWidth: true, name: "Step when" });
+    }
+    k.rect(inv, "FILL", 2, "rule", { name: "Invoice rule" });
+    k.text(inv, "The next one goes out Friday.", { style: "Scrap 22", color: "cardMuted", name: "Invoice foot" });
+    const paid = k.stack(after, { width: "HUG", fill: "accent", radius: 6, padding: { top: 10, right: 24, bottom: 10, left: 24 }, name: "Paid stamp", absolute: { x: 400, y: 244 } });
+    k.text(paid, "Paid", { style: "Stamp 40", color: "onAccent", autoWidth: true, name: "Paid words" });
+    k.patch(paid, { rotation: -8 });
+    tag(after, "After", "accent", "onAccent", "After tag");
+    const GRIP = 52;
+    const slider = k.frame(stage, { x: SPLIT - GRIP / 2, y: 0, width: GRIP, height: STAGE.height }, { name: "Slider" });
+    k.rect(slider, 8, STAGE.height, "accent", { name: "Slider rule", absolute: { x: GRIP / 2 - 4, y: 0 } });
+    k.ellipse(slider, GRIP, "accent", { name: "Slider grip", stroke: { color: "card", width: 5, align: "INSIDE" }, effects: [shadow(k, "shade", 0.3, 4, 12)], absolute: { x: 0, y: STAGE.height / 2 - GRIP / 2 } });
+    const chevron = (dir) => ({ closed: false, points: [{ x: 7 + 3.5 * dir, y: 0 }, { x: 7 - 3.5 * dir, y: 8 }, { x: 7 + 3.5 * dir, y: 16 }] });
+    k.vector(slider, 14, 16, [chevron(1)], "onAccent", { name: "Grip left", strokeWidth: 3.5, absolute: { x: GRIP / 2 - 17, y: STAGE.height / 2 - 8 } });
+    k.vector(slider, 14, 16, [chevron(-1)], "onAccent", { name: "Grip right", strokeWidth: 3.5, absolute: { x: GRIP / 2 + 3, y: STAGE.height / 2 - 8 } });
+    k.animate(slider, "translateX", [{ t: WIPE.at, v: AFTER.width + GRIP, ease: ease.inOut("cubic") }, { t: WIPE.at + WIPE.duration, v: 0 }]);
+    captionStrip(k, sheet, swaps[0].words[0], { style: "Caption 38", fill: "card", ink: "onCard", radius: 6, pad: [16, 26], stroke: { color: "rule", width: 2, align: "INSIDE" } });
+    k.instance(sheet, "Button", { Label: "Send your first invoice free" }, { name: "Call" });
+    k.counts(sheet, counts);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    k.variants(sheet, [...reelCuts({ post: 40, portrait: 80 }, {
+      post: (kit, id) => {
+        kit.patch(id, { itemSpacing: 16, counterAxisSpacing: 16, padding: { top: 36, right: 140, bottom: 36, left: 140 } });
+        hide(kit, id, ["Kicker", "Sun"]);
+        restyle(kit, id, "Hook", "Hook 58");
+      },
+      portrait: (kit, id) => {
+        kit.patch(id, { padding: { top: 70, right: 140, bottom: 70, left: 140 } });
+        patchAll(kit, id, "Sun", { y: 1250 });
+      }
+    }), wideCut(640, (kit, id, right) => {
+      const scale = right.width / STAGE.width;
+      redrawLines(kit, id, LEDGER);
+      patchAll(kit, id, "Margin rule", { height: 1080, x: 72 });
+      patchAll(kit, id, "Sun", { x: -330, y: 850 });
+      float(kit, id, "Stage", right.x, right.y + Math.round((right.height - STAGE.height * scale) / 2), { scale });
+    })]);
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  saas_before_after_default
+};

package/dist/chunks/chunk-2NPWUYSF.js

@@ -0,0 +1,23 @@
+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 {
+  STREET
+} from "./chunk-53SHIU4Q.js";
+import {
+  ticket
+} from "./chunk-CUKZDP6X.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/app/festival-presale-street-ticket.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var festival_presale_street_ticket_default = ticket(STREET);
+
+export {
+  festival_presale_street_ticket_default
+};

package/dist/chunks/chunk-2PYB5P2X.js

@@ -0,0 +1,415 @@
+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 {
+  sceneLengths,
+  type,
+  withSound
+} from "./chunk-6KMAJZO7.js";
+import {
+  END_CARD_PARTS,
+  captionParts,
+  column,
+  endCard,
+  rig,
+  size,
+  stage
+} from "./chunk-TS3FI7DW.js";
+import {
+  scrollingRows
+} from "./chunk-PQNDFOQT.js";
+import {
+  key
+} from "./chunk-LAPZ2X3J.js";
+import {
+  BASE,
+  LID,
+  deviceShadow,
+  devices
+} from "./chunk-WXWK2NO7.js";
+import {
+  DESKTOP_SCREEN
+} from "./chunk-2KFYCU3X.js";
+import {
+  MONO
+} from "./chunk-AXAAXHZF.js";
+import {
+  bed
+} from "./chunk-KHGNV7UQ.js";
+import {
+  glow,
+  grain
+} from "./chunk-YORIY3BT.js";
+import {
+  box
+} from "./chunk-EJLCQVQK.js";
+import {
+  into,
+  playScenes,
+  sceneSheets
+} from "./chunk-Y46APA7K.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  ease
+} from "./chunk-PLZLKHOI.js";
+import {
+  contextFrame,
+  init_scene3d,
+  sceneLayers
+} from "./chunk-NWNYARD6.js";
+import {
+  init_transform3d,
+  mul4,
+  transform4
+} from "./chunk-T2SCC6PU.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/motion3d/saas-film-cinematic-trailer.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_scene3d();
+init_transform3d();
+var B = bed("trailer", 50);
+var { beat } = B;
+var ON = [0, 16, 30, 42];
+var OPEN_AT = beat(1);
+var OPENED = beat(5);
+var LIFT = beat(1);
+var SETTLED = beat(5);
+var LAYERS = [[90, "Every project, one sidebar"], [210, "The deploy queue"], [340, "Live traffic, per second"], [470, "The figures that page you"], [600, "Rollback in one click"]];
+var scenes = [
+  { sheet: "Laptop", cues: [
+    { layer: "Stamp", preset: "typewriter", at: 100, params: { duration: 1e3 } },
+    { layer: "Title", preset: "words-in", at: beat(4), params: { duration: 700, amount: Math.round(beat(1)) } },
+    { layer: "Title note", preset: "fade-in", at: beat(9), params: { duration: 600 } }
+  ] },
+  { sheet: "Layers", transition: into("DISSOLVE", 600), cues: [
+    { layer: "Layers title", preset: "words-in", at: 300, params: { duration: 650, amount: 90 } },
+    { layer: "Leader", preset: "slide-in", at: SETTLED, params: { duration: 500, direction: "left", distance: 80 }, stagger: { delay: Math.round(beat(1)) } }
+  ] },
+  { sheet: "Wall", transition: into("DISSOLVE", 600), cues: [
+    { layer: "Plate", preset: "rise-in", at: beat(2), params: { duration: 700, distance: 70 } },
+    { layer: "Wall title", preset: "words-in", at: beat(2) + 200, params: { duration: 650, amount: 90 } }
+  ] },
+  { sheet: "End card", transition: into("DISSOLVE", 700), cues: [
+    { layer: [...END_CARD_PARTS], preset: "rise-in", at: 300, params: { duration: 700 }, stagger: { delay: 150, order: "selection" } },
+    { layer: "End button", preset: "pulse", at: beat(5), params: { duration: 700, amount: 0.06 } }
+  ] }
+];
+var LENGTHS = sceneLengths(ON.map((b) => beat(b)), B.duration, scenes);
+var SW = DESKTOP_SCREEN.width;
+var SH = DESKTOP_SCREEN.height;
+var SIDE = 230;
+var DEPLOYS = [
+  ["Add annual billing toggle", "main", "16:58", "ok"],
+  ["Fix webhook retry backoff", "main", "15:12", "ok"],
+  ["Try edge cache for /pricing", "preview/edge-cache", "14:40", "warn"],
+  ["Bump Node to 24", "main", "11:03", "ok"]
+];
+var REGIONS = [["fra1", "Frankfurt", "38 ms", 0.3], ["iad1", "Washington", "41 ms", 0.34], ["sfo1", "San Francisco", "52 ms", 0.42], ["sin1", "Singapore", "77 ms", 0.62], ["syd1", "Sydney", "96 ms", 0.78], ["gru1", "S\xE3o Paulo", "88 ms", 0.7], ["hnd1", "Tokyo", "61 ms", 0.5], ["lhr1", "London", "36 ms", 0.28]];
+var LOGS = [
+  ["16:58:02", "INFO", "build #482 started (main@9f3c2e1)", "scrFaint"],
+  ["16:58:31", "INFO", "compiled 214 routes in 28.4 s", "scrFaint"],
+  ["16:58:33", " OK ", "health check passed in fra1, iad1, sfo1", "ok"],
+  ["16:58:34", "INFO", "shifting 10% of traffic to #482", "scrFaint"],
+  ["16:59:04", " OK ", "error rate 0.02%, p95 184 ms", "ok"],
+  ["16:59:05", "INFO", "shifting 100% of traffic to #482", "scrFaint"],
+  ["16:59:36", "WARN", "sin1 p95 above 250 ms for 12 s", "warn"],
+  ["16:59:48", " OK ", "sin1 recovered, no rollback needed", "ok"],
+  ["17:00:00", " OK ", "deploy #482 is live in 8 regions", "ok"]
+];
+var saas_film_cinematic_trailer_default = defineTemplate({
+  id: "motion-saas-film-cinematic-trailer",
+  meta: {
+    name: "SaaS film: product trailer, cinematic 3D",
+    description: "A 30-second cinematic product trailer in real 3D, dark and premium: a laptop opens on your product while the camera pushes in, the UI comes apart into labelled layers, a wall of screens scrolls past the camera, and the end card lands. Four scenes dissolving into each other at 1920\xD71080, with music; the screens are components, with a picture slot for your own screenshot",
+    category: "animation",
+    tags: ["animation", "saas", "saas film", "trailer", "product trailer", "3d", "cinematic", "dark", "laptop", "exploded", "screen wall", "scenes", "music", "audio", "16:9", "launch"],
+    platforms: ["youtube", "x", "linkedin", "web", "product-hunt"],
+    formats: ["video", "ad", "intro", "demo"],
+    useCases: ["launch", "announcement", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { scenes },
+  build() {
+    const k = new Kit("SaaS film: product trailer, cinematic 3D", preset("video-1080p"));
+    k.quantizeGeometry = true;
+    k.brand(
+      {
+        background: "#05070B",
+        text: "#FFF9F0",
+        onBackground: "#C9CDD6",
+        primary: "#F2A257",
+        onPrimary: "#1A0F00",
+        accent: "#FFD3A1",
+        onAccent: "#1A0F00",
+        device: "#090B0F",
+        deviceEdge: "#C9B59B",
+        shell: "#3A3F49",
+        shellShade: "#23272E",
+        keys: "#12151A"
+      },
+      { name: "Halyard", tagline: "Deploys you can sleep through." }
+    );
+    k.palette({ scr: "#141B26", scrSide: "#0B1017", scrLine: "#2B3543", scrText: "#F1F3F6", scrFaint: "#98A1AF", ok: "#45DB98", warn: "#F2A257", onWarn: "#1A0F00", light: "#FFE3BD", cool: "#16233A", glowScreen: "#8FB4E8", rim: "#5B6676" });
+    const s = size("video-1080p");
+    const made = /* @__PURE__ */ new Set();
+    const T = (name, px, o = {}) => type(k, made, name, px, o);
+    const ui20 = () => T("UI", 20, { fontWeight: 500, leading: 1.3 });
+    const ui22 = () => T("UI strong", 22, { fontWeight: 600, leading: 1.3, tracking: -0.01 });
+    const mono18 = () => T("UI mono", 18, { fontWeight: 500, leading: 1.4, ...MONO });
+    const figure = () => T("UI figure", 46, { fontWeight: 700, leading: 1.1, tracking: -0.03, fontFeatures: { tnum: 1 } });
+    const sidebar = (parent, current, at) => {
+      const side = k.stack(parent, { width: SIDE, height: SH, fill: "scrSide", gap: 8, padding: { top: 30, right: 16, bottom: 28, left: 16 }, name: "Sidebar", ...at ? { absolute: at } : {} });
+      const mark = k.stack(side, { direction: "HORIZONTAL", gap: 12, align: "CENTER", padding: { top: 0, right: 0, bottom: 18, left: 10 }, name: "Console mark" });
+      k.ellipse(mark, 22, "warn", { name: "Mark" });
+      k.text(mark, "halyard", { style: T("UI brand", 24, { fontWeight: 700, leading: 1.2, ...MONO }), color: "scrText", autoWidth: true, name: "Console name" });
+      for (const item of ["Deploys", "Regions", "Logs", "Alerts", "Settings"]) {
+        const row = k.stack(side, { radius: 8, padding: { top: 9, right: 10, bottom: 9, left: 12 }, ...item === current ? { fill: "scrLine" } : {}, name: "Nav item" });
+        k.text(row, item, { style: item === current ? ui22() : ui20(), color: item === current ? "scrText" : "scrFaint", name: "Nav label" });
+      }
+      return side;
+    };
+    const tiles = (parent, o = {}) => {
+      const row = k.stack(parent, { direction: "HORIZONTAL", gap: 18, name: "Figures", ...o.width ? { width: o.width } : {}, ...o.at ? { absolute: o.at } : {} });
+      for (const [label, value, ink] of [["p95 latency", "184 ms", "scrText"], ["Error rate", "0.02%", "ok"], ["Deploys today", "14", "scrText"]]) {
+        const tile = k.stack(row, { gap: 4, fill: "scrSide", radius: 14, padding: { top: 18, right: 22, bottom: 20, left: 22 }, stroke: { color: "scrLine", width: 2, align: "INSIDE" }, name: "Figure tile" });
+        k.text(tile, label, { style: ui20(), color: "scrFaint", name: "Figure label" });
+        k.text(tile, value, { style: figure(), color: ink, name: "Figure value" });
+      }
+      return row;
+    };
+    const traffic = (parent, width, height, at) => {
+      const card = k.stack(parent, { width, height, fill: "scrSide", radius: 14, clip: true, stroke: { color: "scrLine", width: 2, align: "INSIDE" }, name: "Traffic", ...at ? { absolute: at } : {} });
+      const n = Math.floor((width - 40) / 16);
+      const bars = Array.from({ length: n }, (_, i) => {
+        const h = Math.round((height - 50) * (0.25 + 0.6 * Math.abs(Math.sin(i * 0.37) * Math.cos(i * 0.11 + 1)) + (i > n * 0.8 ? 0.12 : 0)));
+        return box(20 + i * 16, height - 20 - h, 9, h);
+      });
+      k.vector(card, width, height, bars, "warn", { name: "Requests", absolute: { x: 0, y: 0 } });
+      return card;
+    };
+    const queue = (parent, rows, o = {}) => {
+      const list = k.stack(parent, { gap: 10, name: "Deploy queue", ...o.width ? { width: o.width } : {}, ...o.at ? { absolute: o.at } : {} });
+      for (const [what, branch, when, state] of DEPLOYS.slice(0, rows)) {
+        const row = k.stack(list, { direction: "HORIZONTAL", gap: 16, align: "CENTER", fill: "scrSide", radius: 10, padding: { top: 14, right: 20, bottom: 14, left: 18 }, name: "Deploy" });
+        k.ellipse(row, 14, state, { name: "State" });
+        k.text(row, what, { style: ui22(), color: "scrText", name: "Deploy name" });
+        k.text(row, branch, { style: mono18(), color: "scrFaint", autoWidth: true, name: "Branch" });
+        k.text(row, when, { style: mono18(), color: "scrFaint", autoWidth: true, name: "Deployed at" });
+      }
+      return list;
+    };
+    const screen = (name, title2, description, build) => k.component(`Screen / ${name}`, { direction: "HORIZONTAL", width: SW, height: SH, fill: "scr", radius: DESKTOP_SCREEN.radius, clip: true, description }, (id) => {
+      sidebar(id, name);
+      const main = k.stack(id, { height: SH, gap: 22, padding: 36, name: "Main" });
+      const head = k.stack(main, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Head" });
+      k.text(head, title2, { style: T("UI title", 34, { fontWeight: 700, leading: 1.2, tracking: -0.025 }), color: "scrText", autoWidth: true, name: "Screen title" });
+      const env = k.stack(head, { direction: "HORIZONTAL", width: "HUG", gap: 10, align: "CENTER", fill: "scrLine", radius: 8, padding: { top: 6, right: 14, bottom: 6, left: 12 }, name: "Environment" });
+      k.ellipse(env, 12, "ok", { name: "Live dot" });
+      k.text(env, "production", { style: mono18(), color: "scrText", autoWidth: true, name: "Environment name" });
+      build(main);
+    });
+    const MAIN = SW - SIDE - 72;
+    screen("Deploys", "Deploys", "The deploy console: the figures, live traffic and the queue.", (main) => {
+      tiles(main);
+      traffic(main, MAIN, 170);
+      queue(main, 4);
+    });
+    screen("Regions", "Regions", "Latency in every region.", (main) => {
+      for (let r = 0; r < 2; r++) {
+        const row = k.stack(main, { direction: "HORIZONTAL", gap: 18, name: "Region row" });
+        for (const [code, city, ms, share] of REGIONS.slice(r * 4, r * 4 + 4)) {
+          const tile = k.stack(row, { gap: 8, fill: "scrSide", radius: 14, padding: 22, stroke: { color: "scrLine", width: 2, align: "INSIDE" }, name: "Region" });
+          k.text(tile, code, { style: T("UI brand", 24, { fontWeight: 700, leading: 1.2, ...MONO }), color: "scrText", name: "Region code" });
+          k.text(tile, city, { style: ui20(), color: "scrFaint", name: "Region city" });
+          k.text(tile, ms, { style: figure(), color: share > 0.6 ? "warn" : "scrText", name: "Region latency" });
+          const bar = k.stack(tile, { height: 10, fill: "scrLine", radius: 5, clip: true, name: "Region bar" });
+          k.rect(bar, Math.round(190 * share), 10, share > 0.6 ? "warn" : "ok", { name: "Region fill", radius: 5 });
+        }
+      }
+      queue(main, 2);
+    });
+    screen("Logs", "Logs", "The log of a deploy, line by line.", (main) => {
+      const lines = k.stack(main, { gap: 14, fill: "scrSide", radius: 14, padding: 26, stroke: { color: "scrLine", width: 2, align: "INSIDE" }, name: "Log" });
+      for (const [time, level, message, ink] of LOGS) {
+        const line = k.stack(lines, { direction: "HORIZONTAL", gap: 18, name: "Log line" });
+        k.text(line, time, { style: mono18(), color: "scrFaint", autoWidth: true, name: "Log time" });
+        k.text(line, level, { style: mono18(), color: ink, autoWidth: true, name: "Log level" });
+        k.text(line, message, { style: mono18(), color: "scrText", name: "Log message" });
+      }
+      tiles(main);
+    });
+    k.component("Screen / Your screenshot", { width: SW, height: SH, fill: "scr", radius: DESKTOP_SCREEN.radius, clip: true, description: "A picture slot the size of the laptop\u2019s screen: swap a display\u2019s Screen for this, and drop your screenshot on it." }, (id) => {
+      k.photo(id, SW, SH, { ground: "scrSide", name: "Your screenshot" });
+    });
+    devices(k, ["Laptop lid", "Laptop lid back", "Laptop base"], { laptop: "Screen / Deploys" });
+    const lit = (sheet, o) => {
+      k.rect(sheet, s.W, s.H, "background", { name: "Grain", effects: grain(0.07, 2, 23), absolute: { x: 0, y: 0 } });
+      glow(k, sheet, { x: o.x, y: o.y, w: o.pool * 2.1, h: o.pool * 1.3, role: "cool", alpha: 0.5, name: "Haze" });
+      glow(k, sheet, { x: o.x, y: o.y, w: o.pool, h: o.pool * 0.62, role: "light", alpha: 0.46, name: "Key light" });
+      if (o.shafts) for (const [x0, x1, a] of [[-0.34, -0.12, 0.1], [-0.08, 0.1, 0.14], [0.16, 0.36, 0.09]]) {
+        const top = o.x + 260, w = 900;
+        k.vector(sheet, s.W, o.horizon, [{ closed: true, points: [{ x: top - 30, y: 0 }, { x: top + 30, y: 0 }, { x: o.x + x1 * w, y: o.horizon }, { x: o.x + x0 * w, y: o.horizon }] }], [k.gradient({ from: "light", to: "light", fromOpacity: a, toOpacity: 0.015 })], { name: "Light shaft", absolute: { x: 0, y: 0 } });
+      }
+      k.rect(sheet, s.W, s.H - o.horizon, [k.gradient({ from: "light", to: "light", fromOpacity: 0.13, toOpacity: 0 })], { name: "Floor", absolute: { x: 0, y: o.horizon } });
+      glow(k, sheet, { x: o.x, y: o.horizon + 30, w: o.pool * 1.5, h: 150, role: "light", alpha: 0.3, name: "Floor pool" });
+      k.rect(sheet, s.W, 2, k.tint("text", 0.3), { name: "Horizon", absolute: { x: 0, y: o.horizon } });
+    };
+    const title = (px) => T("Title", px, { fontWeight: 800, leading: 0.98, tracking: -0.045 });
+    const lede = T("Lede", 34, { fontWeight: 500, leading: 1.35, tracking: -0.01 });
+    const sheets = sceneSheets(k, "video-1080p", scenes.map((x) => x.sheet));
+    const [open, layers, wallSheet, end] = sheets;
+    {
+      const CX = s.W * 0.665, HINGE = s.H * 0.7;
+      lit(open, { x: CX, y: HINGE - 250, pool: 1200, horizon: Math.round(HINGE + 40), shafts: true });
+      const halo = glow(k, open, { x: CX, y: HINGE - 300, w: 1300, h: 900, role: "glowScreen", alpha: 0.42, name: "Screen glow" });
+      const scene = stage(k, open, s, { duration: LENGTHS[0], fps: 30, perspective: 2400 });
+      const laptop = rig(k, scene, s, "Laptop", LID.width, LID.height, CX, HINGE - LID.height / 2);
+      k.patch(laptop, { scaleX: 0.64, scaleY: 0.64, rotateX: -13, rotateY: -14, anchorY: 1 });
+      const deck = k.instance(laptop, "Laptop base", {}, { name: "Keyboard deck" });
+      k.patch(deck, { x: Math.round((LID.width - BASE.width) / 2), y: LID.height, anchorY: 0, rotateX: 90, effects: [deviceShadow(0.7, 60, 110)] });
+      const spill = k.rect(laptop, BASE.width - 120, 420, [k.gradient({ from: "glowScreen", to: "glowScreen", fromOpacity: 0.5, toOpacity: 0 })], { name: "Screen spill" });
+      k.patch(spill, { x: Math.round((LID.width - BASE.width) / 2) + 60, y: LID.height, anchorY: 0, rotateX: 90, z: 3 });
+      const hinge = k.group(laptop, { x: 0, y: 0, width: LID.width, height: LID.height }, { name: "Hinge" });
+      k.patch(hinge, { anchorY: 1, rotateX: 10 });
+      const display = k.instance(hinge, "Laptop lid", {}, { name: "Display" });
+      k.patch(display, { z: 2 });
+      const off = k.rect(hinge, SW, SH, "device", { radius: DESKTOP_SCREEN.radius, name: "Screen off" });
+      k.patch(off, { x: (LID.width - SW) / 2, y: 24, z: 4, opacity: 0 });
+      const outside = k.instance(hinge, "Laptop lid back", {}, { name: "Lid outside" });
+      k.patch(outside, { z: -2, rotateY: 180 });
+      const wake = [OPEN_AT + 900, OPENED + 300];
+      key(k, hinge, "rotateX", [[OPEN_AT, -90, ease.out("expo")], [OPENED, 10]]);
+      key(k, off, "opacity", [[0, 1, ease.hold], [wake[0], 1, ease.out("cubic")], [wake[1], 0]]);
+      key(k, spill, "opacity", [[0, 0, ease.hold], [wake[0], 0, ease.out("cubic")], [wake[1], 1]]);
+      key(k, halo, "opacity", [[0, 0, ease.hold], [wake[0], 0, ease.out("cubic")], [wake[1], 1]]);
+      key(k, laptop, "rotateX", [[0, -3, ease.inOut("cubic")], [OPENED + 600, -13, ease.inOut("sine")], [LENGTHS[0], -16]]);
+      key(k, laptop, "rotateY", [[0, 12, ease.inOut("cubic")], [OPENED + 600, -8, ease.inOut("sine")], [LENGTHS[0], -18]]);
+      key(k, scene, "scene3d.camera.z", [[0, 320, ease.inOut("cubic")], [OPENED + 600, 60, ease.inOut("sine")], [LENGTHS[0], -160]]);
+      const words = k.stack(open, { width: 640, gap: 26, name: "Title card", absolute: { x: 110, y: 250 } });
+      k.text(words, "FRIDAY 16:58 \xB7 main to production", { style: T("Stamp", 26, { fontWeight: 700, leading: 1.3, tracking: 0.08, ...MONO }), color: "onBackground", name: "Stamp" });
+      k.text(words, "Ship on Friday. Sleep on Friday.", { style: title(128), color: "text", name: "Title" });
+      k.text(words, "Halyard rolls out in stages, watches every region, and rolls back on its own.", { style: lede, color: "onBackground", name: "Title note", width: 560 });
+    }
+    {
+      const CX = s.W * 0.66, CY = s.H * 0.64;
+      lit(layers, { x: CX, y: CY - 60, pool: 1300, horizon: 930 });
+      const scene = stage(k, layers, s, { duration: LENGTHS[1], fps: 30, perspective: 3e3 });
+      const iso = rig(k, scene, s, "Isometric", SW, SH, CX, CY);
+      k.patch(iso, { rotateX: 57, scaleX: 0.86, scaleY: 0.86 });
+      const turn = k.group(iso, { x: 0, y: 0, width: SW, height: SH }, { name: "Turn" });
+      k.patch(turn, { rotation: -34 });
+      const X = SIDE + 36;
+      const edge = { color: "rim", width: 2, align: "INSIDE" };
+      k.rect(turn, SW, SH, "scr", { radius: 16, name: "Window", stroke: edge, effects: [deviceShadow(0.7, 50, 110)] });
+      const side = sidebar(turn, "Deploys");
+      k.patch(side, { x: 0, y: 0, cornerRadius: 16 });
+      const q = queue(turn, 3, { width: MAIN });
+      k.patch(q, { x: X, y: 500 });
+      const tr = traffic(turn, MAIN, 190);
+      k.patch(tr, { x: X, y: 250 });
+      const ti = tiles(turn, { width: MAIN });
+      k.patch(ti, { x: X, y: 70 });
+      const toast = k.stack(turn, { direction: "HORIZONTAL", width: "HUG", gap: 12, align: "CENTER", fill: "warn", radius: 12, padding: { top: 14, right: 22, bottom: 14, left: 18 }, name: "Rollback toast" });
+      k.ellipse(toast, 14, "onWarn", { name: "Toast dot" });
+      k.text(toast, "Rolled back to #481 in 4 s", { style: ui22(), color: "onWarn", autoWidth: true, name: "Toast words" });
+      k.patch(toast, { x: X + 40, y: SH - 110 });
+      const parts = [side, q, tr, ti, toast];
+      parts.forEach((id, i) => {
+        const z = LAYERS[i][0];
+        k.patch(id, { z, effects: [deviceShadow(0.55, 22, 46)], strokes: k.node(k.named(turn, "Window")[0]).strokes });
+        key(k, id, "z", [[LIFT + i * 200, 0, ease.back(1.2)], [LIFT + 1400 + i * 200, z]]);
+      });
+      key(k, turn, "rotation", [[0, -78, ease.inOut("cubic")], [SETTLED - 200, -34]]);
+      key(k, iso, "rotateX", [[0, 68, ease.inOut("cubic")], [SETTLED - 200, 57]]);
+      const doc = k.finish();
+      const frame = contextFrame(doc.nodes[scene]);
+      const cards = sceneLayers(doc.nodes, scene);
+      const seen = (id, x, y) => {
+        const card = cards.find((l) => l.id === id);
+        const p = transform4(mul4(frame.projection, mul4(frame.view, card.model)), x, y, 0);
+        return { x: p[0] / p[3], y: p[1] / p[3] };
+      };
+      const LX = 110;
+      const style = T("Leader", 36, { fontWeight: 700, leading: 1.2, tracking: -0.015 });
+      const ends = parts.map((id) => seen(id, 0, k.node(id).height / 2)).map((p, i) => ({ ...p, i })).sort((a, b) => a.y - b.y);
+      let last = 250;
+      for (const e of ends) {
+        const y = Math.max(last + 62, Math.min(820, Math.round(e.y)));
+        last = y;
+        const row = k.stack(layers, { direction: "HORIZONTAL", width: "HUG", gap: 16, align: "CENTER", name: "Leader", absolute: { x: LX, y: y - 22 } });
+        const words = k.text(row, LAYERS[e.i][1], { style, color: "text", autoWidth: true, name: "Leader name" });
+        const rule = k.rect(row, 20, 4, "primary", { name: "Leader rule", radius: 2 });
+        k.ellipse(row, 14, "primary", { name: "Leader end" });
+        k.patch(rule, { width: Math.max(40, Math.round(e.x - LX - k.finish().nodes[words].width - 16 * 2 - 14)) });
+      }
+      k.text(layers, "Nothing hidden. One layer deep.", { style: title(92), color: "text", width: 900, name: "Layers title", absolute: { x: LX, y: 70 } });
+    }
+    {
+      lit(wallSheet, { x: s.W * 0.6, y: s.H * 0.55, pool: 1700, horizon: 1200 });
+      const scene = stage(k, wallSheet, s, { duration: LENGTHS[2], fps: 30, perspective: 1500 });
+      const SCREENS = ["Screen / Deploys", "Screen / Regions", "Screen / Logs"];
+      const rows = 4, perRow = 9, gap = 90;
+      const wall = rig(k, scene, s, "Wall", SW, SH, s.W * 0.56, s.H * 0.5);
+      k.patch(wall, { scaleX: 0.5, scaleY: 0.5, rotateX: 48 });
+      const turn = k.group(wall, { x: 0, y: 0, width: SW, height: SH }, { name: "Wall turn" });
+      k.patch(turn, { rotation: -14 });
+      const pitch = SW + gap;
+      scrollingRows(k, turn, {
+        rows,
+        perRow,
+        card: DESKTOP_SCREEN,
+        gap,
+        offset: true,
+        wrap: SCREENS.length,
+        x: () => Math.round(-(perRow * pitch) / 2 + SW / 2),
+        y: (r) => Math.round((r - (rows - 1) / 2) * (SH + gap)),
+        rate: (r) => (r % 2 ? 1 : -1) * (260 + r % 3 * 90),
+        make: (row, r, i) => {
+          const card = k.instance(row, SCREENS[(i + r) % SCREENS.length], {}, { name: `Screen ${r + 1}.${i + 1}` });
+          k.patch(card, { effects: [deviceShadow(0.6, 30, 70)] });
+          return card;
+        }
+      });
+      key(k, wall, "rotateX", [[0, 58, ease.out("expo")], [1500, 48, ease.inOut("sine")], [LENGTHS[2], 44]]);
+      key(k, scene, "scene3d.camera.x", [[0, -620, ease.inOut("sine")], [LENGTHS[2], 620]]);
+      key(k, scene, "scene3d.camera.z", [[0, 500, ease.out("cubic")], [LENGTHS[2], -200]]);
+      k.rect(wallSheet, s.W, 460, [k.gradient({ from: "background", to: "background", fromOpacity: 0.8, toOpacity: 0 })], { name: "Distance", absolute: { x: 0, y: 0 } });
+      const plate = k.stack(wallSheet, { width: 860, gap: 22, fill: "background", radius: 28, padding: { top: 44, right: 52, bottom: 48, left: 52 }, stroke: { color: "rim", width: 2, align: "INSIDE" }, effects: [deviceShadow(0.7, 30, 80)], name: "Plate", absolute: { x: 110, y: 0 } });
+      k.text(plate, "Every deploy. Every region. Every log line.", { style: title(92), color: "text", name: "Wall title" });
+      k.text(plate, "Preview builds, staged rollouts and one-click rollback, for teams of one to fifty.", { style: lede, color: "onBackground", name: "Wall note" });
+      k.patch(plate, { y: Math.round(s.H - 96 - k.finish().nodes[plate].height) });
+    }
+    {
+      k.flowSheet(end, 0, 0, "background", "CENTER", "CENTER");
+      k.patch(end, { clipsContent: true });
+      k.timeline(end, { duration: LENGTHS[3], fps: 30 });
+      lit(end, { x: s.W / 2, y: 1040, pool: 1200, horizon: 900, shafts: false });
+      const col = column(s, 200);
+      const bigger = { ...s, u: 1.4 };
+      captionParts(k, bigger, { cta: "Start free at halyard.example" });
+      const card = endCard(k, end, bigger, { cta: "Start free at halyard.example", y: 0, width: col.width });
+      k.patch(card, { y: Math.max(70, Math.round((880 - k.finish().nodes[card].height) / 2)) });
+    }
+    playScenes(k, "comp-cinematic-trailer", "Product trailer, cinematic", sheets, scenes, "background");
+    k.setCover(open);
+    return withSound(k.finish(), { "comp-cinematic-trailer": B.audio });
+  }
+});
+
+export {
+  saas_film_cinematic_trailer_default
+};