@popcraft/kit 0.32.0 → 0.33.0

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

@@ -0,0 +1,60 @@
+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 {
+  lockup,
+  stingVariants
+} from "./chunk-4U4CAF2R.js";
+import {
+  defineTemplate
+} from "./chunk-YKWT2Q3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SHOYVADV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/stings/sting-blur.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var cues = [
+  { layer: "Mark", preset: "blur-in", at: 0, params: { duration: 900, amount: 40 } },
+  { layer: "Wordmark", preset: "blur-in", at: 450, params: { duration: 900, amount: 30 } },
+  { layer: "Tagline", preset: "blur-in", at: 900, params: { duration: 700 } },
+  { layer: "Mark", preset: "pulse", at: 2e3, params: { amount: 0.05 } }
+];
+var sting_blur_default = defineTemplate({
+  id: "motion-sting-blur",
+  meta: {
+    name: "Logo sting \u2014 blur-in",
+    description: "A 3.5-second logo sting: the logo, the name and the tagline come into focus one after another \u2014 square, 16:9 and 9:16",
+    category: "animation",
+    tags: ["animation", "logo", "sting", "intro", "brand", "blur", "focus"],
+    platforms: ["youtube", "instagram", "tiktok", "linkedin"],
+    formats: ["logo-sting", "intro", "video", "post", "story"],
+    useCases: ["brand-intro"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  motion: { cues },
+  build() {
+    const k = new Kit("Logo sting \u2014 blur-in", preset("video-square"));
+    k.brand({ paper: "#0B0D17", text: "#EEF0FF", onPaper: "#A9AECF", primary: "#3D5AFE" }, { name: "Mistral Audio", tagline: "Headphones tuned by ear" });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 40, 120, "paper", "CENTER", "CENTER");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: 3500, fps: 30 });
+    lockup(k, sheet);
+    k.cues(sheet, cues);
+    k.variants(sheet, stingVariants());
+    return k.finish();
+  }
+});
+
+export {
+  sting_blur_default
+};

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

@@ -0,0 +1,47 @@
+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-GGN6MTX5.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/slideshow/graduation.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var story = {
+  id: "motion-slideshow-graduation",
+  song: "vows",
+  meta: {
+    name: "Graduation class slideshow",
+    description: "A proud graduation film for a class or a school: a title card with the class year, the ceremony and the graduates as chapters, each face with a name and what comes next, cut on the beats of a warm piano track (made by PopCraft, CC0), slow pushes and light leaks, and a closing card with the school\u2019s congratulations. Photos are CC0 from Wikimedia Commons; drop your own on any frame.",
+    tags: ["animation", "slideshow", "graduation", "class of", "school", "university", "commencement", "students", "celebration", "photo", "music", "video"],
+    platforms: ["instagram", "facebook", "youtube", "tiktok"],
+    formats: ["video", "reel", "post"],
+    useCases: ["event", "education"],
+    created: "2026-10-10",
+    updated: "2026-10-10"
+  },
+  brand: { paper: "#F4EEDF", onPaper: "#1B2440", accent: "#B8892F", shade: "#0E1428", onPhoto: "#FFFFFF", leak: "#FFD27F" },
+  fields: { names: "Class of 2026", date: "Hartfield Academy \xB7 27 June 2026" },
+  scenes: [
+    { kind: "title", name: "Opening", photo: "grad-01", kicker: "Congratulations", beats: 8, move: "in", focus: 0.5 },
+    { kind: "chapter", name: "Chapter 1", kicker: "The day", title: "Commencement", beats: 3 },
+    { kind: "photo", name: "The hall", photo: "grad-00", caption: "Two hundred and twelve caps", beats: 4, move: "up" },
+    { kind: "chapter", name: "Chapter 2", kicker: "The graduates", title: "What\u2019s next", beats: 3 },
+    { kind: "photo", name: "Omar", photo: "grad-02", layout: "matted", caption: "Omar Siddiqui", place: "Engineering, Leeds", beats: 4, move: "in" },
+    { kind: "photo", name: "Lucia", photo: "grad-03", layout: "matted", caption: "Luc\xEDa Ferrer", place: "A gap year, then nursing", beats: 4, move: "right", into: "push" },
+    { kind: "photo", name: "Caps", photo: "grad-01", layout: "matted", caption: "And off they go", beats: 6, move: "in", into: "leak" },
+    { kind: "end", name: "Ending", kicker: "So proud of you all" }
+  ]
+};
+var graduation_default = slideshow(story);
+
+export {
+  story,
+  graduation_default
+};

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

