@popcraft/kit 0.24.2 → 0.25.0

package/dist/chunks/chunk-NAKOHNB4.js

@@ -0,0 +1,185 @@
+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 {
+  MOTIF,
+  cosyBrand,
+  knit,
+  knitSize,
+  letterChart,
+  plainRows,
+  repeatChart
+} from "./chunk-CS7KKWG4.js";
+import {
+  fitSnow,
+  snow
+} from "./chunk-57PXFTSD.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-X23ZWFW2.js";
+import {
+  outro,
+  pill,
+  postVariants
+} 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/winter-cosy-heads-down-post.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 9e3;
+var COLS = 60;
+var CELL = 18;
+var SWATCH = {
+  cell: CELL,
+  chart: [
+    ...plainRows(1, COLS, "r"),
+    ...repeatChart(MOTIF.dots, COLS),
+    ...plainRows(1, COLS),
+    ...repeatChart(MOTIF.diamond, COLS),
+    ...plainRows(1, COLS),
+    ...letterChart("HEADS DOWN", COLS),
+    ...plainRows(1, COLS),
+    ...repeatChart(MOTIF.cabin, COLS),
+    ...plainRows(1, COLS),
+    ...repeatChart(MOTIF.zigzag, COLS),
+    ...plainRows(1, COLS, "r")
+  ]
+};
+var BORDER = {
+  cell: CELL,
+  chart: [...plainRows(1, COLS, "r"), ...plainRows(1, COLS), ...repeatChart(MOTIF.flake, COLS), ...plainRows(1, COLS), ...repeatChart(MOTIF.fir, COLS), ...plainRows(1, COLS), ...repeatChart(MOTIF.zigzag, COLS), ...plainRows(1, COLS, "r")]
+};
+var ROWS = SWATCH.chart.length;
+var SIZE = knitSize(SWATCH);
+var CAST_ON = 600;
+var STEP = 120;
+var KNITTED = CAST_ON + ROWS * STEP;
+var OUT = 8300;
+var NEEDLES = [
+  ["knitted", "Offline drafts: write on the train, send when you land."],
+  ["on the needles", "Shared snippets, so the whole studio answers alike."],
+  ["cast on", "Burrow for Android."]
+];
+var cues = [
+  { layer: "Tag", preset: "fade-in", at: 0, params: { duration: 300 } },
+  { layer: "Eyebrow", preset: "fade-in", at: 0, params: { duration: 300 } },
+  { layer: "Headline", preset: "words-in", at: 0, params: { duration: 500 } },
+  { layer: "Knit row", preset: "wipe-in", at: CAST_ON, params: { duration: 320, direction: "right" }, stagger: { delay: STEP } },
+  { layer: "Yarn", preset: "wobble", at: CAST_ON + 800, params: { duration: 1400 } },
+  { layer: "Item", preset: "rise-in", at: KNITTED + 150, params: { duration: 500 }, stagger: { delay: 220 } },
+  { layer: "Sign-off", preset: "fade-in", at: KNITTED + 1e3, params: { duration: 500 } },
+  // It unravels from the needle down, and the words leave: the loop knits it again.
+  { layer: "Knit row", preset: "wipe-out", at: OUT - ROWS * 14, params: { duration: 240, direction: "left" }, stagger: { delay: 14, order: "reverse" } },
+  { layer: "Headline", preset: "words-out", at: OUT, params: { duration: 400 } },
+  outro(["Tag", "Eyebrow", "Item", "Sign-off"], OUT + 100)
+];
+var FAR = { w: 1080, h: 1920, n: 60, u: 1, depth: "far", loopMs: DURATION, seed: 31 };
+var arc = (cx, cy, r, from, to, squash, turn) => ({
+  closed: false,
+  points: Array.from({ length: 13 }, (_, i) => {
+    const a = from + (to - from) * i / 12, x = r * Math.cos(a), y = r * squash * Math.sin(a);
+    return { x: cx + x * Math.cos(turn) - y * Math.sin(turn), y: cy + x * Math.sin(turn) + y * Math.cos(turn) };
+  })
+});
+var winter_cosy_heads_down_post_default = defineTemplate({
+  id: "motion-winter-cosy-heads-down-post",
+  meta: {
+    name: "Winter cabin heads-down update post (animated)",
+    description: "A calm \u201Cwe are heads-down building\u201D update for the quiet months, knitted: a Fair Isle swatch is knitted row by row from its cast-on edge, a needle riding the newest row, spelling HEADS DOWN in stitches between a row of little cabins with lit windows and a band of diamonds; then what is on the needles comes in (one thing knitted, one being knitted, one cast on) with the date the changelog is due. Snow behind, a ball of yarn beside it \u2014 a nine-second loop, square with 4:5 and 9:16 cuts",
+    category: "animation",
+    tags: ["animation", "winter", "cosy", "cozy", "knit", "knitting", "fair isle", "pixel", "heads down", "build in public", "roadmap", "update", "january", "february", "snow", "saas", "post", "seasonal", "loop"],
+    platforms: ["instagram", "linkedin", "x", "threads", "facebook"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["announcement", "changelog", "planning"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit("Winter cabin heads-down update post (animated)", preset("ig-post"));
+    k.quantizeGeometry = true;
+    cosyBrand(k);
+    k.textStyle("Eyebrow 22", { size: 22, fontWeight: 700, letterSpacing: 3.5, lineHeight: 30, textCase: "UPPER" });
+    k.textStyle("Display 66", { ...SERIF, size: 66, fontWeight: 900, letterSpacing: -2.2, lineHeight: 70 });
+    k.textStyle("Display 58", { ...SERIF, size: 58, fontWeight: 900, letterSpacing: -1.8, lineHeight: 62 });
+    k.textStyle("State 20", { ...MONO, size: 20, fontWeight: 700, lineHeight: 32 });
+    k.textStyle("Item 24", { size: 24, fontWeight: 500, lineHeight: 32 });
+    k.textStyle("Sign 26", { ...SERIF, size: 26, fontWeight: 700, letterSpacing: -0.3, lineHeight: 34 });
+    k.textStyle("Tag 20", { ...MONO, size: 20, fontWeight: 800, lineHeight: 28 });
+    pill(k, "Tag pill", { fill: "primary", ink: "onPrimary", style: "Tag 20", label: "Jan to Feb", pad: [5, 13], radius: 8 });
+    const sheet = k.sheet;
+    const SIDE = 64;
+    k.flowSheet(sheet, 0, { top: 70, right: 0, bottom: 60, left: 0 }, "paper", "SPACE_BETWEEN", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    k.rect(sheet, 1080, 520, [k.gradient({ from: "dusk", to: "dusk", angle: 90, fromOpacity: 0, toOpacity: 0.42 })], { name: "Horizon", absolute: { x: 0, y: 560 } });
+    snow(k, sheet, FAR);
+    const top = k.stack(sheet, { gap: 10, padding: { top: 0, right: SIDE, bottom: 0, left: SIDE }, name: "Top" });
+    const brow = k.stack(top, { direction: "HORIZONTAL", gap: 16, align: "CENTER", name: "Brow" });
+    k.instance(brow, "Tag pill", { Label: "Jan to Feb" }, { name: "Tag" });
+    k.text(brow, "{{brand.name}} \xB7 a winter update", { style: "Eyebrow 22", color: "onPaper", name: "Eyebrow" });
+    k.text(top, "Heads-down until the thaw.", { style: "Display 66", color: "text", name: "Headline" });
+    const holder = k.stack(sheet, { width: 1080, height: SIZE.h + 28, name: "Swatch" });
+    knit(k, holder, { ...SWATCH, absolute: { x: 0, y: 14 } });
+    for (const id of k.named(holder, "Knit")) k.patch(id, { effects: [{ type: "DROP_SHADOW", color: { r: 0.01, g: 0.03, b: 0.08, a: 0.55 }, offset: { x: 0, y: 18 }, blur: 40, spread: 0, visible: true }] });
+    const needle = k.frame(holder, { x: 24, y: 2, width: 1040, height: 24 }, { name: "Needle" });
+    k.rect(needle, 1010, 12, "needle", { name: "Needle rod", radius: 6, absolute: { x: 22, y: 6 }, effects: [{ type: "DROP_SHADOW", color: { r: 0.01, g: 0.03, b: 0.08, a: 0.5 }, offset: { x: 0, y: 5 }, blur: 8, spread: 0, visible: true }] });
+    k.ellipse(needle, 24, "knitRust", { name: "Needle knob", absolute: { x: 0, y: 0 } });
+    const yarn = k.frame(holder, { x: 906, y: SIZE.h - 62, width: 150, height: 150 }, { name: "Yarn" });
+    k.ellipse(yarn, 132, "knitRust", { name: "Yarn ball", absolute: { x: 9, y: 9 }, effects: [{ type: "DROP_SHADOW", color: { r: 0.01, g: 0.03, b: 0.08, a: 0.5 }, offset: { x: 0, y: 12 }, blur: 22, spread: 0, visible: true }] });
+    k.vector(yarn, 150, 150, [arc(75, 75, 62, 0.2, 2.9, 0.42, 0.5), arc(75, 75, 62, 0.3, 2.8, 0.7, 0.5), arc(75, 75, 60, 3.4, 6, 0.5, -0.7), arc(75, 75, 60, 3.5, 5.9, 0.8, -0.7), arc(75, 75, 58, 0.6, 2.5, 0.2, 2.2)], "shutterDark", { name: "Yarn wraps", strokeWidth: 5, opacity: 0.55, absolute: { x: 0, y: 0 } });
+    k.vector(yarn, 150, 150, [arc(75, 75, 62, 0.4, 2.7, 0.56, 0.5), arc(75, 75, 60, 3.6, 5.8, 0.65, -0.7)], "glowHot", { name: "Yarn light", strokeWidth: 3, opacity: 0.4, absolute: { x: 0, y: 0 } });
+    const foot = k.stack(sheet, { gap: 14, padding: { top: 0, right: 190, bottom: 0, left: SIDE }, name: "Foot" });
+    const list = k.stack(foot, { gap: 4, name: "Needles" });
+    for (const [state, what] of NEEDLES) {
+      const row = k.stack(list, { direction: "HORIZONTAL", gap: 18, name: "Item" });
+      k.text(row, state, { style: "State 20", color: "onPaper", width: 190, name: "State" });
+      k.text(row, what, { style: "Item 24", color: "text", name: "What" });
+    }
+    k.text(foot, "Changelog on 3 March. Support stays awake.", { style: "Sign 26", color: "text", name: "Sign-off" });
+    const border = knit(k, sheet, { ...BORDER, name: "Knit border", absolute: { x: 0, y: 1080 } });
+    k.patch(border, { visible: false });
+    k.animate(needle, "translateY", [{ t: 0, v: SIZE.h, ease: ease.hold }, { t: CAST_ON, v: SIZE.h, ease: ease.linear }, { t: KNITTED, v: 0, ease: ease.hold }, { t: OUT - ROWS * 14, v: 0, ease: ease.inOut("cubic") }, { t: OUT + 240, v: SIZE.h }]);
+    k.cues(sheet, cues);
+    k.variants(sheet, postVariants({ portrait: 72 }, {
+      portrait: (kit, id) => {
+        kit.patch(id, { padding: { top: 110, right: 0, bottom: 100, left: 0 } });
+        fitSnow(kit, id, FAR);
+        for (const n of kit.named(id, "Horizon")) kit.patch(n, { y: 830 });
+      },
+      vertical: (kit, id) => {
+        const p = kit.node(id).padding;
+        const band = knitSize(BORDER).h;
+        kit.patch(id, { padding: { top: p.top, right: 0, bottom: Math.max(p.bottom, band + 150), left: 0 } });
+        for (const n of kit.named(id, "Headline")) kit.restyle(n, "Display 58");
+        for (const n of kit.named(id, "Top")) kit.patch(n, { padding: { top: 0, right: p.right, bottom: 0, left: p.left } });
+        for (const n of kit.named(id, "Foot")) kit.patch(n, { padding: { top: 0, right: 190, bottom: 0, left: p.left } });
+        for (const n of kit.named(id, "Knit border")) kit.patch(n, { visible: true, y: 1920 - band - 40 });
+        for (const n of kit.named(id, "Horizon")) kit.patch(n, { y: 1920 - band - 40 - 520 });
+        fitSnow(kit, id, FAR);
+      }
+    }));
+    return k.finish();
+  }
+});
+
+export {
+  winter_cosy_heads_down_post_default
+};

package/dist/chunks/chunk-NBRDSCXS.js

@@ -0,0 +1,198 @@
+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 {
+  COLUMN,
+  float,
+  lineGrid,
+  redrawLines,
+  reelCuts,
+  reelSheet,
+  section,
+  wideCut
+} from "./chunk-UD3JVCFG.js";
+import {
+  captionStrip,
+  captionSwap
+} from "./chunk-C7BYFVZT.js";
+import {
+  hide,
+  patchAll,
+  restyle
+} from "./chunk-QLV6445V.js";
+import {
+  shadow
+} from "./chunk-HVK5T4I5.js";
+import {
+  pill
+} from "./chunk-EK5CFFJO.js";
+import {
+  box
+} from "./chunk-BNVLVZUT.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/saas-before-after.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var S = section("acoustic", 2, 6);
+var { beat } = S;
+var STAGE = { width: COLUMN, height: 640 };
+var SPLIT = 236;
+var AFTER = { width: STAGE.width - SPLIT, height: STAGE.height };
+var WIPE = { at: beat(8), duration: 1100 };
+var LEDGER = { only: "y", stepY: 64, weight: 2, opacity: 1, name: "Ledger rules" };
+var SCRAPS = ["Spreadsheet", "Email thread", "Sticky note", "Overdue"];
+var swaps = [captionSwap(["Sunday night. Three unpaid invoices.", "A spreadsheet. Notes. Awkward emails.", "Fennel sends each invoice itself.", "It reminds, then it reconciles.", "Paid in two days flat.", "Your Sunday is yours again."], beat(0.5), S.duration - 30, { stagger: 60 })];
+var counts = [{ layer: "Invoice total", at: WIPE.at + 500, duration: beat(2), counter: { from: 0, to: 4800, prefix: "$", separator: "," } }];
+var cues = [
+  { layer: "Kicker", preset: "fade-in", at: 0, params: { duration: 400 } },
+  { layer: "Hook", preset: "words-in", at: 0, params: { duration: 500, amount: 70 } },
+  { layer: "Stage", preset: "fade-in", at: 300, params: { duration: 450 } },
+  { layer: "Caption strip", preset: "fade-in", at: beat(0.5), params: { duration: 300 } },
+  ...SCRAPS.map((name, i) => ({ layer: name, preset: i === 3 ? "pop-in" : "drop-in", at: beat(1 + i * 1.5), params: { duration: 420 } })),
+  { layer: "Before", preset: "shake", at: beat(5.5) + 420, params: { duration: 400, distance: 8 } },
+  { layer: "After", preset: "wipe-in", at: WIPE.at, params: { duration: WIPE.duration, direction: "left", ease: ease.inOut("cubic") } },
+  { layer: "Step", preset: "fade-in", at: beat(12), params: { duration: 350 }, stagger: { delay: beat(1) } },
+  { layer: "Paid stamp", preset: "pop-in", at: beat(15), params: { duration: 380, amount: 0.5 } },
+  { layer: "Call", preset: "rise-in", at: beat(18), params: { duration: 500 } },
+  { layer: "Call", preset: "pulse", at: beat(20), params: { duration: 700, amount: 0.05 } }
+];
+var saas_before_after_default = defineTemplate({
+  id: "motion-saas-before-after",
+  meta: {
+    name: "SaaS short: before and after",
+    description: "A 15-second before-and-after reel in a warm editorial serif look: the old way piles up on the desk (spreadsheet, email thread, sticky note, an overdue stamp), a marigold slider is drawn across, and the new way is one calm invoice whose total counts up and is stamped paid, the pile still in view beside it. Music, burned-in captions, 9:16 with square, 4:5 and 16:9 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "before after", "comparison", "editorial", "serif", "invoice", "wipe", "captions", "music", "audio", "reel", "tiktok", "shorts"],
+    platforms: ["tiktok", "instagram", "youtube", "linkedin", "x"],
+    formats: ["reel", "short", "story", "post", "portrait-post", "ad", "video"],
+    useCases: ["comparison", "launch", "case-study"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, swaps },
+  build() {
+    const k = new Kit("SaaS short: before and after", preset("ig-story"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#F1ECE0", text: "#183326", onPaper: "#475A4D", primary: "#183326", onPrimary: "#F6F1E5", accent: "#E3A008", onAccent: "#1D1500", card: "#FCFAF4", onCard: "#183326" },
+      { name: "Fennel", hook: "Invoicing shouldn\u2019t take your Sunday." }
+    );
+    k.palette({ rule: "#CFC6AE", margin: "#C7533B", desk: "#DDD3BB", scrap: "#FFFFFF", onScrap: "#2A2A26", scrapMuted: "#5F5E57", note: "#F4D35E", onNote: "#3B2D00", overdue: "#A8281C", cell: "#D5E3D3", cardMuted: "#54655A", shade: "#3A3320", onShade: "#F6F1E5" });
+    const serif = { fontFamily: "Source Serif 4" }, mono = { fontFamily: "JetBrains Mono" };
+    k.textStyle("Hook 84", { ...serif, size: 84, fontWeight: 600, letterSpacing: -2.4, lineHeight: 86 });
+    k.textStyle("Hook 58", { ...serif, size: 58, fontWeight: 600, letterSpacing: -1.4, lineHeight: 62 });
+    k.textStyle("Kicker 22", { ...mono, size: 22, fontWeight: 600, letterSpacing: 2.4, lineHeight: 28, textCase: "UPPER" });
+    k.textStyle("Caption 38", { ...serif, size: 38, fontWeight: 600, fontStyle: "italic", letterSpacing: -0.4, lineHeight: 46 });
+    k.textStyle("Button 32", { size: 32, fontWeight: 700, letterSpacing: -0.4, lineHeight: 40 });
+    k.textStyle("Scrap 22", { ...mono, size: 22, fontWeight: 500, lineHeight: 30 });
+    k.textStyle("Note 30", { ...serif, size: 30, fontWeight: 700, fontStyle: "italic", lineHeight: 34 });
+    k.textStyle("Stamp 52", { size: 52, fontWeight: 900, letterSpacing: 3, lineHeight: 56, textCase: "UPPER" });
+    k.textStyle("Stamp 40", { size: 40, fontWeight: 900, letterSpacing: 3, lineHeight: 44, textCase: "UPPER" });
+    k.textStyle("Invoice 38", { ...serif, size: 38, fontWeight: 700, letterSpacing: -0.8, lineHeight: 44 });
+    k.textStyle("Total 150", { ...serif, size: 150, fontWeight: 700, letterSpacing: -6, lineHeight: 144, fontFeatures: { tnum: 1 } });
+    k.textStyle("Row 26", { size: 26, fontWeight: 600, letterSpacing: -0.3, lineHeight: 34 });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 32", label: "Send your first invoice free", pad: [20, 36], radius: 6 });
+    const sheet = reelSheet(k, S, { name: "Before and after", gap: 22 });
+    lineGrid(k, sheet, k.tint("text", 0.13), LEDGER);
+    k.rect(sheet, 3, 1920, "margin", { name: "Margin rule", absolute: { x: 104, y: 0 }, opacity: 0.55 });
+    k.ellipse(sheet, 980, "accent", { name: "Sun", absolute: { x: 50, y: 1560 } });
+    k.text(sheet, "The freelancer\u2019s ledger \xB7 {{brand.name}}", { style: "Kicker 22", color: "onPaper", name: "Kicker" });
+    k.text(sheet, "{{brand.hook}}", { style: "Hook 84", color: "text", name: "Hook" });
+    const stage = k.stack(sheet, { ...STAGE, clip: true, radius: 6, fill: "desk", effects: [shadow(k, "shade", 0.22, 18, 44)], name: "Stage" });
+    const before = k.frame(stage, { x: 0, y: 0, ...STAGE }, { name: "Before", fill: "desk" });
+    const tag = (parent, label, fill, ink, name) => {
+      const t = k.stack(parent, { direction: "HORIZONTAL", width: "HUG", fill, radius: 4, padding: { top: 8, right: 16, bottom: 8, left: 16 }, name, absolute: { x: 28, y: 28 } });
+      k.text(t, label, { style: "Kicker 22", color: ink, autoWidth: true, name: `${name} label` });
+    };
+    const paper = [shadow(k, "shade", 0.25, 8, 18)];
+    const sheetScrap = k.stack(before, { width: 610, fill: "scrap", padding: 26, gap: 12, effects: paper, name: "Spreadsheet", absolute: { x: 30, y: 120 } });
+    k.text(sheetScrap, "invoices_2026_FINAL(2).xlsx", { style: "Scrap 22", color: "onScrap", name: "File name" });
+    const cells = [];
+    for (let r = 0; r < 6; r++) for (let c = 0; c < 4; c++) cells.push(box(c * 141, r * 40, 135, 34));
+    k.vector(sheetScrap, 558, 234, cells, "cell", { name: "Cells" });
+    k.text(sheetScrap, "Acme   4,800   sent??   \u2014", { style: "Scrap 22", color: "scrapMuted", name: "Row note" });
+    k.patch(sheetScrap, { rotation: -4 });
+    const mail = k.stack(before, { width: 520, fill: "scrap", padding: 26, gap: 10, effects: paper, name: "Email thread", absolute: { x: 258, y: 372 } });
+    k.text(mail, "Re: Re: Fwd: invoice_v3.pdf", { style: "Scrap 22", color: "onScrap", name: "Subject" });
+    k.text(mail, "\u201CHi, just circling back on this\u2026\u201D", { style: "Scrap 22", color: "scrapMuted", name: "Body" });
+    k.vector(mail, 468, 46, [box(0, 0, 468, 10), box(0, 18, 410, 10), box(0, 36, 270, 10)], "cell", { name: "Quoted lines" });
+    k.patch(mail, { rotation: 3 });
+    const note = k.stack(before, { width: 204, fill: "note", padding: { top: 24, right: 20, bottom: 34, left: 20 }, effects: paper, name: "Sticky note", absolute: { x: 16, y: 318 } });
+    k.text(note, "Chase Acme!! (third time)", { style: "Note 30", color: "onNote", name: "Note words" });
+    k.patch(note, { rotation: -5 });
+    const over = k.stack(before, { width: "HUG", stroke: { color: "overdue", width: 6, align: "INSIDE" }, radius: 6, padding: { top: 10, right: 22, bottom: 10, left: 22 }, name: "Overdue", absolute: { x: 44, y: 530 } });
+    k.text(over, "Overdue 47 days", { style: "Stamp 52", color: "overdue", autoWidth: true, name: "Overdue words" });
+    k.patch(over, { rotation: -6 });
+    tag(before, "Before", "shade", "onShade", "Before tag");
+    const after = k.frame(stage, { x: SPLIT, y: 0, ...AFTER }, { name: "After", fill: "card", clip: true });
+    const inv = k.stack(after, { ...AFTER, padding: { top: 96, right: 36, bottom: 36, left: 40 }, gap: 20, name: "Invoice", absolute: { x: 0, y: 0 } });
+    k.text(inv, "Invoice 0042 \xB7 Acme Studio", { style: "Invoice 38", color: "onCard", name: "Invoice title" });
+    k.rect(inv, "FILL", 2, "rule", { name: "Invoice rule" });
+    k.text(inv, "$4,800", { style: "Total 150", color: "onCard", name: "Invoice total" });
+    k.rect(inv, "FILL", 2, "rule", { name: "Invoice rule" });
+    for (const [what, when] of [["Sent with a pay link", "Mon 09:02"], ["Reminder, written for you", "Tue 09:00"], ["Paid and reconciled", "Wed 14:10"]]) {
+      const row = k.stack(inv, { direction: "HORIZONTAL", gap: 16, align: "CENTER", name: "Step" });
+      k.ellipse(row, 16, "accent", { name: "Step dot" });
+      k.text(row, what, { style: "Row 26", color: "onCard", name: "Step what" });
+      k.text(row, when, { style: "Scrap 22", color: "cardMuted", autoWidth: true, name: "Step when" });
+    }
+    k.rect(inv, "FILL", 2, "rule", { name: "Invoice rule" });
+    k.text(inv, "The next one goes out Friday.", { style: "Scrap 22", color: "cardMuted", name: "Invoice foot" });
+    const paid = k.stack(after, { width: "HUG", fill: "accent", radius: 6, padding: { top: 10, right: 24, bottom: 10, left: 24 }, name: "Paid stamp", absolute: { x: 400, y: 244 } });
+    k.text(paid, "Paid", { style: "Stamp 40", color: "onAccent", autoWidth: true, name: "Paid words" });
+    k.patch(paid, { rotation: -8 });
+    tag(after, "After", "accent", "onAccent", "After tag");
+    const GRIP = 52;
+    const slider = k.frame(stage, { x: SPLIT - GRIP / 2, y: 0, width: GRIP, height: STAGE.height }, { name: "Slider" });
+    k.rect(slider, 8, STAGE.height, "accent", { name: "Slider rule", absolute: { x: GRIP / 2 - 4, y: 0 } });
+    k.ellipse(slider, GRIP, "accent", { name: "Slider grip", stroke: { color: "card", width: 5, align: "INSIDE" }, effects: [shadow(k, "shade", 0.3, 4, 12)], absolute: { x: 0, y: STAGE.height / 2 - GRIP / 2 } });
+    const chevron = (dir) => ({ closed: false, points: [{ x: 7 + 3.5 * dir, y: 0 }, { x: 7 - 3.5 * dir, y: 8 }, { x: 7 + 3.5 * dir, y: 16 }] });
+    k.vector(slider, 14, 16, [chevron(1)], "onAccent", { name: "Grip left", strokeWidth: 3.5, absolute: { x: GRIP / 2 - 17, y: STAGE.height / 2 - 8 } });
+    k.vector(slider, 14, 16, [chevron(-1)], "onAccent", { name: "Grip right", strokeWidth: 3.5, absolute: { x: GRIP / 2 + 3, y: STAGE.height / 2 - 8 } });
+    k.animate(slider, "translateX", [{ t: WIPE.at, v: AFTER.width + GRIP, ease: ease.inOut("cubic") }, { t: WIPE.at + WIPE.duration, v: 0 }]);
+    captionStrip(k, sheet, swaps[0].words[0], { style: "Caption 38", fill: "card", ink: "onCard", radius: 6, pad: [16, 26], stroke: { color: "rule", width: 2, align: "INSIDE" } });
+    k.instance(sheet, "Button", { Label: "Send your first invoice free" }, { name: "Call" });
+    k.counts(sheet, counts);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    k.variants(sheet, [...reelCuts({ post: 40, portrait: 80 }, {
+      post: (kit, id) => {
+        kit.patch(id, { itemSpacing: 16, counterAxisSpacing: 16, padding: { top: 36, right: 140, bottom: 36, left: 140 } });
+        hide(kit, id, ["Kicker", "Sun"]);
+        restyle(kit, id, "Hook", "Hook 58");
+      },
+      portrait: (kit, id) => {
+        kit.patch(id, { padding: { top: 70, right: 140, bottom: 70, left: 140 } });
+        patchAll(kit, id, "Sun", { y: 1250 });
+      }
+    }), wideCut(640, (kit, id, right) => {
+      const scale = right.width / STAGE.width;
+      redrawLines(kit, id, LEDGER);
+      patchAll(kit, id, "Margin rule", { height: 1080, x: 72 });
+      patchAll(kit, id, "Sun", { x: -330, y: 850 });
+      float(kit, id, "Stage", right.x, right.y + Math.round((right.height - STAGE.height * scale) / 2), { scale });
+    })]);
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  saas_before_after_default
+};

package/dist/chunks/chunk-NDLYUJLN.js

@@ -0,0 +1,183 @@
+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 {
+  FAILED,
+  LIVE,
+  framing,
+  lights,
+  machinedBrand,
+  rack,
+  shopLight
+} from "./chunk-FYZYHQSN.js";
+import {
+  phrases
+} from "./chunk-ZPQYHYFA.js";
+import {
+  key
+} from "./chunk-FAAVZ2GX.js";
+import {
+  MONO
+} from "./chunk-X23ZWFW2.js";
+import {
+  buttons,
+  nav,
+  page,
+  webResponsive
+} from "./chunk-YKXCPYWJ.js";
+import {
+  defineTemplate
+} from "./chunk-A44WEVKR.js";
+import {
+  Kit,
+  preset
+} from "./chunk-T3SGRYUX.js";
+import {
+  ease
+} from "./chunk-6DWY3DOQ.js";
+import {
+  focalFromPerspective,
+  init_transform3d
+} from "./chunk-7ECF2YL5.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/web/machined-hero.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_transform3d();
+var DURATION = 7e3;
+var FAIL = 1400;
+var HOP = 2400;
+var OUT = 3300;
+var VIEW = { w: 620, h: 600 };
+var SPECS = [["Failover, p95", "38 ms"], ["Providers, one endpoint", "14"], ["Tokens saved by cache", "31%"], ["Uptime, last 90 days", "99.995%"]];
+var cues = [
+  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 500 } },
+  { layer: "Eyebrow", preset: "rise-in", at: 100 },
+  { layer: "Headline", preset: "rise-in", at: 220, params: { duration: 700 } },
+  { layer: "Lead", preset: "rise-in", at: 380 },
+  { layer: ["CTA primary", "CTA quiet"], preset: "rise-in", at: 520, stagger: { delay: 100 } },
+  { layer: "Proof", preset: "fade-in", at: 800, params: { duration: 500 } },
+  { layer: "Rack window", preset: "scale-in", at: 200, params: { duration: 800, amount: 0.94 } },
+  { layer: "Spec", preset: "rise-in", at: 1e3, stagger: { delay: 110 } }
+];
+var pose = (w, h) => ({ cx: w * 0.57, cy: h * 0.46, scale: Math.min(w / 620, h / 540) * 0.54 });
+var machined_hero_default = defineTemplate({
+  id: "web-machined-hero",
+  meta: {
+    name: "Machined hardware web hero",
+    description: "An animated landing-page hero for developer infrastructure: the headline rises in beside a window into a server rack, where the product sits as a brushed-aluminium unit in real 3D. It slides out on its rails, a port lamp goes red, the route hops to the next upstream and a band of light crosses the metal; the unit\u2019s rating plate under it carries the numbers. Desktop, laptop, tablet and phone widths",
+    category: "web",
+    tags: ["machined", "hardware", "rack", "server", "3d", "shader", "brushed metal", "aluminium", "industrial", "developer", "infrastructure", "ai", "gateway", "hero", "landing page", "website", "animation", "responsive", "saas"],
+    platforms: ["web"],
+    formats: ["page", "banner"],
+    useCases: ["launch", "announcement"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues },
+  build() {
+    const k = new Kit("Machined hardware web hero", preset("web-desktop"));
+    k.quantizeGeometry = true;
+    machinedBrand(k, { card: "#1B1E22", onCard: "#F4F1EB", cardMuted: "#B7B3AA" });
+    k.textStyle("Nav 16", { size: 16, fontWeight: 500, lineHeight: 24 });
+    k.textStyle("Brand 20", { size: 20, fontWeight: 800, letterSpacing: -0.3, lineHeight: 28 });
+    k.textStyle("Button 16", { size: 16, fontWeight: 700, lineHeight: 24 });
+    k.textStyle("Eyebrow 14", { ...MONO, size: 14, fontWeight: 600, letterSpacing: 1.4, lineHeight: 20, textCase: "UPPER" });
+    k.textStyle("Display 72", { size: 72, fontWeight: 800, letterSpacing: -2.8, lineHeight: 74 });
+    k.textStyle("Display 60", { size: 60, fontWeight: 800, letterSpacing: -2.2, lineHeight: 62 });
+    k.textStyle("Display 50", { size: 50, fontWeight: 800, letterSpacing: -1.6, lineHeight: 54 });
+    k.textStyle("Display 38", { size: 38, fontWeight: 800, letterSpacing: -1, lineHeight: 42 });
+    k.textStyle("Lead 20", { size: 20, fontWeight: 400, lineHeight: 31 });
+    k.textStyle("Lead 17", { size: 17, fontWeight: 400, lineHeight: 26 });
+    k.textStyle("Proof 14", { ...MONO, size: 14, fontWeight: 500, lineHeight: 22 });
+    k.textStyle("Spec label 13", { ...MONO, size: 13, fontWeight: 500, letterSpacing: 0.8, lineHeight: 18, textCase: "UPPER" });
+    k.textStyle("Spec value 34", { size: 34, fontWeight: 800, letterSpacing: -1, lineHeight: 40 });
+    buttons(k, { style: "Button 16", pad: [15, 24], radius: 8 });
+    const sheet = k.sheet;
+    shopLight(k, sheet, 1440, 1024, { x: 0.72, y: 0.36, reach: 0.6, glow: 0.12, shadow: 0.35, grain: 0 });
+    page(k, sheet, { gap: 56, top: 32, paper: "background" });
+    k.timeline(sheet, { duration: DURATION, fps: 30 });
+    nav(k, sheet, { links: ["Routing", "Cache", "Guardrails", "Pricing", "Docs"], cta: "Get an API key", style: "Nav 16", brandStyle: "Brand 20" });
+    const hero = k.stack(sheet, { direction: "HORIZONTAL", gap: 56, align: "CENTER", padding: { top: 36, right: 0, bottom: 20, left: 0 }, name: "Hero" });
+    const copy = k.stack(hero, { gap: 24, name: "Copy" });
+    const eyebrow = k.stack(copy, { direction: "HORIZONTAL", gap: 12, align: "CENTER", name: "Eyebrow" });
+    k.rect(eyebrow, 28, 6, "primary", { radius: 2, name: "Eyebrow mark" });
+    k.text(eyebrow, "BH-1 model gateway \xB7 now GA", { style: "Eyebrow 14", color: "onBackground", name: "Eyebrow line" });
+    k.text(copy, "The model went down. Your app didn\u2019t.", { style: "Display 72", color: "text", name: "Headline" });
+    k.text(copy, "{{brand.name}} is one endpoint in front of every model provider. When an upstream times out, traffic moves to the next healthy one in 38 ms, and your users never see the error.", { style: "Lead 20", color: "onBackground", name: "Lead" });
+    const cta = k.stack(copy, { direction: "HORIZONTAL", gap: 12, wrap: true, name: "CTAs" });
+    k.instance(cta, "Button", { Label: "Get an API key" }, { name: "CTA primary" });
+    k.instance(cta, "Button quiet", { Label: "Read the failover docs" }, { name: "CTA quiet" });
+    const proof = k.stack(copy, { direction: "HORIZONTAL", gap: 20, wrap: true, name: "Proof" });
+    k.text(proof, "$ curl api.{{brand.site}}/v1/chat", { style: "Proof 14", color: "onBackground", autoWidth: true, name: "Proof call" });
+    k.text(proof, "# 200 OK in 38 ms", { style: "Proof 14", color: "onBackground", autoWidth: true, name: "Proof answer" });
+    const visual = k.stack(hero, { width: "HUG", name: "Visual" });
+    const win = k.stack(visual, { width: VIEW.w, height: VIEW.h, radius: 18, fill: "panel", clip: true, name: "Rack window", stroke: { color: "panelEdge", width: 2, align: "INSIDE" } });
+    const scene = k.group(win, { x: 0, y: 0, width: VIEW.w, height: VIEW.h }, { name: "Scene", absolute: true });
+    const s = { preset: "web-desktop", W: VIEW.w, H: VIEW.h, u: 0.5, tall: false, wide: false };
+    k.scene3d(scene, { camera: { focalLength: focalFromPerspective(1500, VIEW.w) }, lights: lights(s) });
+    const P = pose(VIEW.w, VIEW.h);
+    const R = rack(k, scene, s, { ...P, rotateX: -15, rotateY: -26, above: 4, below: 4, out: 300, glint: 0.55 });
+    const plate = k.stack(sheet, { direction: "HORIZONTAL", fill: "card", radius: 14, name: "Rating plate", stroke: { color: "panelEdge", width: 2, align: "INSIDE" } });
+    for (const [label, value] of SPECS) {
+      const cell = k.stack(plate, { gap: 6, padding: { top: 22, right: 26, bottom: 24, left: 26 }, name: "Spec", stroke: { color: "panelEdge", width: 1, align: "INSIDE" } });
+      k.text(cell, label, { style: "Spec label 13", color: "cardMuted", name: "Spec label" });
+      k.text(cell, value, { style: "Spec value 34", color: "onCard", name: "Spec value" });
+    }
+    const F = R.face;
+    key(k, R.unit, "z", [[0, 0, ease.hold], [OUT, 0, ease.out("expo")], [OUT + 1e3, 300]]);
+    key(k, R.rack, "rotateY", [[0, -14, ease.inOut("sine")], [OUT, -18, ease.inOut("cubic")], [OUT + 1400, -26, ease.inOut("sine")], [DURATION, -29]]);
+    key(k, R.rack, "rotateX", [[0, 0, ease.hold], [OUT + 450, 0, ease.inOut("cubic")], [OUT + 1800, -15]]);
+    key(k, F.faults[FAILED], "opacity", [[0, 0, ease.hold], [FAIL, 1, ease.hold], [FAIL + 110, 0, ease.hold], [FAIL + 220, 1, ease.hold], [FAIL + 330, 0, ease.hold], [FAIL + 440, 1]]);
+    key(k, F.markers[FAILED], "opacity", [[0, 1, ease.hold], [HOP, 0]]);
+    key(k, F.markers[LIVE], "opacity", [[0, 0, ease.hold], [HOP, 1]]);
+    phrases(k, F.route, [[0, "upstream-02"], [HOP, "upstream-03"]], { fade: 90, rise: 0 });
+    phrases(k, F.latency, [[0, "41 ms"], [FAIL, "timeout"], [HOP, "38 ms"]], { fade: 90, rise: 0 });
+    phrases(k, F.status, [[0, "All upstreams healthy"], [FAIL, "Upstream-02 is down"], [HOP, "Failover in 38 ms"]], { fade: 90, rise: 0 });
+    k.animateShader(F.finish, "glint", [{ t: 300, v: -0.5, ease: ease.inOut("sine") }, { t: HOP + 400, v: 1.5, ease: ease.hold }, { t: OUT + 600, v: -0.5, ease: ease.inOut("sine") }, { t: DURATION, v: 0.55 }]);
+    k.animateShader(R.lidFinish, "glint", [{ t: OUT, v: 0, ease: ease.inOut("sine") }, { t: DURATION, v: 0.7 }]);
+    k.cues(sheet, cues);
+    webResponsive(k, sheet, {
+      stack: ["Hero"],
+      gap: { laptop: 40, tablet: 44, mobile: 40 },
+      stackMobile: ["Rating plate"],
+      restyle: { "Display 72": { laptop: "Display 60", tablet: "Display 50", mobile: "Display 38" }, "Lead 20": { mobile: "Lead 17" } },
+      tweak: (kit, id, size) => {
+        for (const n of kit.named(id, "Shop light")) {
+          const f = kit.node(id);
+          kit.patch(n, { x: 0, y: 0, width: f.width, height: Math.max(f.height, 1024) });
+        }
+        if (size === "laptop") for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 40, padding: { top: 20, right: 0, bottom: 8, left: 0 } });
+        if (size === "tablet") {
+          const [first] = kit.named(id, "Nav link");
+          if (first) kit.patch(first, { visible: false });
+          for (const n of kit.named(id, "Nav links")) kit.patch(n, { itemSpacing: 22 });
+          for (const n of kit.named(id, "Nav right")) kit.patch(n, { itemSpacing: 24 });
+        }
+        for (const n of kit.named(id, "Visual")) kit.patch(n, { layoutSizingHorizontal: size === "tablet" || size === "mobile" ? "FILL" : "HUG" });
+        const w = size === "laptop" ? 520 : size === "tablet" ? 672 : size === "mobile" ? 335 : VIEW.w;
+        const h = size === "laptop" ? 500 : size === "tablet" ? 460 : size === "mobile" ? 300 : VIEW.h;
+        for (const n of kit.named(id, "Rack window")) kit.patch(n, { width: w, height: h, layoutSizingHorizontal: "FIXED" });
+        for (const n of kit.named(id, "Scene")) kit.patch(n, { width: w, height: h });
+        const q = pose(w, h);
+        for (const sc of kit.named(id, "Scene")) for (const n of kit.named(sc, "Rack")) kit.patch(n, framing(kit, sc, n, q));
+        if (size === "tablet") for (const n of kit.named(id, "Rating plate")) {
+          kit.patch(n, { layoutWrap: "WRAP" });
+          for (const c of kit.named(n, "Spec")) kit.patch(c, { layoutSizingHorizontal: "FIXED", width: kit.node(n).width / 2 });
+        }
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  machined_hero_default
+};