@popcraft/kit 0.44.1 → 0.45.0

package/dist/chunks/chunk-XMOG5RRS.js

@@ -0,0 +1,150 @@
+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 {
+  brand,
+  caption,
+  captionCues,
+  column,
+  glow,
+  rig,
+  sizes,
+  stage,
+  typeStep
+} from "./chunk-NKVEHB6Z.js";
+import {
+  key
+} from "./chunk-BMLF62K7.js";
+import {
+  deviceShadow
+} from "./chunk-F4V4REOM.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit,
+  preset
+} from "./chunk-5DE7NPKW.js";
+import {
+  ease
+} from "./chunk-6VIYCRKB.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/motion3d/feature-flip.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 1e4;
+var FPS = 30;
+var SIZES = ["video-square", "video-1080p"];
+var FEATURES = [
+  ["Budgets", "A monthly budget per category, with a nudge before you go over."],
+  ["Bills", "Every bill and subscription, with a reminder three days out."],
+  ["Goals", "Save toward a trip or a laptop and watch it fill."],
+  ["Insights", "See where it went, by week, month or merchant."],
+  ["Split", "Split any purchase with friends in two taps."],
+  ["Widgets", "Your balance and budgets on your Home Screen."],
+  ["Face ID", "Only you can open your money."],
+  ["Offline", "Works without signal and syncs when you\u2019re back."],
+  ["Export", "CSV and PDF statements for tax time."]
+];
+var FLIP_AT = 1600;
+var BACK_AT = 6600;
+var WAVE = 130;
+var TURN = 800;
+var CAPTION = { name: "Headline", title: "Everything your money needs." };
+var CUES = [...captionCues(CAPTION, 200), { layer: "Headline", preset: "fade-out", at: 9300, params: { duration: 500 } }];
+function build(k, sheet, s) {
+  k.nameSheet(sheet, `Feature flip wall \xB7 ${preset(s.preset).name}`);
+  glow(k, sheet, "primary", Math.round(1200 * s.u), s.W / 2, s.H * 0.58, 0.45);
+  const scene = stage(k, sheet, s, { duration: DURATION, fps: FPS, perspective: 2600 * s.u });
+  const cols = s.wide ? 4 : 3, rows = s.wide ? 2 : 3;
+  const tile = s.wide ? { w: 360, h: 300 } : { w: 262, h: 236 };
+  const gap = Math.round(24 * s.u);
+  const W = cols * tile.w + (cols - 1) * gap, H = rows * tile.h + (rows - 1) * gap;
+  const col = column(s, 120);
+  const top = Math.round((s.wide ? 200 : 190) * s.u);
+  const grid = rig(k, scene, s, "Grid", W, H, s.W / 2, top + (s.H - top - 60 * s.u) / 2);
+  k.patch(grid, { rotateX: 8 });
+  k.behave(grid, "rotateY", [{ kind: "sine", amp: 4, freq: 0.1 }]);
+  const pad = Math.round(26 * s.u);
+  const faceName = `Feature tile ${tile.w}`, backName = `Feature detail ${tile.w}`;
+  if (!k.hasComponent(faceName)) {
+    const name = `Tile ${Math.round(44 * s.u)}`;
+    k.textStyle(name, { size: Math.round(44 * s.u), fontWeight: 800, letterSpacing: -1, lineHeight: Math.round(50 * s.u) });
+    k.textStyle("Tile detail 20", { size: 20, fontWeight: 500, lineHeight: 27 });
+    const label = typeStep(k, s, "label");
+    k.component(faceName, {
+      width: tile.w,
+      height: tile.h,
+      fill: "primary",
+      radius: 30,
+      padding: pad,
+      justify: "SPACE_BETWEEN",
+      effects: [deviceShadow(0.3, 20, 50)],
+      description: "The front of a feature tile: its number and its name.",
+      props: { Number: "01", Feature: FEATURES[0][0] }
+    }, (id) => {
+      k.propText(id, "Number", { style: label, color: "onPrimary" });
+      k.propText(id, "Feature", { style: name, color: "onPrimary" });
+    });
+    k.component(backName, {
+      width: tile.w,
+      height: tile.h,
+      fill: "surface",
+      radius: 30,
+      padding: pad,
+      gap: 10,
+      justify: "CENTER",
+      effects: [deviceShadow(0.3, 20, 50)],
+      description: "The back of a feature tile: what the feature does.",
+      props: { Feature: FEATURES[0][0], Detail: FEATURES[0][1] }
+    }, (id) => {
+      k.propText(id, "Feature", { style: label, color: "primary" });
+      k.propText(id, "Detail", { style: "Tile detail 20", color: "onScreen" });
+    });
+  }
+  FEATURES.slice(0, cols * rows).forEach(([title, text], i) => {
+    const c = i % cols, r = Math.floor(i / cols);
+    const g = k.group(grid, { x: c * (tile.w + gap), y: r * (tile.h + gap), width: tile.w, height: tile.h }, { name: title });
+    const face = k.instance(g, faceName, { Number: String(i + 1).padStart(2, "0"), Feature: title }, { name: "Face" });
+    k.patch(face, { z: 1 });
+    const back = k.instance(g, backName, { Feature: title, Detail: text }, { name: "Back" });
+    k.patch(back, { z: -1, rotateY: 180 });
+    const d = (c + r) * WAVE;
+    key(k, g, "rotateY", [[FLIP_AT + d, 0, ease.inOut("cubic")], [FLIP_AT + d + TURN, 180, ease.hold], [BACK_AT + d, 180, ease.inOut("cubic")], [BACK_AT + d + TURN, 360]]);
+    key(k, g, "z", [[FLIP_AT + d, 0, ease.out("cubic")], [FLIP_AT + d + TURN / 2, 120, ease.inOut("cubic")], [FLIP_AT + d + TURN, 0, ease.hold], [BACK_AT + d, 0, ease.out("cubic")], [BACK_AT + d + TURN / 2, 120, ease.inOut("cubic")], [BACK_AT + d + TURN, 0]]);
+    if (c + r < (cols + rows - 2) / 2) k.patch(g, { rotateY: 180 });
+  });
+  caption(k, sheet, s, { ...CAPTION, step: "subtitle", width: col.width, align: "CENTER", at: { x: col.x, y: Math.round(70 * s.u) } });
+  k.cues(sheet, CUES);
+}
+var feature_flip_default = defineTemplate({
+  id: "motion-3d-feature-flip",
+  meta: {
+    name: "Feature flip wall",
+    description: "A grid of feature tiles in your colour flips over in a 3D wave to show what each feature does on its back, holds, and flips home \u2014 a 10-second loop at 30 fps, square (nine features) and 16:9 (eight), for launch and feature videos",
+    category: "animation",
+    tags: ["animation", "3d", "features", "grid", "flip", "cards", "app", "launch", "loop"],
+    platforms: ["instagram", "linkedin", "x", "youtube", "web"],
+    formats: ["post", "video", "ad"],
+    useCases: ["launch", "announcement"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  motion: { cues: CUES },
+  build() {
+    const k = new Kit("Feature flip wall", preset(SIZES[0]));
+    brand(k, "dark");
+    const [cover] = sizes(k, SIZES, (sheet, s) => build(k, sheet, s));
+    k.setCover(cover);
+    return k.finish();
+  }
+});
+
+export {
+  feature_flip_default
+};

package/dist/chunks/chunk-XNTBJSYD.js

@@ -0,0 +1,23 @@
+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 {
+  FAMILY
+} from "./chunk-PSUNHGMY.js";
+import {
+  ticket
+} from "./chunk-5AMU423D.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/app/festival-presale-family-ticket.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var festival_presale_family_ticket_default = ticket(FAMILY);
+
+export {
+  festival_presale_family_ticket_default
+};

package/dist/chunks/chunk-XOKE7V4W.js

@@ -0,0 +1,106 @@
+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 {
+  TIDE,
+  bar,
+  libStamp,
+  orchestra,
+  placeScore,
+  scoreBrand,
+  scorePaper,
+  scoreType,
+  screen,
+  sweep
+} from "./chunk-K2RB3LOK.js";
+import {
+  pruneStyles
+} from "./chunk-S5HJMHMT.js";
+import {
+  blink
+} from "./chunk-FUYBBHPV.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit,
+  preset
+} from "./chunk-5DE7NPKW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/motion/tour-tickets-tide-final.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var T = TIDE;
+var LOOP = 8e3;
+var LEFT = [
+  { ...T.dates[1], venue: "UNDER 80 LEFT" },
+  { ...T.dates[2], status: "few", venue: "UNDER 200 LEFT" },
+  { ...T.dates[4], status: "few", venue: "Choir stalls only" },
+  { ...T.dates[5], venue: "UNDER 120 LEFT" },
+  { ...T.dates[6], venue: "Returns only" }
+];
+var LETTER = [1, 2, 4, 5, 6];
+var FULL = ["AMSTERDAM", "VIENNA SAT", "LONDON SUN", "LONDON MON", "EDINBURGH"];
+var cues = [
+  { ...blink("Bar tag", 600, 1e3), stagger: { delay: 0 } },
+  { layer: "Full stamp", preset: "pulse", at: 2200, params: { duration: 600, amount: 0.06 }, stagger: { delay: 160 } },
+  { ...blink("Bar tag", 4600, 1e3), stagger: { delay: 0 } },
+  { layer: "Link", preset: "pulse", at: 6e3, params: { duration: 800, amount: 0.05 } }
+];
+var NAME = `Tour tickets final tickets story: ${T.act}`;
+var tour_tickets_tide_final_default = defineTemplate({
+  id: "motion-tour-tickets-tide-final",
+  meta: {
+    name: NAME,
+    description: "A looping last-tickets story for a film-in-concert tour, drawn as a concert hall: the film's screen with its turning lighthouse beam, the five nights still open as bars of the score that say honestly what is left (under 80 seats, choir stalls only, returns only), the full halls as a row of the librarian's navy stamps, and the orchestra at the foot, with blinking last-few tags. Eight seconds, 9:16",
+    category: "animation",
+    tags: ["animation", "tour", "tickets", "final tickets", "last chance", "urgency", "concert", "orchestra", "film score", "classical", "sold out", "sheet music", "story", "loop"],
+    platforms: ["instagram", "facebook", "tiktok"],
+    formats: ["story"],
+    useCases: ["event", "sale"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit(NAME, preset("ig-story"));
+    k.quantizeGeometry = true;
+    scoreBrand(k, { name: "TIDEWATER" });
+    scoreType(k);
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 0, 0, "paper", "MIN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: LOOP, fps: 30 });
+    const hall = k.frame(sheet, { x: 0, y: 0, width: 1080, height: 1920 }, { name: "Hall" });
+    k.patch(hall, { layoutPositioning: "ABSOLUTE" });
+    scorePaper(k, hall, 1080, 1920);
+    orchestra(k, hall, 1080, 570, { x: 0, y: 1350 });
+    const scr = screen(k, hall, { absolute: { x: 0, y: 0 } });
+    k.patch(scr, { x: 290, y: 24, scaleX: 0.5, scaleY: 0.5, anchorX: 0, anchorY: 0 });
+    k.text(hall, "LAST SEATS", { style: "Title 92", color: "text", width: 800, name: "Headline", absolute: { x: 140, y: 296 } });
+    k.text(hall, "Five of the ten halls are full. This is what is left, night by night, and nothing is being held back.", { style: "Body 26", color: "text", width: 800, align: "CENTER", name: "Lede", absolute: { x: 140, y: 404 } });
+    LEFT.forEach((d, i) => bar(k, hall, d, LETTER[i]));
+    placeScore(k, hall, LEFT, { x: 159, y: 520, scale: 0.97, cols: 3, rowGap: 30 });
+    k.text(hall, "Full halls keep a waitlist: returned seats go out in the order you joined.", { style: "Body 26", color: "text", width: 240, name: "Note", absolute: { x: 700, y: 806 } });
+    k.text(hall, "ALREADY FULL", { style: "Label 22", color: "onPaper", width: 800, align: "CENTER", name: "Full label", absolute: { x: 140, y: 1062 } });
+    const full = k.stack(hall, { direction: "HORIZONTAL", width: 800, gap: 16, wrap: true, justify: "CENTER", name: "Full", absolute: { x: 140, y: 1108 } });
+    k.patch(full, { counterAxisSpacing: 16 });
+    for (const c of FULL) libStamp(k, full, { words: c, name: "Full stamp" });
+    const link = k.stack(hall, { direction: "HORIZONTAL", width: "HUG", fill: "primary", radius: 2, padding: { top: 14, right: 24, bottom: 14, left: 24 }, name: "Link", absolute: { x: 300, y: 1320 } });
+    k.text(link, `${T.site}/dates`, { style: "Code 30", color: "onPrimary", autoWidth: true, name: "Link words" });
+    sweep(k, hall, LOOP, 1);
+    k.cues(sheet, cues);
+    pruneStyles(k);
+    return k.finish();
+  }
+});
+
+export {
+  tour_tickets_tide_final_default
+};

package/dist/chunks/chunk-XRZX2O3N.js

@@ -0,0 +1,231 @@
+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 {
+  BUNKER,
+  COIN_FACE,
+  INVADER,
+  OCTO,
+  SHIP,
+  SQUID,
+  TROPHY,
+  UFO,
+  arcadeBrand,
+  backdrop,
+  hardShadow,
+  march,
+  overlay,
+  refit,
+  sprite,
+  spriteInks
+} from "./chunk-UOZGBROB.js";
+import {
+  MONO
+} from "./chunk-5OTEBTMU.js";
+import {
+  bed
+} from "./chunk-S7PL2DU7.js";
+import {
+  HOLD,
+  blink,
+  cutOff,
+  cutOn
+} from "./chunk-FUYBBHPV.js";
+import {
+  bloom
+} from "./chunk-PCZTQVV6.js";
+import {
+  feedVariants,
+  pill
+} from "./chunk-IL2F4BKM.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit,
+  preset,
+  swapTimes
+} from "./chunk-5DE7NPKW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/motion/arcade-high-score.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var B = bed("chiptune", 36);
+var LENGTH = B.duration;
+var beat = B.beat;
+var BEAT_MS = beat(1);
+var COLS = 7;
+var LANDS = beat(8);
+var SHOT = BEAT_MS / 2;
+var SHOTS_FROM = beat(16);
+var SHOTS = 3 * COLS;
+var CLEAR = beat(28);
+var counts = [
+  { layer: "Figure", at: beat(1), duration: LANDS - beat(1), counter: { from: 0, to: 1e3, separator: "," }, tick: 100 }
+];
+var swaps = [
+  { layer: "Caption", words: ["A new high score for Coinop.", "1,000 teams now bill with us.", "Metered billing in one API call.", "Insert coin. Your first $10K free."], at: 200, hold: 2750, stagger: 40, in: 200, out: 150, unit: "word", rise: 10 }
+];
+var cues = [
+  { layer: "Banner text", preset: "typewriter", at: 0, params: { duration: 450 } },
+  { layer: "Banner", preset: "pulse", at: LANDS, params: { duration: 400, amount: 0.06, ease: HOLD } },
+  cutOn("Claim", LANDS),
+  cutOn("Trophy", LANDS, BEAT_MS),
+  blink("Banner", beat(10), 800),
+  // The swarm is shot away, an invader every half beat. The far row goes first, so the rows a shorter sheet keeps
+  // (the ones nearest the cannon) are the last to go at every size.
+  cutOff("Invader high", SHOTS_FROM, SHOT),
+  cutOff("Invader mid", SHOTS_FROM + COLS * SHOT, SHOT),
+  cutOff("Invader low", SHOTS_FROM + 2 * COLS * SHOT, SHOT),
+  // The field is empty: STAGE CLEAR cuts on where the swarm was, and the coin is asked for.
+  cutOn("Stage clear", CLEAR),
+  blink("Stage clear", CLEAR + BEAT_MS, 800),
+  blink("CTA", beat(12), 800),
+  blink("CTA", beat(30), 800),
+  blink("CTA", beat(33), 800)
+];
+var FIELDS = {
+  story: { top: 440, bottom: 480, ufo: 70, swarm: 156, clear: 236, rows: 3, bunkers: 1486, cannon: 1626, ground: 1730, extras: 1784 },
+  portrait: { top: 286, bottom: 176, ufo: 28, swarm: 104, clear: 148, rows: 2, bunkers: null, cannon: 1206, ground: 1290, extras: null },
+  post: { top: 110, bottom: 104, ufo: null, swarm: 24, clear: 16, rows: 1, bunkers: null, cannon: 996, ground: 1066, extras: null }
+};
+var ROW_NAMES = ["Swarm high", "Swarm mid", "Swarm low"];
+var show = (k, sheet, name, on) => {
+  for (const id of k.named(sheet, name)) k.patch(id, { visible: on });
+};
+function placeField(k, sheet, f, side) {
+  k.patch(sheet, { padding: { top: f.top, right: side, bottom: f.bottom, left: side } });
+  const y = (name, at) => {
+    show(k, sheet, name, at !== null);
+    if (at !== null) for (const id of k.named(sheet, name)) k.patch(id, { y: at });
+  };
+  y("UFO", f.ufo);
+  y("Swarm", f.swarm);
+  ROW_NAMES.forEach((name, i) => {
+    show(k, sheet, name, i >= 3 - f.rows);
+    for (const id of k.named(sheet, name)) k.patch(id, { y: (i - (3 - f.rows)) * 88 });
+  });
+  y("Stage clear", f.clear);
+  y("Bunkers", f.bunkers);
+  y("Cannon", f.cannon);
+  y("Ground", f.ground);
+  y("Ground dashes", f.ground + 16);
+  y("Lives", f.extras);
+  y("Coins", f.extras);
+}
+var arcade_high_score_default = defineTemplate({
+  id: "motion-arcade-high-score",
+  meta: {
+    name: "Arcade high score reel",
+    description: "A 14-second milestone reel as an arcade high-score screen: over a starfield a swarm marches and is shot away while, in the score window, NEW HIGH SCORE types on, the figure ticks up to 1,000 on the beat, INSERT COIN blinks over the address and STAGE CLEAR cuts on when the field is empty. Burned-in captions and a chiptune. 9:16 with square and 4:5 cuts",
+    category: "animation",
+    tags: ["animation", "arcade", "8-bit", "pixel art", "retro", "milestone", "high score", "saas", "build in public", "reel", "captions", "music"],
+    platforms: ["tiktok", "instagram", "youtube", "linkedin", "x"],
+    formats: ["reel", "short", "story", "post", "portrait-post"],
+    useCases: ["milestone", "stats", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, swaps },
+  build() {
+    const k = new Kit("Arcade high score reel", preset("ig-story"));
+    k.quantizeGeometry = true;
+    arcadeBrand(k, { claim: "paying teams run their billing on Coinop", url: "coinop.example/start" });
+    k.textStyle("HUD 26", { size: 26, fontWeight: 800, letterSpacing: 2, lineHeight: 34, textCase: "UPPER", ...MONO });
+    k.textStyle("Banner 44", { size: 44, fontWeight: 800, letterSpacing: 2, lineHeight: 56, ...MONO });
+    k.textStyle("Figure 270", { size: 270, fontWeight: 800, letterSpacing: -9, lineHeight: 254, textAlign: "CENTER", ...MONO });
+    k.textStyle("Figure 190", { size: 190, fontWeight: 800, letterSpacing: -6, lineHeight: 180, textAlign: "CENTER", ...MONO });
+    k.textStyle("Claim 42", { size: 42, fontWeight: 700, letterSpacing: -0.5, lineHeight: 52, textAlign: "CENTER" });
+    k.textStyle("Caption 30", { size: 30, fontWeight: 600, lineHeight: 40, textAlign: "CENTER", ...MONO });
+    k.textStyle("Button 40", { size: 40, fontWeight: 800, letterSpacing: 2, lineHeight: 48, ...MONO });
+    k.textStyle("Url 30", { size: 30, fontWeight: 600, lineHeight: 38, textAlign: "CENTER", ...MONO });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 40", label: "INSERT COIN", pad: [20, 34], radius: 0 });
+    const sheet = k.sheet;
+    const W = k.node(sheet).width;
+    k.flowSheet(sheet, 0, 0, "paper", "CENTER", "CENTER");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: LENGTH, fps: 30, audio: B.audio });
+    backdrop(k, sheet);
+    const ufo = sprite(k, sheet, UFO, 8, "accent", { name: "UFO", absolute: { x: -160, y: 0 } });
+    k.patch(ufo, { effects: [bloom(k, "accent", 30)] });
+    const pitch = 132;
+    const swarm = k.frame(sheet, { x: (W - (COLS - 1) * pitch - 96) / 2, y: 0, width: (COLS - 1) * pitch + 96, height: 3 * 88 }, { name: "Swarm" });
+    const kinds = [{ rows: SQUID, color: "text", name: "Invader high" }, { rows: INVADER, color: "accent", name: "Invader mid" }, { rows: OCTO, color: "lit", name: "Invader low" }];
+    kinds.forEach((kind, r) => {
+      const row = k.frame(swarm, { x: 0, y: r * 88, width: (COLS - 1) * pitch + 96, height: 64 }, { name: ROW_NAMES[r] });
+      for (let c = 0; c < COLS; c++) sprite(k, row, kind.rows, 8, kind.color, { name: kind.name, absolute: { x: c * pitch + (96 - kind.rows[0].length * 8) / 2, y: 0 } });
+    });
+    const clear = k.stack(sheet, { width: 560, align: "CENTER", fill: "lit", padding: { top: 14, right: 20, bottom: 14, left: 20 }, effects: [hardShadow(k, "accent", 10)], name: "Stage clear", absolute: { x: (W - 560) / 2, y: 0 } });
+    k.text(clear, "STAGE CLEAR", { style: "Banner 44", color: "onLit", autoWidth: true, name: "Stage clear text" });
+    const bunkers = k.frame(sheet, { x: 0, y: 0, width: W, height: 72 }, { name: "Bunkers" });
+    for (let i = 0; i < 4; i++) sprite(k, bunkers, BUNKER, 8, "lit", { name: "Bunker", absolute: { x: 116 + i * 240, y: 0 } });
+    const cannon = k.frame(sheet, { x: (W - 110) / 2, y: 0, width: 110, height: 60 }, { name: "Cannon" });
+    const bolt = k.rect(cannon, 10, 44, "accent", { name: "Bolt", absolute: { x: 50, y: -52 }, effects: [bloom(k, "accent", 18, 0.9)] });
+    sprite(k, cannon, SHIP, 10, "text", { name: "Ship", absolute: { x: 0, y: 0 } });
+    k.rect(sheet, W, 8, "lit", { name: "Ground", absolute: { x: 0, y: 0 } });
+    k.vector(sheet, W, 8, Array.from({ length: Math.ceil(W / 48) }, (_, i) => ({ points: [{ x: i * 48, y: 0 }, { x: i * 48 + 24, y: 0 }, { x: i * 48 + 24, y: 8 }, { x: i * 48, y: 8 }], closed: true })), "lit", { name: "Ground dashes", opacity: 0.5, absolute: { x: 0, y: 0 } });
+    const lives = k.stack(sheet, { direction: "HORIZONTAL", width: "HUG", gap: 16, name: "Lives", absolute: { x: 64, y: 0 } });
+    for (let i = 0; i < 3; i++) sprite(k, lives, SHIP, 6, "text", { name: "Life" });
+    const coins = k.stack(sheet, { direction: "HORIZONTAL", width: "HUG", gap: 12, name: "Coins", absolute: { x: W - 64 - 3 * 48 - 24, y: 0 } });
+    for (let i = 0; i < 3; i++) spriteInks(k, coins, COIN_FACE, 6, { "#": "text", o: "primary" }, { name: "Credit" });
+    const win = k.stack(sheet, { fill: "card", stroke: { color: "text", width: 6, align: "INSIDE", join: "MITER" }, effects: [hardShadow(k, "accent", 18)], name: "Window" });
+    const bar = k.stack(win, { direction: "HORIZONTAL", gap: 24, fill: "primary", padding: { top: 16, right: 30, bottom: 16, left: 30 }, name: "HUD" });
+    k.text(bar, "1UP {{brand.name}}", { style: "HUD 26", color: "onPrimary", name: "Player" });
+    k.text(bar, "Stage: month 14", { style: "HUD 26", color: "onPrimary", align: "RIGHT", name: "Stage" });
+    const body = k.stack(win, { gap: 20, padding: { top: 30, right: 30, bottom: 34, left: 30 }, align: "CENTER", name: "Score" });
+    const head = k.stack(body, { direction: "HORIZONTAL", width: "HUG", gap: 22, align: "CENTER", name: "Banner row" });
+    sprite(k, head, TROPHY, 5, "onCard", { name: "Trophy" });
+    const banner = k.stack(head, { direction: "HORIZONTAL", width: "HUG", fill: "accent", padding: { top: 8, right: 22, bottom: 8, left: 22 }, name: "Banner" });
+    k.text(banner, "NEW HIGH SCORE", { style: "Banner 44", color: "onAccent", autoWidth: true, name: "Banner text" });
+    sprite(k, head, TROPHY, 5, "onCard", { name: "Trophy" });
+    k.text(body, "1,000", { style: "Figure 270", color: "onCard", name: "Figure", effects: [hardShadow(k, "accent", 9), bloom(k, "onCard", 36, 0.45)] });
+    k.text(body, "{{brand.claim}}", { style: "Claim 42", color: "onCard", name: "Claim" });
+    const strip = k.stack(body, { fill: "paper", padding: { top: 18, right: 16, bottom: 18, left: 16 }, name: "Caption strip" });
+    k.text(strip, swaps[0].words[0], { style: "Caption 30", color: "text", name: "Caption" });
+    const cta = k.stack(body, { direction: "HORIZONTAL", width: "HUG", gap: 20, align: "CENTER", name: "CTA" });
+    spriteInks(k, cta, COIN_FACE, 8, { "#": "onCard", o: "primary" }, { name: "Coin" });
+    k.instance(cta, "Button", { Label: "INSERT COIN" }, { name: "Coin button" });
+    k.text(body, "{{brand.url}}", { style: "Url 30", color: "onCard", name: "Url" });
+    overlay(k, sheet);
+    placeField(k, sheet, FIELDS.story, 110);
+    if (swapTimes(swaps[0]).at(-1).gone > LENGTH) throw new Error("arcade high score: the captions run past the music");
+    march(k, swarm, { from: 0, until: LENGTH - BEAT_MS, step: BEAT_MS, dx: 24 });
+    march(k, cannon, { from: 0, until: LENGTH - BEAT_MS, step: BEAT_MS, dx: 132 });
+    k.animate(bolt, "translateY", [
+      ...Array.from({ length: SHOTS }, (_, i) => [0, 1, 2, 3, 4].map((s) => ({ t: SHOTS_FROM + i * SHOT - 160 + s * 40, v: -s * 320, ease: HOLD }))).flat(),
+      { t: SHOTS_FROM + SHOTS * SHOT - 160, v: 0 }
+    ]);
+    const crossing = (from) => Array.from({ length: 18 }, (_, i) => ({ t: from + i * SHOT, v: i * 80, ease: HOLD }));
+    k.animate(ufo, "translateX", [...crossing(beat(2)), ...crossing(beat(22)), { t: beat(22) + 18 * SHOT, v: 18 * 80 }]);
+    k.counts(sheet, counts);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    const smaller = (kit, id) => {
+      for (const n of kit.named(id, "Figure")) kit.restyle(n, "Figure 190");
+      for (const n of kit.named(id, "Stage clear")) kit.patch(n, { padding: { top: 8, right: 20, bottom: 8, left: 20 } });
+      for (const n of kit.named(id, "Score")) kit.patch(n, { itemSpacing: 14, counterAxisSpacing: 14, padding: { top: 22, right: 30, bottom: 24, left: 30 } });
+    };
+    k.variants(sheet, feedVariants({ post: 0, portrait: 0 }, {
+      post: (kit, id) => {
+        smaller(kit, id);
+        placeField(kit, id, FIELDS.post, 90);
+        refit(kit, id);
+      },
+      portrait: (kit, id) => {
+        placeField(kit, id, FIELDS.portrait, 96);
+        refit(kit, id);
+      }
+    }));
+    return k.finish();
+  }
+});
+
+export {
+  arcade_high_score_default
+};