@@ -0,0 +1,85 @@
+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 {
+  E,
+  heart,
+  lottieTemplate
+} from "./chunk-NA7CIUDF.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/lottie/health.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var HEALTH = { paper: "#FFF6F4", heart: "#FF4D6D", ink: "#3A0F1B", soft: "#FFE0E6", accent: "#12B5A5", white: "#FFFFFF", bar: "#FFC2CE" };
+var healthHeartbeat = lottieTemplate({
+  slug: "heartbeat",
+  sector: "health",
+  role: "icon",
+  size: "icon",
+  duration: 1600,
+  loop: true,
+  name: "Heartbeat",
+  description: "A heart rate icon: the heart beats twice, a ripple spreads from each beat, and the trace draws across it \u2014 a 1.6-second seamless loop, 512\xD7512",
+  colors: HEALTH,
+  tags: ["heart rate", "pulse", "ecg", "wellness"],
+  build(l) {
+    for (const [t, name] of [[0, "Ripple"], [280, "Ripple"]]) {
+      const r = l.ring(l.sheet, 256, 262, 150, "heart", 8, { name, opacity: 0 });
+      l.scale(r, [[0, 1, E.hold], [t, 1, E.out], [t + 800, 1.45, E.hold], [1600, 1]]);
+      l.opacity(r, [[0, 0, E.hold], [t, 0, E.out], [t + 60, 0.5, E.out], [t + 800, 0, E.hold], [1600, 0]]);
+    }
+    const h = l.shape(l.sheet, heart(256, 120, 300), "heart", { name: "Heart" });
+    const beat = [[0, 1, E.out], [120, 1.12, E.inOut], [260, 0.97, E.out], [380, 1.08, E.inOut], [640, 1, E.hold], [1600, 1]];
+    l.scale(h, beat);
+    const trace = l.box(l.sheet, 130, 180, 252, 160, "Trace");
+    const reveal = l.rect(trace, 0, 0, 252, 160, "white", { name: "Trace reveal", mask: true });
+    l.pivot(reveal, 0, 0.5);
+    l.keys(reveal, "scaleX", [[0, 0, E.linear], [700, 1, E.hold], [1550, 1, E.hold], [1600, 0]]);
+    const line = l.line(trace, [[8, 86], [72, 86], [95, 40], [126, 132], [151, 60], [169, 86], [244, 86]], "white", 16, { name: "Trace line" });
+    l.opacity(line, [[0, 1, E.hold], [1100, 1, E.inOut], [1450, 0, E.hold], [1560, 0, E.hold], [1600, 1]]);
+  }
+});
+var healthActivityChart = lottieTemplate({
+  slug: "activity-chart",
+  sector: "health",
+  role: "stat",
+  size: "spot",
+  duration: 2200,
+  loop: false,
+  name: "Weekly activity",
+  description: "A chart animation for a health dashboard: seven days of activity rise one after another, the best day lights up and the goal line slides in \u2014 2.2 seconds that rest on the finished chart, 800\xD7600",
+  colors: HEALTH,
+  useCases: ["stats", "report"],
+  tags: ["chart", "bar chart", "steps", "dashboard"],
+  build(l) {
+    const card = l.box(l.sheet, 80, 90, 640, 420, "Card", { fill: "white", radius: 32 });
+    l.rect(card, 48, 44, 180, 22, "soft", { radius: 11, name: "Title" });
+    l.rect(card, 48, 80, 110, 16, "soft", { radius: 8, name: "Subtitle" });
+    const heights = [150, 210, 120, 260, 190, 230, 170];
+    const best = heights.indexOf(Math.max(...heights));
+    heights.forEach((h, i) => {
+      const b = l.rect(card, 64 + i * 78, 370 - h, 44, h, i === best ? "heart" : "bar", { radius: 14, name: i === best ? "Best day" : "Day" });
+      l.pivot(b, 0.5, 1);
+      const t = 150 + i * 90;
+      l.keys(b, "scaleY", [[0, 0, E.hold], [t, 0, E.pop], [t + 600, 1]]);
+      l.rect(card, 72 + i * 78, 386, 28, 10, "soft", { radius: 5, name: "Day label" });
+    });
+    const goal = l.rect(card, 48, 138, 544, 6, "accent", { radius: 3, name: "Goal" });
+    l.pivot(goal, 0, 0.5);
+    l.keys(goal, "scaleX", [[0, 0, E.hold], [1200, 0, E.out], [1800, 1]]);
+    const flag = l.circle(card, 592, 141, 14, "accent", { name: "Goal marker" });
+    l.scale(flag, [[0, 0, E.hold], [1650, 0, E.pop], [2e3, 1]]);
+  }
+});
+var HEALTH_PACK = [healthHeartbeat, healthActivityChart];
+
+export {
+  healthHeartbeat,
+  healthActivityChart,
+  HEALTH_PACK
+};

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

