@popcraft/kit 0.25.0 → 0.26.1

package/dist/chunks/chunk-IUTMCJ74.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-O2QGI6UR.js";
+import {
+  pruneStyles
+} from "./chunk-HIGI3DBQ.js";
+import {
+  blink
+} from "./chunk-Z2UPJTSZ.js";
+import {
+  defineTemplate
+} from "./chunk-QBBW3JXO.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SOHOKD4X.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.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-IVRVMBJP.js

@@ -0,0 +1,234 @@
+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 {
+  KITTY,
+  billCard,
+  blink,
+  chip,
+  coin,
+  confetti,
+  couple,
+  evenBadge,
+  fillJar,
+  fitSoftGround,
+  hop,
+  jarCard,
+  lockup,
+  mochi,
+  pastelBrand,
+  pastelButton,
+  pillowCard,
+  popUp,
+  softGround,
+  springIn,
+  ts,
+  wave
+} from "./chunk-G3VSYXON.js";
+import {
+  float,
+  reelCuts,
+  reelSheet,
+  wideCut
+} from "./chunk-D7LV62QH.js";
+import {
+  clicks,
+  glide,
+  touch
+} from "./chunk-L23WDECU.js";
+import {
+  captionStrip,
+  captionSwap
+} from "./chunk-C7BYFVZT.js";
+import {
+  bed
+} from "./chunk-52GCV7N5.js";
+import {
+  hide,
+  put,
+  restyle
+} from "./chunk-QLV6445V.js";
+import {
+  defineTemplate
+} from "./chunk-QBBW3JXO.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SOHOKD4X.js";
+import {
+  ease
+} from "./chunk-NKAPBBXH.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/motion/style-pastel-launch-reel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Pastel SaaS launch reel";
+var BEATS = 28;
+var B = bed("indie", BEATS);
+var beat = B.beat;
+var S = { ...B, beats: BEATS };
+var STAGE = { w: 800, h: 580 };
+var U = 1.75;
+var BEFORE = 0.42;
+var TAP = beat(17);
+var HOOKS = ["Who paid for dinner?", "Saving up for Lisbon?", "Square up in seconds.", "Money, but for two."];
+var swaps = [
+  { layer: "Hook", words: HOOKS, at: 0, hold: beat(7) - 360 - 300 - 6 * 70, stagger: 70, in: 360, out: 300, unit: "word", rise: 40 },
+  captionSwap(["Every bill, split without arguing.", "Round-ups fill your trip jar.", "Settle up with one tap.", "Free to start. Plus $6/month."], 0, B.duration - 30, { stagger: 60, in: 280, out: 200, rise: 22 })
+];
+var cues = [
+  { layer: "Brand row", preset: "fade-in", at: 0, params: { duration: 300 } },
+  springIn("Call row", beat(1)),
+  // The bill.
+  springIn("Bill card", beat(0.5), { from: 0.5 }),
+  springIn("Share", beat(3), { stagger: beat(0.5) }),
+  springIn("Owes", beat(4)),
+  { layer: "Bill card", preset: "pop-out", at: beat(6.4), params: { duration: 340 } },
+  // The jar.
+  { layer: "Jar card", preset: "slide-in", at: beat(7), params: { duration: 700, direction: "right", distance: 900, ease: ease.back(1.4) } },
+  springIn("Round-up", beat(11)),
+  { layer: "Jar card", preset: "pop-out", at: beat(13.4), params: { duration: 340 } },
+  // Settling up.
+  springIn("Big couple", beat(14), { from: 0.3 }),
+  springIn("Settle button", beat(14.5)),
+  { layer: "Settle button", preset: "pop-out", at: TAP + 260, params: { duration: 240 } },
+  springIn("Even badge", TAP + 380, { from: 0.2, duration: 700 }),
+  { layer: ["Big couple", "Even badge"], preset: "pop-out", at: beat(20.4), params: { duration: 340 }, stagger: { delay: 60 } },
+  // The close: the couple's kitty.
+  springIn("Kitty card", beat(21), { from: 0.5 }),
+  springIn("Kitty row", beat(22), { stagger: beat(0.5) }),
+  { layer: "Button", preset: "pulse", at: beat(24), params: { duration: beat(2), amount: 0.07 } },
+  { layer: "Button", preset: "pulse", at: beat(26), params: { duration: beat(1.5), amount: 0.05 } }
+];
+var counts = [
+  { layer: "Owes figure", at: beat(4), duration: 1e3, ease: ease.out("cubic"), counter: { from: 0, to: KITTY.bill.half, decimals: 2, prefix: "$" } },
+  { layer: "Jar figure", at: beat(8.5), duration: 1800, ease: ease.out("cubic"), counter: { from: KITTY.jar.before, to: KITTY.jar.saved, prefix: "$" } },
+  { layer: "Jar percent", at: beat(8.5), duration: 1800, ease: ease.out("cubic"), counter: { from: 42, to: KITTY.jar.percent, suffix: "%" } },
+  { layer: "Kitty balance", at: beat(21.5), duration: 1400, ease: ease.out("cubic"), counter: { from: 2800, to: 3214.5, decimals: 2, prefix: "$" } }
+];
+var style_pastel_launch_reel_default = defineTemplate({
+  id: "motion-saas-style-pastel-launch-reel",
+  meta: {
+    name: NAME,
+    description: "A 15-second launch video in the pastel soft UI look for a couples\u2019 money app: four questions on the beat, each answered by a pillowy product card that moves (a bill that splits itself, a trip jar that fills on a spring as coins tumble in, a tap that bursts into confetti), with a round apricot cat mascot who pops up, waves, blinks and hops. Music, burned-in captions, 9:16 with square, 4:5 and 16:9 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "pastel", "soft ui", "playful", "mascot", "launch", "reel", "fintech", "consumer app", "couples", "counter", "confetti", "captions", "music", "audio", "tiktok", "shorts"],
+    platforms: ["tiktok", "instagram", "youtube", "x", "linkedin"],
+    formats: ["reel", "short", "story", "post", "portrait-post", "video"],
+    useCases: ["launch", "announcement"],
+    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;
+    pastelBrand(k);
+    const hookStyle = ts(k, "display", 112);
+    pastelButton(k, "Call", { style: ts(k, "title", 34), label: "Try {{brand.name}} free", pad: [24, 40], d: 1.4 });
+    pastelButton(k, "Settle", { style: ts(k, "title", 40), label: `Settle up \xB7 $${KITTY.bill.half.toFixed(2)}`, pad: [30, 48], d: 1.6 });
+    const sheet = reelSheet(k, S, { name: "Launch reel", gap: 28 });
+    softGround(k, sheet, 1080, 1920, { loop: B.duration, seed: 4 });
+    const pile = k.frame(sheet, { x: 120, y: 1640, width: 300, height: 200 }, { name: "Coin pile" });
+    [[0, 90], [70, 110], [140, 96], [40, 30], [110, 40], [76, -26]].forEach(([x, y], i) => coin(k, pile, 92, { name: "Pile coin", absolute: { x, y: y + (i > 2 ? 10 : 0) } }));
+    const cushion = k.ellipse(sheet, 520, "peach", { name: "Cushion", absolute: { x: 500, y: 1790 } });
+    k.patch(cushion, { height: 150 });
+    const m = mochi(k, sheet, 340, { absolute: { x: 590, y: 1490 } });
+    lockup(k, sheet, { size: 40, style: ts(k, "title", 40) });
+    const hook = k.text(sheet, HOOKS[0], { style: hookStyle, color: "text", name: "Hook" });
+    void hook;
+    const stage = k.stack(sheet, { width: STAGE.w, height: STAGE.h, name: "Stage" });
+    const bill = billCard(k, stage, U, { width: 800, absolute: { x: 0, y: 40 } });
+    k.patch(bill.samFill, { scaleX: 0.5 });
+    const jc = jarCard(k, stage, 2.05, { width: 800, absolute: { x: 0, y: 70 }, level: KITTY.jar.percent / 100, loop: B.duration });
+    const jarX = 57, jarTop = 127;
+    const drops = [0, 1, 2].map((i) => coin(k, stage, 64, { name: "Drop coin", absolute: { x: jarX + 30 + i * 20, y: jarTop + 120 } }));
+    couple(k, stage, 190, { name: "Big couple" });
+    put(k, stage, "Big couple", 400 - 162, 40, { layoutPositioning: "ABSOLUTE" });
+    const settle = k.instance(stage, "Settle", { Label: `Settle up \xB7 $${KITTY.bill.half.toFixed(2)}` }, { name: "Settle button", absolute: { x: 110, y: 330 } });
+    void settle;
+    evenBadge(k, stage, 1.9, { absolute: { x: 40, y: 300 } });
+    const tp = touch(k, stage, { x: 560, y: 390, size: 96, fill: "ink", ring: "ink" });
+    const burst = confetti(k, stage, { cx: 400, cy: 360, at: TAP + 380, n: 22, spread: 380, size: 26, seed: 5 });
+    void burst;
+    const kc = pillowCard(k, stage, { width: 800, height: 550, justify: "CENTER", padding: 48, gap: 30, radius: 56, depth: 1.6, name: "Kitty card", absolute: { x: 0, y: 25 } });
+    const top = k.stack(kc, { direction: "HORIZONTAL", gap: 22, align: "CENTER", name: "Kitty head" });
+    couple(k, top, 84, { name: "Kitty couple" });
+    const who = k.stack(top, { gap: 2, name: "Kitty who" });
+    k.text(who, `${KITTY.a} & ${KITTY.b}\u2019s kitty`, { style: ts(k, "title", 36), color: "onCard", name: "Kitty title" });
+    k.text(who, "Rent, groceries, Lisbon", { style: ts(k, "body", 24), color: "cardMuted", name: "Kitty sub" });
+    k.text(kc, "$3,214.50", { style: ts(k, "figure", 104), color: "onCard", width: 600, name: "Kitty balance" });
+    const rows = k.stack(kc, { direction: "HORIZONTAL", gap: 14, wrap: true, name: "Kitty rows" });
+    chip(k, rows, `Lisbon ${KITTY.jar.percent}%`, { style: ts(k, "soft", 26), fill: "mint", name: "Kitty row", pad: [12, 24] });
+    chip(k, rows, "Rent split 55/45", { style: ts(k, "soft", 26), fill: "sky", name: "Kitty row", pad: [12, 24] });
+    chip(k, rows, "You\u2019re even", { style: ts(k, "soft", 26), fill: "butter", name: "Kitty row", pad: [12, 24] });
+    captionStrip(k, sheet, swaps[1].words[0], { style: ts(k, "title", 40), fill: "card", ink: "onCard", radius: 32, pad: [22, 32], effects: [{ type: "DROP_SHADOW", color: { r: 0.12, g: 0.165, b: 0.235, a: 0.08 }, offset: { x: 0, y: 12 }, blur: 30, spread: 0, visible: true }] });
+    const row = k.stack(sheet, { direction: "HORIZONTAL", gap: 20, align: "CENTER", name: "Call row" });
+    k.instance(row, "Call", { Label: "Try {{brand.name}} free" }, { name: "Button" });
+    const site = k.stack(row, { direction: "HORIZONTAL", width: "HUG", fill: "card", radius: 999, padding: { top: 16, right: 26, bottom: 16, left: 26 }, name: "Site pill" });
+    k.text(site, "{{brand.site}}", { style: ts(k, "soft", 30), color: "onCard", autoWidth: true, name: "Site" });
+    k.counts(sheet, counts);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    k.animate(bill.samFill, "scaleX", [{ t: beat(2), v: 0, ease: ease.spring(160, 13) }, { t: beat(3.4), v: 0.5 }]);
+    drops.forEach((id, i) => {
+      const t = beat(8 + i * 0.5);
+      k.animate(id, "translateY", [{ t: 0, v: -520, ease: ease.hold }, { t, v: -520, ease: ease.out("bounce") }, { t: t + 520, v: 0 }]);
+      k.animate(id, "opacity", [{ t: t - 1, v: 0, ease: ease.hold }, { t, v: 1, ease: ease.hold }, { t: t + 560, v: 1, ease: ease.linear }, { t: t + 700, v: 0 }]);
+      k.animate(id, "rotation", [{ t, v: -40 + i * 30, ease: ease.out("cubic") }, { t: t + 520, v: 0 }]);
+    });
+    fillJar(k, jc.jar, beat(8.5), 1800, BEFORE, KITTY.jar.percent / 100);
+    k.animate(k.named(jc.card, "Jar progress")[0], "scaleX", [{ t: beat(8.5), v: BEFORE, ease: ease.out("cubic") }, { t: beat(8.5) + 1800, v: KITTY.jar.percent / 100 }]);
+    glide(k, tp, [{ t: beat(15.5), dx: 260, dy: 360 }, { t: TAP - 60, dx: 0, dy: 0 }, { t: TAP + 700, dx: 0, dy: 0 }, { t: TAP + 1100, dx: 300, dy: 420 }]);
+    clicks(k, tp, [TAP]);
+    k.animate(tp.arrow, "opacity", [{ t: 0, v: 0, ease: ease.hold }, { t: beat(15.5), v: 0, ease: ease.linear }, { t: beat(15.5) + 200, v: 1, ease: ease.hold }, { t: TAP + 800, v: 1, ease: ease.linear }, { t: TAP + 1100, v: 0 }]);
+    popUp(k, m, beat(1));
+    wave(k, m, beat(2.5), 3);
+    blink(k, m, [beat(6), beat(10.5), beat(13), beat(20), beat(24.5)]);
+    hop(k, m, [TAP + 380, TAP + 1100], 90);
+    wave(k, m, beat(23), 4);
+    const copies = k.variants(sheet, [...reelCuts({ post: 56, portrait: 70 }, {
+      post: (kit, id) => {
+        kit.patch(id, { itemSpacing: 18, counterAxisSpacing: 18, padding: { top: 56, right: 140, bottom: 56, left: 140 } });
+        fitSoftGround(kit, id, { loop: B.duration, seed: 4 });
+        hide(kit, id, ["Brand row", "Call row", "Coin pile", "Cushion"]);
+        restyle(kit, id, "Hook", ts(kit, "display", 88));
+        for (const n of kit.named(id, "Stage")) kit.patch(n, { scaleX: 0.86, scaleY: 0.86, anchorX: 0.5, anchorY: 0, height: 520 });
+        put(kit, id, "Mochi", 840, 760);
+        for (const n of kit.named(id, "Mochi")) kit.patch(n, { scaleX: 0.6, scaleY: 0.6 });
+      },
+      portrait: (kit, id) => {
+        kit.patch(id, { itemSpacing: 22, counterAxisSpacing: 22, padding: { top: 64, right: 140, bottom: 64, left: 140 } });
+        fitSoftGround(kit, id, { loop: B.duration, seed: 4 });
+        hide(kit, id, ["Coin pile", "Cushion"]);
+        restyle(kit, id, "Hook", ts(kit, "display", 96));
+        for (const n of kit.named(id, "Stage")) kit.patch(n, { scaleX: 0.9, scaleY: 0.9, anchorX: 0.5, anchorY: 0, height: 540 });
+        put(kit, id, "Mochi", 850, 1010);
+        for (const n of kit.named(id, "Mochi")) kit.patch(n, { scaleX: 0.6, scaleY: 0.6 });
+      }
+    }), wideCut(640, (kit, id, right) => {
+      const scale = Math.min(right.width / STAGE.w, right.height / STAGE.h) * 0.96;
+      fitSoftGround(kit, id, { loop: B.duration, seed: 4 });
+      restyle(kit, id, "Hook", ts(kit, "display", 96));
+      float(kit, id, "Stage", right.x + (right.width - STAGE.w * scale) / 2, right.y + (right.height - STAGE.h * scale) / 2, { scale });
+      hide(kit, id, ["Coin pile", "Cushion"]);
+      kit.patch(id, { primaryAxisAlignItems: "MIN" });
+      hide(kit, id, ["Cushion"]);
+      put(kit, id, "Mochi", 150, 690);
+      for (const n of kit.named(id, "Mochi")) kit.patch(n, { scaleX: 0.8, scaleY: 0.8 });
+    })]);
+    void copies;
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  style_pastel_launch_reel_default
+};

package/dist/chunks/chunk-IVWPP4GG.js

@@ -0,0 +1,99 @@
+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 {
+  onColor,
+  scrim,
+  withSong
+} from "./chunk-IQ74NY5P.js";
+import {
+  bassKick,
+  visualizer,
+  waveform
+} from "./chunk-PTXYK6OH.js";
+import {
+  pill
+} from "./chunk-EK5CFFJO.js";
+import {
+  defineTemplate
+} from "./chunk-QBBW3JXO.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SOHOKD4X.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/music/lofi-loop.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NIGHT = "#1B1426";
+var PLUM = "#4A2B57";
+var AMBER = "#F2A65A";
+var CREAM = "#F6E7D2";
+var VINYL = "#120E18";
+var CUES = [
+  { layer: "Now playing", preset: "fade-in", at: 200, params: { duration: 500 } },
+  { layer: "Song", preset: "rise-in", at: 400, params: { duration: 700, distance: 40 } },
+  { layer: "Artist", preset: "rise-in", at: 650, params: { duration: 700, distance: 30 } },
+  { layer: "Details", preset: "fade-in", at: 1100, params: { duration: 600 } }
+];
+var lofi_loop_default = defineTemplate({
+  id: "motion-music-lofi-loop",
+  meta: {
+    name: "Lo-fi loop visualizer",
+    description: "A 16:9 now-playing loop for a lo-fi track: a spinning record with your cover art that thumps with the kick, the song and artist, a line of dots riding the loudness, over liquid ink stirred by the bass \u2014 every part follows the audio you drop in",
+    category: "animation",
+    tags: ["animation", "music", "music video", "lo-fi", "visualizer", "audio reactive", "waveform", "record", "youtube", "loop"],
+    platforms: ["youtube"],
+    formats: ["video"],
+    useCases: ["launch", "livestream"],
+    created: "2026-09-30",
+    updated: "2026-09-30"
+  },
+  motion: { cues: CUES },
+  build() {
+    const k = new Kit("Lo-fi loop visualizer", preset("video-1080p"));
+    k.brand(
+      { night: NIGHT, plum: PLUM, accent: AMBER, text: CREAM, vinyl: VINYL, onNight: onColor(NIGHT, [CREAM, "#FFFFFF"]), onAccent: onColor(AMBER, [NIGHT, VINYL]), muted: onColor(NIGHT, ["#BFA8C9", CREAM]) },
+      { song: "Paper Lanterns", artist: "Mira Vale", details: "Side A \xB7 80 BPM \xB7 lo-fi beats" }
+    );
+    k.textStyle("Tag 26", { size: 26, fontWeight: 700, lineHeight: 32, letterSpacing: 6, textCase: "UPPER" });
+    k.textStyle("Song 132", { size: 132, fontFamily: "Source Serif 4", fontWeight: 700, lineHeight: 140, letterSpacing: -3 });
+    k.textStyle("Artist 56", { size: 56, fontWeight: 500, lineHeight: 64 });
+    k.textStyle("Details 28", { size: 28, fontWeight: 500, lineHeight: 36, letterSpacing: 1 });
+    pill(k, "Tag", { fill: "accent", ink: "onAccent", style: "Tag 26", label: "Now playing", pad: [10, 24] });
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Lo-fi loop");
+    k.flowSheet(sheet, 0, { top: 0, right: 0, bottom: 0, left: 0 }, "night");
+    k.patch(sheet, { clipsContent: true });
+    withSong(k, sheet, "lofi", 1, 0);
+    visualizer(k, sheet, "liquid-ink", { a: "night", b: "plum", c: "accent" }, { name: "Liquid ink", knobs: { nz_scale: 1.6, fb_decay: 0.45, gain_b: 0.7 } });
+    const R = 300;
+    const record = k.stack(sheet, { width: 2 * R, height: 2 * R, name: "Record", absolute: { x: 190, y: 240 } });
+    k.ellipse(record, 2 * R, "vinyl", { name: "Vinyl", absolute: { x: 0, y: 0 } });
+    for (const [i, r] of [R - 30, R - 70, R - 110].entries()) k.ellipse(record, 2 * r, [], { stroke: { color: "plum", width: 3 - i * 0.5, align: "CENTER" }, name: "Groove", absolute: { x: R - r, y: R - r } });
+    k.photo(record, 250, 250, { radius: 125, ground: "accent", name: "Cover art", absolute: { x: R - 125, y: R - 125 } });
+    k.ellipse(record, 18, "night", { name: "Spindle", absolute: { x: R - 9, y: R - 9 } });
+    k.behave(record, "rotation", [{ kind: "spin", rate: 36 }]);
+    bassKick(k, record, 0.035, 160);
+    const col = scrim(k, sheet, "night", { width: 860, gap: 18, align: "MIN", padding: { top: 40, right: 40, bottom: 40, left: 40 }, name: "Now playing column", absolute: { x: 920, y: 200 } });
+    k.instance(col, "Tag", { Label: "Now playing" }, { name: "Now playing" });
+    k.text(col, "{{brand.song}}", { style: "Song 132", color: "onNight", width: 780, name: "Song" });
+    k.text(col, "{{brand.artist}}", { style: "Artist 56", color: "onNight", width: 780, name: "Artist" });
+    const wave = k.stack(col, { width: 780, height: 170, name: "Waveform row" });
+    waveform(k, wave, { style: "line", width: 780, height: 150, color: "accent", count: 64, history: 2600, at: { x: 0, y: 10 } });
+    k.text(col, "{{brand.details}}", { style: "Details 28", color: "muted", width: 780, name: "Details" });
+    k.cues(sheet, CUES);
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  CUES,
+  lofi_loop_default
+};

package/dist/chunks/chunk-IWCXBV7F.js

@@ -0,0 +1,215 @@
+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 {
+  ballPasses,
+  ballTravel,
+  burst,
+  clearConfetti,
+  confetti,
+  newYearBrand,
+  nightCity,
+  tickBox,
+  tower,
+  towerHeight
+} from "./chunk-U5AS76YA.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-X23ZWFW2.js";
+import {
+  buttons,
+  nav,
+  page,
+  webResponsive
+} from "./chunk-YKXCPYWJ.js";
+import {
+  defineTemplate
+} from "./chunk-QBBW3JXO.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SOHOKD4X.js";
+import {
+  ease
+} from "./chunk-NKAPBBXH.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/web/new-year-landing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var LOOP = 8e3;
+var DROP = 1200;
+var MIDNIGHT = 4600;
+var BOARDS = [
+  { name: "Shipped", figure: "214", label: "features shipped", counter: { from: 0, to: 214 } },
+  { name: "Uptime", figure: "99.98%", label: "uptime, all year", counter: { from: 90, to: 99.98, decimals: 2, suffix: "%" } },
+  { name: "Hours", figure: "1,260,000", label: "hours handed back", counter: { from: 1e6, to: 126e4, separator: "," } }
+];
+var BOX = { w: 560, h: 620 };
+var TOWER = {
+  w: 500,
+  u: 0.64,
+  boards: BOARDS,
+  boardH: 78,
+  gap: 8,
+  signH: 112,
+  ball: 104,
+  figW: 198,
+  loopMs: LOOP,
+  mastRise: 60,
+  styles: { figure: "Figure 38", label: "Label 15", year: "Year 76", lastYear: "Last year 30", signLabel: "Sign label 13" }
+};
+var passes = BOARDS.map((_, i) => Math.round(DROP + (MIDNIGHT - 700 - DROP) * ballPasses(TOWER, i) / ballPasses(TOWER, BOARDS.length - 1)));
+var RESOLUTIONS = [
+  ["Stop chasing invoices by hand.", "Mainspring sends the reminder on day 1, 7 and 14, and stops the moment the payment lands.", "412,000 reminders sent"],
+  ["Send the Monday report on Monday.", "It pulls the numbers from your billing and CRM at 07:00 and posts the summary where your team already reads.", "96,300 reports, none late"],
+  ["Onboard every new account the same day.", "Signed contract in, workspace, seats and welcome call out. Nobody copies a name between tabs.", "median 4 min 12 s"],
+  ["Close the month without the spreadsheet.", "Every run is logged with who, what and when, so month-end is an export, not an archaeology dig.", "0 formulas to maintain"]
+];
+var counts = BOARDS.map((b, i) => ({ layer: `${b.name} figure`, at: passes[i], duration: 1200, counter: b.counter }));
+var cues = [
+  { layer: "Offer bar", preset: "drop-in", at: 0, params: { duration: 600 } },
+  { layer: "Nav", preset: "fade-in", at: 100, params: { duration: 700 } },
+  { layer: "Eyebrow", preset: "fade-in", at: 300, params: { duration: 700 } },
+  { layer: "Headline", preset: "blur-in", at: 350, params: { duration: 1e3, amount: 22 } },
+  { layer: "Visual", preset: "fade-in", at: 300, params: { duration: 800 } },
+  { layer: "Lead", preset: "rise-in", at: 900, params: { duration: 800 } },
+  { layer: ["CTA primary", "CTA quiet"], preset: "rise-in", at: 1300, params: { duration: 700 }, stagger: { delay: 140 } },
+  { layer: "Proof", preset: "fade-in", at: 2e3, params: { duration: 800 } },
+  ...BOARDS.map((b, i) => ({ layer: `${b.name} board`, preset: "pulse", at: passes[i], params: { duration: 500, amount: 0.035 } })),
+  { layer: "Tick", preset: "pop-in", at: 2200, params: { duration: 450 }, stagger: { delay: 350 } },
+  { layer: "Strike", preset: "wipe-in", at: MIDNIGHT, params: { duration: 300, direction: "right" } },
+  { layer: "Year", preset: "pop-in", at: MIDNIGHT, params: { duration: 500 } },
+  { layer: "Ball", preset: "pulse", at: MIDNIGHT, params: { duration: 700, amount: 0.12 } },
+  { layer: "Confetti", preset: "fade-in", at: MIDNIGHT, params: { duration: 500 } },
+  { layer: "Burst", preset: "scale-in", at: MIDNIGHT, params: { duration: 700 }, stagger: { delay: 280 } }
+];
+var new_year_landing_default = defineTemplate({
+  id: "web-new-year-landing",
+  meta: {
+    name: "New Year ball-drop landing page",
+    description: "A New Year landing page for a SaaS: an offer bar, a hero where a ball of gold light drops down a tower past sign boards whose figures count up (features shipped, uptime, hours saved), strikes out the old year and lights the new one under rockets and confetti; the resolutions the product keeps as a ruled checklist that ticks itself; and the annual-plan offer that ends at midnight \u2014 at desktop, laptop, tablet and phone widths",
+    category: "web",
+    tags: ["new year", "landing page", "hero", "website", "saas", "year in review", "ball drop", "countdown", "confetti", "counter", "resolutions", "annual plan", "offer", "animation", "responsive", "seasonal", "serif"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["sale", "stats", "launch"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues, counts },
+  build() {
+    const k = new Kit("New Year ball-drop landing page", preset("web-desktop"));
+    k.quantizeGeometry = true;
+    newYearBrand(k);
+    k.textStyle("Nav 16", { size: 16, fontWeight: 500, lineHeight: 24 });
+    k.textStyle("Brand 22", { ...SERIF, size: 22, fontWeight: 900, letterSpacing: -0.3, lineHeight: 28 });
+    k.textStyle("Button 16", { size: 16, fontWeight: 700, lineHeight: 24 });
+    k.textStyle("Bar 15", { size: 15, fontWeight: 700, lineHeight: 22, textAlign: "CENTER" });
+    k.textStyle("Eyebrow 14", { size: 14, fontWeight: 700, letterSpacing: 4, lineHeight: 20, textCase: "UPPER" });
+    k.textStyle("Display 92", { ...SERIF, size: 92, fontWeight: 900, letterSpacing: -3.2, lineHeight: 90 });
+    k.textStyle("Display 76", { ...SERIF, size: 76, fontWeight: 900, letterSpacing: -2.4, lineHeight: 78 });
+    k.textStyle("Display 64", { ...SERIF, size: 64, fontWeight: 900, letterSpacing: -1.8, lineHeight: 66 });
+    k.textStyle("Display 46", { ...SERIF, size: 46, fontWeight: 900, letterSpacing: -1.2, lineHeight: 50 });
+    k.textStyle("Lead 20", { size: 20, fontWeight: 400, lineHeight: 32 });
+    k.textStyle("Lead 17", { size: 17, fontWeight: 400, lineHeight: 27 });
+    k.textStyle("Proof 15", { ...MONO, size: 15, fontWeight: 500, lineHeight: 24 });
+    k.textStyle("Section 44", { ...SERIF, size: 44, fontWeight: 900, letterSpacing: -1.2, lineHeight: 50 });
+    k.textStyle("Section 32", { ...SERIF, size: 32, fontWeight: 900, letterSpacing: -0.8, lineHeight: 38 });
+    k.textStyle("Resolution 26", { ...SERIF, size: 26, fontWeight: 700, letterSpacing: -0.4, lineHeight: 32 });
+    k.textStyle("Body 18", { size: 18, fontWeight: 400, lineHeight: 29 });
+    k.textStyle("Kept 15", { ...MONO, size: 15, fontWeight: 600, lineHeight: 22 });
+    k.textStyle("Small 14", { size: 14, fontWeight: 500, lineHeight: 22 });
+    k.textStyle("Figure 38", { ...MONO, size: 38, fontWeight: 800, letterSpacing: -1.2, lineHeight: 44 });
+    k.textStyle("Label 15", { size: 15, fontWeight: 600, lineHeight: 19 });
+    k.textStyle("Year 76", { ...SERIF, size: 76, fontWeight: 900, letterSpacing: -2, lineHeight: 76 });
+    k.textStyle("Last year 30", { ...SERIF, size: 30, fontWeight: 700, letterSpacing: -0.6, lineHeight: 34 });
+    k.textStyle("Sign label 13", { size: 13, fontWeight: 700, letterSpacing: 2, lineHeight: 18, textCase: "UPPER" });
+    buttons(k, { style: "Button 16", pad: [15, 26], radius: 8 });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 64, top: 24 });
+    k.timeline(sheet, { duration: LOOP, fps: 30 });
+    const bar = k.stack(sheet, { fill: "primary", radius: 8, padding: { top: 10, right: 20, bottom: 10, left: 20 }, align: "CENTER", name: "Offer bar" });
+    k.text(bar, "Start {{brand.year}} on the annual plan: two months free, and your price is locked for the year. Ends at midnight, 1 January.", { style: "Bar 15", color: "onPrimary", name: "Offer bar text" });
+    nav(k, sheet, { links: ["Year in review", "Automations", "Pricing", "Changelog"], cta: "Start on annual", style: "Nav 16", brandStyle: "Brand 22" });
+    const hero = k.stack(sheet, { direction: "HORIZONTAL", gap: 72, align: "CENTER", name: "Hero" });
+    const copy = k.stack(hero, { gap: 26, name: "Copy" });
+    k.text(copy, "{{brand.name}} \xB7 {{brand.lastYear}} in review", { style: "Eyebrow 14", color: "onPaper", name: "Eyebrow" });
+    k.text(copy, "New year, new stack.", { style: "Display 92", color: "text", name: "Headline" });
+    k.text(copy, "Mainspring chases the invoices, sends the Monday report and onboards the new account while you sleep. This year it handed 1.26 million hours back to 38,400 teams. Start the next one with the busywork already gone.", { style: "Lead 20", color: "onPaper", name: "Lead" });
+    const cta = k.stack(copy, { direction: "HORIZONTAL", gap: 12, wrap: true, name: "CTAs" });
+    k.instance(cta, "Button", { Label: "Start on annual" }, { name: "CTA primary" });
+    k.instance(cta, "Button quiet", { Label: "See the year in review" }, { name: "CTA quiet" });
+    k.text(copy, "2 months free on annual \xB7 price locked all year", { style: "Proof 15", color: "onPaper", name: "Proof" });
+    const holder = k.stack(hero, { width: BOX.w, height: BOX.h, name: "Visual holder" });
+    const visual = k.stack(holder, { width: BOX.w, height: BOX.h, fill: "card", radius: 24, clip: true, name: "Visual", absolute: { x: 0, y: 0 } });
+    nightCity(k, visual, { w: BOX.w, h: BOX.h, horizon: 520, u: 0.6, starsTop: 10, loopMs: LOOP });
+    burst(k, visual, { cx: 440, cy: 88, r: 84, u: 0.6 });
+    burst(k, visual, { cx: 120, cy: 70, r: 56, u: 0.6, role: "rose" });
+    burst(k, visual, { cx: 300, cy: 46, r: 40, u: 0.6, role: "ice" });
+    confetti(k, visual, { w: BOX.w, h: BOX.h, n: 40, u: 0.62, loopMs: LOOP });
+    const block = tower(k, visual, TOWER, { absolute: { x: 30, y: BOX.h - towerHeight(TOWER) - 84 } });
+    clearConfetti(k, visual, ["Tower"], { pad: 12 });
+    const travel = ballTravel(TOWER);
+    for (const b of k.named(block, "Ball")) k.animate(b, "translateY", [
+      { t: 0, v: -travel, ease: ease.hold },
+      ...BOARDS.map((_, i) => ({ t: passes[i], v: -travel * (1 - ballPasses(TOWER, i)), ease: ease.linear })),
+      { t: MIDNIGHT - 700, v: -travel * (1 - ballPasses(TOWER, BOARDS.length - 1)), ease: ease.out("bounce") },
+      { t: MIDNIGHT, v: 0 }
+    ]);
+    const list = k.stack(sheet, { gap: 0, name: "Resolutions" });
+    k.text(list, "Four resolutions, kept before breakfast", { style: "Section 44", color: "text", name: "Resolutions title" });
+    k.stack(list, { height: 28, name: "Gap" });
+    for (const [resolution, how, kept] of RESOLUTIONS) {
+      k.rect(list, "FILL", 1, "accent", { name: "Rule", opacity: 0.5 });
+      const row = k.stack(list, { direction: "HORIZONTAL", gap: 28, align: "CENTER", padding: { top: 24, right: 0, bottom: 24, left: 0 }, name: "Resolution" });
+      const head = k.stack(row, { direction: "HORIZONTAL", width: 440, gap: 18, align: "CENTER", name: "Resolution head" });
+      tickBox(k, head, { size: 40 });
+      k.text(head, resolution, { style: "Resolution 26", color: "text", name: "Resolution text" });
+      k.text(row, how, { style: "Body 18", color: "onPaper", name: "How" });
+      k.text(row, kept, { style: "Kept 15", color: "text", width: 240, align: "RIGHT", name: "Kept" });
+    }
+    k.rect(list, "FILL", 1, "accent", { name: "Rule", opacity: 0.5 });
+    const band = k.stack(sheet, { direction: "HORIZONTAL", gap: 40, align: "CENTER", justify: "SPACE_BETWEEN", fill: "card", radius: 12, stroke: { color: "accent", width: 1 }, padding: 48, name: "Band" });
+    const pitch = k.stack(band, { gap: 10, name: "Band copy" });
+    k.text(pitch, "Prices change when the ball lands.", { style: "Section 32", color: "onCard", name: "Band title" });
+    k.text(pitch, "Go annual before midnight on 1 January: two months free, and the price you pay today is the price you pay until next New Year. Monthly stays monthly; nothing else changes.", { style: "Body 18", color: "onCard", name: "Band text" });
+    k.instance(band, "Button", { Label: "Start {{brand.year}} on annual" }, { name: "Band button" });
+    k.text(sheet, "\xA9 {{brand.year}} Mainspring Labs \xB7 Security \xB7 Changelog \xB7 Status", { style: "Small 14", color: "onPaper", name: "Footer" });
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    webResponsive(k, sheet, {
+      stack: ["Hero", "Band", "Resolution"],
+      restyle: {
+        "Display 92": { laptop: "Display 76", tablet: "Display 64", mobile: "Display 46" },
+        "Lead 20": { mobile: "Lead 17" },
+        "Section 44": { mobile: "Section 32" }
+      },
+      gap: { tablet: 56, mobile: 44 },
+      tweak: (kit, id, size) => {
+        if (size === "laptop") for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 48 });
+        if (size === "tablet" || size === "mobile") {
+          for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 44, counterAxisAlignItems: "CENTER" });
+          for (const n of kit.named(id, "Band")) kit.patch(n, { itemSpacing: 24, padding: { top: 32, right: 24, bottom: 32, left: 24 } });
+          for (const n of kit.named(id, "Resolution")) kit.patch(n, { itemSpacing: 10, counterAxisAlignItems: "MIN" });
+          for (const n of kit.named(id, "Kept")) kit.patch(n, { textAlign: "LEFT" });
+        }
+        const s = size === "mobile" ? 335 / BOX.w : 1;
+        for (const n of kit.named(id, "Visual holder")) kit.patch(n, { layoutSizingHorizontal: "FIXED", layoutSizingVertical: "FIXED", width: Math.round(BOX.w * s), height: Math.round(BOX.h * s) });
+        for (const n of kit.named(id, "Visual")) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: BOX.w, height: BOX.h, ...s === 1 ? {} : { anchorX: 0, anchorY: 0, scaleX: s, scaleY: s } });
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  new_year_landing_default
+};