package/dist/chunks/chunk-XSGZUJCO.js

@@ -0,0 +1,145 @@
+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 {
+  body,
+  brandRow,
+  clear,
+  dress,
+  fitGate,
+  gate,
+  label,
+  liftGate,
+  redress,
+  shout,
+  shove,
+  slab,
+  slam,
+  spinSticker,
+  stamp,
+  sticker,
+  thump,
+  ticketStub,
+  tollBrand,
+  verticalPost
+} from "./chunk-HI7LV6FJ.js";
+import {
+  patchAll,
+  restyle,
+  sizeOf
+} from "./chunk-T3XFQJUI.js";
+import {
+  pill,
+  postVariants
+} from "./chunk-IL2F4BKM.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit,
+  preset
+} from "./chunk-5DE7NPKW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/social/style-brutalist-announcement.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 6e3;
+var OUT = 5200;
+var TEETH = 18;
+var PARTS = ["Top row", "Shout top", "Shout block", "Gate", "Sticker", "Pitch", "Call row"];
+var cues = [
+  shove("Top row", 0, "left", { duration: 260 }),
+  ...slam("Shout top", 150, { distance: 320, shake: 14 }),
+  ...stamp("Shout block", 460, { from: 1.8 }),
+  shove("Gate", 800, "right", { duration: 300 }),
+  ...stamp("Sticker", 1650, { from: 1.9, rock: 9 }),
+  { layer: "Pitch", preset: "words-in", at: 1900, params: { duration: 300, amount: 45 } },
+  ...slam("Call row", 2700, { distance: 240, shake: 12 }),
+  thump("Call row", 3500, 0.06),
+  { layer: "Shout block", preset: "wobble", at: 3900, params: { duration: 600, amount: 5 } },
+  thump("Call row", 4400, 0.06),
+  clear(PARTS, OUT)
+];
+var style_brutalist_announcement_default = defineTemplate({
+  id: "motion-saas-style-brutalist-announcement",
+  meta: {
+    name: "Brutalist SaaS announcement post (animated)",
+    description: "A launch announcement that loops, in the neo-brutalist look: the shout slams on, its second line is stamped under it as a tilted block, a toll barrier shoves in and its arm swings up, a sticker is stamped on and keeps turning, the pitch arrives a word at a time and the button lands and beats; then it all cuts off and starts again. Six seconds, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "announcement", "launch", "we are open", "loop", "neo-brutalist", "brutalism", "bold", "sticker", "post", "creator tool"],
+    platforms: ["x", "linkedin", "instagram", "threads", "product-hunt"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["announcement", "launch"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit("Brutalist SaaS announcement post (animated)", preset("ig-post"));
+    k.quantizeGeometry = true;
+    tollBrand(k, ["paper", "text", "onText", "primary", "onPrimary", "accent", "onAccent", "card", "onCard"]);
+    k.textStyle("Shout 168", shout(168));
+    k.textStyle("Shout 150", shout(150));
+    k.textStyle("Brand 40", shout(40, { leading: 1.1 }));
+    k.textStyle("Tag 22", label(22));
+    k.textStyle("Sticker 76", shout(76, { center: true }));
+    k.textStyle("Sticker 20", label(20, { center: true }));
+    k.textStyle("Pitch 38", body(38, 700));
+    k.textStyle("Pitch 46", body(46, 700));
+    k.textStyle("Button 34", shout(34, { leading: 1.25 }));
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 34", label: "OPEN YOURS: tollbooth.example", pad: [20, 26], radius: 0 });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 20, { top: 104, right: 64, bottom: 110, left: 64 }, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    dress(k, sheet);
+    k.patch(ticketStub(k, sheet, { x: 190, y: 1540 }), { visible: false });
+    k.patch(brandRow(k, sheet, { nameStyle: "Brand 40", tagStyle: "Tag 22", tag: "OPEN FROM TUE 14 OCT", nameWidth: 230 }), { primaryAxisAlignItems: "MIN", itemSpacing: 28 });
+    const said = k.stack(sheet, { gap: 4, name: "Shout" });
+    k.text(said, "THE BOOTH", { style: "Shout 168", color: "text", name: "Shout top" });
+    const block = slab(k, said, { width: "HUG", fill: "primary", shadow: 14, padding: { top: 6, right: 28, bottom: 14, left: 24 }, name: "Shout block" });
+    k.text(block, "IS OPEN.", { style: "Shout 168", color: "onPrimary", autoWidth: true, name: "Shout words" });
+    k.patch(block, { rotation: -3 });
+    const barrier = gate(k, sheet, { width: 952, height: 76 });
+    liftGate(k, barrier.arm, [1400], 3300, 97);
+    k.text(sheet, "Put a price on a file and sell it from one link. $0 a month, and a 5% toll when you sell.", { style: "Pitch 38", color: "text", name: "Pitch" });
+    const call = slab(k, sheet, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", fill: "primary", shadow: 12, gap: 0, name: "Call row" });
+    const tile = k.stack(call, { width: "HUG", fill: "text", padding: 24, name: "Call tile" });
+    k.logo(tile, 40, 40);
+    k.instance(call, "Button", { Label: "OPEN YOURS: {{brand.site}}" }, { name: "Call" });
+    const badge = sticker(k, sheet, { size: 250, teeth: TEETH, fill: "accent", ink: "onAccent", big: "$0", small: "A MONTH\nTO OPEN", bigStyle: "Sticker 76", smallStyle: "Sticker 20", tilt: 10, shadow: 10, absolute: { x: 800, y: 370 } });
+    spinSticker(k, badge, 2 * 360 / TEETH * 1e3 / DURATION);
+    k.cues(sheet, cues);
+    const refit = (kit, id, at) => {
+      redress(kit, id);
+      fitGate(kit, id, "Gate", sizeOf(kit, id).w - kit.node(id).padding.left * 2);
+      patchAll(kit, id, "Sticker", at);
+    };
+    k.variants(sheet, postVariants({ portrait: 64 }, {
+      portrait: (kit, id) => {
+        kit.patch(id, { padding: { top: 120, right: 64, bottom: 126, left: 64 } });
+        restyle(kit, id, "Pitch", "Pitch 46");
+        refit(kit, id, { x: 790, y: 340 });
+      },
+      vertical: (kit, id) => {
+        restyle(kit, id, "Pitch", "Pitch 46");
+        for (const n of ["Shout top", "Shout words"]) restyle(kit, id, n, "Shout 150");
+        patchAll(kit, id, "Date tag", { visible: false });
+        verticalPost(kit, id);
+        refit(kit, id, { x: 640, y: 330 });
+      }
+    }));
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  style_brutalist_announcement_default
+};