@@ -0,0 +1,30 @@
+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 {
+  machined_hero_default
+} from "./chunk-OVLUOBOX.js";
+import {
+  machined_link_preview_default
+} from "./chunk-MZIAOMQB.js";
+import {
+  machined_plate_post_default
+} from "./chunk-ACBI6XTN.js";
+import {
+  machined_trailer_default
+} from "./chunk-FF4TY3DY.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/themes/machined.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var pack = [machined_trailer_default, machined_hero_default, machined_plate_post_default, machined_link_preview_default];
+var machined_default = pack;
+
+export {
+  machined_default
+};

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

@@ -0,0 +1,147 @@
+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 {
+  PANE_ART,
+  aurora,
+  body,
+  chip,
+  code,
+  display,
+  figure,
+  fitAurora,
+  float,
+  glassBrand,
+  label,
+  lockup,
+  pane,
+  paneArt,
+  passThrough,
+  sheen,
+  sitePill,
+  surface,
+  ts
+} from "./chunk-4AIMQKSC.js";
+import {
+  portraitSlot
+} from "./chunk-3TT3MCP7.js";
+import {
+  board,
+  restyle
+} from "./chunk-YHBAWSDX.js";
+import {
+  outro,
+  postVariants
+} from "./chunk-LEKU2ZW3.js";
+import {
+  defineTemplate
+} from "./chunk-YKWT2Q3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SHOYVADV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/social/style-glass-testimonial.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Glass SaaS testimonial post";
+var DURATION = 9e3;
+var QUOTE = '"Our refund agent tried to send $48,200 in one afternoon. Vitrine stopped every call over $500 and asked us in Slack. We lost nothing."';
+var WORDS_AT = 500;
+var WORDS_LEN = 3600;
+var LANDED = WORDS_AT + WORDS_LEN;
+var cues = [
+  { layer: "Quote plate", preset: "blur-in", at: 0, params: { duration: 1e3, amount: 24 } },
+  { layer: "Quote", preset: "words-in", at: WORDS_AT, params: { duration: WORDS_LEN } },
+  { layer: "Person", preset: "blur-in", at: LANDED - 400, params: { duration: 1200, amount: 20 } },
+  { layer: "Kept plate", preset: "rise-in", at: LANDED + 200, params: { duration: 1e3, distance: 20 } },
+  // The glass clears again before the end, so a feed's replay starts on the aurora it ends on.
+  outro(["Quote plate", "Person", "Kept plate"], DURATION - 1e3, { gap: 120, duration: 600 })
+];
+var counts = [{ layer: "Kept figure", at: LANDED + 300, duration: 1600, counter: { from: 0, to: 48200, prefix: "$" } }];
+var style_glass_testimonial_default = defineTemplate({
+  id: "social-saas-style-glass-testimonial",
+  meta: {
+    name: NAME,
+    description: "A nine-second testimonial post in the glass look: a customer quote arrives word by word on smoked glass over a slow aurora, then the photo slot and name drift up out of depth and the money that never left resolves on a counter. A travelling highlight, long eases. Square with 4:5 and 9:16 cuts, with a photo slot",
+    category: "social",
+    tags: ["social", "post", "testimonial", "quote", "customer", "review", "saas", "glass", "glassmorphism", "aurora", "shader", "ai", "security", "photo", "animation", "linkedin", "instagram"],
+    platforms: ["linkedin", "instagram", "x", "threads"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["testimonial", "quote", "case-study"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts },
+  build() {
+    const k = new Kit(NAME, preset("ig-post"));
+    k.quantizeGeometry = true;
+    glassBrand(k);
+    ts(k, "Brand 30", display(30));
+    ts(k, "Kicker 24", code(24));
+    ts(k, "Quote 56", display(56, { lead: 1.2 }));
+    ts(k, "Quote 66", display(66, { lead: 1.18 }));
+    ts(k, "Name 30", display(30));
+    ts(k, "Role 24", body(24));
+    ts(k, "Label 20", label(20));
+    ts(k, "Figure 44", figure(44));
+    ts(k, "Site 24", code(24));
+    sitePill(k, { style: "Site 24", label: "{{brand.site}}" });
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Testimonial");
+    k.flowSheet(sheet, 24, 64, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    aurora(k, sheet, { duration: DURATION });
+    const top = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Top row" });
+    lockup(k, top, { size: 48, style: "Brand 30" });
+    chip(k, top, "Customer story", { style: "Kicker 24", dot: "pass", name: "Story chip", pad: [10, 18] });
+    const qp = pane(k, sheet, { padding: { top: 40, right: 44, bottom: 44, left: 44 }, radius: 34, name: "Quote plate" });
+    k.text(qp, QUOTE, { style: "Quote 56", color: "onGlass", name: "Quote" });
+    sheen(k, qp, 952, 480, [LANDED]);
+    const row = k.stack(sheet, { direction: "HORIZONTAL", gap: 20, align: "MAX", name: "Person row" });
+    const person = pane(k, row, { direction: "HORIZONTAL", gap: 20, align: "CENTER", width: "FILL", padding: 16, radius: 28, alpha: 0.7, name: "Person" });
+    portraitSlot(k, person, 132, 132, { radius: 20, ground: "glass", skin: "glassMuted", top: "ocean", halo: "teal", name: "Portrait", photo: "Customer photo" });
+    const who = k.stack(person, { gap: 4, width: "FILL", name: "Who" });
+    k.text(who, "Mara Lindqvist", { style: "Name 30", color: "onGlass", name: "Name" });
+    k.text(who, "Head of Platform Security, Halden Pay", { style: "Role 24", color: "glassMuted", name: "Role" });
+    const kept = pane(k, row, { gap: 4, width: "HUG", padding: { top: 18, right: 24, bottom: 18, left: 24 }, radius: 28, alpha: 0.7, name: "Kept plate" });
+    k.text(kept, "KEPT", { style: "Label 20", color: "glassMuted", autoWidth: true, name: "Kept label" });
+    k.text(kept, "$48,200", { style: "Figure 44", color: "stop", width: 200, name: "Kept figure" });
+    const foot = paneArt(k, board(k, sheet, PANE_ART.w, PANE_ART.h, 1.08, "Foot board", { absolute: { x: 22, y: 1420 } }), { name: "Foot art" });
+    passThrough(k, foot, 2600, { travel: 2400 });
+    k.instance(sheet, "Site pill", { Label: "{{brand.site}}" }, { name: "Site plate" });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    surface(k, qp, 0, { from: 0.95, duration: 1400 });
+    float(k, qp, DURATION, { amp: 3, phase: 0.4 });
+    float(k, person, DURATION, { amp: 4, phase: 0.1 });
+    k.variants(sheet, postVariants({ portrait: 72, vertical: 96 }, {
+      portrait: (kit, id) => {
+        fitAurora(kit, id);
+        restyle(kit, id, "Quote", "Quote 66");
+        for (const b of kit.named(id, "Foot board stage")) kit.patch(b, { visible: false });
+      },
+      vertical: (kit, id) => {
+        fitAurora(kit, id);
+        restyle(kit, id, "Quote", "Quote 66");
+        kit.patch(id, { primaryAxisAlignItems: "SPACE_BETWEEN" });
+        for (const n of kit.named(id, "Person row")) kit.patch(n, { layoutMode: "VERTICAL", counterAxisAlignItems: "MIN" });
+        for (const n of kit.named(id, "Person")) kit.patch(n, { layoutSizingHorizontal: "FILL" });
+      }
+    }));
+    for (const b of k.named(sheet, "Foot board stage")) k.patch(b, { visible: false });
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  style_glass_testimonial_default
+};

package/dist/chunks/chunk-326IPAXU.js

@@ -0,0 +1,117 @@
+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 {
+  background,
+  refilled
+} from "./chunk-HAK2G6YB.js";
+import {
+  logoBadge,
+  pill,
+  verticalPadding
+} from "./chunk-LEKU2ZW3.js";
+import {
+  defineTemplate
+} from "./chunk-YKWT2Q3P.js";
+import {
+  Kit,
+  hex,
+  preset
+} from "./chunk-SHOYVADV.js";
+import {
+  ease
+} from "./chunk-AY2VBUGS.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/effects/glass-intro.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var GLASS_INTRO = {
+  duration: 6e3,
+  deep: "#0A1A3A",
+  foam: "#3563C9",
+  /** The glass at rest: clear (no bend), a little frost. */
+  frost: 24,
+  /** How far the glass bends the waves at its strongest (px), and where it settles. */
+  bend: 28,
+  settle: 14
+};
+var cues = [
+  { layer: "Glass panel", preset: "rise-in", at: 300, params: { duration: 900 } },
+  { layer: "Live chip", preset: "pop-in", at: 900 },
+  { layer: "Talk title", preset: "words-in", at: 1200, params: { duration: 600 } },
+  { layer: "When", preset: "fade-in", at: 2300 },
+  { layer: "Host", preset: "fade-in", at: 2500 },
+  { layer: "Logo badge", preset: "pop-in", at: 2800 },
+  { layer: "Live chip", preset: "pulse", at: 3600 }
+];
+var glass_intro_default = defineTemplate({
+  id: "motion-glass-intro",
+  meta: {
+    name: "Glass webinar intro",
+    description: "A 6-second webinar opener: a glass panel whose refraction, dispersion and frost are keyed rises over slow shader waves, and the talk title, date and host come in on it \u2014 16:9, with square and 9:16 cuts for the promo posts",
+    category: "animation",
+    tags: ["animation", "background", "glass", "shader", "waves", "webinar", "intro", "live", "talk"],
+    platforms: ["youtube", "linkedin", "x", "instagram"],
+    formats: ["intro", "title-card", "video", "post", "story"],
+    useCases: ["event", "livestream", "education"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  motion: { cues },
+  build() {
+    const G = GLASS_INTRO;
+    const k = new Kit("Glass webinar intro", preset("video-1080p"));
+    k.brand(
+      { paper: G.deep, glass: G.deep, headline: "#F4F7FF", caption: "#C9D6F2", primary: "#FFC857", onPrimary: "#0A1A3A" },
+      { company: "Tidewater Analytics", title: "Forecasting demand with the data you have", when: "Tuesday, October 21 \xB7 11 am ET", host: "Hosted by Priya Raman, head of data science" }
+    );
+    k.textStyle("Title 88", { size: 88, fontWeight: 800, letterSpacing: -2.5, lineHeight: 96 });
+    k.textStyle("Title 72", { size: 72, fontWeight: 800, letterSpacing: -2, lineHeight: 80 });
+    k.textStyle("Chip 26", { size: 26, fontWeight: 800, letterSpacing: 3, lineHeight: 30 });
+    k.textStyle("Meta 36", { size: 36, fontWeight: 600, lineHeight: 44 });
+    k.textStyle("Host 30", { size: 30, fontWeight: 500, lineHeight: 38 });
+    pill(k, "Chip", { fill: "primary", ink: "onPrimary", style: "Chip 26", label: "LIVE WEBINAR", pad: [12, 24] });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 0, { top: 120, right: 160, bottom: 120, left: 160 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: G.duration, fps: 30 });
+    const bg = background(k, sheet, k.shader("Waves", { speed: 0.4, scale: 5, deep: hex(G.deep), foam: hex(G.foam) }));
+    const glassFx = [{ id: "e1", type: "GLASS", radius: G.frost, refraction: 0, dispersion: 0, rim: 0.55, depth: 0, visible: true }];
+    const panel = k.stack(sheet, { width: 1240, fill: k.tint("glass", 0.5), radius: 48, gap: 28, padding: { top: 64, right: 72, bottom: 64, left: 72 }, clip: true, effects: glassFx, name: "Glass panel" });
+    const top = k.stack(panel, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Panel top" });
+    k.instance(top, "Chip", { Label: "LIVE WEBINAR" }, { name: "Live chip" });
+    logoBadge(k, top, { fill: "primary", size: 56 });
+    k.text(panel, "{{brand.title}}", { style: "Title 88", color: "headline", name: "Talk title" });
+    k.text(panel, "{{brand.when}}", { style: "Meta 36", color: "headline", name: "When" });
+    k.text(panel, "{{brand.host}}", { style: "Host 30", color: "caption", name: "Host" });
+    k.animateShader(bg, "scale", [{ t: 0, v: 5, ease: ease.inOut("sine") }, { t: 3e3, v: 3.5, ease: ease.inOut("sine") }, { t: G.duration, v: 4.5 }]);
+    k.animate(panel, "effects[@e1].refraction", [{ t: 600, v: 0, ease: ease.out("expo") }, { t: 1800, v: G.bend, ease: ease.inOut("sine") }, { t: 4800, v: G.settle }]);
+    k.animate(panel, "effects[@e1].dispersion", [{ t: 600, v: 0, ease: ease.out("cubic") }, { t: 1800, v: 0.45, ease: ease.inOut("sine") }, { t: 4800, v: 0.2 }]);
+    k.animate(panel, "effects[@e1].radius", [{ t: 600, v: G.frost, ease: ease.out("cubic") }, { t: 1800, v: 6 }]);
+    k.animate(panel, "effects[@e1].depth", [{ t: 600, v: 0, ease: ease.out("cubic") }, { t: 1800, v: 0.8 }]);
+    k.cues(sheet, cues);
+    k.variants(sheet, refilled([
+      { preset: "ig-post", adjust: (kit, id) => {
+        kit.patch(id, { padding: { top: 64, right: 64, bottom: 64, left: 64 }, primaryAxisAlignItems: "CENTER" });
+        for (const n of kit.named(id, "Glass panel")) kit.patch(n, { width: 952, padding: { top: 56, right: 56, bottom: 56, left: 56 } });
+        for (const n of kit.named(id, "Talk title")) kit.restyle(n, "Title 72");
+      } },
+      { preset: "ig-story", adjust: (kit, id) => {
+        kit.patch(id, { padding: verticalPadding(80), primaryAxisAlignItems: "CENTER" });
+        for (const n of kit.named(id, "Glass panel")) kit.patch(n, { width: 800, padding: { top: 48, right: 44, bottom: 48, left: 44 } });
+        for (const n of kit.named(id, "Talk title")) kit.restyle(n, "Title 72");
+      } }
+    ]));
+    return k.finish();
+  }
+});
+
+export {
+  GLASS_INTRO,
+  glass_intro_default
+};

package/dist/chunks/chunk-32MV55J6.js

@@ -0,0 +1,147 @@
+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 {
+  FACE_W,
+  FOOL,
+  arrangeFaces,
+  faceStyles,
+  flip,
+  foolBrand,
+  pitchFace,
+  realFace,
+  stage,
+  stageStyles,
+  studioShadow
+} from "./chunk-OMZKX47J.js";
+import {
+  bed
+} from "./chunk-42LEBOKV.js";
+import {
+  feedVariants,
+  verticalPadding
+} from "./chunk-LEKU2ZW3.js";
+import {
+  defineTemplate
+} from "./chunk-YKWT2Q3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SHOYVADV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/motion/april-fools-infomercial-reel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var MUSIC = bed("launch", 24);
+var DURATION = MUSIC.duration;
+var LOOP_MS = MUSIC.beat(8);
+var beat = MUSIC.beat;
+var REVEAL = beat(8);
+var HALF = 200;
+var cues = [
+  { layer: "Bug", preset: "fade-in", at: 0, params: { duration: 250 } },
+  { layer: "Headline", preset: "pop-in", at: 0, params: { duration: 400 } },
+  { layer: "Stage", preset: "drop-in", at: 0, params: { duration: 450 } },
+  { layer: ["Disk right", "Disk left", "Disk front"], preset: "pop-in", at: beat(1), params: { duration: 350 }, stagger: { delay: 100 } },
+  { layer: "Sub", preset: "rise-in", at: beat(1), params: { duration: 400 } },
+  { layer: "Price burst", preset: "pop-in", at: beat(2), params: { duration: 450 } },
+  { layer: "Seal", preset: "pop-in", at: beat(3), params: { duration: 400 } },
+  { layer: "Was price strike", preset: "wipe-in", at: beat(4), params: { duration: 300 } },
+  { layer: "Price burst", preset: "wobble", at: beat(4), params: { duration: 700 } },
+  { layer: "Banner", preset: "slide-in", at: beat(5), params: { duration: 400, direction: "left" } },
+  { layer: "Banner", preset: "shake", at: beat(6), params: { duration: 500 } },
+  // The reveal.
+  { layer: "Dateline", preset: "fade-in", at: REVEAL + 100, params: { duration: 300 } },
+  { layer: "Fools", preset: "pop-in", at: REVEAL + 100, params: { duration: 450 } },
+  { layer: "Gag disk", preset: "pop-in", at: beat(9), params: { duration: 400 }, stagger: { delay: 150 } },
+  { layer: "Truth", preset: "rise-in", at: beat(9), params: { duration: 400 } },
+  { layer: "Coupon", preset: "drop-in", at: beat(10), params: { duration: 450 } },
+  { layer: "Code chip", preset: "pulse", at: beat(14), params: { duration: 500, amount: 0.08 } },
+  { layer: "Coupon", preset: "pulse", at: beat(16), params: { duration: 500, amount: 0.03 } },
+  { layer: "Code chip", preset: "pulse", at: beat(20), params: { duration: 500, amount: 0.08 } }
+];
+var counts = [
+  // The price falls over two beats and lands on the third.
+  { layer: "Price figure", at: beat(2), duration: beat(2), counter: { from: FOOL.was, to: FOOL.now, prefix: "$", suffix: FOOL.cents } }
+];
+var swaps = [
+  { layer: "Caption", words: [
+    "New: Brisk on floppy disk.",
+    "1,474 disks. Now just $19.95.",
+    "April Fools. No disks. Sorry.",
+    "This part is real, though:",
+    "Three months of Pro, free.",
+    "Use code NOFLOPPY by Friday."
+  ], at: 0, hold: 1050, stagger: 50, in: 300, out: 250, unit: "word", rise: 28 }
+];
+var PLAN = {
+  vertical: { h: 1920, pad: verticalPadding(), stage: { x: 106, y: 508, scale: 0.94 }, caption: 1358, third: null, rays: 960, gag: true },
+  portrait: { h: 1350, pad: { top: 72, right: 80, bottom: 200, left: 80 }, stage: { x: 153, y: 398, scale: 0.86 }, caption: 1178, third: null, rays: 800, gag: false },
+  post: { h: 1080, pad: { top: 44, right: 48, bottom: 170, left: 48 }, stage: { x: 300, y: 196, scale: 0.8 }, caption: 946, third: null, rays: 620, gag: false }
+};
+var april_fools_infomercial_reel_default = defineTemplate({
+  id: "motion-april-fools-infomercial-reel",
+  meta: {
+    name: "April Fools infomercial reel",
+    description: 'A 12-second vertical April Fools video played completely straight: a late-night TV shopping spot for a fake feature (the product on 1,474 floppy disks, boxed on a studio plinth), a starburst price counting down to $19.95 and "But wait, there\u2019s more!", then the whole frame turns over to "April Fools. This part is real:" and a real offer on a coupon. Music, burned-in captions, 9:16 with square and 4:5 cuts',
+    category: "animation",
+    tags: ["animation", "april fools", "april 1", "prank", "fake feature", "infomercial", "retro tv", "floppy disk", "price slash", "starburst", "reveal", "offer", "coupon", "saas", "audio", "music", "captions", "reel"],
+    platforms: ["instagram", "tiktok", "youtube", "x", "linkedin"],
+    formats: ["reel", "short", "story", "post", "portrait-post"],
+    useCases: ["announcement", "launch", "sale"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, swaps },
+  build() {
+    const k = new Kit("April Fools infomercial reel", preset("ig-story"));
+    k.quantizeGeometry = true;
+    foolBrand(k, { name: FOOL.product }, ["primary", "onPrimary", "secondary", "onSecondary", "accent", "onAccent", "card", "onCard", "cardMuted"]);
+    stageStyles(k);
+    faceStyles(k);
+    k.textStyle("Headline 112", { size: 112, fontWeight: 900, fontStyle: "italic", letterSpacing: -5, lineHeight: 104 });
+    k.textStyle("Headline 92", { size: 92, fontWeight: 900, fontStyle: "italic", letterSpacing: -4, lineHeight: 88 });
+    k.textStyle("Sub 34", { size: 34, fontWeight: 600, lineHeight: 42 });
+    k.textStyle("Caption 42", { size: 42, fontWeight: 800, letterSpacing: -0.8, lineHeight: 50, textAlign: "CENTER" });
+    const sheet = k.sheet;
+    const P = PLAN.vertical;
+    k.flowSheet(sheet, 0, 0, "shadow");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30, audio: MUSIC.audio });
+    const real = realFace(k, sheet, P, { loopMs: LOOP_MS * 2 });
+    const pitch = pitchFace(k, sheet, P, { loopMs: LOOP_MS * 2 });
+    k.text(pitch, "Now on\nfloppy disk.", { style: "Headline 112", color: "onPrimary", name: "Headline" });
+    k.text(pitch, "All 2.1 GB of {{brand.name}}, on 1,474 disks.", { style: "Sub 34", color: "onPrimary", name: "Sub" });
+    stage(k, pitch, P.stage, { title: "The Floppy\nDisk Edition", loopMs: LOOP_MS });
+    const tape = k.stack(sheet, { width: FACE_W - P.pad.left - P.pad.right, fill: "card", radius: 10, padding: { top: 14, right: 20, bottom: 14, left: 20 }, effects: studioShadow(k, 0.6, 0.5), absolute: { x: P.pad.left, y: P.caption ?? 0 }, name: "Caption tape" });
+    k.text(tape, "New: Brisk on floppy disk.", { style: "Caption 42", color: "onCard", name: "Caption" });
+    flip(k, pitch, real, REVEAL - HALF, { half: HALF });
+    k.counts(sheet, counts);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    k.variants(sheet, feedVariants({ post: 0, portrait: 0 }, {
+      post: (kit, id) => {
+        arrangeFaces(kit, id, PLAN.post);
+        for (const n of kit.named(id, "Headline")) kit.restyle(n, "Headline 92");
+        for (const n of kit.named(id, "Sub")) kit.patch(n, { visible: false });
+        for (const n of kit.named(id, "Fools")) kit.restyle(n, "Fools 150");
+        for (const n of kit.named(id, "Real")) kit.patch(n, { itemSpacing: 16, counterAxisSpacing: 16 });
+      },
+      portrait: (kit, id) => {
+        arrangeFaces(kit, id, PLAN.portrait);
+        for (const n of kit.named(id, "Real")) kit.patch(n, { itemSpacing: 20, counterAxisSpacing: 20 });
+      }
+    }));
+    return k.finish();
+  }
+});
+
+export {
+  april_fools_infomercial_reel_default
+};