@popcraft/kit 0.53.4 → 0.53.5

package/dist/chunks/chunk-B4E46DWT.js

@@ -0,0 +1,71 @@
+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 {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  hex,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  ease
+} from "./chunk-PLZLKHOI.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/motion/kinetic-headline.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var kinetic_headline_default = defineTemplate({
+  id: "motion-kinetic-headline",
+  meta: {
+    name: "Kinetic headline",
+    description: "Two lines rise out of their own windows and the key word stretches open on an inverted highlight \u2014 a 4-second title for a video or talk",
+    category: "animation",
+    tags: ["animation", "title", "kinetic type", "video"],
+    platforms: ["youtube", "slides", "linkedin"],
+    formats: ["title-card", "intro", "video"],
+    useCases: ["title", "launch"],
+    created: "2026-09-28",
+    updated: "2026-09-28"
+  },
+  build() {
+    const k = new Kit("Kinetic headline", preset("slide-16x9"));
+    k.brand({ primary: "#0E0F14", accent: "#C6FF3D", onPrimary: "#F4F4F0", onAccent: "#0E0F14" });
+    k.textStyle("Headline 150", { size: 150, fontWeight: 800, letterSpacing: -6, lineHeight: 164 });
+    k.textStyle("Highlight 150", { size: 150, fontWeight: 800, letterSpacing: -6, lineHeight: 164 });
+    k.component("Highlight", { direction: "HORIZONTAL", width: "HUG", fill: "accent", radius: 12, padding: { top: 8, right: 28, bottom: 8, left: 28 }, props: { Word: "everywhere." } }, (id) => {
+      k.propText(id, "Word", { style: "Highlight 150", color: "onAccent", autoWidth: true });
+    });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 8, { top: 120, right: 160, bottom: 120, left: 160 }, "primary", "CENTER");
+    const violet = hex("#3A2BFF"), pink = hex("#FF3DA8");
+    const glow = { type: "GRADIENT_LINEAR", opacity: 0.35, visible: true, gradientStops: [{ position: 0, color: violet }, { position: 1, color: k.color("primary", 0) }], gradientHandlePositions: [{ x: 0, y: 0 }, { x: 1, y: 1 }, { x: 0, y: 1 }] };
+    k.patch(sheet, { fills: [...k.paint("primary"), glow], clipsContent: true });
+    k.timeline(sheet, { duration: 4e3, fps: 30 });
+    const row = (name) => k.stack(sheet, { direction: "HORIZONTAL", gap: 36, align: "CENTER", clip: true, name });
+    const line1 = k.text(row("Line 1"), "Design it once.", { style: "Headline 150", color: "onPrimary", autoWidth: true, name: "Line 1" });
+    const second = row("Line 2");
+    const line2 = k.text(second, "Ship it", { style: "Headline 150", color: "onPrimary", autoWidth: true, name: "Line 2" });
+    const highlight = k.instance(second, "Highlight", { Word: "everywhere." });
+    const rise = [{ t: 0, v: 180, ease: ease.out("expo") }, { t: 700, v: 0 }];
+    k.animate(line1, "translateY", rise);
+    k.delay(line2, 900);
+    k.animate(line2, "translateY", rise);
+    k.patch(highlight, { anchorX: 0 });
+    k.delay(highlight, 1700);
+    k.animate(highlight, "scaleX", [{ t: 0, v: 0, ease: ease.out("expo") }, { t: 650, v: 1 }]);
+    k.animate(sheet, "fills[#1].gradientStops[#0].color", [{ t: 0, v: violet, ease: ease.inOut("sine") }, { t: 2e3, v: pink, ease: ease.inOut("sine") }, { t: 4e3, v: violet }]);
+    k.animate(sheet, "fills[#1].gradientStops[#1].position", [{ t: 0, v: 0.7, ease: ease.inOut("sine") }, { t: 4e3, v: 1 }]);
+    return k.finish();
+  }
+});
+
+export {
+  kinetic_headline_default
+};

package/dist/chunks/chunk-B4IM43BZ.js

