@popcraft/kit 0.53.3 → 0.53.5

package/dist/chunks/chunk-6TG6QAWM.js

@@ -0,0 +1,299 @@
+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 {
+  clicks,
+  glide,
+  touch
+} from "./chunk-2PJUAVAE.js";
+import {
+  bed
+} from "./chunk-KHGNV7UQ.js";
+import {
+  shadow
+} from "./chunk-YORIY3BT.js";
+import {
+  pill
+} from "./chunk-KOAJ6HD2.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 {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/scenes/saas-film-app-preview.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var B = bed("acoustic", 32);
+var { beat } = B;
+var ON = [0, 8, 16, 24];
+var W = 886;
+var H = 1920;
+var SIDE = 48;
+var TABS = ["Today", "Identify", "Plan", "Growth"];
+var CAPTIONS = ["See who\u2019s thirsty today.", "Point, snap, know your plant.", "A watering plan that runs itself.", "Watch them grow, week by week."];
+var PLANTS = [
+  ["Dolores", "Monstera", "Water today \xB7 250 ml", "monstera", "sage"],
+  ["Fernando", "Boston fern", "Water today \xB7 150 ml", "fern", "peach"],
+  ["Sid", "Snake plant", "Due Friday \xB7 100 ml", "snake", "sky"],
+  ["Polly", "Golden pothos", "Mist today", "pothos", "sage"]
+];
+var PLAN = [["Mon", "Dolores, Fernando", "400 ml"], ["Wed", "Polly (mist)", "2 min"], ["Fri", "Sid", "100 ml"], ["Sun", "Feed everyone", "Monthly"]];
+var WET = [0, 2, 4, 6];
+var GROWTH = [0.32, 0.4, 0.46, 0.58, 0.66, 0.8, 0.92];
+var caption = [{ layer: "Caption", preset: "rise-in", at: 350, params: { duration: 500 } }];
+var scenes = [
+  { sheet: "Today", cues: [
+    ...caption,
+    { layer: "Plant card", preset: "rise-in", at: 80, params: { duration: 450 }, stagger: { delay: 90 } },
+    { layer: "Done 1", preset: "pop-in", at: beat(3) + 120, params: { duration: 300 } },
+    { layer: "Done 2", preset: "pop-in", at: beat(6) + 120, params: { duration: 300 } },
+    { layer: "Thirsty count", preset: "pulse", at: beat(6) + 200, params: { duration: 500, amount: 0.06 } }
+  ] },
+  { sheet: "Identify", transition: into("PUSH_FROM_RIGHT", 400), cues: [
+    ...caption,
+    { layer: "Viewfinder", preset: "pulse", at: beat(3) + 60, params: { duration: 480, amount: 0.04 } },
+    { layer: "Result", preset: "rise-in", at: beat(4), params: { duration: 550 } },
+    { layer: "Added", preset: "pop-in", at: beat(7) + 120, params: { duration: 320 } }
+  ] },
+  { sheet: "Plan", transition: into("PUSH_FROM_RIGHT", 400), cues: [
+    ...caption,
+    { layer: "Day", preset: "pop-in", at: 300, params: { duration: 300 }, stagger: { delay: 60 } },
+    { layer: "Toggle on", preset: "fade-in", at: beat(3) + 80, params: { duration: 220 } },
+    { layer: "Drop", preset: "pop-in", at: beat(4), params: { duration: 300 }, stagger: { delay: 160 } },
+    { layer: "Plan row", preset: "rise-in", at: beat(5), params: { duration: 420 }, stagger: { delay: 150 } }
+  ] },
+  { sheet: "Growth", transition: into("PUSH_FROM_RIGHT", 400), cues: [
+    ...caption,
+    { layer: "Growth bar", preset: "rise-in", at: 400, params: { duration: 500 }, stagger: { delay: 90 } },
+    { layer: "Streak", preset: "pop-in", at: beat(2), params: { duration: 380 } },
+    { layer: "Snapshot", preset: "pop-in", at: beat(4), params: { duration: 340 }, stagger: { delay: 200 } },
+    { layer: "Share", preset: "pulse", at: beat(7) + 100, params: { duration: 500, amount: 0.07 } }
+  ], counts: [{ layer: "Streak figure", at: beat(2), duration: beat(4), counter: { from: 0, to: 12, suffix: " weeks" } }] }
+];
+var LENGTHS = sceneLengths(ON.map((b) => beat(b)), B.duration, scenes);
+function leaf(x, y, len, wide, deg) {
+  const a = deg * Math.PI / 180, ux = Math.sin(a), uy = -Math.cos(a), px = Math.cos(a), py = Math.sin(a);
+  const at = (along, across) => ({ x: x + ux * len * along + px * wide * across, y: y + uy * len * along + py * wide * across });
+  const tip = at(1, 0);
+  return { closed: true, points: [{ x, y, handleOut: at(0.3, 0.62) }, { ...tip, handleIn: at(0.75, 0.5), handleOut: at(0.75, -0.5) }, { x, y, handleIn: at(0.3, -0.62) }] };
+}
+var LEAVES = {
+  monstera: [[50, 52, 30, -38], [50, 60, 34, 4], [50, 50, 28, 44], [46, 36, 20, -74], [54, 34, 20, 78]],
+  fern: [[50, 58, 9, -52], [50, 62, 9, -30], [50, 66, 9, -10], [50, 66, 9, 10], [50, 62, 9, 30], [50, 58, 9, 52], [50, 44, 8, -76], [50, 44, 8, 76]],
+  snake: [[40, 56, 11, -9], [48, 66, 12, -2], [56, 60, 11, 6], [63, 46, 10, 13], [34, 40, 9, -15]],
+  pothos: [[50, 36, 22, -60], [50, 40, 24, -20], [50, 40, 24, 24], [50, 36, 22, 62], [44, 24, 16, -100], [56, 24, 16, 102]]
+};
+var saas_film_app_preview_default = defineTemplate({
+  id: "motion-saas-film-app-preview",
+  meta: {
+    name: "SaaS film: App Store preview video",
+    description: "A 20-second App Store preview at the iPhone size (886\xD71920), in the screen-recording style Apple asks for: four app screens fill the frame one after another, a touch indicator taps through them and a short caption sits over each. Every screen is a picture slot for your own recording, with a drawn pastel plant-care app as the placeholder. Music, a screen every two bars",
+    category: "animation",
+    tags: ["animation", "saas", "saas film", "app store", "app preview", "ios", "iphone", "mobile", "screen recording", "touch", "captions", "pastel", "scenes", "music", "audio"],
+    platforms: ["app-store", "ios", "google-play", "android"],
+    formats: ["video", "demo", "screen", "ad"],
+    useCases: ["launch", "onboarding"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { scenes },
+  build() {
+    const k = new Kit("SaaS film: App Store preview video", preset("video-app-preview-iphone"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#FFF6EC", text: "#1D2B22", onPaper: "#2A7148", primary: "#2F7D4F", onPrimary: "#FFFFFF", card: "#FFFFFF", onCard: "#1D2B22", accent: "#FF8A3D", onAccent: "#2A1200" },
+      { name: "Mossy" }
+    );
+    k.palette({ leaf: "#2F7D4F", leafDark: "#1F5B3A", sage: "#DCEBD9", peach: "#FFE1C7", sky: "#D6ECF5", faint: "#5F6B62", line: "#EFE3D3", pot: "#C9764A", potShade: "#A85C36", water: "#3D8FD1", ink: "#1D2B22", caption: "#14221A", onCaption: "#FFFFFF", off: "#D9D2C6", knob: "#FFFFFF" });
+    const made = /* @__PURE__ */ new Set();
+    const T = (name2, px, o = {}) => type(k, made, name2, px, o);
+    const big = T("Screen title", 72, { fontWeight: 800, leading: 1.04, tracking: -0.04 });
+    const name = T("Name", 40, { fontWeight: 800, leading: 1.15, tracking: -0.025 });
+    const note = T("Note", 28, { fontWeight: 500, leading: 1.3 });
+    const strong = T("Strong", 30, { fontWeight: 700, leading: 1.25, tracking: -0.01 });
+    const tab = T("Tab", 22, { fontWeight: 700, leading: 1.2 });
+    const clock = T("Clock", 30, { fontWeight: 700, leading: 1.2, tracking: -0.01 });
+    pill(k, "Chip", { fill: "accent", ink: "onAccent", style: T("Chip", 26, { fontWeight: 800, leading: 1.2, tracking: -0.01 }), label: "Added", pad: [10, 22], radius: 999 });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: T("Button", 34, { fontWeight: 800, leading: 1.2, tracking: -0.02 }), label: "Add to my plants", pad: [24, 44], radius: 28 });
+    const plant = (parent, size, kind, at) => {
+      const u = size / 100;
+      const art = k.stack(parent, { width: size, height: size, name: "Plant", ...at ? { absolute: at } : {} });
+      k.vector(art, size, size, LEAVES[kind].map(([x, len, wide, deg]) => leaf(x * u, 70 * u, len * u, wide * u, deg)), "leaf", { name: "Leaves", absolute: { x: 0, y: 0 } });
+      k.vector(art, size, size, LEAVES[kind].slice(1, 3).map(([x, len, wide, deg]) => leaf(x * u, 70 * u, len * u * 0.62, wide * u * 0.34, deg)), "leafDark", { name: "Leaf veins", absolute: { x: 0, y: 0 }, opacity: 0.5 });
+      k.vector(art, size, size, [{ closed: true, points: [{ x: 30 * u, y: 70 * u }, { x: 70 * u, y: 70 * u }, { x: 64 * u, y: 96 * u }, { x: 36 * u, y: 96 * u }] }], "pot", { name: "Pot", absolute: { x: 0, y: 0 } });
+      k.rect(art, 46 * u, 7 * u, "potShade", { name: "Pot rim", radius: 3 * u, absolute: { x: 27 * u, y: 67 * u } });
+      return art;
+    };
+    const tick = (s) => ({ closed: false, points: [{ x: s * 0.26, y: s * 0.52 }, { x: s * 0.44, y: s * 0.7 }, { x: s * 0.76, y: s * 0.32 }] });
+    const drop = (s) => ({ closed: true, points: [{ x: s / 2, y: s * 0.12, handleOut: { x: s * 0.62, y: s * 0.3 } }, { x: s * 0.78, y: s * 0.62, handleIn: { x: s * 0.78, y: s * 0.46 }, handleOut: { x: s * 0.78, y: s * 0.96 } }, { x: s * 0.22, y: s * 0.62, handleIn: { x: s * 0.22, y: s * 0.96 }, handleOut: { x: s * 0.22, y: s * 0.46 } }, { x: s / 2, y: s * 0.12, handleIn: { x: s * 0.38, y: s * 0.3 } }] });
+    const sheets = sceneSheets(k, "video-app-preview-iphone", scenes.map((s) => s.sheet));
+    const screens = sheets.map((sheet, i) => {
+      k.flowSheet(sheet, 0, 0, "paper", "MIN", "MIN");
+      k.timeline(sheet, { duration: LENGTHS[i], fps: 30 });
+      k.photo(sheet, W, H, { ground: "peach", name: "Your screen recording", absolute: { x: 0, y: 0 } });
+      const ui = k.stack(sheet, { width: W, height: H, gap: 30, fill: "paper", padding: { top: 44, right: SIDE, bottom: 0, left: SIDE }, name: "Placeholder screen", absolute: { x: 0, y: 0 } });
+      const status = k.stack(ui, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", height: 56, padding: { top: 0, right: 14, bottom: 0, left: 22 }, name: "Status bar" });
+      k.text(status, "9:41", { style: clock, color: "text", autoWidth: true, name: "Time" });
+      const signs = k.stack(status, { direction: "HORIZONTAL", width: "HUG", gap: 10, align: "MAX", name: "Signal" });
+      for (const h of [12, 17, 22, 27]) k.rect(signs, 7, h, "text", { name: "Signal bar", radius: 2 });
+      k.rect(signs, 46, 24, "text", { name: "Battery", radius: 8 });
+      const tabs = k.stack(sheet, { direction: "HORIZONTAL", width: W, height: 170, fill: "card", padding: { top: 22, right: 30, bottom: 0, left: 30 }, stroke: { color: "line", width: 3, align: "INSIDE" }, name: "Tab bar", absolute: { x: 0, y: H - 170 } });
+      TABS.forEach((t, j) => {
+        const item = k.stack(tabs, { gap: 8, align: "CENTER", name: "Tab" });
+        k.rect(item, 44, 44, j === i ? "leaf" : "off", { name: "Tab icon", radius: j === 1 ? 22 : 12 });
+        k.text(item, t, { style: tab, color: j === i ? "leaf" : "faint", align: "CENTER", name: "Tab label" });
+      });
+      const cap = k.stack(sheet, { width: W - 2 * SIDE, fill: "caption", radius: 36, padding: { top: 30, right: 36, bottom: 34, left: 36 }, effects: [shadow(k, "caption", 0.35, 20, 40)], name: "Caption", absolute: { x: SIDE, y: 1500 } });
+      k.text(cap, CAPTIONS[i], { style: T("Caption", 54, { fontWeight: 800, leading: 1.1, tracking: -0.035, textAlign: "CENTER" }), color: "onCaption", name: "Caption words" });
+      return { sheet, ui };
+    });
+    const [today, identify, plan, growth] = screens;
+    const finger = (sheet, rest, taps) => {
+      const p = touch(k, sheet, { ...rest, size: 104, fill: "ink", ring: "ink" });
+      const stops = taps.flatMap((t, i) => {
+        const from = i === 0 ? rest : taps[i - 1];
+        return [{ t: t.at - beat(1.4), dx: from.x - rest.x, dy: from.y - rest.y }, { t: t.at, dx: t.x - rest.x, dy: t.y - rest.y }];
+      });
+      glide(k, p, stops);
+      clicks(k, p, taps.map((t) => t.at));
+    };
+    {
+      const { ui, sheet } = today;
+      const head = k.stack(ui, { gap: 6, padding: { top: 10, right: 0, bottom: 4, left: 6 }, name: "Heading" });
+      k.text(head, "Thursday 2 October", { style: note, color: "text", name: "Date" });
+      k.text(head, "3 plants are thirsty", { style: big, color: "text", name: "Thirsty count" });
+      const taps = [];
+      PLANTS.forEach(([plantName, species, what, kind, tile], i) => {
+        const card = k.stack(ui, { direction: "HORIZONTAL", gap: 26, align: "CENTER", fill: "card", radius: 44, padding: 26, effects: [shadow(k, "pot", 0.12, 12, 30)], name: "Plant card" });
+        const pic = k.stack(card, { width: 190, height: 190, fill: tile, radius: 32, clip: true, name: "Plant tile" });
+        plant(pic, 190, kind, { x: 0, y: 0 });
+        const words = k.stack(card, { gap: 4, name: "Plant words" });
+        k.text(words, plantName, { style: name, color: "onCard", name: "Plant name" });
+        k.text(words, species, { style: note, color: "faint", name: "Species" });
+        k.text(words, what, { style: strong, color: i === 2 ? "faint" : "leaf", name: "Plant note" });
+        const button = k.stack(card, { width: 104, height: 104, fill: i === 2 ? "line" : "sky", radius: 52, name: "Water button" });
+        k.vector(button, 104, 104, [drop(104)], i === 2 ? "off" : "water", { name: "Water drop", absolute: { x: 0, y: 0 } });
+        if (i < 2) {
+          const done = k.stack(button, { width: 104, height: 104, fill: "leaf", radius: 52, name: `Done ${i + 1}`, absolute: { x: 0, y: 0 } });
+          k.vector(done, 104, 104, [tick(104)], "knob", { name: "Done tick", strokeWidth: 10, absolute: { x: 0, y: 0 } });
+          taps.push({ x: W - SIDE - 26 - 52, y: 0 });
+        }
+      });
+      const laid = k.finish();
+      const cards = k.named(ui, "Plant card");
+      taps.forEach((t, i) => {
+        const c = laid.nodes[cards[i]];
+        t.y = c.y + c.height / 2;
+      });
+      finger(sheet, { x: 640, y: 1330 }, [{ at: beat(3), ...taps[0] }, { at: beat(6), ...taps[1] }]);
+    }
+    {
+      const { ui, sheet } = identify;
+      k.text(ui, "What is this one?", { style: big, color: "text", name: "Identify title" });
+      const VW = W - 2 * SIDE, VH = 760;
+      const view = k.stack(ui, { width: VW, height: VH, fill: "sage", radius: 48, clip: true, name: "Viewfinder" });
+      k.photo(view, VW, VH, { ground: "sage", name: "Camera photo", absolute: { x: 0, y: 0 } });
+      const art = k.stack(view, { width: VW, height: VH, fill: "sage", name: "Placeholder plant", absolute: { x: 0, y: 0 } });
+      k.ellipse(art, 620, "peach", { name: "Light", absolute: { x: 85, y: 40 } });
+      plant(art, 700, "monstera", { x: 45, y: 50 });
+      const L = 90, Wt = 12, m = 46;
+      const corner = (x, y, sx, sy) => [{ closed: true, points: [{ x, y }, { x: x + sx * L, y }, { x: x + sx * L, y: y + sy * Wt }, { x: x + sx * Wt, y: y + sy * Wt }, { x: x + sx * Wt, y: y + sy * L }, { x, y: y + sy * L }] }];
+      k.vector(view, VW, VH, [...corner(m, m, 1, 1), ...corner(VW - m, m, -1, 1), ...corner(m, VH - m, 1, -1), ...corner(VW - m, VH - m, -1, -1)], "knob", { name: "Brackets", absolute: { x: 0, y: 0 } });
+      k.stack(view, { width: 120, height: 120, fill: "knob", radius: 60, stroke: { color: "leaf", width: 8, align: "INSIDE" }, name: "Shutter", absolute: { x: VW / 2 - 60, y: VH - 160 } });
+      const result = k.stack(ui, { gap: 18, fill: "card", radius: 40, padding: 34, effects: [shadow(k, "pot", 0.16, 16, 36)], name: "Result" });
+      const top = k.stack(result, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Result top" });
+      k.text(top, "Monstera deliciosa", { style: T("Result", 48, { fontWeight: 800, leading: 1.1, tracking: -0.035 }), color: "onCard", autoWidth: true, name: "Result name" });
+      k.instance(top, "Chip", { Label: "Added" }, { name: "Added" });
+      k.text(result, "97% match \xB7 Bright, indirect light \xB7 Water weekly", { style: note, color: "faint", name: "Result note" });
+      k.instance(result, "Button", { Label: "Add to my plants" }, { name: "Add button" });
+      const laid = k.finish();
+      const r = laid.nodes[result], v = laid.nodes[view];
+      finger(sheet, { x: 680, y: 1340 }, [{ at: beat(3), x: W / 2, y: v.y + VH - 100 }, { at: beat(7), x: SIDE + 34 + 170, y: r.y + r.height - 34 - 44 }]);
+    }
+    {
+      const { ui, sheet } = plan;
+      k.text(ui, "This week\u2019s plan", { style: big, color: "text", name: "Plan title" });
+      const week = k.stack(ui, { direction: "HORIZONTAL", gap: 10, fill: "card", radius: 40, padding: 22, effects: [shadow(k, "pot", 0.12, 12, 30)], name: "Week" });
+      ["M", "T", "W", "T", "F", "S", "S"].forEach((d, i) => {
+        const day = k.stack(week, { gap: 14, align: "CENTER", fill: i === 3 ? "sage" : "paper", radius: 26, padding: { top: 18, right: 0, bottom: 18, left: 0 }, name: "Day" });
+        k.text(day, d, { style: strong, color: i === 3 ? "leaf" : "text", align: "CENTER", name: "Day letter" });
+        const slot = k.stack(day, { width: 56, height: 56, name: "Drop slot" });
+        if (WET.includes(i)) k.vector(slot, 56, 56, [drop(56)], "water", { name: "Drop", absolute: { x: 0, y: 0 } });
+      });
+      const remind = k.stack(ui, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", fill: "card", radius: 40, padding: { top: 30, right: 30, bottom: 30, left: 34 }, effects: [shadow(k, "pot", 0.12, 12, 30)], name: "Reminder" });
+      const rw = k.stack(remind, { width: "HUG", gap: 4, name: "Reminder words" });
+      k.text(rw, "Remind me at 8:00", { style: name, color: "onCard", autoWidth: true, name: "Reminder title" });
+      k.text(rw, "Only on watering days", { style: note, color: "faint", autoWidth: true, name: "Reminder note" });
+      const toggle = k.stack(remind, { width: 136, height: 80, fill: "off", radius: 40, name: "Toggle" });
+      k.rect(toggle, 136, 80, "leaf", { name: "Toggle on", radius: 40, absolute: { x: 0, y: 0 } });
+      const knob = k.ellipse(toggle, 64, "knob", { name: "Toggle knob", absolute: { x: 64, y: 8 } });
+      k.animate(knob, "translateX", [{ t: 0, v: -56, ease: ease.hold }, { t: beat(3) + 60, v: -56, ease: ease.out("cubic") }, { t: beat(3) + 300, v: 0 }]);
+      for (const [day, who, amount] of PLAN) {
+        const item = k.stack(ui, { direction: "HORIZONTAL", gap: 22, align: "CENTER", fill: "card", radius: 30, padding: { top: 22, right: 30, bottom: 22, left: 22 }, name: "Plan row" });
+        const tag = k.stack(item, { width: 96, height: 72, fill: "sky", radius: 20, justify: "CENTER", align: "CENTER", name: "Plan day" });
+        k.text(tag, day, { style: strong, color: "ink", autoWidth: true, name: "Plan day label" });
+        k.text(item, who, { style: strong, color: "onCard", name: "Plan who" });
+        k.text(item, amount, { style: note, color: "faint", autoWidth: true, name: "Plan amount" });
+      }
+      const laid = k.finish();
+      const r = laid.nodes[remind];
+      finger(sheet, { x: 620, y: 1360 }, [{ at: beat(3), x: W - SIDE - 30 - 68, y: r.y + r.height / 2 }]);
+    }
+    {
+      const { ui, sheet } = growth;
+      const head = k.stack(ui, { direction: "HORIZONTAL", gap: 24, align: "CENTER", name: "Growth head" });
+      const pic = k.stack(head, { width: 150, height: 150, fill: "sage", radius: 75, clip: true, name: "Growth plant" });
+      plant(pic, 150, "monstera", { x: 0, y: 6 });
+      const words = k.stack(head, { gap: 2, name: "Growth words" });
+      k.text(words, "Dolores", { style: big, color: "text", name: "Growth name" });
+      k.text(words, "Monstera \xB7 7 new leaves", { style: note, color: "text", name: "Growth note" });
+      const streak = k.stack(ui, { gap: 4, fill: "primary", radius: 40, padding: { top: 30, right: 36, bottom: 34, left: 36 }, name: "Streak" });
+      k.text(streak, "WATERED ON TIME FOR", { style: T("Label", 24, { fontWeight: 800, leading: 1.25, tracking: 0.1 }), color: "onPrimary", name: "Streak label" });
+      k.text(streak, "12 weeks", { style: T("Figure", 120, { fontWeight: 800, leading: 1, tracking: -0.05, fontFeatures: { tnum: 1 } }), color: "onPrimary", name: "Streak figure" });
+      const CHH = 300;
+      const chart = k.stack(ui, { direction: "HORIZONTAL", gap: 16, align: "MAX", height: CHH + 60, fill: "card", radius: 40, padding: 30, effects: [shadow(k, "pot", 0.12, 12, 30)], name: "Chart" });
+      GROWTH.forEach((g, i) => k.stack(chart, { height: Math.round(CHH * g), fill: i === GROWTH.length - 1 ? "accent" : "sage", radius: 18, name: "Growth bar" }));
+      const shots = k.stack(ui, { direction: "HORIZONTAL", gap: 16, name: "Snapshots" });
+      const SWd = Math.floor((W - 2 * SIDE - 32) / 3);
+      ["sky", "peach", "sage"].forEach((g, i) => {
+        const shot = k.stack(shots, { width: SWd, height: 250, radius: 30, clip: true, name: "Snapshot" });
+        k.photo(shot, SWd, 250, { ground: g, name: "Progress photo", absolute: { x: 0, y: 0 } });
+        const art = k.stack(shot, { width: SWd, height: 250, fill: g, name: "Placeholder photo", absolute: { x: 0, y: 0 } });
+        const s = 150 + i * 40;
+        plant(art, s, "monstera", { x: (SWd - s) / 2, y: 250 - s - 4 });
+      });
+      const share = k.stack(sheet, { width: "HUG", fill: "accent", radius: 999, padding: { top: 14, right: 30, bottom: 14, left: 30 }, name: "Share", absolute: { x: W - SIDE - 190, y: 138 } });
+      k.text(share, "Share", { style: strong, color: "onAccent", autoWidth: true, name: "Share label" });
+      finger(sheet, { x: 600, y: 1340 }, [{ at: beat(7), x: W - SIDE - 95, y: 170 }]);
+    }
+    playScenes(k, "comp-app-preview", "App Store preview", sheets, scenes, "paper");
+    k.setCover(sheets[0]);
+    return withSound(k.finish(), { "comp-app-preview": B.audio });
+  }
+});
+
+export {
+  saas_film_app_preview_default
+};

package/dist/chunks/chunk-6TND7C5Y.js

@@ -0,0 +1,110 @@
+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 {
+  shaderBackdrop
+} from "./chunk-75T3CFTH.js";
+import {
+  safePadding
+} from "./chunk-EMVFY3SD.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  hex,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  animateShaderParam,
+  ease
+} from "./chunk-PLZLKHOI.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/effects/shader-title.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var TITLE = "Light & Motion";
+var BLUE = "#2a6cf5";
+var MAGENTA = "#ff4fa3";
+var SCRIM = 0.5;
+var CUES = [
+  { layer: "Words scrim", preset: "fade-in", at: 0, params: { duration: 800 } },
+  { layer: "Episode tag", preset: "pop-in", at: 200 },
+  { layer: "Title lockup", preset: "rise-in", at: 500, params: { distance: 40 } },
+  { layer: "Subtitle", preset: "words-in", at: 1500, params: { duration: 600, amount: 90, distance: 16 } },
+  { layer: "Handle", preset: "fade-in", at: 2600 }
+];
+var shader_title_default = defineTemplate({
+  id: "motion-shader-title",
+  meta: {
+    name: "Shader title card",
+    description: "A 16:9 title card over a live mesh-gradient shader whose speed, spread and colour are keyed, with a glowing title",
+    category: "animation",
+    tags: ["animation", "title card", "shader", "gradient", "glow", "youtube"],
+    platforms: ["youtube", "slides"],
+    formats: ["title-card", "intro"],
+    useCases: ["title", "brand-intro"],
+    created: "2026-09-28",
+    updated: "2026-09-29"
+  },
+  motion: { cues: CUES },
+  build() {
+    const k = new Kit("Shader title card", preset("video-1080p"));
+    k.brand({ onNight: "#fbf7ff", night: "#120d24", accent: "#ff7ac6", muted: "#c9bfe6" }, { handle: "@popcraft" });
+    k.textStyle("Tag 28", { size: 28, fontWeight: 700, lineHeight: 34, letterSpacing: 6, textCase: "UPPER" });
+    k.textStyle("Title 180", { size: 180, fontWeight: 900, lineHeight: 190, letterSpacing: -6 });
+    k.textStyle("Subtitle 44", { size: 44, fontWeight: 500, lineHeight: 54 });
+    k.textStyle("Handle 26", { size: 26, fontWeight: 600, lineHeight: 32, letterSpacing: 1 });
+    k.component("Episode tag", { direction: "HORIZONTAL", width: 320, height: 34, gap: 16, align: "CENTER", props: { Label: "Episode 04" } }, (id) => {
+      k.ellipse(id, 14, "accent", { name: "Dot" });
+      k.propText(id, "Label", { style: "Tag 28", color: "onNight", autoWidth: true });
+    });
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Title card");
+    k.flowSheet(sheet, 36, safePadding("video-1080p", 1920, 1080, { top: 120, right: 160, bottom: 120, left: 160 }), "night", "CENTER", "CENTER");
+    k.timeline(sheet, { duration: 5e3, fps: 30 });
+    const backdrop = shaderBackdrop(k, sheet, "Mesh gradient", { speed: 0.15, spread: 0.2, colorA: hex("#6a3cf0"), colorB: hex(BLUE), colorC: hex(MAGENTA), base: k.color("night") });
+    const W = 1400, PAD = 64;
+    const words = k.stack(sheet, { width: W, fill: k.tint("night", SCRIM), radius: 64, align: "CENTER", gap: 36, padding: { top: 56, right: PAD, bottom: 56, left: PAD }, name: "Words scrim" });
+    k.instance(words, "Episode tag", { Label: "Episode 04" });
+    const lockup = k.stack(words, { name: "Title lockup" });
+    const blur = { id: "e1", type: "LAYER_BLUR", radius: 0, visible: true };
+    const glow = k.rect(lockup, 1240, 140, "accent", { radius: 70, opacity: 0, effects: [blur], absolute: { x: (W - 2 * PAD - 1240) / 2, y: 30 }, name: "Title glow" });
+    k.text(lockup, TITLE, { style: "Title 180", color: "onNight", align: "CENTER", name: "Title" });
+    k.text(words, "How shaders turn a little maths into colour", { style: "Subtitle 44", color: "muted", align: "CENTER", name: "Subtitle" });
+    k.text(words, "{{brand.handle}}", { style: "Handle 26", color: "muted", align: "CENTER", name: "Handle" });
+    k.apply(backdrop, (n) => animateShaderParam(
+      animateShaderParam(
+        animateShaderParam(
+          n,
+          "fills[@f1]",
+          "speed",
+          [{ t: 0, v: 0.15, ease: ease.inOut("sine") }, { t: 2500, v: 0.9, ease: ease.inOut("sine") }, { t: 5e3, v: 0.3 }]
+        ),
+        "fills[@f1]",
+        "spread",
+        [{ t: 0, v: 0.2, ease: ease.out("cubic") }, { t: 1500, v: 0.45 }]
+      ),
+      "fills[@f1]",
+      "colorC",
+      [{ t: 2500, v: hex(MAGENTA), ease: ease.inOut("sine") }, { t: 4e3, v: k.color("accent") }]
+    ));
+    k.cues(sheet, CUES);
+    k.animate(glow, "effects[@e1].radius", [{ t: 600, v: 0, ease: ease.out("expo") }, { t: 1600, v: 96, ease: ease.inOut("sine") }, { t: 5e3, v: 60 }]);
+    k.animate(glow, "opacity", [{ t: 600, v: 0, ease: ease.out("cubic") }, { t: 1600, v: 0.8 }]);
+    return k.finish();
+  }
+});
+
+export {
+  TITLE,
+  BLUE,
+  MAGENTA,
+  SCRIM,
+  shader_title_default
+};

package/dist/chunks/chunk-6V536WIL.js

@@ -0,0 +1,154 @@
+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 {
+  ARIAL,
+  callToAction,
+  drop,
+  finishMail,
+  mailButton,
+  mailFooter,
+  mailHeader,
+  mailRow,
+  mailSheet,
+  section,
+  swell
+} from "./chunk-RU42F4MZ.js";
+import {
+  clicks,
+  pointer
+} from "./chunk-2PJUAVAE.js";
+import {
+  tick
+} from "./chunk-2VFVKPUT.js";
+import {
+  boxesOf
+} from "./chunk-LWSZATOL.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/email/saas-mail-day-one.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 4e3;
+var HEADER_H = 430;
+var cues = [
+  { layer: "Connect button", preset: "pulse", at: 1200, params: { duration: 800, amount: 0.05 } },
+  { layer: "Day chip", preset: "pulse", at: 300, params: { duration: 600, amount: 0.06 } }
+];
+var MOVES = [
+  ["20 sec", "Open Settings, then Inboxes", "It is the second item in the left rail."],
+  ["40 sec", "Type the address customers write to", "help@, support@ or hello@: whichever is on your website today."],
+  ["1 min", "Paste one forwarding rule into Gmail or Outlook", "We write the rule for you and check that the first test email arrives."]
+];
+var saas_mail_day_one_default = defineTemplate({
+  id: "email-saas-mail-day-one",
+  meta: {
+    name: "SaaS lifecycle email: onboarding day 1",
+    description: "A whole 600 px day-one onboarding email in a pastel soft-UI look: one first step to take, shown on a crop of the product screen with the button to press ringed, then the step in three timed moves and a single button. The header loops for four seconds (export it as a GIF); the body is table-safe type",
+    category: "email",
+    tags: ["email", "saas", "lifecycle", "onboarding", "welcome", "day one", "first step", "pastel", "soft ui", "animated", "gif", "html"],
+    platforms: ["email"],
+    formats: ["email"],
+    useCases: ["onboarding"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit("SaaS lifecycle email: onboarding day 1", preset("email-body"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#FFFAF5", text: "#22302B", onPaper: "#4D5C56", primary: "#2B6E5C", onPrimary: "#FFFFFF", accent: "#FFAE94", onAccent: "#3A1D12", tint: "#E3F1EA", onTint: "#22302B" },
+      { company: "Pebble", address: "220 Queen St W, Toronto, ON M5V 2A1" }
+    );
+    k.palette({ field: "#D9EEE4", onField: "#1D2B26", butter: "#FFE9A8", mintDeep: "#B7DFCF", card: "#FFFFFF", onCard: "#22302B", soft: "#5B6A64", input: "#F3F7F5", line: "#D5E2DC", edge: "#22302B" });
+    k.textStyle("Chip 12", { size: 12, fontWeight: 800, letterSpacing: 1.2, lineHeight: 16 });
+    k.textStyle("Hero 34", { size: 34, fontWeight: 800, letterSpacing: -1.2, lineHeight: 38 });
+    k.textStyle("UI title 17", { size: 17, fontWeight: 800, letterSpacing: -0.3, lineHeight: 22 });
+    k.textStyle("UI 13", { size: 13, fontWeight: 500, lineHeight: 18 });
+    k.textStyle("UI strong 13", { size: 13, fontWeight: 700, lineHeight: 18 });
+    k.textStyle("UI label 12", { size: 12, fontWeight: 700, letterSpacing: 0.6, lineHeight: 14 });
+    k.textStyle("Heading 26", { ...ARIAL, size: 26, fontWeight: 700, lineHeight: 32 });
+    k.textStyle("Body 16", { ...ARIAL, size: 16, fontWeight: 400, lineHeight: 26 });
+    k.textStyle("Time 13", { ...ARIAL, size: 13, fontWeight: 700, lineHeight: 18 });
+    k.textStyle("Strong 16", { ...ARIAL, size: 16, fontWeight: 700, lineHeight: 22 });
+    k.textStyle("Small 15", { ...ARIAL, size: 15, fontWeight: 400, lineHeight: 23 });
+    k.textStyle("Button 16", { ...ARIAL, size: 16, fontWeight: 700, lineHeight: 20 });
+    k.textStyle("Fine 13", { ...ARIAL, size: 13, fontWeight: 400, lineHeight: 19 });
+    mailButton(k, "Mail button", { fill: "primary", ink: "onPrimary", style: "Button 16", label: "Connect your inbox", width: 260, height: 52 });
+    const sheet = mailSheet(k, { paper: "paper", duration: DURATION });
+    const head = mailHeader(k, sheet, HEADER_H, "field");
+    const discs = [["butter", 250, 420, -90, 0], ["accent", 190, -70, 250, 0.3], ["mintDeep", 320, 330, 240, 0.6], ["card", 110, 470, 300, 0.8]];
+    discs.forEach(([role, size, x, y, phase], i) => {
+      const d = k.ellipse(head, size, role, { name: `Disc ${i + 1}`, opacity: role === "card" ? 0.6 : 0.85, absolute: { x, y } });
+      swell(k, d, "translateY", { amp: 6, loopMs: DURATION, cycles: 1, phase });
+    });
+    const chip = k.stack(head, { direction: "HORIZONTAL", width: "HUG", fill: "edge", radius: 999, padding: { top: 6, right: 14, bottom: 6, left: 14 }, name: "Day chip", absolute: { x: 36, y: 34 } });
+    k.text(chip, "DAY 1 OF 14", { style: "Chip 12", color: "card", autoWidth: true, name: "Day" });
+    k.text(head, "One thing today:\nconnect your inbox.", { style: "Hero 34", color: "onField", width: 440, name: "Hero", absolute: { x: 36, y: 74 } });
+    const card = k.stack(head, { width: 468, fill: "card", radius: 22, padding: { top: 22, right: 24, bottom: 24, left: 24 }, gap: 12, effects: [drop(0.16, 18, 44)], name: "Screen crop", absolute: { x: 66, y: 176 } });
+    const top = k.stack(card, { direction: "HORIZONTAL", align: "CENTER", justify: "SPACE_BETWEEN", name: "Card top" });
+    k.text(top, "Connect an inbox", { style: "UI title 17", color: "onCard", autoWidth: true, name: "Card title" });
+    const step = k.stack(top, { direction: "HORIZONTAL", width: "HUG", fill: "butter", radius: 999, padding: { top: 4, right: 10, bottom: 4, left: 10 }, name: "Step chip" });
+    k.text(step, "2 MIN", { style: "UI label 12", color: "onCard", autoWidth: true, name: "Step" });
+    k.text(card, "Where do customers write to you?", { style: "UI 13", color: "soft", name: "Question" });
+    const input = k.stack(card, { direction: "HORIZONTAL", align: "CENTER", gap: 8, fill: "input", radius: 12, stroke: { color: "line", width: 1.5, align: "INSIDE" }, padding: { top: 12, right: 14, bottom: 12, left: 14 }, name: "Address field" });
+    k.text(input, "help@brightloaf.example", { style: "UI strong 13", color: "onCard", autoWidth: true, name: "Address" });
+    k.rect(input, 2, 16, "primary", { name: "Field caret" });
+    const checks = k.stack(card, { gap: 6, name: "Checks" });
+    for (const line of ["Replies still come from your own address", "Nothing is sent to customers until you say so"]) {
+      const row = k.stack(checks, { direction: "HORIZONTAL", gap: 8, align: "CENTER", name: "Check" });
+      tick(k, row, 14, "primary");
+      k.text(row, line, { style: "UI 13", color: "soft", name: "Check words" });
+    }
+    const actions = k.stack(card, { direction: "HORIZONTAL", justify: "MAX", align: "CENTER", gap: 14, padding: { top: 6, right: 0, bottom: 0, left: 0 }, name: "Actions" });
+    k.text(actions, "Skip for now", { style: "UI 13", color: "soft", autoWidth: true, name: "Skip" });
+    const btn = k.stack(actions, { direction: "HORIZONTAL", width: "HUG", fill: "primary", radius: 12, padding: { top: 11, right: 20, bottom: 11, left: 20 }, name: "Connect button" });
+    k.text(btn, "Connect inbox", { style: "UI strong 13", color: "onPrimary", autoWidth: true, name: "Connect" });
+    const intro = section(k, sheet, { name: "Intro", pad: [40, 40, 16, 40], gap: 12 });
+    k.text(intro, "Welcome to {{brand.company}}, Sam.", { style: "Heading 26", color: "text", name: "Heading" });
+    k.text(intro, "You could spend an hour in settings today. Please don\u2019t. The one step that makes everything else work is forwarding your support address, and it takes about two minutes.", { style: "Body 16", color: "onPaper", name: "Intro words" });
+    const how = section(k, sheet, { name: "The step", pad: [8, 40, 8, 40] });
+    const box = k.stack(how, { fill: "tint", padding: { top: 22, right: 24, bottom: 22, left: 24 }, gap: 16, name: "Step box" });
+    for (const [time, title, note] of MOVES) {
+      const row = mailRow(k, box, { name: "Move", gap: 14 });
+      const cell = k.stack(row, { width: 64, padding: { top: 2, right: 0, bottom: 0, left: 0 }, name: "Time cell" });
+      k.text(cell, time, { style: "Time 13", color: "onTint", name: "Time" });
+      const words = k.stack(row, { width: "FILL", gap: 2, name: "Move words" });
+      k.text(words, title, { style: "Strong 16", color: "onTint", name: "Move title" });
+      k.text(words, note, { style: "Small 15", color: "onTint", name: "Move note" });
+    }
+    callToAction(k, sheet, { button: "Mail button", label: "Connect your inbox", pad: [28, 40, 20, 40], note: "Stuck? Reply to this email. Priya answers within the hour, 9 to 6 Eastern.", noteStyle: "Small 15", noteInk: "onPaper" });
+    const next = section(k, sheet, { name: "Next", pad: [8, 40, 28, 40], gap: 4 });
+    k.rect(next, "FILL", 1, "tint", { name: "Next rule" });
+    k.rect(next, "FILL", 12, "paper", { name: "Next space" });
+    k.text(next, "On day 3", { style: "Time 13", color: "text", name: "Next label" });
+    k.text(next, "The one keyboard shortcut our fastest teams use to clear a morning\u2019s queue. Nothing from us until then.", { style: "Small 15", color: "onPaper", name: "Next words" });
+    mailFooter(k, sheet, { style: "Fine 13", ink: "onPaper", pad: [8, 40, 32, 40], why: "You are getting this because you started a {{brand.company}} trial on 1 October." });
+    k.finish();
+    const [b] = boxesOf(k, head, ["Connect button"]);
+    const ring = k.rect(head, b.width + 20, b.height + 20, k.tint("accent", 1e-3), { name: "Ring", radius: 20, stroke: { color: "accent", width: 4, align: "CENTER" }, absolute: { x: b.x - 10, y: b.y - 10 } });
+    swell(k, ring, "scaleX", { amp: 0.04, loopMs: DURATION, cycles: 2 });
+    swell(k, ring, "scaleY", { amp: 0.1, loopMs: DURATION, cycles: 2 });
+    const p = pointer(k, head, { x: b.x + b.width - 34, y: b.y + b.height - 14, size: 34, fill: "edge", edge: "card", ring: "accent" });
+    clicks(k, p, [1200]);
+    k.cues(sheet, cues);
+    return finishMail(k, sheet);
+  }
+});
+
+export {
+  saas_mail_day_one_default
+};

package/dist/chunks/chunk-6VBCBWOP.js

@@ -0,0 +1,33 @@
+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 {
+  cyberpunk_landing_default
+} from "./chunk-JU52A3P6.js";
+import {
+  cyberpunk_implant_post_default
+} from "./chunk-UCAHBPB6.js";
+import {
+  cyberpunk_link_preview_default
+} from "./chunk-Z4NOCBYS.js";
+import {
+  cyberpunk_lock_on_reel_default
+} from "./chunk-3T7YYKCJ.js";
+import {
+  cyberpunk_header_default
+} from "./chunk-S7Q4QTUN.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/themes/cyberpunk.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var pack = [cyberpunk_lock_on_reel_default, cyberpunk_landing_default, cyberpunk_implant_post_default, cyberpunk_header_default, cyberpunk_link_preview_default];
+var cyberpunk_default = pack;
+
+export {
+  cyberpunk_default
+};