@popcraft/kit 0.24.3 → 0.26.0

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

@@ -0,0 +1,256 @@
+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-MZODLFLE.js";
+import {
+  MONO
+} from "./chunk-X23ZWFW2.js";
+import {
+  bed
+} from "./chunk-52GCV7N5.js";
+import {
+  hardShadow
+} from "./chunk-HVK5T4I5.js";
+import {
+  logoBadge,
+  pill
+} from "./chunk-EK5CFFJO.js";
+import {
+  box
+} from "./chunk-BNVLVZUT.js";
+import {
+  into,
+  playScenes,
+  sceneSheets
+} from "./chunk-3HDJLLZM.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit,
+  preset
+} from "./chunk-T3SGRYUX.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/scenes/saas-film-bright-trailer.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var B = bed("tension", 44);
+var { beat } = B;
+var ON = [0, 4, 8, 12, 16, 20, 24, 30, 36];
+var NOTES = ["Launch moves to 14 November, after the audit.", "Pricing needs the annual toggle before then.", "Marek owns the migration script. Ines reviews."];
+var TASKS = [["Move the launch date to 14 Nov", "Ines", "Fri"], ["Add the annual toggle to pricing", "Jo", "Mon"], ["Write the migration script", "Marek", "Wed"], ["Send the recap to Parcelhaus", "Auto", "Now"]];
+var FILED = [["Tracker", "4 issues created", "red"], ["Wiki", "Notes page published", "lime"], ["Team chat", "Recap posted in #parcelhaus", "sky"]];
+var STICKIES = [[0, 50, -6, "lime", "Write up the call"], [250, 0, 5, "sky", "Who took notes?"], [500, 70, -3, "card", "Chase Marek"], [120, 290, 4, "card", "Send the recap"], [390, 310, -5, "lime", "Update the tracker"]];
+var scenes = [
+  { sheet: "The call ends", cues: [
+    { layer: "Brand row", preset: "fade-in", at: 0, params: { duration: 250 } },
+    { layer: "Line one", preset: "words-in", at: 0, params: { duration: 420, amount: 70 } },
+    { layer: "Call tile", preset: "pop-in", at: 0, params: { duration: 320 } },
+    { layer: "Hang up", preset: "pulse", at: beat(1), params: { duration: 400, amount: 0.14 } },
+    { layer: "Call tile", preset: "drop-out", at: beat(2), params: { duration: 380 } }
+  ] },
+  { sheet: "The work starts", cues: [
+    { layer: "Line two", preset: "words-in", at: 0, params: { duration: 420, amount: 70 } },
+    { layer: "Sticky", preset: "drop-in", at: 60, params: { duration: 360 }, stagger: { delay: 150 } }
+  ] },
+  { sheet: "Who writes it up", cues: [
+    { layer: "Line three", preset: "words-in", at: 0, params: { duration: 420, amount: 70 } },
+    { layer: "Blank page", preset: "slide-in", at: 0, params: { duration: 420, direction: "right" } },
+    { layer: "Caret", preset: "flash", at: beat(1), params: { duration: 900 } },
+    { layer: "Caret", preset: "flash", at: beat(3) - 200, params: { duration: 600 } }
+  ] },
+  { sheet: "Notes", cues: [
+    { layer: "Notes words", preset: "slide-in", at: 0, params: { duration: 420, direction: "left" } },
+    { layer: "Notes card", preset: "rise-in", at: 0, params: { duration: 480 } },
+    { layer: "Wave", preset: "wipe-in", at: beat(0.5), params: { duration: beat(1.5), direction: "right" } },
+    { layer: "Note", preset: "rise-in", at: beat(1.5), params: { duration: 380 }, stagger: { delay: Math.round(beat(1)) } }
+  ] },
+  { sheet: "Tasks", cues: [
+    { layer: "Tasks words", preset: "slide-in", at: 0, params: { duration: 420, direction: "left" } },
+    { layer: "Tasks card", preset: "rise-in", at: 0, params: { duration: 480 } },
+    { layer: "Task", preset: "slide-in", at: beat(0.5), params: { duration: 380, direction: "right" }, stagger: { delay: Math.round(beat(0.5)) } },
+    { layer: "Tick", preset: "pop-in", at: beat(2.5), params: { duration: 260 }, stagger: { delay: Math.round(beat(0.5)) } }
+  ] },
+  { sheet: "Filed", transition: into("WHIP_RIGHT", 300), cues: [
+    { layer: "Filed words", preset: "words-in", at: 200, params: { duration: 420, amount: 60 } },
+    { layer: "Destination", preset: "pop-in", at: beat(1), params: { duration: 360 }, stagger: { delay: Math.round(beat(1)) } },
+    { layer: "Filed tick", preset: "pop-in", at: beat(1.5), params: { duration: 260 }, stagger: { delay: Math.round(beat(1)) } }
+  ] },
+  { sheet: "Hours back", transition: into("ZOOM_THROUGH", 320), cues: [
+    { layer: "Hours figure", preset: "pop-in", at: 150, params: { duration: 420 } },
+    { layer: "Hours label", preset: "rise-in", at: beat(1.5), params: { duration: 420 } },
+    { layer: "Clock", preset: "scale-in", at: 100, params: { duration: 700 } }
+  ], counts: [{ layer: "Hours figure", at: 150, duration: beat(2), counter: { from: 0, to: 11, suffix: " hours" } }] },
+  { sheet: "No more", cues: [
+    { layer: ["No one", "No two", "No three"], preset: "slide-in", at: 0, params: { duration: 300, direction: "left" }, stagger: { delay: Math.round(beat(1)), order: "selection" } },
+    { layer: "Marker", preset: "wipe-in", at: 150, params: { duration: 260, direction: "right" }, stagger: { delay: Math.round(beat(1)) } }
+  ] },
+  { sheet: "End card", cues: [
+    { layer: "End logo", preset: "pop-in", at: 0, params: { duration: 380 } },
+    { layer: "End name", preset: "letters-in", at: 80, params: { duration: 420, amount: 30 } },
+    { layer: "End line", preset: "rise-in", at: beat(1), params: { duration: 420 } },
+    { layer: "End button", preset: "pop-in", at: beat(2), params: { duration: 380 } },
+    { layer: "End button", preset: "pulse", at: beat(3), params: { duration: 480, amount: 0.07 } },
+    { layer: "End button", preset: "pulse", at: beat(5), params: { duration: 480, amount: 0.07 } },
+    { layer: "Burst", preset: "scale-in", at: 0, params: { duration: 600 } }
+  ] }
+];
+var LENGTHS = sceneLengths(ON.map((b) => beat(b)), B.duration, scenes);
+var GROUNDS = ["paper", "primary", "ink", "paper", "accent", "paper", "primary", "paper", "ink"];
+var PAD = { top: 72, right: 110, bottom: 72, left: 110 };
+var CW = 1920 - PAD.left - PAD.right;
+var CH = 1080 - PAD.top - PAD.bottom;
+var tick = (s) => ({ closed: false, points: [{ x: s * 0.18, y: s * 0.52 }, { x: s * 0.42, y: s * 0.76 }, { x: s * 0.84, y: s * 0.26 }] });
+var saas_film_bright_trailer_default = defineTemplate({
+  id: "motion-saas-film-bright-trailer",
+  meta: {
+    name: "SaaS film: product trailer, bright and fast",
+    description: "A 22-second product trailer on a light ground: black poster type, vermilion and lime, nine scenes cut hard on the beat. Three kinetic lines set up the problem, three product UI cards (notes, tasks, where they are filed) show the answer, a figure counts, and the end card pops. 1920\xD71080, with music",
+    category: "animation",
+    tags: ["animation", "saas", "saas film", "trailer", "product trailer", "kinetic type", "fast cuts", "bright", "light", "ui cards", "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, bright and fast", preset("video-1080p"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#FBF8F1", text: "#0C0C0C", onPaper: "#D62E12", primary: "#FF4127", onPrimary: "#170400", accent: "#C6F135", onAccent: "#131A00", card: "#FFFFFF", onCard: "#0C0C0C" },
+      { name: "Clipnote" }
+    );
+    k.palette({ ink: "#0C0C0C", onInk: "#FBF8F1", lime: "#C6F135", red: "#FF4127", sky: "#BFE3FF", faint: "#5E5E58", line: "#E7E2D6", field: "#F4F0E6", done: "#12A150", onDone: "#FFFFFF" });
+    const made = /* @__PURE__ */ new Set();
+    const T = (name, px, o = {}) => type(k, made, name, px, o);
+    const giant = (px) => T("Giant", px, { fontWeight: 900, leading: 0.9, tracking: -0.055 });
+    const big = T("Big", 150, { fontWeight: 900, leading: 0.96, tracking: -0.05 });
+    const title = T("Card title", 38, { fontWeight: 800, tracking: -0.02, leading: 1.2 });
+    const line = T("Card line", 34, { fontWeight: 500, leading: 1.3, tracking: -0.01 });
+    const strong = T("Card strong", 30, { fontWeight: 700, leading: 1.3, tracking: -0.015 });
+    const small = T("Card small", 22, { fontWeight: 600, leading: 1.3 });
+    const label = T("Label", 20, { fontWeight: 800, tracking: 0.14, leading: 1.2 });
+    const mono = T("Mono", 24, { fontWeight: 700, leading: 1.2, ...MONO });
+    const edge = { color: "ink", width: 4, align: "INSIDE" };
+    pill(k, "Button", { fill: "accent", ink: "onAccent", style: T("Button", 44, { fontWeight: 900, tracking: -0.03, leading: 1.15 }), label: "clipnote.example", pad: [24, 44], radius: 20 });
+    pill(k, "Who", { fill: "sky", ink: "ink", style: small, label: "Ines", pad: [6, 14], radius: 8 });
+    const sheets = sceneSheets(k, "video-1080p", scenes.map((s) => s.sheet));
+    sheets.forEach((id, i) => {
+      k.flowSheet(id, 28, PAD, GROUNDS[i], "MAX", "MIN");
+      k.timeline(id, { duration: LENGTHS[i], fps: 30 });
+    });
+    const [ends, starts, who, notes, tasks, filed, hours, noMore, end] = sheets;
+    const card = (parent, name, w, h, at) => k.stack(parent, { width: w, height: h, gap: 26, fill: "card", radius: 28, padding: 40, stroke: edge, effects: [hardShadow(k, "ink", 14, 14)], name, ...at ? { absolute: at } : {} });
+    const brand = k.stack(ends, { direction: "HORIZONTAL", gap: 16, align: "CENTER", name: "Brand row", absolute: { x: PAD.left, y: PAD.top } });
+    logoBadge(k, brand, { fill: "primary", size: 40, radius: 14 });
+    k.text(brand, "{{brand.name}}", { style: T("Brand", 40, { fontWeight: 900, tracking: -0.03 }), color: "text", autoWidth: true, name: "Brand name" });
+    const call = card(ends, "Call tile", 760, "HUG", { x: 1920 - PAD.right - 770, y: PAD.top });
+    const faces = k.stack(call, { direction: "HORIZONTAL", gap: 16, name: "Faces" });
+    for (const [fill, dot] of [["sky", "ink"], ["lime", "ink"], ["field", "red"]]) {
+      const face = k.stack(faces, { height: 190, fill, radius: 18, justify: "CENTER", align: "CENTER", name: "Face" });
+      k.ellipse(face, 84, dot, { name: "Head" });
+    }
+    const bar = k.stack(call, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Call bar" });
+    k.text(bar, "Kickoff \xB7 42:07", { style: mono, color: "onCard", autoWidth: true, name: "Call time" });
+    const hang = k.stack(bar, { width: "HUG", fill: "red", radius: 14, padding: { top: 10, right: 22, bottom: 10, left: 22 }, name: "Hang up" });
+    k.text(hang, "Leave", { style: small, color: "ink", autoWidth: true, name: "Hang up label" });
+    k.text(ends, "The call ends.", { style: giant(280), color: "text", name: "Line one", width: 1300 });
+    const pile = k.stack(starts, { width: 780, height: 560, name: "Pile", absolute: { x: 1920 - PAD.right - 800, y: 60 } });
+    for (const [x, y, turn, fill, words] of STICKIES) {
+      const note = k.stack(pile, { width: 270, height: 220, fill, padding: 24, stroke: edge, effects: [hardShadow(k, "ink", 10, 10)], name: "Sticky", absolute: { x, y } });
+      k.text(note, words, { style: strong, color: "ink", name: "Sticky words" });
+      k.patch(note, { rotation: turn });
+    }
+    k.text(starts, "The work starts.", { style: giant(280), color: "onPrimary", name: "Line two", width: 1200 });
+    const page = card(who, "Blank page", 560, 720, { x: 1920 - PAD.right - 560, y: 180 });
+    k.text(page, "Untitled notes", { style: title, color: "faint", name: "Page title" });
+    k.rect(page, "FILL", 4, "line", { name: "Page rule" });
+    k.rect(page, 6, 56, "red", { name: "Caret" });
+    for (let i = 0; i < 6; i++) k.rect(page, "FILL", 4, "line", { name: "Page line" });
+    k.patch(page, { itemSpacing: 44 });
+    k.text(who, "Who writes it up?", { style: giant(250), color: "onInk", name: "Line three", width: 1150 });
+    const product = (sheet, name, lines, ink) => {
+      const row = k.stack(sheet, { direction: "HORIZONTAL", gap: 70, align: "CENTER", height: CH, name: "Layout" });
+      const words = k.stack(row, { width: 720, gap: 0, name: `${name} words` });
+      for (const [chars, color] of lines) k.text(words, chars, { style: big, color: color || ink, name: "Words" });
+      return card(row, `${name} card`, CW - 720 - 70, "HUG");
+    };
+    const notesCard = product(notes, "Notes", [["Clipnote", "onPaper"], ["writes the notes.", ""]], "text");
+    const head = k.stack(notesCard, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Card head" });
+    const rec = k.stack(head, { direction: "HORIZONTAL", width: "HUG", gap: 14, align: "CENTER", name: "Recording" });
+    k.ellipse(rec, 20, "red", { name: "Rec dot" });
+    k.text(rec, "Kickoff with Parcelhaus", { style: title, color: "onCard", autoWidth: true, name: "Call name" });
+    k.text(head, "42 min", { style: mono, color: "faint", autoWidth: true, name: "Call length" });
+    const wave = k.stack(notesCard, { height: 110, fill: "field", radius: 14, clip: true, name: "Wave" });
+    const WW = CW - 720 - 70 - 80;
+    k.vector(wave, WW, 110, Array.from({ length: Math.floor((WW - 24) / 14) }, (_, i) => {
+      const h = 12 + Math.round(52 * Math.abs(Math.sin(i * 0.9) * Math.cos(i * 0.31)));
+      return box(16 + i * 14, 55 - h * 0.75, 7, h * 1.5);
+    }), "ink", { name: "Wave bars", absolute: { x: 0, y: 0 } });
+    k.text(notesCard, "SUMMARY", { style: label, color: "faint", name: "Summary label" });
+    for (const n of NOTES) {
+      const item = k.stack(notesCard, { direction: "HORIZONTAL", gap: 16, name: "Note" });
+      k.rect(item, 16, 16, "red", { name: "Bullet", radius: 4 });
+      k.text(item, n, { style: line, color: "onCard", name: "Note words" });
+    }
+    const tasksCard = product(tasks, "Tasks", [["Pulls out", ""], ["the tasks.", ""]], "onAccent");
+    k.text(tasksCard, "4 tasks found", { style: title, color: "onCard", name: "Tasks title" });
+    for (const [task, owner, due] of TASKS) {
+      const item = k.stack(tasksCard, { direction: "HORIZONTAL", gap: 18, align: "CENTER", fill: "field", radius: 14, padding: { top: 22, right: 22, bottom: 22, left: 20 }, name: "Task" });
+      const check = k.stack(item, { width: 40, height: 40, fill: "done", radius: 10, name: "Check" });
+      k.vector(check, 40, 40, [tick(40)], "onDone", { name: "Tick", strokeWidth: 5, absolute: { x: 0, y: 0 } });
+      k.text(item, task, { style: strong, color: "ink", name: "Task words" });
+      k.instance(item, "Who", { Label: owner }, { name: "Owner" });
+      k.text(item, due, { style: mono, color: "faint", autoWidth: true, name: "Due" });
+    }
+    k.patch(filed, { primaryAxisAlignItems: "CENTER", itemSpacing: 56 });
+    k.text(filed, "Files them where you work.", { style: giant(170), color: "text", name: "Filed words" });
+    const places = k.stack(filed, { direction: "HORIZONTAL", gap: 34, name: "Destinations" });
+    for (const [name, what, fill] of FILED) {
+      const d = card(places, "Destination", (CW - 68) / 3, "HUG");
+      const top = k.stack(d, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Destination top" });
+      const icon = k.stack(top, { width: 120, height: 120, fill, radius: 22, stroke: edge, justify: "CENTER", align: "CENTER", name: "Icon" });
+      k.rect(icon, 52, 52, "ink", { name: "Glyph", radius: name === "Team chat" ? 18 : name === "Wiki" ? 4 : 10 });
+      const ok = k.stack(top, { width: 64, height: 64, fill: "done", radius: 32, name: "Filed tick" });
+      k.vector(ok, 64, 64, [tick(64)], "onDone", { name: "Filed mark", strokeWidth: 6, absolute: { x: 0, y: 0 } });
+      k.text(d, name, { style: T("Destination", 56, { fontWeight: 900, tracking: -0.035, leading: 1.1 }), color: "onCard", name: "Destination name" });
+      k.text(d, what, { style: line, color: "faint", name: "Destination line" });
+    }
+    k.ellipse(hours, 620, k.tint("onPrimary", 1e-3), { name: "Clock", stroke: { color: "onPrimary", width: 26, align: "INSIDE" }, absolute: { x: 1920 - 620 - 40, y: -140 }, opacity: 0.3 });
+    k.text(hours, "11 hours", { style: giant(360), color: "onPrimary", name: "Hours figure" });
+    k.text(hours, "back every week, for each person on the call.", { style: T("Lede", 64, { fontWeight: 700, tracking: -0.03, leading: 1.15 }), color: "onPrimary", name: "Hours label" });
+    k.patch(noMore, { itemSpacing: 0, primaryAxisAlignItems: "CENTER" });
+    [["No one", "No notes."], ["No two", "No recap."], ["No three", "No chasing."]].forEach(([name, words], i) => {
+      const row = k.stack(noMore, { width: "HUG", name });
+      const marker = k.rect(row, 10, 86, "accent", { name: "Marker", absolute: { x: -14, y: 150 } });
+      const line3 = k.text(row, words, { style: giant(290), color: i === 2 ? "onPaper" : "text", autoWidth: true, name: "No words" });
+      k.patch(marker, { width: Math.round(k.finish().nodes[line3].width) + 28 });
+    });
+    k.patch(end, { counterAxisAlignItems: "CENTER", primaryAxisAlignItems: "CENTER", itemSpacing: 30 });
+    const burst = k.star(end, 1500, "lime", { name: "Burst", absolute: { x: 210, y: -210 }, opacity: 0.1 });
+    k.patch(burst, { pointCount: 16, innerRadius: 0.82, rotation: 0 });
+    logoBadge(k, end, { fill: "primary", size: 96, radius: 34, name: "End logo" });
+    k.text(end, "{{brand.name}}", { style: T("End", 200, { fontWeight: 900, leading: 0.9, tracking: -0.06, textAlign: "CENTER" }), color: "onInk", name: "End name" });
+    k.text(end, "Try it on your next call.", { style: T("End line", 60, { fontWeight: 700, tracking: -0.03, leading: 1.15, textAlign: "CENTER" }), color: "onInk", name: "End line" });
+    k.instance(end, "Button", { Label: "clipnote.example" }, { name: "End button" });
+    playScenes(k, "comp-bright-trailer", "Product trailer, bright and fast", sheets, scenes, "paper");
+    k.setCover(ends);
+    return withSound(k.finish(), { "comp-bright-trailer": B.audio });
+  }
+});
+
+export {
+  saas_film_bright_trailer_default
+};

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

@@ -0,0 +1,179 @@
+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 {
+  arrowPath,
+  gridPaths
+} from "./chunk-YNOCYFZ4.js";
+import {
+  MONO
+} from "./chunk-X23ZWFW2.js";
+import {
+  pattern
+} from "./chunk-QLV6445V.js";
+import {
+  hardShadow
+} from "./chunk-HVK5T4I5.js";
+import {
+  pill
+} from "./chunk-EK5CFFJO.js";
+import {
+  box
+} from "./chunk-BNVLVZUT.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit,
+  preset
+} from "./chunk-T3SGRYUX.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/social/saas-kit-youtube-thumbs.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var THUMBS = [
+  { name: "1 Demo", ground: "primary", ink: "onPrimary", lines: ["CRM in", "9 minutes"], mark: 1, style: "Title 140", label: "Full demo \xB7 no cuts", length: "9:04", face: "right", ui: "board" },
+  { name: "2 Comparison", ground: "paper", ink: "text", lines: ["Sheets", "vs a CRM"], mark: 0, style: "Title 140", label: "We ran both for 30 days", length: "14:20", face: "left", ui: "table" },
+  { name: "3 Tutorial", ground: "secondary", ink: "onSecondary", lines: ["3 fixes", "2\xD7 replies"], mark: 1, style: "Title 140", label: "Tutorial \xB7 episode 7", length: "6:41", face: "right", ui: "settings" }
+];
+var FACE = { w: 370, h: 560 };
+var grid = (w, h) => gridPaths(w, h, 80, 2);
+function presenter(k, photo, w, h) {
+  const cx = w / 2, rx = w * 0.2, ry = w * 0.235, cy = h * 0.38, top = cy + ry * 1.3;
+  const at = { absolute: { x: 0, y: 0 } };
+  const ring = (n, fx, fy, from = 0, to = Math.PI * 2) => Array.from({ length: n }, (_, i) => {
+    const a = from + (to - from) * i / (n - 1);
+    return { x: cx + rx * fx * Math.sin(a), y: cy - ry * fy * Math.cos(a) };
+  });
+  k.ellipse(photo, Math.round(w * 0.92), "slotLight", { name: "Backdrop light", absolute: { x: Math.round(w * 0.04), y: Math.round(cy - w * 0.5) } });
+  const shoulders = { closed: true, points: [
+    { x: cx - w * 0.5, y: h },
+    { x: cx - w * 0.5, y: top + ry * 1.1, handleOut: { x: cx - w * 0.5, y: top + ry * 0.3 } },
+    { x: cx - w * 0.2, y: top, handleIn: { x: cx - w * 0.4, y: top } },
+    { x: cx + w * 0.2, y: top, handleOut: { x: cx + w * 0.4, y: top } },
+    { x: cx + w * 0.5, y: top + ry * 1.1, handleIn: { x: cx + w * 0.5, y: top + ry * 0.3 } },
+    { x: cx + w * 0.5, y: h }
+  ] };
+  k.vector(photo, w, h, [shoulders], "coat", { name: "Jacket", ...at });
+  k.vector(photo, w, h, [{ closed: true, points: [{ x: cx - w * 0.15, y: top }, { x: cx + w * 0.15, y: top }, { x: cx + w * 0.045, y: h }, { x: cx - w * 0.045, y: h }] }], "shirt", { name: "Shirt", ...at });
+  k.vector(photo, w, h, [box(cx - w * 0.085, cy + ry * 0.6, w * 0.17, ry * 0.9), { closed: true, points: [{ x: cx - w * 0.1, y: top - 1 }, { x: cx + w * 0.1, y: top - 1 }, { x: cx, y: top + w * 0.15 }] }], "sitter", { name: "Neck", ...at });
+  k.vector(photo, w, h, [{ closed: true, points: ring(32, 1, 1) }], "sitter", { name: "Head", ...at });
+  const crown = ring(18, 1.1, 1.12, -1.95, 1.95);
+  const fringe = [{ x: cx + rx * 0.9, y: cy - ry * 0.12 }, { x: cx + rx * 0.5, y: cy - ry * 0.56 }, { x: cx - rx * 0.25, y: cy - ry * 0.5 }, { x: cx - rx * 0.92, y: cy - ry * 0.04 }];
+  k.vector(photo, w, h, [{ closed: true, points: [...crown, ...fringe] }], "hair", { name: "Hair", ...at });
+}
+var saas_kit_youtube_thumbs_default = defineTemplate({
+  id: "social-saas-kit-youtube-thumbs",
+  meta: {
+    name: "SaaS launch YouTube thumbnail set",
+    description: "Three YouTube thumbnails for a product channel in the Swiss typographic look: a demo, a comparison and a tutorial. Each has a huge three- or four-word title with one line on a yellow bar, a face photo slot cut in beside it, and a crop of the product with the point of the video circled. Red, white and black on one grid, so the channel reads as a series. 1280 \xD7 720",
+    category: "social",
+    tags: ["saas", "saas launch", "youtube", "thumbnail", "demo", "tutorial", "comparison", "swiss", "typographic", "grid", "face", "product ui"],
+    platforms: ["youtube"],
+    formats: ["thumbnail", "demo"],
+    useCases: ["launch", "education", "comparison"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  sequence: true,
+  build() {
+    const k = new Kit("SaaS launch YouTube thumbnail set", preset("youtube-thumb"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#F4F2EC", text: "#0C0C0C", primary: "#E4002B", onPrimary: "#FFFFFF", secondary: "#0C0C0C", onSecondary: "#F4F2EC", accent: "#FFD400", onAccent: "#0C0C0C" },
+      { name: "Rivet" }
+    );
+    k.palette({ ink: "#0C0C0C", onInk: "#FFFFFF", slot: "#CFCBC1", slotLight: "#E2DED4", sitter: "#B49C86", hair: "#3F3A33", coat: "#2B2A27", shirt: "#F4F2EC", win: "#FFFFFF", winInk: "#0C0C0C", winMuted: "#5D5B55", winLine: "#DAD7CF", lane: "#F1EFE9", hot: "#E4002B" });
+    k.textStyle("Title 140", { size: 140, fontWeight: 900, letterSpacing: -7.5, lineHeight: 124, textCase: "UPPER" });
+    k.textStyle("Label 24", { size: 24, fontWeight: 800, letterSpacing: 2.4, lineHeight: 30, textCase: "UPPER" });
+    k.textStyle("Length 24", { ...MONO, size: 24, fontWeight: 800, lineHeight: 28 });
+    k.textStyle("UI 18", { size: 18, fontWeight: 700, letterSpacing: -0.2, lineHeight: 22 });
+    k.textStyle("UI mono 16", { ...MONO, size: 16, fontWeight: 600, lineHeight: 20 });
+    pill(k, "Length", { fill: "ink", ink: "onInk", style: "Length 24", label: "9:04", pad: [6, 12], radius: 0 });
+    const product = (sheet, t, x, y) => {
+      const W = 560, H = 330;
+      const win = k.frame(sheet, { x, y, width: W, height: H }, { name: "Product", fill: "win", clip: true, stroke: { color: "ink", width: 5, align: "INSIDE", join: "MITER" }, effects: [hardShadow(k, "ink", 12, 12)] });
+      k.rect(win, W, 44, "lane", { name: "Bar", absolute: { x: 0, y: 0 } });
+      k.text(win, t.ui === "board" ? "rivet / pipeline" : t.ui === "table" ? "rivet / contacts" : "rivet / settings / sequences", { style: "UI mono 16", color: "winMuted", autoWidth: true, name: "Path", absolute: { x: 18, y: 12 } });
+      k.rect(win, W, 3, "ink", { name: "Bar rule", absolute: { x: 0, y: 44 } });
+      if (t.ui === "board") {
+        ;
+        ["New", "Talking", "Won"].forEach((lane, i) => {
+          const lx = 18 + i * 180;
+          k.text(win, lane, { style: "UI 18", color: "winInk", autoWidth: true, name: "Lane", absolute: { x: lx, y: 62 } });
+          const cards = [];
+          for (let c = 0; c < 3 - (i === 1 ? 1 : 0); c++) cards.push(box(0, c * 74, 164, 62));
+          k.vector(win, 164, 220, cards, i === 2 ? "accent" : "lane", { name: "Deals", absolute: { x: lx, y: 96 }, stroke: { color: "ink", width: 3, align: "INSIDE", join: "MITER" } });
+          const lines = [];
+          for (let c = 0; c < 3 - (i === 1 ? 1 : 0); c++) {
+            lines.push(box(12, c * 74 + 14, 96, 8), box(12, c * 74 + 34, 60, 8));
+          }
+          k.vector(win, 164, 220, lines, "ink", { name: "Deal lines", absolute: { x: lx, y: 96 } });
+        });
+      } else if (t.ui === "table") {
+        const rules = [], cells = [], next = [];
+        for (let r = 0; r < 6; r++) {
+          rules.push(box(0, 92 + r * 44, W, 2));
+          cells.push(box(18, 64 + r * 44, 120 + r * 37 % 60, 10), box(210, 64 + r * 44, 90 + r * 53 % 50, 10));
+          next.push(box(392, 58 + r * 44, 140, 22));
+        }
+        k.vector(win, W, H, rules, "winLine", { name: "Rules", absolute: { x: 0, y: 0 } });
+        k.vector(win, W, H, cells, "ink", { name: "Cells", absolute: { x: 0, y: 0 } });
+        k.vector(win, W, H, next, "accent", { name: "Next steps", absolute: { x: 0, y: 0 }, stroke: { color: "ink", width: 3, align: "INSIDE", join: "MITER" } });
+      } else {
+        ;
+        ["Send at their 9 am", "Stop on any reply", "Bump after 3 days"].forEach((label, i) => {
+          const ty = 70 + i * 84;
+          k.text(win, label, { style: "UI 18", color: "winInk", autoWidth: true, name: "Setting", absolute: { x: 24, y: ty + 12 } });
+          k.rect(win, 96, 48, "accent", { name: "Toggle", radius: 24, absolute: { x: 430, y: ty }, stroke: { color: "ink", width: 4, align: "INSIDE" } });
+          k.ellipse(win, 32, "ink", { name: "Knob", absolute: { x: 486, y: ty + 8 } });
+          k.rect(win, W - 48, 2, "winLine", { name: "Setting rule", absolute: { x: 24, y: ty + 66 } });
+        });
+      }
+      return win;
+    };
+    const sheets = THUMBS.map((t, i) => {
+      const sheet = i === 0 ? k.sheet : k.addSheet(preset("youtube-thumb"), t.name);
+      k.nameSheet(sheet, t.name);
+      const right = t.face === "right";
+      k.flowSheet(sheet, 0, { top: 40, right: right ? 470 : 48, bottom: 40, left: right ? 48 : 500 }, t.ground, "MIN", "MIN");
+      k.patch(sheet, { clipsContent: true, itemSpacing: 22, counterAxisSpacing: 22 });
+      pattern(k, sheet, "Grid", t.ink, grid, 0.1);
+      const px = right ? 250 : 660;
+      product(sheet, t, px, 440);
+      const ring = t.ui === "board" ? { x: px + 350, y: 512, w: 220 } : t.ui === "table" ? { x: px + 350, y: 470, w: 230 } : { x: px + 390, y: 480, w: 180 };
+      k.ellipse(sheet, ring.w, [], { name: "Ring", absolute: { x: ring.x, y: ring.y }, stroke: { color: "accent", width: 12 }, effects: [hardShadow(k, "ink", 4, 4)] });
+      const arrow = k.vector(sheet, 170, 96, [arrowPath(170, 96, 30)], "accent", { name: "Arrow", absolute: { x: ring.x - 160, y: ring.y + 150 }, stroke: { color: "ink", width: 5, join: "MITER" } });
+      k.patch(arrow, { rotation: -24 });
+      const fx = right ? 1280 - 48 - FACE.w : 48;
+      k.rect(sheet, FACE.w, FACE.h, "accent", { name: "Face block", absolute: { x: fx + (right ? -22 : 22), y: 118 }, stroke: { color: "ink", width: 5, align: "INSIDE", join: "MITER" } });
+      const face = k.photo(sheet, FACE.w, FACE.h, { ground: "slot", name: "Face photo", absolute: { x: fx, y: 96 } });
+      presenter(k, face, FACE.w, FACE.h);
+      k.rect(sheet, FACE.w, FACE.h, [], { name: "Face edge", absolute: { x: fx, y: 96 }, stroke: { color: "ink", width: 5, align: "INSIDE", join: "MITER" } });
+      k.instance(sheet, "Length", { Label: t.length }, { name: "Length", absolute: { x: fx + FACE.w - 96, y: 96 + FACE.h - 52 } });
+      const head = k.stack(sheet, { direction: "HORIZONTAL", gap: 16, align: "CENTER", name: "Label row" });
+      k.logo(head, 30, 30, { placeholder: t.ground === "paper" ? "tile" : "mark" });
+      k.text(head, `{{brand.name}} \xB7 ${t.label}`, { style: "Label 24", color: t.ink, name: "Label" });
+      const title = k.stack(sheet, { gap: 6, name: "Title" });
+      t.lines.forEach((line, n) => {
+        if (n === t.mark) {
+          const bar = k.stack(title, { width: "HUG", fill: "accent", padding: { top: 0, right: 18, bottom: 8, left: 14 }, stroke: { color: "ink", width: 5, align: "OUTSIDE", join: "MITER" }, effects: [hardShadow(k, "ink", 10, 10)], name: "Title bar" });
+          k.text(bar, line, { style: t.style, color: "onAccent", autoWidth: true, name: "Marked line" });
+        } else k.text(title, line, { style: t.style, color: t.ink, name: "Title line" });
+      });
+      return sheet;
+    });
+    k.setCover(sheets[0]);
+    return k.finish();
+  }
+});
+
+export {
+  saas_kit_youtube_thumbs_default
+};

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

@@ -0,0 +1,119 @@
+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 {
+  SPOOL,
+  body,
+  code,
+  deep,
+  display,
+  gradientBrand,
+  lockup,
+  mesh,
+  orbitCam,
+  parallax,
+  plateChip,
+  sitePill,
+  tilted,
+  ts,
+  videoFoot,
+  winStyles
+} from "./chunk-T2VGYDNZ.js";
+import {
+  presetSafeRect
+} from "./chunk-GUR6XRHF.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit,
+  preset
+} from "./chunk-T3SGRYUX.js";
+import {
+  ease
+} from "./chunk-6DWY3DOQ.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/social/style-gradient-announcement.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Gradient SaaS announcement post";
+var LOOP = 8e3;
+var cues = [
+  { layer: "Site chip", preset: "pulse", at: 4400, params: { duration: 1600, amount: 0.04 } }
+];
+var LAYS = {
+  "ig-post": { x: 72, w: 936, brandY: 64, headY: 150, head: "Head 96", sub: "Sub 30", scene: { x: 180, y: 420, w: 900, h: 660 }, scale: 0.68, mesh: { x: 160, y: 470, w: 960, h: 640 }, footY: 960 },
+  "ig-portrait": { x: 72, w: 936, brandY: 72, headY: 170, head: "Head 104", sub: "Sub 32", scene: { x: 60, y: 520, w: 1020, h: 760 }, scale: 0.8, mesh: { x: 0, y: 580, w: 1080, h: 770 }, footY: 1228 },
+  "ig-story": { x: 140, w: 800, brandY: 260, headY: 360, head: "Head 104", sub: "Sub 32", scene: { x: 0, y: 570, w: 1080, h: 820 }, scale: 1.04, mesh: { x: -120, y: 720, w: 1320, h: 1200 }, footY: 1376 }
+};
+var style_gradient_announcement_default = defineTemplate({
+  id: "social-saas-style-gradient-announcement",
+  meta: {
+    name: NAME,
+    description: "An eight-second looping launch announcement in the gradient and depth look for a video rendering API: the message on the deep ocean ground from the first frame, the product window tilted in 3D space over a warm coral-to-lagoon mesh, the camera swinging round it and back, planes drifting at their own depths, a playhead running and a band of light crossing the glass. Square with 4:5 and 9:16 cuts",
+    category: "social",
+    tags: ["social", "post", "announcement", "launch", "saas", "gradient", "mesh gradient", "depth", "3d", "shader", "developer", "api", "video", "loop", "animation", "instagram", "linkedin"],
+    platforms: ["instagram", "linkedin", "x", "threads"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["announcement", "launch", "changelog"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit(NAME, preset("ig-post"));
+    k.quantizeGeometry = true;
+    gradientBrand(k);
+    const st = winStyles(k);
+    ts(k, "Brand 30", display(30));
+    ts(k, "Kicker 22", code(22));
+    ts(k, "Head 96", display(96));
+    ts(k, "Head 104", display(104));
+    ts(k, "Sub 30", body(30, 500));
+    ts(k, "Sub 32", body(32, 500));
+    ts(k, "Site 24", code(24));
+    sitePill(k, { style: "Site 24", pad: [16, 24] });
+    const sheets = ["ig-post", "ig-portrait", "ig-story"].map((id, i) => {
+      const sheet = i === 0 ? k.sheet : k.addSheet(preset(id));
+      lay(k, sheet, id, st);
+      return sheet;
+    });
+    k.setCover(sheets[0]);
+    return k.finish();
+  }
+});
+function lay(k, sheet, id, st) {
+  const L = LAYS[id];
+  k.nameSheet(sheet, `Announcement \xB7 ${preset(id).name}`);
+  k.flowSheet(sheet, 0, 0, "night", "MIN", "MIN");
+  k.patch(sheet, { clipsContent: true });
+  k.timeline(sheet, { duration: LOOP, fps: 30 });
+  deep(k, sheet, { duration: LOOP });
+  mesh(k, sheet, { ...L.mesh, duration: LOOP });
+  const { width, height } = k.node(sheet);
+  const r = presetSafeRect(id, width, height);
+  const t = tilted(k, sheet, { ...L.scene, width: 860, scale: L.scale, rotateY: -24, rotateX: 11, styles: st, jobs: 3, sweeps: [2600], duration: LOOP, safe: r ? { x: Math.ceil(r.x), y: Math.ceil(r.y), w: Math.floor(r.width), h: Math.floor(r.height) } : void 0 });
+  orbitCam(k, t.scene, { at: 0, until: LOOP / 2, from: -8, to: 8, z0: 40, z1: -60, back: LOOP });
+  parallax(k, t, LOOP, 16);
+  k.animate(t.win.playhead, "translateX", [{ t: 0, v: -276, ease: ease.linear }, { t: LOOP - 300, v: 520, ease: ease.hold }, { t: LOOP - 299, v: -276 }]);
+  const brandRow = k.stack(sheet, { direction: "HORIZONTAL", width: L.w, justify: "SPACE_BETWEEN", align: "CENTER", name: "Brand row", absolute: { x: L.x, y: L.brandY } });
+  lockup(k, brandRow, { size: 52, style: "Brand 30" });
+  plateChip(k, brandRow, "Out today", { style: "Kicker 22", name: "Kicker", dot: "primary" });
+  const words = k.stack(sheet, { width: L.w, gap: 20, name: "Words", absolute: { x: L.x, y: L.headY } });
+  k.text(words, `${SPOOL.version} renders
+on the edge.`, { style: L.head, color: "onNight", name: "Headline" });
+  k.text(words, `A one-minute 1080p video in ${SPOOL.render} s. It used to take ${SPOOL.before}.`, { style: L.sub, color: "nightMuted", name: "Sub" });
+  k.instance(sheet, "Site pill", {}, { name: "Site chip", absolute: { x: L.x, y: L.footY } });
+  if (id === "ig-story") videoFoot(k, sheet, L.footY + 110);
+  k.cues(sheet, cues);
+}
+
+export {
+  style_gradient_announcement_default
+};