@@ -0,0 +1,91 @@
+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 {
+  art,
+  businessCard,
+  cardParts,
+  contactLines
+} from "./chunk-LKNIPL2H.js";
+import {
+  SERIF
+} from "./chunk-AXAAXHZF.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/print/printshop-card-yoga.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+function half(x, base, r) {
+  const n = 24;
+  return { closed: true, points: Array.from({ length: n + 1 }, (_, i) => {
+    const a = Math.PI + Math.PI * i / n;
+    return { x: Math.round((x + r * Math.cos(a)) * 1e3) / 1e3, y: Math.round((base + r * Math.sin(a)) * 1e3) / 1e3 };
+  }) };
+}
+var printshop_card_yoga_default = defineTemplate({
+  id: "print-printshop-card-yoga",
+  meta: {
+    name: "Yoga studio business card",
+    description: "A calm portrait card for a yoga or pilates studio, a massage therapist or a wellness practice: a low sun of soft concentric arcs rising off the foot of a sand front under the studio\u2019s name in a light serif; the back lists the week\u2019s classes, each a row to retype, over the teacher and the brand kit\u2019s number, email and website. 55 \xD7 85 mm, two-sided",
+    category: "business-card",
+    tags: ["business card", "yoga", "yoga studio", "pilates", "wellness", "meditation", "massage", "calm", "minimal", "pastel", "portrait", "two-sided", "print"],
+    platforms: ["print"],
+    formats: ["card"],
+    useCases: ["brand-intro"],
+    created: "2026-10-10",
+    updated: "2026-10-10"
+  },
+  stableNumbers: true,
+  build() {
+    const k = businessCard("Yoga studio business card", { portrait: "business-card-eu" }, (k2) => {
+      k2.brand(
+        { paper: "#F1E7DA", text: "#3E3530", onPaper: "#6E5F55", primary: "#C7795B", onPrimary: "#FFF7EF", accent: "#8FA58C" },
+        { name: "still water", tagline: "Yoga, breath and rest", email: "hello@stillwater.yoga", phone: "07700 900 412", website: "stillwater.yoga", address: "The Old Chapel, 3 Mill Lane, Totnes TQ9 5DH" }
+      );
+      k2.palette({ sun1: "#E9C3A6", sun2: "#E2AE8C", sun3: "#D99575", sun4: "#C97C5E", water: "#DCCBB7" });
+      k2.textStyle("Studio 27", { ...SERIF, size: 27, fontWeight: 300, letterSpacing: -0.5, lineHeight: 30 });
+      k2.textStyle("Kicker 8", { size: 8, fontWeight: 500, letterSpacing: 2.6, lineHeight: 11 });
+      k2.textStyle("Teacher 13", { ...SERIF, size: 13, fontWeight: 400, lineHeight: 16 });
+      k2.textStyle("Role 8", { size: 8, fontWeight: 500, letterSpacing: 1.4, lineHeight: 11 });
+      k2.textStyle("Day 8", { size: 8, fontWeight: 600, letterSpacing: 1, lineHeight: 12 });
+      k2.textStyle("Class 8.5", { size: 8.5, fontWeight: 400, lineHeight: 12 });
+      k2.textStyle("Label 8", { size: 8, fontWeight: 600, letterSpacing: 0.6, lineHeight: 12 });
+      k2.textStyle("Value 8.5", { size: 8.5, fontWeight: 400, lineHeight: 12 });
+      cardParts(k2, { name: "Teacher 13", title: "Role 8", nameColor: "text", titleColor: "onPaper", label: "Label 8", value: "Value 8.5", labelColor: "onPaper", valueColor: "text", gap: 7, labelWidth: 9, personGap: 3 });
+      k2.component("Class", { direction: "HORIZONTAL", gap: 8, align: "CENTER", props: { Day: "MON", Time: "7.00", Class: "Slow flow" } }, (id) => {
+        k2.propText(id, "Day", { style: "Day 8", color: "onPaper", width: 26 });
+        k2.propText(id, "Time", { style: "Class 8.5", color: "onPaper", width: 30 });
+        k2.propText(id, "Class", { style: "Class 8.5", color: "text", width: "FILL" });
+      });
+    }, (k2, { front, back, size }) => {
+      const { W, H, B } = size;
+      k2.flowSheet(front, 10, { top: 64, right: 22, bottom: 24, left: 22 }, "paper", "MIN", "CENTER");
+      const base = H + B;
+      ["sun1", "sun2", "sun3", "sun4"].forEach((role, i) => art(k2, front, W, H, B, [half(W / 2, base, 150 - i * 32)], role, { name: `Sun ${i + 1}` }));
+      art(k2, front, W, H, B, [{ closed: true, points: [{ x: -B, y: H - 46 }, { x: W + B, y: H - 46 }, { x: W + B, y: H - 44.8 }, { x: -B, y: H - 44.8 }] }], "paper", { name: "Horizon" });
+      art(k2, front, W, H, B, [0, 1, 2].map((i) => ({ closed: true, points: [{ x: W / 2 - 50 + i * 12, y: H - 34 + i * 9 }, { x: W / 2 + 50 - i * 12, y: H - 34 + i * 9 }, { x: W / 2 + 50 - i * 12, y: H - 32.8 + i * 9 }, { x: W / 2 - 50 + i * 12, y: H - 32.8 + i * 9 }] })), "paper", { name: "Ripples" });
+      k2.text(front, "YOGA \xB7 BREATH \xB7 REST", { style: "Kicker 8", color: "onPaper", align: "CENTER", width: "FILL", name: "Kicker" });
+      k2.text(front, "{{brand.name}}", { style: "Studio 27", color: "text", align: "CENTER", width: "FILL", name: "Studio" });
+      k2.flowSheet(back, 12, { top: 26, right: 22, bottom: 26, left: 22 }, "paper", "SPACE_BETWEEN", "MIN");
+      const week = k2.stack(back, { gap: 5, name: "Week" });
+      k2.text(week, "THE WEEK", { style: "Kicker 8", color: "onPaper", width: "FILL", name: "Week title" });
+      k2.rect(week, "FILL", 0.75, "accent", { name: "Rule" });
+      for (const [d, t, c] of [["MON", "7.00", "Slow flow"], ["TUE", "18.30", "Vinyasa"], ["WED", "12.15", "Lunch reset"], ["THU", "19.00", "Yin & nidra"], ["SAT", "9.30", "Beginners"]]) k2.instance(week, "Class", { Day: d, Time: t, Class: c }, { width: "FILL", name: "Class" });
+      const who = k2.stack(back, { gap: 10, name: "Teacher" });
+      k2.instance(who, "Person", { Name: "Isla Penrose", Title: "TEACHER, 500 HR RYT" }, { name: "Person" });
+      contactLines(k2, who, ["T", "E", "W"], 1);
+    });
+    return k.finish();
+  }
+});
+
+export {
+  printshop_card_yoga_default
+};

