@popcraft/kit 0.26.1 → 0.28.0

package/dist/chunks/chunk-GH53MIPY.js

@@ -0,0 +1,225 @@
+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 {
+  DEAL,
+  MARQUEE,
+  fitShopfront,
+  liftShutter,
+  marquee,
+  neonBrand,
+  neonWord,
+  puddle,
+  sheen,
+  shopfront,
+  shutter,
+  spark,
+  two,
+  wash
+} from "./chunk-TVLAY2LP.js";
+import {
+  fitRain,
+  rain
+} from "./chunk-BZAXF2QM.js";
+import {
+  MONO
+} from "./chunk-X23ZWFW2.js";
+import {
+  captionStrip,
+  captionSwap
+} from "./chunk-C7BYFVZT.js";
+import {
+  bed
+} from "./chunk-52GCV7N5.js";
+import {
+  board,
+  patchAll,
+  put,
+  reboard,
+  restyle
+} from "./chunk-QLV6445V.js";
+import {
+  halo
+} from "./chunk-HVK5T4I5.js";
+import {
+  feedVariants,
+  pill,
+  verticalPadding
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-WBZ6O2YF.js";
+import {
+  Kit,
+  preset
+} from "./chunk-MTD3UAQT.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/motion/black-friday-neon-deal-reel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var { beat, duration: DURATION, audio: music } = bed("tension", 28);
+var TICKS = 6;
+var WINDOW = { w: 800, h: 300 };
+var RAIN = { color: "ice", opacity: 0.13, rate: 960, seed: 9, count: 22, len: 90 };
+var cues = [
+  { layer: "Headline", preset: "rise-in", at: beat(0), params: { duration: 450 } },
+  { layer: "Sign board", preset: "shake", at: beat(4), params: { duration: 400, distance: 10 } },
+  { layer: "Solo row", preset: "rise-in", at: beat(8), params: { duration: 350 } },
+  { layer: "Clock row", preset: "rise-in", at: beat(12), params: { duration: 350 } },
+  { layer: "Button", preset: "pop-in", at: beat(16), params: { duration: 450 } },
+  { layer: "Team figure", preset: "pulse", at: beat(22), params: { duration: 500, amount: 0.06 } },
+  { layer: "Button", preset: "pulse", at: beat(24), params: { duration: 500, amount: 0.06 } }
+];
+var counts = [
+  // The price falls over two beats once the shutter is up.
+  { layer: "Team figure", at: beat(5), duration: beat(2), counter: { from: DEAL.teamWas, to: DEAL.teamNow, prefix: "$" } },
+  { layer: "Solo figure", at: beat(8), duration: beat(2), counter: { from: DEAL.soloWas, to: DEAL.soloNow, prefix: "$" } },
+  // The clock: a second off every two beats.
+  { layer: "Clock figure", at: beat(12), duration: TICKS * 1e3, tick: 1e3, counter: { from: DEAL.seconds, to: DEAL.seconds - TICKS, prefix: `${DEAL.days}D ${two(DEAL.hours)}:${two(DEAL.minutes)}:` } }
+];
+var swaps = [captionSwap(["Shutter's up. The sale's on.", `Every annual plan, ${DEAL.off}% off.`, `Use code ${DEAL.code} at checkout.`, "Shutter drops Monday at midnight."], 0, DURATION, { stagger: 60, in: 300, out: 250, rise: 30 })];
+var NAME = "Black Friday neon deal reel";
+function planRow(k, parent, id, label, was, now) {
+  const row = k.stack(parent, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", gap: 16, name: `${id} row` });
+  k.text(row, label, { style: "Row 30", color: "onCard", autoWidth: true, name: `${id} label` });
+  const right = k.stack(row, { direction: "HORIZONTAL", width: "HUG", gap: 20, align: "CENTER", name: `${id} prices` });
+  const struck = k.stack(right, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", name: `${id} was` });
+  k.text(struck, `$${was}`, { style: "Was 30", color: "cardMuted", autoWidth: true, name: `${id} list` });
+  k.rect(struck, 84, 3, "red", { name: "Strike", absolute: { x: -4, y: 19 } });
+  k.text(right, `$${now}`, { style: "Figure 60", color: "amber", width: 178, align: "RIGHT", name: `${id} figure` });
+}
+var black_friday_neon_deal_reel_default = defineTemplate({
+  id: "motion-black-friday-neon-deal-reel",
+  meta: {
+    name: NAME,
+    description: "A 14-second vertical sale video as a shopfront at night: a neon SALE sign stutters on letter by letter on a wet brick wall, the discount lights tube by tube, an arrow of bulbs chases, and on the beat a roller shutter lifts to show the annual prices counting down to half. One letter buzzes and relights; the signs lie in the puddles. Music, burned-in captions, 9:16 with square, 4:5 and 16:9 layouts",
+    category: "animation",
+    tags: ["animation", "black friday", "cyber monday", "sale", "saas", "neon", "neon sign", "shopfront", "night", "rain", "flicker", "price drop", "counter", "countdown", "audio", "music", "captions", "reel", "discount code"],
+    platforms: ["instagram", "tiktok", "youtube", "x", "linkedin"],
+    formats: ["reel", "short", "story", "post", "portrait-post", "video", "ad"],
+    useCases: ["sale", "countdown", "pricing"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, swaps },
+  build() {
+    const k = new Kit(NAME, preset("ig-story"));
+    k.quantizeGeometry = true;
+    neonBrand(k, { name: DEAL.product, site: DEAL.site });
+    k.textStyle("Headline 88", { size: 88, fontWeight: 900, letterSpacing: -3.2, lineHeight: 88, textAlign: "CENTER" });
+    k.textStyle("Headline 72", { size: 72, fontWeight: 900, letterSpacing: -2.6, lineHeight: 74 });
+    k.textStyle("Label 20", { ...MONO, size: 20, fontWeight: 700, letterSpacing: 2, lineHeight: 26 });
+    k.textStyle("Row 30", { size: 30, fontWeight: 700, letterSpacing: -0.4, lineHeight: 38 });
+    k.textStyle("Row 24", { size: 24, fontWeight: 700, letterSpacing: -0.3, lineHeight: 30 });
+    k.textStyle("Was 30", { ...MONO, size: 30, fontWeight: 600, lineHeight: 38, fontFeatures: { tnum: 1 } });
+    k.textStyle("Figure 60", { ...MONO, size: 60, fontWeight: 800, letterSpacing: -2, lineHeight: 64, fontFeatures: { tnum: 1 } });
+    k.textStyle("Clock 40", { ...MONO, size: 40, fontWeight: 800, letterSpacing: -1, lineHeight: 46, fontFeatures: { tnum: 1 } });
+    k.textStyle("Caption 38", { size: 38, fontWeight: 800, letterSpacing: -0.6, lineHeight: 46, textAlign: "CENTER" });
+    k.textStyle("Button 34", { size: 34, fontWeight: 800, lineHeight: 42 });
+    pill(k, "Buy button", { fill: "primary", ink: "onPrimary", style: "Button 34", label: DEAL.link, pad: [20, 44], radius: 12 });
+    const sheet = k.sheet;
+    const pad = verticalPadding();
+    k.flowSheet(sheet, 18, pad, "paper", "CENTER", "CENTER");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30, audio: music });
+    const STREET = 1492;
+    shopfront(k, sheet, { street: STREET });
+    wash(k, sheet, "red", { x: 540, y: STREET + 150, w: 1100, h: 420, alpha: 0.3, name: "Road light" });
+    rain(k, sheet, 1080, 1920, RAIN);
+    const layout = k.stack(sheet, { gap: 18, align: "CENTER", name: "Layout" });
+    const top = k.stack(layout, { gap: 18, align: "CENTER", name: "Top" });
+    const sign = marquee(k, board(k, top, MARQUEE.w, MARQUEE.h, 1, "Sign board"), { loopMs: DURATION, laps: 14 });
+    const mid = k.stack(top, { gap: 18, align: "CENTER", name: "Mid" });
+    k.text(mid, "Lights on.\nPrices down.", { style: "Headline 88", color: "text", name: "Headline" });
+    const win = k.stack(mid, { height: WINDOW.h, fill: "card", radius: 10, clip: true, padding: { top: 22, right: 30, bottom: 22, left: 30 }, justify: "SPACE_BETWEEN", stroke: { color: "steelEdge", width: 5, align: "INSIDE" }, name: "Window" });
+    const head = k.stack(win, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Window head" });
+    k.text(head, `ANNUAL PLANS \xB7 CODE ${DEAL.code}`, { style: "Label 20", color: "cardMuted", autoWidth: true, name: "Window label" });
+    const open = neonWord(k, head, "OPEN", "ice", { cap: 24, t: 3.5, name: "Open", flow: true, strength: 0.8 });
+    planRow(k, win, "Team", "Team, a year", DEAL.teamWas, DEAL.teamNow);
+    planRow(k, win, "Solo", "Solo, a year", DEAL.soloWas, DEAL.soloNow);
+    const clock = k.stack(win, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", gap: 16, name: "Clock row" });
+    k.text(clock, "Shutter drops in", { style: "Row 30", color: "onCard", autoWidth: true, name: "Clock label" });
+    k.text(clock, `${DEAL.days}D ${two(DEAL.hours)}:${two(DEAL.minutes)}:${DEAL.seconds - TICKS}`, { style: "Clock 40", color: "ice", width: 300, align: "RIGHT", name: "Clock figure" });
+    sheen(k, win, WINDOW.w, WINDOW.h);
+    const roller = shutter(k, win, WINDOW.w, WINDOW.h);
+    const foot = k.stack(layout, { gap: 18, align: "CENTER", name: "Foot" });
+    captionStrip(k, foot, swaps[0].words[0], { style: "Caption 38", fill: "accent", ink: "onAccent", radius: 10, pad: [18, 24], effects: [halo(k, "amber", 0.45, 34)] });
+    k.instance(foot, "Buy button", { Label: DEAL.link }, { name: "Button" });
+    const saleNode = k.node(sign.sale.frame), offNode = k.node(sign.off.frame);
+    const salePool = puddle(k, sheet, sign.sale.w, sign.sale.h, sign.sale.paths, "red", { t: 19, name: "Sale puddle", absolute: { x: pad.left + saleNode.x, y: STREET + 36 }, squash: 0.62, opacity: 0.5, blur: 9 });
+    const offPool = puddle(k, sheet, sign.off.w, sign.off.h, sign.off.paths, "amber", { t: 10, name: "Off puddle", absolute: { x: pad.left + offNode.x, y: STREET + 232 }, squash: 0.62, opacity: 0.4, blur: 7 });
+    k.counts(sheet, counts);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    spark(k, [k.named(sign.border, "Border tube")[0]], [{ on: 0 }]);
+    sign.sale.tubes.forEach((id, i) => spark(k, [id], i === 1 ? [{ on: 120 + i * 170 }, { buzz: beat(20) }] : [{ on: 120 + i * 170 }]));
+    spark(k, [salePool], [{ on: 460 }], [0.5]);
+    sign.off.tubes.forEach((id, i) => spark(k, [id], [{ on: beat(1) + i * 220 }]));
+    spark(k, [offPool], [{ on: beat(2.5) }], [0.4]);
+    open.tubes.forEach((id) => spark(k, [id], [{ on: beat(4) + 300 }]));
+    liftShutter(k, roller, WINDOW.h, beat(4), 650);
+    const night = (kit, id, street, u = 1) => {
+      fitShopfront(kit, id, { street, u });
+      fitRain(kit, id, { name: "Rain", seed: RAIN.seed, count: RAIN.count, len: RAIN.len });
+    };
+    const glaze = (kit, id, w) => {
+      patchAll(kit, id, "Window", { layoutSizingHorizontal: "FIXED", width: w });
+      patchAll(kit, id, "Sheen", { visible: false });
+      patchAll(kit, id, "Shutter", { x: 0, y: 0, scaleX: w / WINDOW.w, anchorX: 0 });
+    };
+    k.variants(sheet, [
+      ...feedVariants({ post: 44, portrait: 60 }, {
+        // The square: the sign across the top, the words beside the window, the caption beside the button.
+        post: (kit, id) => {
+          night(kit, id, void 0);
+          patchAll(kit, id, "Street", { visible: false });
+          patchAll(kit, id, "Mid", { layoutMode: "HORIZONTAL", itemSpacing: 28, counterAxisAlignItems: "CENTER" });
+          restyle(kit, id, "Headline", "Headline 72");
+          patchAll(kit, id, "Headline", { layoutSizingHorizontal: "FIXED", width: 440 });
+          glaze(kit, id, 524);
+          for (const n of ["Team label", "Solo label", "Clock label"]) restyle(kit, id, n, "Row 24");
+          patchAll(kit, id, "Clock figure", { width: 270 });
+          for (const n of ["Road light", "Sale puddle", "Off puddle"]) patchAll(kit, id, n, { visible: false });
+        },
+        portrait: (kit, id) => {
+          night(kit, id, 1262);
+          kit.patch(id, { padding: { top: 44, right: 60, bottom: 104, left: 60 } });
+          reboard(kit, id, "Sign board", 1.1);
+          glaze(kit, id, 960);
+          put(kit, id, "Road light", 540 - 550, 1262 - 60);
+          put(kit, id, "Sale puddle", 190, 1276, { scaleX: 1, scaleY: 0.5, anchorY: 0 });
+          patchAll(kit, id, "Off puddle", { visible: false });
+        }
+      }),
+      {
+        // 16:9: the sign on the left, the words and the window beside it, the caption and the button along the foot.
+        preset: "video-1080p",
+        adjust: (kit, id) => {
+          night(kit, id, 946);
+          kit.patch(id, { padding: { top: 54, right: 160, bottom: 150, left: 112 }, itemSpacing: 22 });
+          patchAll(kit, id, "Layout", { itemSpacing: 26 });
+          patchAll(kit, id, "Top", { layoutMode: "HORIZONTAL", itemSpacing: 64, counterAxisAlignItems: "CENTER" });
+          reboard(kit, id, "Sign board", 1.24);
+          patchAll(kit, id, "Mid", { itemSpacing: 26, counterAxisAlignItems: "MIN" });
+          restyle(kit, id, "Headline", "Headline 72");
+          glaze(kit, id, 672);
+          patchAll(kit, id, "Foot", { layoutMode: "HORIZONTAL", itemSpacing: 24, counterAxisAlignItems: "CENTER" });
+          put(kit, id, "Road light", 590 - 550, 946 - 100);
+          put(kit, id, "Sale puddle", 170, 960, { scaleX: 1.24, scaleY: 0.6, anchorX: 0, anchorY: 0 });
+          put(kit, id, "Off puddle", 1100, 990, { scaleX: 1, scaleY: 0.7, anchorX: 0, anchorY: 0 });
+        }
+      }
+    ]);
+    return k.finish();
+  }
+});
+
+export {
+  black_friday_neon_deal_reel_default
+};

package/dist/chunks/chunk-GHDLH3ZV.js

@@ -0,0 +1,50 @@
+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 {
+  slideshow
+} from "./chunk-GWSQFWTU.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/slideshow/adoption.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var story = {
+  id: "motion-slideshow-adoption",
+  song: "littleSteps",
+  voice: "grotesk",
+  meta: {
+    name: "Pet adoption slideshow",
+    description: "A cheerful adoption reel for an animal rescue: a title card with the shelter, puppies and kittens as chapters, each animal in its own scene with its name and nature, cut on the beats of a playful music-box track (made by PopCraft, CC0), pushes, slides and a light leak, and a closing card with the open day. Photos are CC0 from Wikimedia Commons; drop your own on any frame.",
+    tags: ["animation", "slideshow", "pet", "adoption", "rescue", "shelter", "dog", "puppy", "cat", "kitten", "charity", "photo", "music", "video"],
+    platforms: ["instagram", "tiktok", "facebook", "youtube"],
+    formats: ["video", "reel", "post"],
+    useCases: ["event", "announcement"],
+    created: "2026-10-10",
+    updated: "2026-10-10"
+  },
+  brand: { paper: "#FFF1C9", onPaper: "#2D2140", accent: "#E8553E", shade: "#1F1730", onPhoto: "#FFFFFF", leak: "#FFB86B" },
+  fields: { names: "Meadowbank Rescue", date: "Adoption open day \xB7 Saturday 10\u20134" },
+  scenes: [
+    { kind: "title", name: "Opening", photo: "pet-05", kicker: "Looking for a sofa", beats: 8, move: "in" },
+    { kind: "chapter", name: "Chapter 1", kicker: "The dogs", title: "Woof", beats: 4 },
+    { kind: "photo", name: "Biscuit", photo: "pet-00", layout: "matted", caption: "Biscuit, zero to zoomies", place: "1 year \xB7 good with kids", beats: 4, move: "left", into: "push" },
+    { kind: "photo", name: "Pip", photo: "pet-02", layout: "matted", caption: "Pip will sit for cheese", place: "4 months \xB7 Jack Russell", beats: 4, move: "in", into: "push" },
+    { kind: "photo", name: "Moose", photo: "pet-03", layout: "matted", caption: "Moose, a gentleman", place: "6 months \xB7 Frenchie", beats: 4, move: "right", into: "slide" },
+    { kind: "chapter", name: "Chapter 2", kicker: "The cats", title: "Meow", beats: 4 },
+    { kind: "photo", name: "Pepper", photo: "pet-06", layout: "matted", caption: "Pepper sees everything", place: "2 years \xB7 indoor", beats: 4, move: "in", into: "push" },
+    { kind: "photo", name: "Litter", photo: "pet-08", layout: "matted", caption: "Three sisters, rehomed together", beats: 4, move: "left", into: "slide" },
+    { kind: "photo", name: "Nap", photo: "pet-07", caption: "Some of us just want a nap", beats: 6, move: "in", into: "leak" },
+    { kind: "end", name: "Ending", kicker: "Come and say hello" }
+  ]
+};
+var adoption_default = slideshow(story);
+
+export {
+  story,
+  adoption_default
+};

package/dist/chunks/chunk-GJHWABWC.js

@@ -0,0 +1,163 @@
+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 {
+  beat,
+  deck,
+  fitLido,
+  heatBrand,
+  lilo,
+  parasols,
+  pool
+} from "./chunk-OWBQK2UK.js";
+import {
+  SONGS,
+  beatMs
+} from "./chunk-BRXHI3R3.js";
+import {
+  MONO
+} from "./chunk-X23ZWFW2.js";
+import {
+  feedVariants,
+  pill,
+  verticalPadding
+} from "./chunk-EK5CFFJO.js";
+import {
+  SONG_HASHES
+} from "./chunk-AXTNNHMG.js";
+import {
+  defineTemplate
+} from "./chunk-WBZ6O2YF.js";
+import {
+  Kit,
+  preset,
+  swapTimes
+} from "./chunk-MTD3UAQT.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/motion/summer-heatwave-lido-reel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 15e3;
+var beat2 = (n) => Math.round(n * beatMs(SONGS.openRoad));
+var LANES = ["Uptime", "Deploys", "Alerts", "Tickets", "Billing", "Backups"];
+var SWIMMERS = [
+  { lane: 0, phase: 0.3, laps: 1.1, cap: "capA", suit: "suitA", skin: "skinA" },
+  { lane: 1, phase: 0.74, laps: 1.5, cap: "capB", suit: "suitA", skin: "skinB" },
+  { lane: 2, phase: 0.2, laps: 1.9, cap: "capC", suit: "suitB", skin: "skinA" },
+  { lane: 2, phase: 0.72, laps: 1.9, cap: "capA", suit: "suitC", skin: "skinB" },
+  { lane: 3, phase: 0.5, laps: 1.3, cap: "capB", suit: "suitC", skin: "skinA" },
+  { lane: 4, phase: 0.14, laps: 1.6, cap: "capA", suit: "suitB", skin: "skinB" },
+  { lane: 5, phase: 0.42, laps: 1.2, cap: "capC", suit: "suitA", skin: "skinA" }
+];
+var lido = (h, top, o = {}) => ({
+  w: 1080,
+  h,
+  u: 1,
+  loopMs: DURATION,
+  pool: { x: 48, y: top, w: 912, h: 1500, lanes: 6 },
+  blocks: { labels: LANES, style: "Lane 20", num: "Number 30", h: 92 },
+  swimmers: SWIMMERS,
+  rings: [{ x: 690, y: 1040, size: 150 }],
+  parasols: [{ x: 96, y: 86, r: 168 }, { x: 936, y: 150, r: 236, sun: true }],
+  towels: [{ x: 372, y: -40, w: 130, h: 250, alt: true }],
+  loungers: [{ x: 548, y: -110, w: 128 }, { x: 994, y: top + 120, w: 96 }, { x: 994, y: top + 400, w: 96 }, { x: 994, y: top + 680, w: 96 }, { x: 994, y: top + 960, w: 96 }],
+  flipflops: { x: 300, y: 150 },
+  steps: { x: 250, y: top - 150, n: 5, dx: -6, dy: -62 },
+  ...o
+});
+var STORY = lido(1920, 742);
+var swaps = [
+  { layer: "Caption", words: ["It is 34\xB0 out. Your app does not need you today.", "Lifeguard restarts what falls over and answers the easy tickets.", "It only blows the whistle for what a human must decide.", "Summer pass: three months free. Take August off."], at: beat2(2), hold: 1990, stagger: 45, in: 350, out: 250, unit: "word", rise: 26 }
+];
+var cues = [
+  { layer: "Eyebrow", preset: "fade-in", at: 0, params: { duration: 400 } },
+  { layer: "Headline", preset: "lines-in", at: 0, params: { duration: 600 } },
+  { layer: "Block", preset: "drop-in", at: beat2(1), params: { duration: 420 }, stagger: { delay: 100 } },
+  { layer: "Lilo", preset: "slide-in", at: beat2(1), params: { duration: 900, direction: "left" } },
+  { layer: "Call", preset: "pop-in", at: beat2(4), params: { duration: 500 } },
+  { layer: "Site", preset: "fade-in", at: beat2(5), params: { duration: 600 } },
+  { layer: "Lifebuoy", preset: "pulse", at: beat2(12), params: { duration: 900, amount: 0.12 } },
+  { layer: "Call", preset: "pulse", at: beat2(20), params: { duration: 900, amount: 0.07 } },
+  { layer: "Call", preset: "pulse", at: beat2(22), params: { duration: 900, amount: 0.07 } }
+];
+var summer_heatwave_lido_reel_default = defineTemplate({
+  id: "motion-summer-heatwave-lido-reel",
+  meta: {
+    name: "Summer heatwave lido reel",
+    description: "A 15-second summer reel for a SaaS that keeps working while its founder is at the pool: a lido seen from above at noon, \u201CGone swimming.\u201D on the hot deck in the first half second, the product\u2019s jobs as swimmers doing lengths in named lanes, the story in burned-in captions on a floating air bed, and a summer offer on a button \u2014 hard midday shadows, rippling water and a parasol that beats like the sun. Cut to a plucked guitar (made by PopCraft, CC0). 9:16 with 1:1 and 4:5 cuts",
+    category: "animation",
+    tags: ["animation", "summer", "heatwave", "lido", "pool", "swimming", "out of office", "summer sale", "offer", "saas", "reel", "captions", "music", "audio", "seasonal"],
+    platforms: ["instagram", "tiktok", "youtube", "linkedin"],
+    formats: ["reel", "short", "story", "post", "portrait-post"],
+    useCases: ["sale", "announcement", "launch"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, swaps },
+  build() {
+    const k = new Kit("Summer heatwave lido reel", preset("ig-story"));
+    k.quantizeGeometry = true;
+    heatBrand(k, { headline: "Gone\nswimming." });
+    k.textStyle("Eyebrow 26", { size: 26, fontWeight: 800, letterSpacing: 4.5, lineHeight: 34, textCase: "UPPER" });
+    k.textStyle("Display 150", { size: 150, fontWeight: 900, letterSpacing: -6, lineHeight: 132, textCase: "UPPER" });
+    k.textStyle("Display 124", { size: 124, fontWeight: 900, letterSpacing: -5, lineHeight: 110, textCase: "UPPER" });
+    k.textStyle("Display 104", { size: 104, fontWeight: 900, letterSpacing: -4, lineHeight: 94, textCase: "UPPER" });
+    k.textStyle("Lane 20", { ...MONO, size: 19, fontWeight: 700, letterSpacing: 0, lineHeight: 24, textCase: "UPPER", textAlign: "CENTER" });
+    k.textStyle("Number 30", { ...MONO, size: 30, fontWeight: 800, lineHeight: 32, textAlign: "CENTER" });
+    k.textStyle("Caption 38", { size: 38, fontWeight: 700, letterSpacing: -0.5, lineHeight: 46 });
+    k.textStyle("Caption 32", { size: 32, fontWeight: 700, letterSpacing: -0.4, lineHeight: 39 });
+    k.textStyle("Button 32", { size: 32, fontWeight: 800, lineHeight: 40 });
+    k.textStyle("Site 24", { ...MONO, size: 24, fontWeight: 700, lineHeight: 32, textAlign: "CENTER" });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 32", label: "Get the summer pass", pad: [22, 44] });
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Lido reel");
+    k.flowSheet(sheet, 0, verticalPadding(), "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30, audio: [{ id: "a1", mediaHash: SONG_HASHES.openRoad, name: "Open Road (100 BPM, made by PopCraft, CC0)", start: 0, in: 0, out: DURATION, lane: 0, fadeOut: 1500 }] });
+    const s = STORY;
+    deck(k, sheet, s);
+    pool(k, sheet, s);
+    parasols(k, sheet, s);
+    const top = k.stack(sheet, { gap: 14, name: "Top" });
+    k.text(top, "{{brand.name}} \xB7 Summer pass", { style: "Eyebrow 26", color: "text", name: "Eyebrow" });
+    k.text(top, "{{brand.headline}}", { style: "Display 150", color: "text", name: "Headline" });
+    const foot = k.stack(sheet, { gap: 26, align: "CENTER", name: "Foot" });
+    const bed = lilo(k, foot, { w: "FILL", h: 176, loopMs: DURATION });
+    k.text(bed, swaps[0].words[0], { style: "Caption 38", color: "ink", name: "Caption" });
+    k.instance(foot, "Button", { Label: "Get the summer pass" }, { name: "Call" });
+    const site = k.stack(foot, { width: "HUG", fill: "foam", radius: 8, padding: { top: 6, right: 16, bottom: 6, left: 16 }, name: "Site" });
+    k.text(site, "Code POOLSIDE \xB7 {{brand.site}}", { style: "Site 24", color: "ink", autoWidth: true, name: "Site words" });
+    {
+      const last = swapTimes(swaps[0]).at(-1);
+      if (last.gone > DURATION || last.gone < DURATION - 300) throw new Error("summer heatwave reel: the captions must end with the music");
+    }
+    beat(k, sheet, 0, beat2(2), Math.floor(DURATION / beat2(2)));
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    k.variants(sheet, feedVariants({ post: 56, portrait: 72 }, {
+      post: (kit, id) => {
+        for (const n of kit.named(id, "Foot")) kit.patch(n, { itemSpacing: 16 });
+        for (const n of kit.named(id, "Caption")) kit.restyle(n, "Caption 32");
+        for (const n of kit.named(id, "Lilo")) kit.patch(n, { height: 150 });
+        for (const n of kit.named(id, "Headline")) kit.restyle(n, "Display 104");
+        fitLido(kit, id, lido(1080, 430, { parasols: [{ x: 1500, y: 86, r: 168 }, { x: 1016, y: 56, r: 170, sun: true }], towels: [{ x: 700, y: 250, w: 110, h: 150, alt: true }], loungers: [{ x: 1500, y: -110, w: 128 }, { x: 994, y: 550, w: 96 }, { x: 994, y: 830, w: 96 }], flipflops: { x: 620, y: 300 }, steps: { x: 560, y: 310, n: 4, dx: -40, dy: -50 } }));
+      },
+      portrait: (kit, id) => {
+        for (const n of kit.named(id, "Headline")) kit.restyle(n, "Display 124");
+        fitLido(kit, id, lido(1350, 540, { parasols: [{ x: 1500, y: 86, r: 168 }, { x: 1012, y: 84, r: 184, sun: true }], towels: [{ x: 720, y: 330, w: 120, h: 180, alt: true }], loungers: [{ x: 1500, y: -110, w: 128 }, { x: 994, y: 660, w: 96 }, { x: 994, y: 940, w: 96 }], flipflops: { x: 610, y: 400 }, steps: { x: 540, y: 420, n: 4, dx: -40, dy: -50 } }));
+      }
+    }));
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  summer_heatwave_lido_reel_default
+};

package/dist/chunks/chunk-GKOXC2OE.js

@@ -0,0 +1,184 @@
+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 {
+  flatPhone,
+  uiRoles
+} from "./chunk-XFK7KVIF.js";
+import {
+  MONO
+} from "./chunk-X23ZWFW2.js";
+import {
+  ground
+} from "./chunk-QLV6445V.js";
+import {
+  hardShadow
+} from "./chunk-HVK5T4I5.js";
+import {
+  logoBadge,
+  pill
+} from "./chunk-EK5CFFJO.js";
+import {
+  box
+} from "./chunk-BNVLVZUT.js";
+import {
+  defineTemplate
+} from "./chunk-WBZ6O2YF.js";
+import {
+  Kit,
+  preset
+} from "./chunk-MTD3UAQT.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/social/saas-store-play-kit.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+function leafAt(x, y, len, wid, deg) {
+  const a = deg * Math.PI / 180, dx = Math.sin(a), dy = -Math.cos(a), nx = -dy, ny = dx;
+  const tip = { x: x + dx * len, y: y + dy * len };
+  const side = (t, s) => ({ x: x + dx * len * t + nx * wid * s, y: y + dy * len * t + ny * wid * s });
+  return { closed: true, points: [{ x, y, handleOut: side(0.25, 1) }, { ...tip, handleIn: side(0.7, 0.9), handleOut: side(0.7, -0.9) }, { x, y, handleIn: side(0.25, -1) }] };
+}
+var plantPhoto = (height, name, focus = false) => ({ kind: "custom", build: (k, parent, w) => {
+  const photo = k.photo(parent, w, height, { radius: 24, ground: "photo", name });
+  const at = { absolute: { x: 0, y: 0 } };
+  const cx = w * (focus ? 0.5 : 0.36), sill = height - 22, potH = height * 0.3, potW = height * 0.36, rim = sill - potH;
+  k.ellipse(photo, Math.round(height * 1.5), "surface", { name: "Window light", opacity: 0.5, absolute: { x: Math.round(cx - height * 0.2), y: Math.round(-height * 0.7) } });
+  k.vector(photo, w, height, [box(0, sill, w, 22)], "leafB", { name: "Sill", ...at });
+  k.vector(photo, w, height, [{ closed: true, points: [{ x: cx - potW / 2, y: rim }, { x: cx + potW / 2, y: rim }, { x: cx + potW * 0.36, y: sill }, { x: cx - potW * 0.36, y: sill }] }, box(cx - potW * 0.58, rim - 12, potW * 1.16, 16)], "pot", { name: "Pot", ...at });
+  const reach = rim - 14;
+  k.vector(photo, w, height, [leafAt(cx, rim - 8, reach * 0.86, reach * 0.24, -58), leafAt(cx, rim - 8, reach * 0.9, reach * 0.26, 52), leafAt(cx, rim - 8, reach, reach * 0.22, 4)], "leafB", { name: "Back leaves", ...at });
+  k.vector(photo, w, height, [leafAt(cx, rim - 8, reach * 0.8, reach * 0.24, -26), leafAt(cx, rim - 8, reach * 0.76, reach * 0.24, 28)], "leafA", { name: "Front leaves", ...at });
+  if (focus) {
+    const fw = height * 0.86, fh = height * 0.8, fx = cx - fw / 2, fy = (height - fh) / 2 - 4, c = 26;
+    const corner = (px, py, sx, sy) => ({ closed: false, points: [{ x: px, y: py + sy * c }, { x: px, y: py }, { x: px + sx * c, y: py }] });
+    k.vector(photo, w, height, [corner(fx, fy, 1, 1), corner(fx + fw, fy, -1, 1), corner(fx + fw, fy + fh, -1, -1), corner(fx, fy + fh, 1, -1)], "surface", { name: "Focus", strokeWidth: 4, ...at });
+  }
+} });
+var SCREENS = [
+  { name: "Today", tabs: [4, 0], blocks: [
+    { kind: "title", text: "Today", note: "3 thirsty" },
+    { kind: "hero", label: "Water before noon", figure: "3 plants", note: "Monstera, basil, the big fern", share: 0.33 },
+    { kind: "checks", rows: [["Monstera \xB7 250 ml", true], ["Basil on the sill \xB7 80 ml", false], ["Boston fern \xB7 mist only", false]] },
+    { kind: "heading", text: "Happy for now", note: "9 plants" },
+    { kind: "rows", card: true, rows: [{ title: "Snake plant", sub: "Water in 11 days", glyph: "leaf" }, { title: "Pilea", sub: "Water on Sunday", glyph: "leaf" }, { title: "String of pearls", sub: "Leave it alone", glyph: "drop", ink: "onScreenMuted", tile: "track" }] }
+  ] },
+  { name: "Plant", tabs: [4, 1], blocks: [
+    { kind: "title", text: "Monstera", note: "Living room" },
+    plantPhoto(190, "Plant photo"),
+    { kind: "tiles", items: [["Soil", "Dry"], ["Last drink", "8 days ago"]] },
+    { kind: "curve", title: "Soil moisture", note: "14 days", values: [80, 72, 61, 50, 42, 88, 79, 70, 58, 49, 41, 33, 27, 22], height: 100 },
+    { kind: "button", label: "I watered it" },
+    { kind: "text", text: "New leaf unfurling. Turn the pot a quarter so it grows straight." }
+  ] },
+  { name: "Identify", tabs: [4, 2], blocks: [
+    { kind: "title", text: "What is it?", note: "Camera" },
+    plantPhoto(250, "Snapshot", true),
+    { kind: "hero", label: "96% match", figure: "Pilea", note: "Chinese money plant \xB7 easy", fill: "accent", ink: "onAccent" },
+    { kind: "rows", card: true, rows: [{ title: "Water", sub: "When the top inch is dry", glyph: "drop" }, { title: "Light", sub: "Bright, out of direct sun", glyph: "sun" }, { title: "Pets", sub: "Safe for cats and dogs", glyph: "check" }] }
+  ] },
+  { name: "Rescue", tabs: [4, 3], blocks: [
+    { kind: "title", text: "Plant doctor", note: "Basil" },
+    { kind: "hero", label: "Yellow lower leaves", figure: "Overwatered", note: "Fixable in about ten days" },
+    { kind: "checks", rows: [["Skip the next two waterings", true], ["Move it off the cold sill", true], ["Pinch the flower buds", false], ["Repot if it smells sour", false]] },
+    { kind: "bars", title: "Recovery", note: "Day 4 of 10", values: [2, 3, 4, 6, 7, 8, 9, 9, 10, 10], hi: 3, height: 90 },
+    { kind: "button", label: "Remind me on Thursday" }
+  ] }
+];
+var SHOTS = [
+  { key: "Water", fill: "accent", label: "It tells you who\u2019s thirsty.", tag: "No more guessing", tilt: -3 },
+  { key: "Track", fill: "primary", label: "Every plant gets its own page.", tag: "Soil, light, last drink", tilt: 3 },
+  { key: "Identify", fill: "paper", label: "Point. Shoot. It\u2019s a Pilea.", tag: "12,000 species", tilt: -3 },
+  { key: "Rescue", fill: "secondary", label: "A plan for the one that\u2019s dying.", tag: "Plant doctor", tilt: 3 }
+];
+var leaf = (w, h) => ({ closed: true, points: [
+  { x: w / 2, y: h, handleOut: { x: -w * 0.25, y: h * 0.7 } },
+  { x: w / 2, y: 0, handleIn: { x: -w * 0.1, y: h * 0.2 }, handleOut: { x: w * 1.1, y: h * 0.2 } },
+  { x: w / 2, y: h, handleIn: { x: w * 1.25, y: h * 0.7 } }
+] });
+var saas_store_play_kit_default = defineTemplate({
+  id: "social-saas-store-play-kit",
+  meta: {
+    name: "SaaS store Google Play kit",
+    description: "A Google Play listing in one neo-brutalist system: the 1024 \xD7 500 feature graphic (words on the left, clear of the centre where Play lays its play button) and four 1080 \xD7 1920 phone screenshots, each one benefit on an outlined label over a phone with a block shadow and outsized leaves. Drop your own capture on each phone\u2019s screenshot slot",
+    category: "social",
+    tags: ["saas", "saas store", "google play", "feature graphic", "screenshots", "android", "neo-brutalist", "aso", "mobile app", "subscription app", "listing", "play store"],
+    platforms: ["google-play", "android"],
+    formats: ["banner", "screenshot", "gallery"],
+    useCases: ["launch", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  sequence: true,
+  build() {
+    const k = new Kit("SaaS store Google Play kit", preset("play-feature"));
+    k.quantizeGeometry = true;
+    k.brand(
+      {
+        paper: "#F4EFE2",
+        text: "#151515",
+        primary: "#22B573",
+        onPrimary: "#0A1A12",
+        secondary: "#FF6A48",
+        onSecondary: "#1E0802",
+        accent: "#FFD43B",
+        onAccent: "#151515",
+        ...uiRoles({ screen: "#F7F5EE", surface: "#FFFFFF", onScreen: "#151515", onScreenMuted: "#55584F", line: "#D9D5C7", track: "#E7E3D6", tile: "#DDF3E7", photo: "#CFE3C4", positive: "#127A4B", primary: "#22B573", onPrimary: "#0A1A12", accent: "#FFD43B", onAccent: "#151515", device: "#151515", deviceEdge: "#151515" })
+      },
+      { name: "Sill", tagline: "Plants that tell you when they\u2019re thirsty." }
+    );
+    k.palette({ outline: "#151515", label: "#FFFFFF", onLabel: "#151515", leafA: "#178A56", leafB: "#0F6B43", pot: "#FF6A48" });
+    k.textStyle("Name 132", { size: 132, fontWeight: 900, letterSpacing: -6, lineHeight: 120 });
+    k.textStyle("Tagline 34", { size: 34, fontWeight: 700, letterSpacing: -0.8, lineHeight: 40 });
+    k.textStyle("Chip 20", { ...MONO, size: 20, fontWeight: 700, letterSpacing: 0.8, lineHeight: 26, textCase: "UPPER" });
+    k.textStyle("Label 100", { size: 100, fontWeight: 900, letterSpacing: -4.6, lineHeight: 98 });
+    k.textStyle("Tag 30", { ...MONO, size: 30, fontWeight: 700, letterSpacing: 1.4, lineHeight: 38, textCase: "UPPER" });
+    pill(k, "Tag", { fill: "outline", ink: "label", style: "Tag 30", label: "01 \xB7 No more guessing", pad: [10, 20], radius: 0 });
+    const line = (w) => ({ color: "outline", width: w, align: "INSIDE" });
+    const drawLeaf = (sheet, w, h, x, y, rot, role, stroke) => {
+      const id = k.vector(sheet, w, h, [leaf(w, h)], role, { name: "Leaf", absolute: { x, y }, stroke: { color: "outline", width: stroke, align: "CENTER" } });
+      k.patch(id, { rotation: rot });
+    };
+    const feature = k.sheet;
+    ground(k, feature, "Feature graphic", "accent");
+    k.rect(feature, 420, 500, "primary", { name: "Green block", absolute: { x: 604, y: 0 }, stroke: line(6) });
+    drawLeaf(feature, 190, 330, 560, 40, -24, "leafA", 6);
+    drawLeaf(feature, 170, 300, 880, 150, 32, "leafB", 6);
+    drawLeaf(feature, 120, 210, 905, -30, 14, "leafA", 6);
+    flatPhone(k, feature, { spec: SCREENS[0], scale: 0.86, x: 640, y: 70, rotation: -7, name: "Phone", shadow: hardShadow(k, "outline", 14, 14) });
+    const words = k.stack(feature, { width: 520, gap: 18, name: "Feature words", absolute: { x: 48, y: 52 } });
+    const brandRow = k.stack(words, { direction: "HORIZONTAL", width: "HUG", gap: 14, align: "CENTER", name: "Brand row" });
+    logoBadge(k, brandRow, { fill: "outline", size: 34, pad: 9, radius: 12 });
+    const chip = k.stack(brandRow, { direction: "HORIZONTAL", width: "HUG", fill: "label", padding: { top: 6, right: 12, bottom: 6, left: 12 }, stroke: line(3), effects: [hardShadow(k, "outline", 4, 4)], name: "Chip" });
+    k.text(chip, "Plant care", { style: "Chip 20", color: "onLabel", autoWidth: true, name: "Chip text" });
+    k.text(words, "{{brand.name}}", { style: "Name 132", color: "onAccent", name: "Name" });
+    const tagBox = k.stack(words, { width: 470, fill: "label", padding: { top: 16, right: 20, bottom: 18, left: 20 }, stroke: line(5), effects: [hardShadow(k, "outline", 8, 8)], name: "Tagline box" });
+    k.text(tagBox, "{{brand.tagline}}", { style: "Tagline 34", color: "onLabel", name: "Tagline" });
+    const W = 1080, SCALE = 2, PW = Math.round(426 * SCALE);
+    SHOTS.forEach((s, i) => {
+      const sheet = k.addSheet(preset("play-phone"));
+      ground(k, sheet, `Screenshot ${i + 1} \xB7 ${s.key}`, s.fill);
+      k.patch(sheet, { x: 1024 + 120 + i * (W + 120), y: 0 });
+      const next = ["primary", "accent", "secondary", "accent"][i];
+      k.rect(sheet, 760, 1300, next, { name: "Block", absolute: { x: i % 2 ? 40 : 280, y: 700 }, stroke: line(8) });
+      drawLeaf(sheet, 340, 600, i % 2 ? 790 : -50, 520, i % 2 ? 28 : -28, "leafA", 9);
+      drawLeaf(sheet, 280, 480, i % 2 ? -60 : 860, 900, i % 2 ? -34 : 34, "leafB", 9);
+      drawLeaf(sheet, 260, 440, i % 2 ? 880 : -70, 1380, i % 2 ? 40 : -40, "leafA", 9);
+      flatPhone(k, sheet, { spec: SCREENS[i], scale: SCALE, x: (W - PW) / 2, y: 560, rotation: s.tilt, name: "Phone", shadow: hardShadow(k, "outline", 14, 14) });
+      const label = k.stack(sheet, { width: W - 128, gap: 0, fill: "label", padding: { top: 34, right: 40, bottom: 40, left: 40 }, stroke: line(8), effects: [hardShadow(k, "outline", 14, 14)], name: "Label", absolute: { x: 56, y: 150 } });
+      k.text(label, s.label, { style: "Label 100", color: "onLabel", name: "Label text" });
+      k.instance(sheet, "Tag", { Label: `0${i + 1} \xB7 ${s.tag}` }, { name: "Tag", absolute: { x: 56, y: 96 } });
+    });
+    k.setCover(feature);
+    return k.finish();
+  }
+});
+
+export {
+  saas_store_play_kit_default
+};