@popcraft/kit 0.24.3 → 0.26.0

package/dist/chunks/chunk-N33LTG5A.js

@@ -0,0 +1,260 @@
+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 {
+  SHARD,
+  blinking,
+  cell,
+  clockFrames,
+  cursor,
+  fitGround,
+  ground,
+  lockup,
+  minimap,
+  mono,
+  scan,
+  steps,
+  termBrand,
+  termLine,
+  termWindow,
+  tuiBox
+} from "./chunk-JAQ6A2NG.js";
+import {
+  camera,
+  float,
+  reelCuts,
+  reelSheet,
+  seenAt,
+  wideCut
+} from "./chunk-UD3JVCFG.js";
+import {
+  clicks,
+  glide,
+  pointer
+} from "./chunk-DYNJDZ4J.js";
+import {
+  captionStrip,
+  captionSwap
+} from "./chunk-C7BYFVZT.js";
+import {
+  score
+} from "./chunk-52GCV7N5.js";
+import {
+  cutOn,
+  hz
+} from "./chunk-PMVMC75G.js";
+import {
+  hide,
+  restyle
+} from "./chunk-QLV6445V.js";
+import {
+  pill
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit,
+  preset
+} from "./chunk-T3SGRYUX.js";
+import {
+  ease
+} from "./chunk-6DWY3DOQ.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/motion/style-terminal-feature-demo.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var S = score("edm");
+var { beat } = S;
+var NAME = "Terminal SaaS feature demo short";
+var W = { w: 800, h: 720 };
+var SIZE = 22;
+var CW = cell(SIZE);
+var LH = 30;
+var STEP = [4, 10, 16, 21, 26];
+var CLICK1 = beat(STEP[0] + 2);
+var CLICK2 = beat(STEP[3] + 1);
+var REST = { x: 640, y: 640 };
+var TARGETS = [{ x: 196, y: 100 }, { x: 150, y: 520 }];
+var SHOTS = [
+  { t: beat(STEP[0]), duration: 1, zoom: 1.7, x: 260, y: 130 },
+  { t: beat(STEP[1]), duration: 1, zoom: 1.3, x: 330, y: 230 },
+  { t: beat(STEP[2]), duration: 1, zoom: 1.55, x: 250, y: 390 },
+  { t: beat(STEP[3]), duration: 1, zoom: 1.35, x: 360, y: 590 },
+  { t: beat(STEP[4]), duration: 1, zoom: 1 }
+];
+var SHARDS = [
+  ["01", "3:34", "0:52", 0.245],
+  ["02", "3:31", "0:51", 0.24],
+  ["03", "3:29", "0:52", 0.245],
+  ["04", "3:34", "0:50", 0.236]
+];
+var BAR = 400;
+var JSON_LINES = [
+  ['  "id": ', '"run_7Hq2"', "amber"],
+  ['  "status": ', '"passed"', "green"],
+  ['  "tests": ', "2418", "amber"],
+  ['  "runners": ', "64", "amber"],
+  ['  "duration_s": ', "52.3", "amber"]
+];
+var cues = [
+  { layer: "Hook", preset: "typewriter", at: 0, params: { duration: 700 } },
+  // The window is on with the hook's first letters, so the frame is never a bare ground.
+  cutOn("Stage", 120),
+  cutOn("Steps bar", beat(1)),
+  ...[1, 2, 3].map((n, i) => ({ layer: `Step fill ${n}`, preset: "wipe-in", at: beat(STEP[i]), params: { duration: beat(STEP[i + 1] - STEP[i]), ease: ease.linear } })),
+  cutOn("Field ring", CLICK1),
+  cutOn("New shard", beat(STEP[1] + 2), beat(1)),
+  cutOn("More line", beat(STEP[1] + 4)),
+  cutOn("Diff del", beat(STEP[2] + 1)),
+  cutOn("Diff add", beat(STEP[2] + 2)),
+  cutOn("Json line", CLICK2 + 120, 180),
+  cutOn("Json close", CLICK2 + 120 + 180 * 5),
+  { layer: "Call", preset: "flash", at: beat(STEP[4]), params: { duration: 400, ease: ease.hold } },
+  { layer: "Call", preset: "pulse", at: beat(29), params: { duration: 400, amount: 0.04 } }
+];
+var counts = [
+  { layer: "Runners figure", at: CLICK1 + 100, duration: 900, tick: 60, counter: { from: 4, to: 64 } }
+];
+var swaps = [captionSwap(["One shard holds everyone.", "Bump runners to 64.", "Shards rebalance by timing.", "One line in ci.yml."], 0, S.duration - 30, { stagger: 60, in: 200, out: 160, rise: 0 })];
+var style_terminal_feature_demo_default = defineTemplate({
+  id: "motion-saas-style-terminal-feature-demo",
+  meta: {
+    name: NAME,
+    description: "A 15-second feature demo in the terminal look: a pointer works a terminal dashboard step by step while the view cuts in to each click. A runners field ticks from 4 to 64, shard bars step down and an estimate rolls from 14:08 to 00:52, the change lands as a red and green diff, and a folded JSON response opens a line at a time. Step bar, burned-in captions and music, 9:16 with square and 16:9 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "terminal", "monospace", "cli", "tui", "developer tools", "demo", "feature", "cursor", "zoom", "counter", "diff", "json", "captions", "music", "audio", "reel", "shorts"],
+    platforms: ["tiktok", "instagram", "youtube", "x", "linkedin"],
+    formats: ["reel", "short", "story", "post", "demo", "video"],
+    useCases: ["launch", "education", "onboarding"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, swaps },
+  build() {
+    const k = new Kit(NAME, preset("ig-story"));
+    k.quantizeGeometry = true;
+    termBrand(k, {});
+    const term = mono(k, "Term 22", SIZE, { lead: LH / SIZE });
+    mono(k, "Brand 30", 30, { weight: 700, lead: 1.2 });
+    mono(k, "Label 22", 22, { weight: 500, lead: 1.4 });
+    mono(k, "Hook 66", 66, { weight: 800, lead: 1.15, spacing: -2 });
+    mono(k, "Hook 52", 52, { weight: 800, lead: 1.15, spacing: -1.5 });
+    mono(k, "Caption 34", 34, { weight: 600, lead: 1.35 });
+    mono(k, "Button 30", 30, { weight: 700, lead: 1.3 });
+    pill(k, "Call", { fill: "primary", ink: "onPrimary", style: "Button 30", label: `$ ${SHARD.install}`, pad: [16, 26], radius: 4 });
+    const sheet = reelSheet(k, S, { name: "Feature demo", gap: 16 });
+    ground(k, sheet, 1080, 1920, { cw: 18, lh: 36 });
+    minimap(k, sheet, { x: 140, y: 1476, width: 800, rows: 16, seed: 23, scroll: { duration: S.duration, every: beat(1) } });
+    const top = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Brand row" });
+    lockup(k, top, { size: 30, style: "Brand 30" });
+    const tag = k.stack(top, { direction: "HORIZONTAL", width: "HUG", padding: { top: 4, right: 12, bottom: 4, left: 12 }, stroke: { color: "edge", width: 2, align: "INSIDE" }, name: "Feature tag" });
+    k.text(tag, "shard top --rebalance", { style: "Label 22", color: "onPaper", autoWidth: true, name: "Feature words" });
+    k.text(sheet, "Slow shard?\nSplit it live.", { style: "Hook 66", color: "text", name: "Hook" });
+    const stage = k.stack(sheet, { width: W.w, height: W.h, clip: true, radius: 6, name: "Stage" });
+    const cam = k.frame(stage, { x: 0, y: 0, width: W.w, height: W.h }, { name: "Camera" });
+    const t = termWindow(k, cam, { w: W.w, h: W.h, left: "shard top", right: "run 7Hq2 \xB7 main", style: "Label 22", absolute: { x: 0, y: 0 }, shadow: false, pad: 24, gap: 12 });
+    const inner = W.w - 48;
+    const head = k.stack(t.body, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", height: 44, name: "Head" });
+    const field = k.stack(head, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", gap: 10, name: "Field" });
+    k.text(field, "runners", { style: term, color: "cardMuted", autoWidth: true, name: "Field label" });
+    const box = k.stack(field, { direction: "HORIZONTAL", width: Math.round(CW * 5), height: 40, align: "CENTER", justify: "CENTER", stroke: { color: "edge", width: 2, align: "INSIDE" }, name: "Field box" });
+    k.text(box, "64", { style: term, color: "amber", width: Math.round(CW * 3), align: "CENTER", name: "Runners figure" });
+    k.rect(field, 4, 40, "primary", { name: "Field ring" });
+    const est = k.stack(head, { direction: "HORIZONTAL", width: "HUG", align: "CENTER", name: "Estimate" });
+    k.text(est, "est ", { style: term, color: "cardMuted", autoWidth: true, name: "Estimate label" });
+    const clock = k.text(est, "00:52", { style: term, color: "green", width: Math.ceil(CW * 5), name: "Estimate figure" });
+    const rows = k.stack(t.body, { gap: 0, name: "Shards" });
+    const barFills = [], times = [];
+    const shardRow = (n, time, frac, name) => {
+      const row = k.stack(rows, { direction: "HORIZONTAL", align: "CENTER", gap: Math.round(CW), height: LH, name });
+      k.text(row, `shard ${n}`, { style: term, color: "cardMuted", autoWidth: true, name: "Shard label" });
+      const track = k.stack(row, { width: BAR, height: 14, fill: "line", name: "Shard track" });
+      const fill = k.rect(track, Math.round(BAR * frac), 14, "green", { name: "Shard bar" });
+      const tx = k.text(row, time, { style: term, color: "amber", width: Math.ceil(CW * 5), name: "Shard time" });
+      return { fill, tx };
+    };
+    for (const [n, from, to2, frac] of SHARDS) {
+      const r = shardRow(n, to2, frac, "Shard");
+      barFills.push({ id: r.fill, ratio: 0.97 / frac });
+      times.push({ id: r.tx, from, to: to2 });
+    }
+    shardRow("05", "0:51", 0.24, "New shard");
+    shardRow("06", "0:52", 0.245, "New shard");
+    termLine(k, rows, [{ t: "+ 58 more shards, all under 0:53", c: "cardMuted" }], { style: term, name: "More line", height: LH });
+    const diff = tuiBox(k, t.body, { w: inner, h: 108, label: "ci.yml", labelWidth: Math.round(CW * 6), style: term, pad: 18, inset: 2 });
+    termLine(k, diff.body, [{ t: "-   runners: 4", c: "red" }], { style: term, name: "Diff del" });
+    termLine(k, diff.body, [{ t: "+   runners: 64", c: "green" }], { style: term, name: "Diff add" });
+    const json = tuiBox(k, t.body, { w: inner, h: 252, label: `GET /v1/runs/run_7Hq2`, labelWidth: Math.round(CW * 21), style: term, pad: 18, inset: 2 });
+    const open = k.text(json.body, "{", { style: term, color: "onCard", name: "Json open" });
+    for (const [key, value, c] of JSON_LINES) termLine(k, json.body, [{ t: key, c: "cyan" }, { t: value, c }, { t: ",", c: "cardMuted" }], { style: term, name: "Json line" });
+    const close = k.stack(json.body, { direction: "HORIZONTAL", align: "CENTER", name: "Json close" });
+    k.text(close, "} ", { style: term, color: "onCard", autoWidth: true, name: "Json brace" });
+    blinking(k, cursor(k, close, SIZE, { name: "Cursor" }), hz(16, S.duration));
+    const p = pointer(k, stage, { ...REST, size: 72, fill: "onCard", edge: "well", ring: "primary" });
+    const bars = k.stack(sheet, { direction: "HORIZONTAL", gap: 8, name: "Steps bar" });
+    for (let i = 1; i <= 3; i++) {
+      const track = k.stack(bars, { height: 8, fill: "line", clip: true, name: "Step track" });
+      k.rect(track, "FILL", 8, "primary", { name: `Step fill ${i}` });
+    }
+    captionStrip(k, sheet, swaps[0].words[0], { style: "Caption 34", fill: "card", ink: "onCard", radius: 4, pad: [16, 24], stroke: { color: "edge", width: 2, align: "INSIDE" } });
+    const call = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Call row" });
+    k.instance(call, "Call", { Label: `$ ${SHARD.install}` }, { name: "Call" });
+    k.text(call, "{{brand.site}}", { style: "Label 22", color: "onPaper", autoWidth: true, name: "Site" });
+    scan(k, sheet);
+    k.counts(sheet, counts);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    const S2 = beat(STEP[1]) + 200;
+    for (const b of barFills) {
+      k.patch(b.id, { anchorX: 0 });
+      k.animate(b.id, "scaleX", [0, 1, 2, 3, 4].map((i) => ({ t: S2 + i * 160, v: Math.round((b.ratio + (1 - b.ratio) * (i / 4)) * 1e3) / 1e3, ...i < 4 ? { ease: ease.hold } : {} })));
+    }
+    for (const x of times) steps(k, x.id, [[0, x.from], [S2 + 640, x.to]]);
+    steps(k, clock, [[0, "14:08"], ...clockFrames(S2, 900, 848, 52, 14)]);
+    steps(k, open, [[0, "{ ... 5 keys }"], [CLICK2 + 120, "{"]]);
+    camera(k, cam, W.w, W.h, SHOTS);
+    const to = (i, s) => {
+      const at = seenAt(W.w, W.h, SHOTS[s], TARGETS[i]);
+      return { dx: at.x - REST.x, dy: at.y - REST.y };
+    };
+    glide(k, p, [
+      { t: beat(STEP[0]), dx: 0, dy: 0 },
+      { t: CLICK1 - 150, ...to(0, 0) },
+      { t: beat(STEP[1]), ...to(0, 0) },
+      { t: beat(STEP[1]) + 400, dx: 0, dy: 0 },
+      { t: beat(STEP[3]), dx: 0, dy: 0 },
+      { t: CLICK2 - 150, ...to(1, 3) },
+      { t: beat(STEP[4]), ...to(1, 3) },
+      { t: beat(STEP[4]) + 400, dx: 0, dy: 0 }
+    ]);
+    clicks(k, p, [CLICK1, CLICK2]);
+    k.variants(sheet, [...reelCuts({ post: 36, portrait: 60 }, {
+      post: (kit, id) => {
+        kit.patch(id, { itemSpacing: 12, counterAxisSpacing: 12, padding: { top: 30, right: 140, bottom: 30, left: 140 } });
+        fitGround(kit, id, { cw: 18, lh: 36 });
+        hide(kit, id, ["Brand row", "Minimap", "Steps bar"]);
+        restyle(kit, id, "Hook", "Hook 52");
+        for (const n of kit.named(id, "Hook")) kit.patch(n, { characters: "Slow shard? Split it live." });
+      }
+    }).slice(0, 1), wideCut(640, (kit, id, right) => {
+      const scale = Math.min(right.width / W.w, (right.height - 30) / W.h), x = right.x + Math.round((right.width - W.w * scale) / 2), y = right.y + Math.round((right.height - 30 - W.h * scale) / 2);
+      fitGround(kit, id, { cw: 18, lh: 36 });
+      float(kit, id, "Stage", x, y, { scale });
+      float(kit, id, "Steps bar", x, y + Math.round(W.h * scale) + 22, { width: Math.round(W.w * scale) });
+      hide(kit, id, ["Minimap"]);
+    })]);
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  style_terminal_feature_demo_default
+};

package/dist/chunks/chunk-N345MTET.js

@@ -0,0 +1,160 @@
+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 {
+  burst,
+  clouds,
+  envelope,
+  fitScene,
+  hangings,
+  lunarBrand,
+  sky,
+  slideVoucher
+} from "./chunk-VSNJ5WRX.js";
+import {
+  SERIF
+} from "./chunk-X23ZWFW2.js";
+import {
+  bed
+} from "./chunk-52GCV7N5.js";
+import {
+  feedVariants,
+  pill,
+  verticalPadding
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit,
+  preset,
+  swapTimes
+} from "./chunk-T3SGRYUX.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/motion/lunar-new-year-envelope-reel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var MUSIC = bed("festive", 25);
+var beat = MUSIC.beat;
+var DURATION = MUSIC.duration;
+var ENVELOPE = 340;
+var night = (h, front, mid, o = {}) => ({
+  w: 1080,
+  h,
+  u: 1,
+  loopMs: DURATION,
+  moon: { x: 540, y: mid - 50, size: 580 },
+  lanterns: [{ x: 236, drop: 26, size: 112 }, { x: 842, drop: 44, size: 124 }, { x: 62, drop: mid - 130, size: 118 }, { x: 1016, drop: mid - 230, size: 136 }],
+  fireworks: [{ x: 196, y: mid - 60, r: 170 }, { x: 890, y: mid - 96, r: 184 }, { x: 150, y: mid + 150, r: 104 }, { x: 936, y: mid + 150, r: 112 }],
+  clouds: [front - 228, front - 138, front - 58, front, h + 200, h + 200],
+  dust: { top: mid - 300, bottom: front - 120 },
+  ...o
+});
+var STORY = night(1920, 1086, 830, { clouds: [858, 948, 1028, 1086, 1500, 1650], branch: { x: -20, y: 1890, size: 640 } });
+var FEED_LANTERNS = (mid) => [{ x: -400, drop: 26, size: 112 }, { x: 1500, drop: 44, size: 124 }, { x: 56, drop: mid - 60, size: 118 }, { x: 1022, drop: mid - 130, size: 136 }];
+var swaps = [
+  { layer: "Caption", words: ["By custom, every debt is settled before the new year.", "Squared chases your unpaid invoices, politely.", "Customers get paid 11 days sooner.", "Open your red envelope: 88 days free."], at: beat(2), hold: 1750, stagger: 50, in: 350, out: 250, unit: "word", rise: 30 }
+];
+var cues = [
+  { layer: "Eyebrow", preset: "fade-in", at: 0, params: { duration: 500 } },
+  { layer: "Headline", preset: "lines-in", at: 0, params: { duration: 700 } },
+  { layer: "Envelope", preset: "rise-in", at: 0, params: { duration: 650 } },
+  { layer: "Envelope", preset: "wobble", at: beat(4), params: { duration: 800 } },
+  { layer: "Coin", preset: "pulse", at: beat(10), params: { duration: 900, amount: 0.08 } },
+  { layer: "Call", preset: "rise-in", at: beat(2), params: { duration: 600 } },
+  { layer: "Site", preset: "fade-in", at: beat(3), params: { duration: 600 } },
+  { layer: "Call", preset: "pulse", at: beat(20), params: { duration: 900, amount: 0.06 } }
+];
+var BURSTS = [[1, 9, 17, 23], [2, 11, 19], [5, 13, 21], [7, 15, 22]];
+var lunar_new_year_envelope_reel_default = defineTemplate({
+  id: "motion-lunar-new-year-envelope-reel",
+  meta: {
+    name: "Lunar New Year red envelope reel",
+    description: "A 14-second Lunar New Year reel for a SaaS with a gift to give: a red envelope rises before a paper moon in the first half second, fireworks burst on the beat, the offer slides out of the envelope and the story is told in burned-in captions before the button lands \u2014 layered cut paper, swaying lanterns and plum blossom, with no zodiac animal, so it works every year. Cut to bright keys (made by PopCraft, CC0). 9:16 with 1:1 and 4:5 cuts",
+    category: "animation",
+    tags: ["animation", "lunar new year", "chinese new year", "spring festival", "red envelope", "lantern", "fireworks", "cut paper", "offer", "saas", "reel", "captions", "music", "audio", "seasonal"],
+    platforms: ["instagram", "tiktok", "youtube", "linkedin"],
+    formats: ["reel", "short", "story", "post", "portrait-post"],
+    useCases: ["sale", "announcement", "launch"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, swaps },
+  build() {
+    const k = new Kit("Lunar New Year red envelope reel", preset("ig-story"));
+    k.quantizeGeometry = true;
+    lunarBrand(k, { headline: "Start the new\nyear square." });
+    k.textStyle("Eyebrow 26", { size: 26, fontWeight: 700, letterSpacing: 5, lineHeight: 34, textCase: "UPPER" });
+    k.textStyle("Display 104", { ...SERIF, size: 104, fontWeight: 900, letterSpacing: -3.4, lineHeight: 104 });
+    k.textStyle("Display 84", { ...SERIF, size: 84, fontWeight: 900, letterSpacing: -2.6, lineHeight: 86 });
+    k.textStyle("Gift 16", { size: 16, fontWeight: 800, letterSpacing: 2.4, lineHeight: 20, textCase: "UPPER", textAlign: "CENTER" });
+    k.textStyle("Figure 92", { ...SERIF, size: 92, fontWeight: 900, letterSpacing: -3, lineHeight: 86, textAlign: "CENTER" });
+    k.textStyle("Days 28", { ...SERIF, size: 28, fontWeight: 700, lineHeight: 32, textAlign: "CENTER" });
+    k.textStyle("Label 17", { ...SERIF, size: 17, fontStyle: "italic", fontWeight: 600, lineHeight: 22, textAlign: "CENTER" });
+    k.textStyle("Caption 40", { size: 40, fontWeight: 700, letterSpacing: -0.4, lineHeight: 50, textAlign: "CENTER" });
+    k.textStyle("Caption 32", { size: 32, fontWeight: 700, letterSpacing: -0.3, lineHeight: 40, textAlign: "CENTER" });
+    k.textStyle("Button 32", { size: 32, fontWeight: 800, lineHeight: 40 });
+    k.textStyle("Site 26", { size: 26, fontWeight: 600, letterSpacing: 1, lineHeight: 34, textAlign: "CENTER" });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 32", label: "Open yours: 88 days free", pad: [22, 40], radius: 10 });
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Red envelope reel");
+    k.flowSheet(sheet, 0, verticalPadding(), "paper", "SPACE_BETWEEN", "CENTER");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30, audio: MUSIC.audio });
+    const s = STORY;
+    sky(k, sheet, s);
+    clouds(k, sheet, s, 0, 3);
+    envelope(k, sheet, {
+      w: ENVELOPE,
+      lines: [{ text: "A new-year gift", style: "Gift 16", name: "Gift" }, { text: "88", style: "Figure 92", name: "Figure" }, { text: "days free", style: "Days 28", name: "Days" }],
+      label: { text: "For a fresh start", style: "Label 17" }
+    });
+    clouds(k, sheet, s, 3, 6);
+    hangings(k, sheet, s);
+    const top = k.stack(sheet, { gap: 18, name: "Top" });
+    k.text(top, "{{brand.name}} \xB7 Lunar New Year", { style: "Eyebrow 26", color: "onPaper", name: "Eyebrow" });
+    k.text(top, "{{brand.headline}}", { style: "Display 104", color: "text", name: "Headline" });
+    const foot = k.stack(sheet, { gap: 26, align: "CENTER", name: "Foot" });
+    k.text(foot, swaps[0].words[0], { style: "Caption 40", color: "cream", name: "Caption" });
+    k.instance(foot, "Button", { Label: "Open yours: 88 days free" }, { name: "Call" });
+    k.text(foot, "Code FRESH88 \xB7 {{brand.site}}", { style: "Site 26", color: "cream", name: "Site" });
+    const stand = (kit, id, footY, scale = 1) => {
+      for (const e of kit.named(id, "Envelope")) {
+        const n = kit.node(e);
+        kit.patch(e, { x: Math.round(540 - n.width / 2), y: Math.round(footY - n.height / 2 - n.height * scale / 2), ...scale !== 1 ? { scaleX: scale, scaleY: scale } : {} });
+      }
+    };
+    stand(k, sheet, 1160);
+    if (swapTimes(swaps[0]).at(-1).gone > DURATION) throw new Error("lunar new year reel: the captions run past the music");
+    k.named(sheet, "Firework").forEach((f, i) => burst(k, f, BURSTS[i].map(beat)));
+    for (const e of k.named(sheet, "Envelope")) slideVoucher(k, e, ENVELOPE, beat(4));
+    for (const m of k.named(sheet, "Moon")) k.animate(m, "translateY", [{ t: 0, v: 120 }, { t: DURATION, v: 0 }]);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    k.variants(sheet, feedVariants({ post: 56, portrait: 72 }, {
+      post: (kit, id) => {
+        for (const n of kit.named(id, "Foot")) kit.patch(n, { itemSpacing: 14 });
+        for (const n of kit.named(id, "Caption")) kit.restyle(n, "Caption 32");
+        for (const n of kit.named(id, "Headline")) kit.restyle(n, "Display 84");
+        fitScene(kit, id, night(1080, 740, 520, { lanterns: FEED_LANTERNS(520), moon: { x: 540, y: 490, size: 380 } }));
+        stand(kit, id, 800, 0.74);
+      },
+      portrait: (kit, id) => {
+        fitScene(kit, id, night(1350, 930, 660, { lanterns: FEED_LANTERNS(660), moon: { x: 540, y: 630, size: 480 } }));
+        stand(kit, id, 1e3);
+      }
+    }));
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  lunar_new_year_envelope_reel_default
+};

package/dist/chunks/chunk-N43G5CHB.js

@@ -0,0 +1,209 @@
+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,
+  SHIP,
+  SQUID,
+  STAR,
+  UFO,
+  arcadeBrand,
+  backdrop,
+  bitmapPaths,
+  hardShadow,
+  march,
+  overlay,
+  refit,
+  segBar,
+  sprite,
+  spriteInks
+} from "./chunk-SHBMEL5W.js";
+import {
+  MONO
+} from "./chunk-X23ZWFW2.js";
+import {
+  blink,
+  cutOff,
+  cutOn
+} from "./chunk-PMVMC75G.js";
+import {
+  bloom
+} from "./chunk-HVK5T4I5.js";
+import {
+  postVariants
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit,
+  preset
+} from "./chunk-T3SGRYUX.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/social/arcade-level-up.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var POWER_UPS = [["Usage alerts before the invoice lands", "+600 XP"], ["Proration down to the second", "+500 XP"], ["Stripe and Paddle sync, both ways", "+500 XP"], ["Sales tax handled in 41 countries", "+400 XP"]];
+var PLUS = ["..#..", "..#..", "#####", "..#..", "..#.."];
+var COLS = 7;
+var counts = [
+  { layer: "XP figure", at: 1200, duration: 1e3, counter: { from: 0, to: 2e3, separator: ",", suffix: " / 2,000 XP" }, tick: 100 }
+];
+var cues = [
+  // The title types on, its pixel shadow with it.
+  { layer: "Title", preset: "typewriter", at: 300, params: { duration: 450 } },
+  cutOn("Star", 800, 150),
+  cutOn("XP", 1100),
+  { layer: "XP fill", preset: "wipe-in", at: 1200, params: { duration: 1e3, ease: { kind: "linear" } } },
+  cutOn("Power title", 2400),
+  cutOn("Power-up", 2600, 250),
+  cutOn("Url", 3800),
+  blink("Level bar", 4200, 800),
+  cutOff(["Title", "Star", "XP", "Power title", "Power-up", "Url"], 6300, 40)
+];
+var FIELDS = {
+  post: { top: 136, bottom: 178, side: 80, ufo: -200, swarm: 52, rows: 1, bunkers: null, cannon: 936 },
+  portrait: { top: 356, bottom: 300, side: 80, ufo: 36, swarm: 116, rows: 3, bunkers: 1082, cannon: 1166 },
+  story: { top: 450, bottom: 490, side: 110, ufo: 96, swarm: 176, rows: 3, bunkers: 1490, cannon: 1620 }
+};
+function placeField(k, sheet, f) {
+  k.patch(sheet, { padding: { top: f.top, right: f.side, bottom: f.bottom, left: f.side } });
+  const y = (name, at) => {
+    for (const id of k.named(sheet, name)) k.patch(id, at === null ? { visible: false } : { visible: true, y: at });
+  };
+  y("UFO", f.ufo);
+  y("Swarm", f.swarm);
+  for (const [i, id] of k.named(sheet, "Swarm row").entries()) k.patch(id, { visible: i < f.rows });
+  y("Bunkers", f.bunkers);
+  y("Cannon", f.cannon);
+  y("Ground", f.cannon + 64);
+  y("Lives", f.cannon + 92);
+  y("Coins", f.cannon + 88);
+}
+var arcade_level_up_default = defineTemplate({
+  id: "motion-arcade-level-up",
+  meta: {
+    name: "Arcade level-up post (animated)",
+    description: "A release announced as a level-up screen: on a pixel-shadowed window over a starfield and a marching swarm, the version cuts on, the XP bar fills block by block as its figure ticks, and the changelog lands as a list of power-ups with the XP each was worth. Seven seconds, looping, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "arcade", "8-bit", "pixel art", "retro", "changelog", "release", "level up", "saas", "build in public", "post"],
+    platforms: ["x", "linkedin", "instagram", "threads"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["changelog", "launch", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, loop: true },
+  build() {
+    const k = new Kit("Arcade level-up post (animated)", preset("ig-post"));
+    k.quantizeGeometry = true;
+    arcadeBrand(k, { release: "Coinop 2.0", url: "coinop.example/changelog" });
+    k.textStyle("Bar 30", { size: 30, fontWeight: 800, letterSpacing: 2, lineHeight: 38, ...MONO });
+    k.textStyle("Title 120", { size: 120, fontWeight: 800, letterSpacing: -5, lineHeight: 124, ...MONO });
+    k.textStyle("Label 24", { size: 24, fontWeight: 700, letterSpacing: 3, lineHeight: 32, textCase: "UPPER", ...MONO });
+    k.textStyle("Power 32", { size: 32, fontWeight: 700, letterSpacing: -0.3, lineHeight: 42 });
+    k.textStyle("Bonus 24", { size: 24, fontWeight: 800, lineHeight: 42, ...MONO });
+    k.textStyle("Url 28", { size: 28, fontWeight: 600, lineHeight: 36, ...MONO });
+    k.textStyle("Bar 34", { size: 34, fontWeight: 800, letterSpacing: 2, lineHeight: 42, ...MONO });
+    k.textStyle("Title 136", { size: 136, fontWeight: 800, letterSpacing: -5.5, lineHeight: 140, ...MONO });
+    k.textStyle("Label 28", { size: 28, fontWeight: 700, letterSpacing: 3, lineHeight: 36, textCase: "UPPER", ...MONO });
+    k.textStyle("Power 36", { size: 36, fontWeight: 700, letterSpacing: -0.3, lineHeight: 46 });
+    k.textStyle("Bonus 28", { size: 28, fontWeight: 800, lineHeight: 46, ...MONO });
+    k.textStyle("Url 32", { size: 32, fontWeight: 600, lineHeight: 40, ...MONO });
+    k.variantSet("Power-up", "Size", ["Regular", "Large"], {
+      direction: "HORIZONTAL",
+      width: 800,
+      gap: 18,
+      props: { Label: POWER_UPS[0][0], Bonus: POWER_UPS[0][1] },
+      description: "One line of a changelog as a power-up: what you gained and the XP it was worth. Large is for the 9:16 cut."
+    }, (size, id) => {
+      const big = size === "Large";
+      const mark = k.stack(id, { width: "HUG", padding: { top: big ? 9 : 8, right: 0, bottom: 0, left: 0 }, name: "Mark" });
+      k.vector(mark, big ? 30 : 25, big ? 30 : 25, bitmapPaths(PLUS, big ? 6 : 5), "accent", { name: "Plus" });
+      k.propText(id, "Label", { style: big ? "Power 36" : "Power 32", color: "onCard", width: "FILL" });
+      k.propText(id, "Bonus", { style: big ? "Bonus 28" : "Bonus 24", color: "onCard", autoWidth: true });
+    });
+    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: 7e3, fps: 30 });
+    backdrop(k, sheet, { top: "secondary", bottom: "accent" });
+    const ufo = sprite(k, sheet, UFO, 7, "accent", { name: "UFO", absolute: { x: 150, y: 0 } });
+    k.patch(ufo, { effects: [bloom(k, "accent", 26)] });
+    const pitch = 124;
+    const swarmW = (COLS - 1) * pitch + 66;
+    const swarm = k.frame(sheet, { x: (W - swarmW) / 2, y: 0, width: swarmW, height: 3 * 72 }, { name: "Swarm" });
+    for (const [r, kind] of [{ rows: INVADER, color: "accent" }, { rows: SQUID, color: "text" }, { rows: INVADER, color: "lit" }].entries()) {
+      const row = k.frame(swarm, { x: 0, y: r * 72, width: swarmW, height: 48 }, { name: "Swarm row" });
+      for (let c = 0; c < COLS; c++) sprite(k, row, kind.rows, 6, kind.color, { name: "Invader", absolute: { x: c * pitch + (66 - kind.rows[0].length * 6) / 2, y: 0 } });
+    }
+    const bunkers = k.frame(sheet, { x: 0, y: 0, width: W, height: 54 }, { name: "Bunkers" });
+    for (let i = 0; i < 4; i++) sprite(k, bunkers, BUNKER, 6, "lit", { name: "Bunker", absolute: { x: 132 + i * 240, y: 0 } });
+    const cannon = k.frame(sheet, { x: (W - 88) / 2, y: 0, width: 88, height: 48 }, { name: "Cannon" });
+    k.rect(cannon, 8, 30, "accent", { name: "Bolt", absolute: { x: 40, y: -40 }, effects: [bloom(k, "accent", 16, 0.9)] });
+    sprite(k, cannon, SHIP, 8, "text", { name: "Ship", absolute: { x: 0, y: 0 } });
+    k.rect(sheet, W, 8, "lit", { name: "Ground", absolute: { x: 0, y: 0 } });
+    const lives = k.stack(sheet, { direction: "HORIZONTAL", width: "HUG", gap: 14, name: "Lives", absolute: { x: 64, y: 0 } });
+    for (let i = 0; i < 3; i++) sprite(k, lives, SHIP, 5, "text", { name: "Life" });
+    const coins = k.stack(sheet, { direction: "HORIZONTAL", width: "HUG", gap: 10, name: "Coins", absolute: { x: W - 64 - 3 * 40 - 20, y: 0 } });
+    for (let i = 0; i < 3; i++) spriteInks(k, coins, COIN_FACE, 5, { "#": "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", 16)], name: "Window" });
+    const bar = k.stack(win, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", fill: "primary", padding: { top: 14, right: 28, bottom: 14, left: 28 }, name: "Level bar" });
+    k.text(bar, "LEVEL 2 UNLOCKED", { style: "Bar 30", color: "onPrimary", autoWidth: true, name: "Level" });
+    const stars = k.stack(bar, { direction: "HORIZONTAL", width: "HUG", gap: 10, name: "Stars" });
+    for (let i = 0; i < 3; i++) sprite(k, stars, STAR, 5, "onPrimary", { name: "Star" });
+    const body = k.stack(win, { gap: 20, padding: { top: 22, right: 30, bottom: 30, left: 30 }, name: "Level body" });
+    k.text(body, "{{brand.release}}", { style: "Title 120", color: "onCard", name: "Title", effects: [hardShadow(k, "accent", 6)] });
+    const xp = k.stack(body, { gap: 10, name: "XP" });
+    k.text(xp, "2,000 / 2,000 XP", { style: "Label 24", color: "onCard", name: "XP figure" });
+    const track = k.stack(xp, { direction: "HORIZONTAL", width: "HUG", fill: "scan", padding: 8, name: "XP track" });
+    const fill = k.stack(track, { direction: "HORIZONTAL", width: "HUG", clip: true, name: "XP fill" });
+    segBar(k, fill, { total: 20, lit: 20, on: "lit", w: 28, h: 30, gap: 6, name: "XP blocks" });
+    k.text(body, "Power-ups in this release", { style: "Label 24", color: "onCard", name: "Power title" });
+    const list = k.stack(body, { gap: 12, name: "Power-ups" });
+    for (const [label, bonus] of POWER_UPS) k.instance(list, "Power-up/Regular", { Label: label, Bonus: bonus }, { width: "FILL", name: "Power-up" });
+    k.text(body, "{{brand.url}}", { style: "Url 28", color: "onCard", name: "Url" });
+    overlay(k, sheet);
+    placeField(k, sheet, FIELDS.post);
+    march(k, swarm, { from: 0, until: 6800, step: 400, dx: 20 });
+    march(k, cannon, { from: 200, until: 6600, step: 400, dx: 96 });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    k.variants(sheet, postVariants({ portrait: 0, vertical: 0 }, {
+      portrait: (kit, id) => {
+        placeField(kit, id, FIELDS.portrait);
+        refit(kit, id);
+      },
+      vertical: (kit, id) => {
+        placeField(kit, id, FIELDS.story);
+        refit(kit, id);
+        const restyle = (name, style) => {
+          for (const n of kit.named(id, name)) kit.restyle(n, style);
+        };
+        restyle("Level", "Bar 34");
+        restyle("Title", "Title 136");
+        restyle("XP figure", "Label 28");
+        restyle("Power title", "Label 28");
+        restyle("Url", "Url 32");
+        for (const n of kit.named(id, "Power-up")) kit.patch(n, { mainComponentId: kit.componentIdOf("Power-up/Large") });
+        for (const n of [...kit.named(id, "Block lit"), ...kit.named(id, "Block")]) kit.patch(n, { width: 32, height: 36 });
+        for (const n of kit.named(id, "Level body")) kit.patch(n, { itemSpacing: 24, padding: { top: 26, right: 30, bottom: 34, left: 30 } });
+        for (const n of kit.named(id, "Power-ups")) kit.patch(n, { itemSpacing: 16 });
+      }
+    }));
+    return k.finish();
+  }
+});
+
+export {
+  arcade_level_up_default
+};