package/dist/chunks/chunk-B6R7FV65.js

@@ -0,0 +1,165 @@
+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 {
+  boardParts,
+  doodle,
+  draw,
+  drawOn,
+  landStamp,
+  pressStar,
+  refit,
+  reportCard,
+  rubOut,
+  schoolBrand,
+  sticker,
+  tally,
+  underline
+} from "./chunk-TYNG2B4D.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-AXAAXHZF.js";
+import {
+  outro,
+  pill,
+  postVariants
+} from "./chunk-KOAJ6HD2.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/social/back-to-school-report-card-post.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 9e3;
+var SHUT = 8200;
+var GRADES = [
+  { n: 1, subject: "Search", grade: "A+", comment: "\u201CFound a decision from March in four seconds.\u201D", who: "Head of product, 40-person fintech" },
+  { n: 2, subject: "Onboarding", grade: "A", comment: "\u201CThe whole team was writing in it by lunch.\u201D", who: "Founder, two-person studio" },
+  { n: 3, subject: "Speed", grade: "A", comment: "\u201CIt opens faster than the tab I was closing.\u201D", who: "Staff engineer, dev-tools startup" },
+  { n: 4, subject: "Mobile app", grade: "B", comment: "\u201CReads well, edits slowly. Could try harder.\u201D", who: "Fair. Offline editing ships this term." }
+];
+var lands = (n) => 1200 + (n - 1) * 850;
+var STAR = lands(4) + 900;
+var counts = [{ layer: "Reviews", at: STAR, duration: 1200, counter: { from: 1e3, to: 1240, separator: "," } }];
+var cues = [
+  { layer: "Term", preset: "fade-in", at: 0, params: { duration: 300 } },
+  { layer: "Eyebrow", preset: "fade-in", at: 0, params: { duration: 400 } },
+  { layer: "Headline", preset: "words-in", at: 0, params: { duration: 600 } },
+  { layer: "Report card", preset: "drop-in", at: 150, params: { duration: 600 } },
+  { layer: "Tally row", preset: "rise-in", at: STAR - 100, params: { duration: 500 } },
+  { layer: "Site", preset: "fade-in", at: STAR + 500, params: { duration: 500 } },
+  { layer: "Headline", preset: "words-out", at: SHUT, params: { duration: 400 } },
+  outro(["Term", "Eyebrow", "Report card", "Gold star", "Tally row", "Site"], SHUT + 250)
+];
+var FRAME = 24;
+function scenery(h) {
+  const tall = h > 1500;
+  return [
+    ...boardParts({ w: 1080, h, u: 1, frame: FRAME, tray: tall, duster: 0.56, sticks: 0.1, swipe: tall ? { x: 560, y: 1590, length: 660, turn: -6 } : { x: 760, y: 170, length: 520, turn: -8 } }),
+    ...tall ? [
+      ...doodle({ kind: "trail", name: "Flight", x: 150, y: -170, s: 600, tall: 0.14, width: 4 }),
+      ...doodle({ kind: "plane", name: "Plane", x: 742, y: 78, s: 104, turn: -10, width: 5 }),
+      ...doodle({ kind: "star", name: "Chalk star", x: 92, y: 96, s: 70, turn: -12, role: "accent", width: 5 }),
+      ...tally({ n: 9, x: 120, y: 1520, size: 130, width: 8 })
+    ] : []
+  ];
+}
+var SQUARE = scenery(1080);
+var TALL = scenery(1920);
+var back_to_school_report_card_post_default = defineTemplate({
+  id: "motion-back-to-school-report-card-post",
+  meta: {
+    name: "School report card post (animated)",
+    description: "A product\u2019s report card, graded by its customers, taped to a classroom chalkboard: four subjects, each with the comment a customer left, and the grades come down one after another as rubber stamps in red rings (A+, A, A and an honest B); then a gold star is pressed on, the count of reviews runs up and the sign-off comes in. Slate with duster smears in a wooden frame \u2014 a nine-second loop, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "back to school", "school", "report card", "grades", "reviews", "testimonial", "social proof", "chalkboard", "stamp", "gold star", "counter", "saas", "post", "seasonal", "loop"],
+    platforms: ["instagram", "linkedin", "x", "threads", "facebook"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["testimonial", "stats", "milestone"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, loop: true },
+  build() {
+    const k = new Kit("School report card post (animated)", preset("ig-post"));
+    k.quantizeGeometry = true;
+    schoolBrand(k);
+    k.textStyle("Eyebrow 24", { size: 24, fontWeight: 700, letterSpacing: 4, lineHeight: 32, textCase: "UPPER" });
+    k.textStyle("Display 78", { ...SERIF, size: 78, fontWeight: 900, letterSpacing: -2.6, lineHeight: 82 });
+    k.textStyle("Display 66", { ...SERIF, size: 66, fontWeight: 900, letterSpacing: -2.2, lineHeight: 70 });
+    k.textStyle("Term 22", { ...MONO, size: 22, fontWeight: 800, lineHeight: 30 });
+    k.textStyle("Report title 38", { ...SERIF, size: 38, fontWeight: 900, letterSpacing: -1, lineHeight: 44 });
+    k.textStyle("Report meta 20", { ...MONO, size: 20, fontWeight: 700, lineHeight: 26 });
+    k.textStyle("Subject 30", { ...SERIF, size: 30, fontWeight: 900, letterSpacing: -0.6, lineHeight: 36 });
+    k.textStyle("Comment 24", { ...SERIF, size: 24, fontWeight: 400, lineHeight: 32, fontStyle: "italic" });
+    k.textStyle("Who 18", { ...MONO, size: 18, fontWeight: 500, lineHeight: 24 });
+    k.textStyle("Grade 48", { ...SERIF, size: 48, fontWeight: 900, letterSpacing: -1.6, lineHeight: 52 });
+    k.textStyle("Figure 50", { ...SERIF, size: 50, fontWeight: 900, letterSpacing: -1.4, lineHeight: 54 });
+    k.textStyle("Sign 26", { size: 26, fontWeight: 600, lineHeight: 34 });
+    k.textStyle("Site 20", { ...MONO, size: 20, fontWeight: 600, lineHeight: 28 });
+    pill(k, "Term pill", { fill: "primary", ink: "onPrimary", style: "Term 22", label: "Summer term", pad: [6, 14], radius: 8 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 0, { top: 70, right: 64, bottom: 58, left: 64 }, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    draw(k, sheet, TALL);
+    refit(k, sheet, SQUARE, TALL);
+    const top = k.stack(sheet, { gap: 10, name: "Top" });
+    const brow = k.stack(top, { direction: "HORIZONTAL", gap: 16, align: "CENTER", name: "Brow" });
+    k.instance(brow, "Term pill", { Label: "Summer term" }, { name: "Term" });
+    k.text(brow, "{{brand.name}} \xB7 end-of-term report", { style: "Eyebrow 24", color: "onPaper", name: "Eyebrow" });
+    k.text(top, "Our report card is in.", { style: "Display 78", color: "text", name: "Headline" });
+    underline(k, top, { w: 380, u: 1 });
+    sticker(k, sheet, { size: 132, name: "Gold star", tilt: 12, absolute: { x: 872, y: 96 } });
+    const card = reportCard(k, sheet, { w: 952, u: 1.1, title: "End-of-term report", meta: "Graded by customers", grades: GRADES, ring: 96, styles: { title: "Report title 38", meta: "Report meta 20", subject: "Subject 30", comment: "Comment 24", who: "Who 18", grade: "Grade 48" } });
+    const foot = k.stack(sheet, { gap: 2, name: "Foot" });
+    const row = k.stack(foot, { direction: "HORIZONTAL", gap: 16, align: "CENTER", name: "Tally row" });
+    k.text(row, "1,240", { style: "Figure 50", color: "text", autoWidth: true, name: "Reviews" });
+    k.text(row, "teams graded us this term. Average: 4.8 out of 5.", { style: "Sign 26", color: "text", name: "Sign-off" });
+    k.text(foot, "Read every review: {{brand.site}}/report", { style: "Site 20", color: "onPaper", name: "Site" });
+    for (const g of GRADES) landStamp(k, card, `Grade ${g.n}`, lands(g.n));
+    pressStar(k, sheet, "Gold star", STAR);
+    drawOn(k, sheet, "Chalk underline", 700, 600);
+    rubOut(k, sheet, "Chalk underline", SHUT, 400);
+    for (let i = 1; i <= 9; i++) {
+      drawOn(k, sheet, `Tally ${i}`, 900 + i * 420, 240);
+      rubOut(k, sheet, `Tally ${i}`, SHUT + i * 20, 300);
+    }
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    k.variants(sheet, postVariants({ portrait: 64 }, {
+      portrait: (kit, id) => {
+        kit.patch(id, { padding: { top: 120, right: 64, bottom: 100, left: 64 } });
+        refit(kit, id, scenery(1350), TALL);
+        for (const n of kit.named(id, "Gold star")) kit.patch(n, { x: 872, y: 150 });
+      },
+      vertical: (kit, id) => {
+        refit(kit, id, TALL);
+        for (const n of kit.named(id, "Headline")) kit.restyle(n, "Display 66");
+        for (const n of kit.named(id, "Report card")) {
+          kit.patch(n, { width: 800 });
+          for (const name of ["Sheet", "Sheet fold"]) for (const c of kit.named(n, name)) kit.patch(c, { width: 800 });
+          kit.named(n, "Tape").forEach((c, i) => kit.patch(c, { x: i ? 800 * 0.9 - 128 * 1.1 : 800 * 0.1 }));
+        }
+        for (const n of kit.named(id, "Gold star")) kit.patch(n, { x: 846, y: 1236 });
+      }
+    }));
+    return k.finish();
+  }
+});
+
+export {
+  back_to_school_report_card_post_default
+};

package/dist/chunks/chunk-B77EILTA.js

@@ -0,0 +1,220 @@
+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 {
+  COMIC,
+  balloon,
+  bandDots,
+  benday,
+  captionBox,
+  comicBrand,
+  hero,
+  impact,
+  inkShadow,
+  issueBox,
+  panel,
+  rays,
+  restage,
+  stage,
+  streaks,
+  villain,
+  windowCard
+} from "./chunk-LGXTJGAN.js";
+import {
+  background,
+  refill
+} from "./chunk-75T3CFTH.js";
+import {
+  MONO
+} from "./chunk-AXAAXHZF.js";
+import {
+  bed
+} from "./chunk-KHGNV7UQ.js";
+import {
+  sizeOf
+} from "./chunk-LWSZATOL.js";
+import {
+  feedVariants,
+  pill,
+  verticalPadding
+} from "./chunk-KOAJ6HD2.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  ease
+} from "./chunk-PLZLKHOI.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/motion/comic-book-issue-reel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var MUSIC = bed("launch", 32);
+var beat = MUSIC.beat;
+var DURATION = MUSIC.duration;
+var VIEW = { w: 800, h: 620 };
+var PAGE = { w: VIEW.w * 2, h: VIEW.h * 2 };
+var P1 = { x: 0, y: 0, w: 780, h: 600 };
+var P2 = { x: 820, y: 0, w: 780, h: 600 };
+var P3 = { x: 0, y: 640, w: 1600, h: 600 };
+var look = (x, y, zoom) => ({ zoom, tx: -zoom * (x - PAGE.w / 2), ty: -zoom * (y - PAGE.h / 2) });
+var whip = ease.inOut("expo");
+var SHOTS = [
+  { t: 0, at: look(390, 300, 1), ease: ease.linear },
+  { t: beat(8), at: look(390, 300, 1.08), ease: whip },
+  { t: beat(9), at: look(1210, 300, 1), ease: ease.linear },
+  { t: beat(16), at: look(1210, 300, 1.08), ease: whip },
+  { t: beat(17), at: look(800, 940, 0.74), ease: ease.linear },
+  { t: beat(23), at: look(800, 940, 0.8), ease: ease.inOut("cubic") },
+  { t: beat(25), at: look(800, 620, 0.5) }
+];
+var swaps = [
+  { layer: "Caption", words: ["3:07 a.m. A deploy just broke checkout.", "Backstop sees the error rate jump.", "It rolls the deploy back in 9 seconds.", "You sleep. Customers pay."], at: beat(1), hold: 1900, stagger: 60, in: 350, out: 250, unit: "word", rise: 24 }
+];
+var cues = [
+  { layer: "Hook", preset: "pop-in", at: 0, params: { duration: 260, amount: 1.25 } },
+  { layer: "Head", preset: "fade-in", at: 0, params: { duration: 250 } },
+  { layer: "Panel one", preset: "pop-in", at: 120, params: { duration: 300, amount: 1.3 } },
+  { layer: "Narration", preset: "pop-in", at: beat(1) - 150, params: { duration: 280 } },
+  { layer: "Bug", preset: "pop-in", at: beat(2), params: { duration: 320 } },
+  { layer: "Bug says", preset: "pop-in", at: beat(3), params: { duration: 260 } },
+  { layer: "Crash", preset: "pop-in", at: beat(5), params: { duration: 240, amount: 1.6 } },
+  { layer: "Stage", preset: "camera-shake", at: beat(5), params: { duration: 400, distance: 14 } },
+  { layer: "Panel two", preset: "pop-in", at: beat(9), params: { duration: 300, amount: 1.3 } },
+  { layer: "Hero", preset: "slide-in", at: beat(10), params: { duration: 420, direction: "left" } },
+  { layer: "Hero says", preset: "pop-in", at: beat(11), params: { duration: 260 } },
+  { layer: "Spotted", preset: "pop-in", at: beat(13), params: { duration: 260 } },
+  { layer: "Panel three", preset: "pop-in", at: beat(17), params: { duration: 300, amount: 1.3 } },
+  { layer: "Rolled back", preset: "pop-in", at: beat(18), params: { duration: 260, amount: 1.7 } },
+  { layer: "Stage", preset: "camera-shake", at: beat(18), params: { duration: 500, distance: 22 } },
+  { layer: "Restored", preset: "pop-in", at: beat(20), params: { duration: 260 } },
+  { layer: "Rolled back", preset: "pulse", at: beat(22), params: { duration: 600, amount: 0.06 } },
+  { layer: "Call", preset: "pop-in", at: beat(26), params: { duration: 320 } },
+  { layer: "Site box", preset: "pop-in", at: beat(27), params: { duration: 300 } },
+  { layer: "Call", preset: "pulse", at: beat(29), params: { duration: 600, amount: 0.05 } }
+];
+function furnish(k, sheet) {
+  const { w, h } = sizeOf(k, sheet);
+  const pad = k.node(sheet).padding;
+  refill(k, sheet);
+  bandDots(k, sheet, "Top dots", { x: 0, y: 0, w, h: pad.top - 16 });
+  bandDots(k, sheet, "Foot dots", { x: 0, y: h - pad.bottom + 16, w, h: pad.bottom - 16 });
+}
+var comic_book_issue_reel_default = defineTemplate({
+  id: "motion-comic-book-issue-reel",
+  meta: {
+    name: "Comic launch reel",
+    description: 'A 16-second feature launch told as issue no. 12 of a comic: the complaint lands on the first frame, a panel slams in with the bug that broke checkout, the camera whips across the page to the hero on focus lines and down to a full-width hit with "ROLLED BACK!" in an impact burst, then pulls out to the whole page. Speech balloons pop, a narrator\u2019s box carries burned-in captions, and every slam lands on a beat of a 128 BPM loop (made by PopCraft, CC0). 9:16 with 1:1 and 4:5 cuts',
+    category: "animation",
+    tags: ["animation", "comic book", "panels", "speech balloon", "halftone", "ben-day dots", "speed lines", "impact", "launch", "feature", "saas", "devtools", "reel", "captions", "music", "audio"],
+    platforms: ["instagram", "tiktok", "youtube", "x"],
+    formats: ["reel", "short", "story", "post", "portrait-post"],
+    useCases: ["launch", "announcement", "comic"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, swaps },
+  build() {
+    const k = new Kit("Comic launch reel", preset("ig-story"));
+    k.quantizeGeometry = true;
+    comicBrand(k);
+    k.textStyle("Masthead 20", { ...MONO, size: 20, fontWeight: 800, letterSpacing: 1.5, lineHeight: 26, textCase: "UPPER" });
+    k.textStyle("Issue 26", { size: 26, fontWeight: 900, letterSpacing: -0.5, lineHeight: 28 });
+    k.textStyle("Issue small 13", { ...MONO, size: 16, fontWeight: 800, letterSpacing: 0.5, lineHeight: 18 });
+    k.textStyle("Hook 92", { size: 92, fontWeight: 900, letterSpacing: -4, lineHeight: 86 });
+    k.textStyle("Hook 66", { size: 66, fontWeight: 900, letterSpacing: -2.8, lineHeight: 62 });
+    k.textStyle("Balloon 38", { size: 38, fontWeight: 800, letterSpacing: -0.5, lineHeight: 42, textAlign: "CENTER" });
+    k.textStyle("Box 26", { size: 26, fontWeight: 800, letterSpacing: 0.4, lineHeight: 32 });
+    k.textStyle("Window 20", { ...MONO, size: 20, fontWeight: 700, lineHeight: 26 });
+    k.textStyle("Error 110", { size: 110, fontWeight: 900, letterSpacing: -5, lineHeight: 100 });
+    k.textStyle("Sound 72", { size: 72, fontWeight: 900, letterSpacing: -2.5, lineHeight: 70, textAlign: "CENTER" });
+    k.textStyle("Sound 150", { size: 150, fontWeight: 900, letterSpacing: -6, lineHeight: 132, textAlign: "CENTER" });
+    k.textStyle("Caption 32", { size: 32, fontWeight: 800, lineHeight: 40 });
+    k.textStyle("Caption 26", { size: 26, fontWeight: 800, lineHeight: 34 });
+    k.textStyle("Button 30", { size: 30, fontWeight: 900, lineHeight: 38 });
+    k.textStyle("Site 24", { ...MONO, size: 24, fontWeight: 700, lineHeight: 30 });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 30", label: "READ ISSUE NO. 12", pad: [18, 30], radius: 0 });
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Launch reel");
+    k.flowSheet(sheet, 20, verticalPadding(), "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30, audio: MUSIC.audio });
+    background(k, sheet, "paper");
+    benday(k, sheet, 1080, 620, { role: "accent", dot: 30, angle: 270, from: 0.05, to: 0.8, name: "Top dots" });
+    benday(k, sheet, 1080, 520, { role: "primary", dot: 30, angle: 90, from: 0.02, to: 0.62, name: "Foot dots" });
+    const head = k.stack(sheet, { direction: "HORIZONTAL", gap: 16, align: "CENTER", name: "Head" });
+    issueBox(k, head, { number: "Issue 26", small: "Issue small 13", price: "OCT \xB7 FREE" });
+    k.text(head, "{{brand.name}} \xB7 the auto-rollback issue", { style: "Masthead 20", color: "text", name: "Masthead" });
+    k.text(sheet, "A DEPLOY JUST BROKE CHECKOUT.", { style: "Hook 92", color: "text", name: "Hook", effects: inkShadow(k, 6, "primary") });
+    const row = k.stack(sheet, { align: "CENTER", name: "Stage row" });
+    const { art } = stage(k, row, VIEW.w, VIEW.h, { clip: true, fill: "card", stroke: { color: "text", width: 8, align: "INSIDE", join: "MITER" }, effects: inkShadow(k, 12, "text") });
+    const cam = k.frame(art, { x: -VIEW.w / 2, y: -VIEW.h / 2, width: PAGE.w, height: PAGE.h }, { name: "Camera" });
+    panel(k, cam, P1, "night", (p) => {
+      benday(k, p, P1.w, P1.h, { role: "nightDeep", dot: 18, angle: 90, from: 0.1, to: 0.8 });
+      rays(k, p, P1.w, P1.h, { cx: 560, cy: 360, role: "nightDeep", n: 22, inner: 200, seed: 4 });
+      windowCard(k, p, 330, "checkout", (body) => {
+        k.text(body, "500", { style: "Error 110", color: "primary", name: "Error code" });
+        k.text(body, "Payment failed. Try again later.", { style: "Window 20", color: "onCard", name: "Error line" });
+      }, { style: "Window 20", name: "Checkout window", absolute: { x: 36, y: 270 }, deg: -4 });
+      villain(k, p, 440, { name: "Bug", absolute: { x: 340, y: 170 }, deg: 8 });
+      captionBox(k, p, "3:07 a.m. \xB7 production", { style: "Box 26", name: "Clock", absolute: { x: 26, y: 26 } });
+      balloon(k, p, "I ate your checkout!", { style: "Balloon 38", width: 330, tail: "left", name: "Bug says", absolute: { x: 420, y: 28 } });
+      impact(k, p, 250, 190, "Crash!", { style: "Sound 72", fill: "primary", ink: "onPrimary", deg: -10, name: "Crash", seed: 5, absolute: { x: 30, y: 96 } });
+    }, { name: "Panel one" });
+    panel(k, cam, P2, "sky", (p) => {
+      rays(k, p, P2.w, P2.h, { cx: 300, cy: 330, role: "skyDeep", n: 34, inner: 230, seed: 8 });
+      benday(k, p, P2.w, 260, { role: "dot", dot: 16, angle: 270, from: 0, to: 0.5, opacity: 0.35 });
+      streaks(k, p, 360, 300, { role: "card", n: 9, seed: 2, x: 0, y: 250 });
+      hero(k, p, 520, { name: "Hero", absolute: { x: 60, y: 96 }, deg: 6 });
+      balloon(k, p, "Not on my watch.", { style: "Balloon 38", width: 300, tail: "left", name: "Hero says", absolute: { x: 452, y: 34 } });
+      captionBox(k, p, "Error rate up 40\xD7.\nSpotted in 4 seconds.", { style: "Box 26", width: 330, name: "Spotted", absolute: { x: 424, y: 470 } });
+    }, { name: "Panel two" });
+    panel(k, cam, P3, "accent", (p) => {
+      rays(k, p, P3.w, P3.h, { cx: 800, cy: 300, role: "primary", n: 44, inner: 300, seed: 12, thick: 0.9 });
+      benday(k, p, 520, P3.h, { role: "primary", dot: 20, angle: 180, from: 0, to: 0.7 });
+      hero(k, p, 560, { name: "Hero hits", absolute: { x: 40, y: 40 }, deg: 14 });
+      villain(k, p, 300, { name: "Bug out", absolute: { x: 1270, y: 30 }, deg: 152 });
+      streaks(k, p, 330, 200, { role: "ink", n: 7, seed: 9, dir: -1, x: 1010, y: 190 });
+      impact(k, p, 820, 500, "Rolled back!", { style: "Sound 150", fill: "primary", ink: "onPrimary", deg: -5, name: "Rolled back", seed: 21, points: 18, depth: 0.26, shadow: 16, line: 8, absolute: { x: 420, y: 50 } });
+      captionBox(k, p, "v4.11 restored in 9 seconds. Nobody was paged.", { style: "Box 26", width: 470, name: "Restored", absolute: { x: 1090, y: 470 } });
+    }, { name: "Panel three" });
+    k.patch(cam, { scaleX: 0.5, scaleY: 0.5 });
+    k.animate(cam, "scaleX", SHOTS.map((s) => ({ t: s.t, v: s.at.zoom, ...s.ease ? { ease: s.ease } : {} })));
+    k.animate(cam, "scaleY", SHOTS.map((s) => ({ t: s.t, v: s.at.zoom, ...s.ease ? { ease: s.ease } : {} })));
+    k.animate(cam, "translateX", SHOTS.map((s) => ({ t: s.t, v: s.at.tx, ...s.ease ? { ease: s.ease } : {} })));
+    k.animate(cam, "translateY", SHOTS.map((s) => ({ t: s.t, v: s.at.ty, ...s.ease ? { ease: s.ease } : {} })));
+    const box = k.stack(sheet, { height: 116, justify: "CENTER", padding: { top: 0, right: 24, bottom: 0, left: 24 }, fill: "accent", stroke: { color: "text", width: 5, align: "INSIDE", join: "MITER" }, effects: inkShadow(k, 8, "text"), name: "Narration" });
+    k.text(box, swaps[0].words[0], { style: "Caption 32", color: "onAccent", name: "Caption" });
+    const foot = k.stack(sheet, { direction: "HORIZONTAL", gap: 22, align: "CENTER", name: "Foot" });
+    k.instance(foot, "Button", { Label: `READ ISSUE NO. ${COMIC.issue}` }, { name: "Call" });
+    k.text(k.stack(foot, { direction: "HORIZONTAL", width: "HUG", fill: "card", stroke: { color: "text", width: 4, align: "INSIDE", join: "MITER" }, padding: { top: 16, right: 18, bottom: 16, left: 18 }, name: "Site box" }), "{{brand.site}}", { style: "Site 24", color: "onCard", autoWidth: true, name: "Site" });
+    furnish(k, sheet);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    const cut = (scale, hook, caption) => (kit, id) => {
+      restage(kit, id, VIEW.w, VIEW.h, scale);
+      if (hook) for (const n of kit.named(id, "Hook")) kit.restyle(n, hook);
+      if (caption) {
+        for (const c of kit.named(id, "Caption")) kit.restyle(c, caption);
+        for (const b of kit.named(id, "Narration")) kit.patch(b, { height: 92 });
+      }
+      furnish(kit, id);
+    };
+    k.variants(sheet, feedVariants({ post: 56, portrait: 72 }, { post: cut(0.92, "Hook 66", "Caption 26"), portrait: cut(1.17) }));
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  comic_book_issue_reel_default
+};

package/dist/chunks/chunk-B7HZEBBQ.js

@@ -0,0 +1,97 @@
+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 {
+  clouds,
+  envelope,
+  hangings,
+  lunarBrand,
+  sky
+} from "./chunk-2GNMJVD7.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-AXAAXHZF.js";
+import {
+  pill
+} from "./chunk-KOAJ6HD2.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/social/lunar-new-year-link-preview.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var lunar_new_year_link_preview_default = defineTemplate({
+  id: "social-lunar-new-year-link-preview",
+  meta: {
+    name: "Lunar New Year link preview",
+    description: "A 1200 \xD7 630 link preview for the Lunar New Year season: the promise in a heavy serif, the product in two mono lines and the gift as a seal, beside a cut-paper night where a red envelope shows its voucher before a paper moon, with fireworks, lanterns and plum blossom \u2014 and no zodiac animal, so it works every year",
+    category: "social",
+    tags: ["lunar new year", "chinese new year", "spring festival", "link preview", "open graph", "og image", "red envelope", "lantern", "fireworks", "cut paper", "saas", "seasonal", "serif"],
+    platforms: ["web", "x", "linkedin", "facebook"],
+    formats: ["og-image"],
+    useCases: ["sale", "launch", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  build() {
+    const k = new Kit("Lunar New Year link preview", preset("og-image"));
+    k.quantizeGeometry = true;
+    lunarBrand(k, { tagline: "Start the new year square." });
+    k.textStyle("Eyebrow 20", { size: 20, fontWeight: 700, letterSpacing: 5, lineHeight: 28, textCase: "UPPER" });
+    k.textStyle("Display 82", { ...SERIF, size: 82, fontWeight: 900, letterSpacing: -2.7, lineHeight: 82 });
+    k.textStyle("Facts 20", { ...MONO, size: 20, fontWeight: 500, lineHeight: 30 });
+    k.textStyle("Seal 20", { size: 20, fontWeight: 800, lineHeight: 26 });
+    k.textStyle("Figure 78", { ...SERIF, size: 78, fontWeight: 900, letterSpacing: -2.5, lineHeight: 72, textAlign: "CENTER" });
+    k.textStyle("Days 22", { ...SERIF, size: 22, fontWeight: 700, lineHeight: 25, textAlign: "CENTER" });
+    k.textStyle("Label 16", { ...SERIF, size: 16, fontStyle: "italic", fontWeight: 600, lineHeight: 20, textAlign: "CENTER" });
+    pill(k, "Seal", { fill: "primary", ink: "onPrimary", style: "Seal 20", label: "88 days free until the Lantern Festival", pad: [10, 20], radius: 8 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 20, { top: 50, right: 560, bottom: 190, left: 72 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    const s = {
+      w: 1200,
+      h: 630,
+      u: 0.72,
+      loopMs: 6e3,
+      moon: { x: 900, y: 280, size: 400 },
+      lanterns: [{ x: 676, drop: 16, size: 84 }, { x: 1010, drop: 8, size: 58 }, { x: 1128, drop: 44, size: 112 }],
+      fireworks: [{ x: 716, y: 350, r: 78 }, { x: 1104, y: 392, r: 84 }, { x: 800, y: 96, r: 52 }],
+      clouds: [468, 510, 548, 582, 800, 800],
+      branch: { x: 1212, y: 640, size: 250, flip: true },
+      dust: { top: 20, bottom: 430 }
+    };
+    sky(k, sheet, s, { still: true });
+    clouds(k, sheet, s, 0, 3);
+    envelope(k, sheet, {
+      w: 256,
+      u: 0.8,
+      tilt: 6,
+      absolute: { x: 772, y: 100 },
+      lines: [{ text: "88", style: "Figure 78", name: "Figure" }, { text: "days free", style: "Days 22", name: "Days" }],
+      label: { text: "For a fresh start", style: "Label 16" }
+    });
+    clouds(k, sheet, s, 3, 6);
+    hangings(k, sheet, s, { still: true });
+    k.text(sheet, "{{brand.name}} \xB7 Lunar New Year", { style: "Eyebrow 20", color: "onPaper", name: "Eyebrow" });
+    k.text(sheet, "{{brand.tagline}}", { style: "Display 82", color: "text", name: "Headline" });
+    k.text(sheet, "Unpaid invoices in. Polite reminders out. Paid 11 days sooner.", { style: "Facts 20", color: "onPaper", name: "Facts" });
+    k.instance(sheet, "Seal", { Label: "88 days free until the Lantern Festival" }, { name: "Seal" });
+    return k.finish();
+  }
+});
+
+export {
+  lunar_new_year_link_preview_default
+};