@popcraft/kit 0.44.1 → 0.46.0

package/dist/chunks/chunk-NTGS7HTI.js

@@ -0,0 +1,242 @@
+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 {
+  FIZZ,
+  bowl,
+  burst,
+  burstSticker,
+  callComponent,
+  chromeText,
+  confetti,
+  cutout,
+  display,
+  float,
+  halftone,
+  marquee,
+  maxBrand,
+  mono,
+  phone,
+  plate,
+  spark,
+  spin,
+  sticker,
+  wobble
+} from "./chunk-AGHBAKG6.js";
+import {
+  ground,
+  place
+} from "./chunk-T3XFQJUI.js";
+import {
+  logoBadge
+} from "./chunk-IL2F4BKM.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit,
+  preset
+} from "./chunk-5DE7NPKW.js";
+import {
+  ease
+} from "./chunk-6VIYCRKB.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/social/style-maximal-announcement.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Maximal SaaS announcement post";
+var LOOP = 8e3;
+var BEAT = 500;
+var STICK = ["Version burst", "Seconds sticker", "Formats sticker", "Site sticker"];
+var LAYOUT = {
+  post: {
+    lockup: { x: 48, y: 150 },
+    plate: { x: 48, y: 236, w: 640, style: "Hook 92", size: 92 },
+    line: { x: 48, y: 516, w: 560 },
+    phone: { x: 690, y: 150, s: 1 },
+    stick: { "Version burst": { x: 440, y: 20 }, "Seconds sticker": { x: 40, y: 640 }, "Formats sticker": { x: 300, y: 690 }, "Site sticker": { x: 600, y: 860 } },
+    call: { x: 48, y: 830 },
+    top: { x: -60, y: 30, w: 1200 },
+    foot: { x: -60, y: 980, w: 1200 },
+    burst: { x: 600, y: 520 },
+    dots: { x: -120, y: 700 }
+  },
+  portrait: {
+    lockup: { x: 48, y: 160 },
+    plate: { x: 48, y: 250, w: 640, style: "Hook 92", size: 92 },
+    line: { x: 48, y: 534, w: 580 },
+    phone: { x: 650, y: 210, s: 1.12 },
+    stick: { "Version burst": { x: 450, y: 30 }, "Seconds sticker": { x: 40, y: 700 }, "Formats sticker": { x: 330, y: 760 }, "Site sticker": { x: 420, y: 1110 } },
+    call: { x: 48, y: 1010 },
+    top: { x: -60, y: 36, w: 1200 },
+    foot: { x: -60, y: 1240, w: 1200 },
+    burst: { x: 600, y: 760 },
+    dots: { x: -120, y: 860 }
+  },
+  // Words inside x 64–940, y 250–1440; the bands and the foot are drawing only.
+  story: {
+    lockup: { x: 64, y: 268 },
+    plate: { x: 64, y: 360, w: 876, style: "Hook 120", size: 120 },
+    line: { x: 64, y: 690, w: 760 },
+    phone: { x: 420, y: 800, s: 1.5 },
+    stick: { "Version burst": { x: 710, y: 196 }, "Seconds sticker": { x: 64, y: 860 }, "Formats sticker": { x: 64, y: 1150 }, "Site sticker": { x: 64, y: 1270 } },
+    call: { x: 64, y: 1340 },
+    top: { x: -100, y: 90, w: 1280 },
+    foot: { x: -100, y: 1720, w: 1280 },
+    burst: { x: -200, y: 1180 },
+    dots: { x: -60, y: 1380 }
+  }
+};
+var cues = [
+  // Every move returns to rest: the loop starts where it ends.
+  wobble([...STICK], 0, { gap: BEAT, angle: 9, duration: 600 }),
+  wobble([...STICK], LOOP / 2, { gap: BEAT, angle: 9, duration: 600 }),
+  { layer: "Plate", preset: "pulse", at: 0, params: { duration: 1e3, amount: 0.03 } },
+  { layer: "Plate", preset: "pulse", at: 4e3, params: { duration: 1e3, amount: 0.03 } },
+  { layer: "Call", preset: "pulse", at: 2e3, params: { duration: 1e3, amount: 0.06 } },
+  { layer: "Call", preset: "pulse", at: 6e3, params: { duration: 1e3, amount: 0.06 } },
+  { layer: "Phone", preset: "shake", at: LOOP / 2, params: { duration: 500, distance: 18 } }
+];
+var style_maximal_announcement_default = defineTemplate({
+  id: "motion-saas-style-maximal-announcement",
+  meta: {
+    name: NAME,
+    description: 'An eight-second looping announcement post in a maximalist Y2K look for an AI clip maker: "AUTO-BOP IS HERE." in chrome on a black plate beside a liquid-metal phone whose clip cuts on every beat with a caption chip per cut. Stickers rock on the beat, bursts turn, marquee bands run, the plate thumps and confetti bursts at the half; everything is on the first frame, so it loops without a seam. Square with 4:5 and 9:16 cuts',
+    category: "animation",
+    tags: ["animation", "saas", "maximalist", "y2k", "chrome", "stickers", "starburst", "marquee", "creator", "video", "ai", "announcement", "launch", "post", "loop", "confetti", "instagram"],
+    platforms: ["instagram", "threads", "linkedin", "x", "tiktok"],
+    formats: ["post", "portrait-post", "story"],
+    useCases: ["announcement", "launch"],
+    created: "2026-10-02",
+    updated: "2026-10-16"
+  },
+  stableNumbers: true,
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit(NAME, preset("ig-post"));
+    k.quantizeGeometry = true;
+    maxBrand(k);
+    for (const [n, sz] of [["Hook 120", 120], ["Hook 92", 92]]) display(k, n, sz);
+    display(k, "Brand 36", 36, 1);
+    display(k, "Line 32", 32, 1.15);
+    display(k, "Burst 52", 52, 0.92);
+    display(k, "Seal 72", 72, 0.9);
+    display(k, "Chip 40", 40, 1);
+    display(k, "Call 36", 36, 1);
+    mono(k, "Tag 22", 22);
+    callComponent(k, { style: "Call 36", label: "Try it free \u2192", pad: [20, 34] });
+    const sheet = k.sheet;
+    ground(k, sheet, "Announcement", "paper");
+    k.timeline(sheet, { duration: LOOP, fps: 30 });
+    const L = LAYOUT.post;
+    halftone(k, sheet, 520, "pinkDeep", { name: "Dots", absolute: L.dots });
+    const big = burst(k, sheet, 560, "secondary", { name: "Big burst", points: 24, depth: 0.12, absolute: L.burst });
+    spin(k, big, 1 / 24, LOOP);
+    const band = (name, at, fill, rotate, right) => marquee(k, sheet, {
+      name,
+      width: at.w,
+      height: 92,
+      w: 160,
+      fill,
+      loop: LOOP,
+      cells: 8,
+      rotate,
+      right,
+      absolute: { x: at.x, y: at.y },
+      cell: (c) => {
+        spark(k, c, 46, fill === "night" ? "primary" : "night", { name: "Band spark" });
+        k.rect(c, 50, 22, fill === "night" ? "chromeHi" : "accent", { radius: 99, name: "Band pill", stroke: { color: "night", width: 3, align: "INSIDE" } });
+      }
+    });
+    band("Top band", L.top, "primary", -3, false);
+    band("Foot band", L.foot, "night", 3, true);
+    const ph = phone(k, sheet, { w: 330, h: 640, rotate: 6, absolute: { x: L.phone.x, y: L.phone.y } });
+    const cw = ph.sw - 36, ch = 440;
+    const clip = k.stack(ph.screen, { width: cw, height: ch, radius: 22, clip: true, name: "Clip" });
+    const shot = (name, fill, art, word) => {
+      const f = k.frame(clip, { x: 0, y: 0, width: cw, height: ch }, { name, fill });
+      k.patch(f, { layoutPositioning: "ABSOLUTE" });
+      halftone(k, f, 240, "night", { name: "Shot dots", absolute: { x: cw - 150, y: -80 }, step: 16 });
+      art(f);
+      const chip = sticker(k, f, word, { fill: "card", ink: "onCard", style: "Chip 40", shape: "tag", rotate: -5, pad: [6, 14], name: "Clip chip", absolute: { x: 18, y: ch - 100 } });
+      return { f, chip };
+    };
+    const sC = shot("Shot C", "primary", (f) => cutout(k, f, 240, 300, { top: "secondary", skin: "skinDeep", absolute: { x: 16, y: ch - 300 } }), "SLAPS!");
+    const sB = shot("Shot B", "accent", (f) => bowl(k, f, 220, 220, { fill: "card", absolute: { x: 30, y: 100 } }), "SAUCE");
+    const sA = shot("Shot A", "secondary", (f) => cutout(k, f, 230, 290, { top: "accent", absolute: { x: 20, y: ch - 290 } }), "THIS");
+    const track = k.stack(ph.screen, { width: cw, height: 110, fill: k.tint("onNight", 0.1), radius: 14, clip: true, name: "Track" });
+    for (let i = 0; i < 18; i++) {
+      const h = Math.round(24 + 60 * Math.abs(Math.sin(i * 1.7) * Math.cos(i * 0.6)));
+      k.rect(track, Math.round(cw / 18 - 5), h, i % 4 ? "card" : "primary", { radius: 3, name: "Wave bar", absolute: { x: Math.round(i * cw / 18 + 2), y: Math.round(55 - h / 2) } });
+    }
+    const head = k.rect(track, 4, 110, "chromeHi", { name: "Playhead", absolute: { x: 0, y: 0 } });
+    k.animate(head, "translateX", [{ t: 0, v: 0, ease: ease.linear }, { t: LOOP, v: cw - 4 }]);
+    const lock = k.stack(sheet, { direction: "HORIZONTAL", width: "HUG", gap: 12, align: "CENTER", fill: "card", radius: 999, padding: { top: 8, right: 22, bottom: 8, left: 8 }, stroke: { color: "night", width: 4, align: "INSIDE" }, name: "Lockup", absolute: L.lockup });
+    logoBadge(k, lock, { fill: "night", size: 34, pad: 9, radius: 999 });
+    k.text(lock, "{{brand.name}}", { style: "Brand 36", color: "onCard", autoWidth: true, name: "Brand name" });
+    const pl = plate(k, sheet, { name: "Plate", width: L.plate.w, rotate: -3, absolute: L.plate, pad: [24, 30] });
+    chromeText(k, pl, "AUTO-BOP\nIS HERE.", { style: L.plate.style, name: "Plate words", width: "FILL", size: 92 });
+    const line = k.stack(sheet, { width: L.line.w, fill: "card", radius: 16, padding: { top: 16, right: 22, bottom: 16, left: 22 }, stroke: { color: "night", width: 4, align: "INSIDE" }, effects: [{ type: "DROP_SHADOW", color: k.color("night"), offset: { x: 7, y: 7 }, blur: 0, spread: 0, visible: true }], name: "Line", absolute: L.line });
+    k.patch(line, { rotation: 1.5 });
+    k.text(line, `${FIZZ.name} ${FIZZ.version} cuts every clip on the beat. Drop in a long video and post the Reels.`, { style: "Line 32", color: "onCard", width: "FILL", name: "Line words" });
+    burstSticker(k, sheet, [{ text: "NEW\nIN 3.0", style: "Burst 52" }], { size: 220, fill: "primary", ink: "onPrimary", name: "Version burst", rotate: 12, absolute: L.stick["Version burst"] });
+    burstSticker(k, sheet, [{ text: `${FIZZ.seconds}s`, style: "Seal 72" }, { text: "TO CLIPS", style: "Tag 22" }], { size: 220, fill: "accent", ink: "onAccent", name: "Seconds sticker", points: 30, depth: 0.07, rotate: -8, absolute: L.stick["Seconds sticker"] });
+    sticker(k, sheet, "9:16 \xB7 1:1 \xB7 4:5", { fill: "secondary", ink: "onSecondary", style: "Tag 22", rotate: -6, pad: [12, 18], name: "Formats sticker", absolute: L.stick["Formats sticker"] });
+    sticker(k, sheet, "{{brand.site}}", { fill: "card", ink: "onCard", style: "Tag 22", shape: "tag", rotate: 4, name: "Site sticker", absolute: L.stick["Site sticker"] });
+    k.instance(sheet, "Call", { Label: "Try it free \u2192" }, { name: "Call", absolute: L.call });
+    k.cues(sheet, cues);
+    const SLOT = 2 * BEAT;
+    [sA, sB, sC].forEach((sh, i) => {
+      const on = (t) => Math.floor(t / SLOT) % 3 === i;
+      const keys = [{ t: 0, v: on(0) ? 1 : 0, ease: ease.hold }];
+      for (let t = SLOT; t < LOOP - SLOT; t += SLOT) keys.push({ t: t - 1, v: on(t - 1) ? 1 : 0, ease: ease.hold }, { t, v: on(t) ? 1 : 0, ease: ease.hold });
+      const lastOn = i === 0;
+      keys.push({ t: LOOP - SLOT - 1, v: on(LOOP - SLOT - 1) ? 1 : 0, ease: ease.hold }, { t: LOOP - SLOT, v: lastOn ? 1 : 0 });
+      k.animate(sh.f, "opacity", keys);
+      k.patch(sh.chip, { anchorX: 0.5, anchorY: 0.5 });
+      const starts = [];
+      for (let t = SLOT; t < LOOP - SLOT; t += SLOT) if (on(t) && !on(t - 1)) starts.push(t);
+      if (lastOn) starts.push(LOOP - SLOT);
+      const pop = starts.flatMap((t) => [{ t, v: 0.3, ease: ease.back(2.6) }, { t: t + 300, v: 1, ease: ease.hold }]);
+      if (pop.length) {
+        delete pop[pop.length - 1].ease;
+        for (const p of ["scaleX", "scaleY"]) k.animate(sh.chip, p, pop);
+      }
+    });
+    float(k, k.named(sheet, "Dots")[0], 16, 1, LOOP);
+    confetti(k, sheet, { x: L.phone.x + 165, y: L.phone.y + 260, at: LOOP / 2, n: 34, spread: 480, seed: 5, life: 1800, name: "Confetti" });
+    const lay = (kit, root, l) => {
+      const at = (name, p) => {
+        for (const id of kit.named(root, name)) kit.patch(id, { x: p.x, y: p.y });
+      };
+      at("Lockup", l.lockup);
+      at("Call", l.call);
+      at("Big burst", l.burst);
+      at("Dots", l.dots);
+      for (const n of STICK) at(n, l.stick[n]);
+      for (const id of kit.named(root, "Plate")) kit.patch(id, { x: l.plate.x, y: l.plate.y, width: l.plate.w });
+      for (const id of kit.named(root, "Plate words")) kit.restyle(id, l.plate.style);
+      for (const id of kit.named(root, "Line")) kit.patch(id, { x: l.line.x, y: l.line.y, width: l.line.w });
+      place(kit, root, "Phone rig", l.phone.x, l.phone.y, l.phone.s);
+      for (const id of kit.named(root, "Top band")) kit.patch(id, l.top ? { x: l.top.x, y: l.top.y, width: l.top.w } : { visible: false });
+      for (const id of kit.named(root, "Foot band")) kit.patch(id, { x: l.foot.x, y: l.foot.y, width: l.foot.w });
+      for (const id of kit.named(root, "Confetti")) kit.patch(id, { x: Math.round(l.phone.x + 165 * l.phone.s), y: Math.round(l.phone.y + 260 * l.phone.s) });
+    };
+    lay(k, sheet, L);
+    k.variants(sheet, [
+      { preset: "ig-portrait", adjust: (kit, id) => lay(kit, id, LAYOUT.portrait) },
+      { preset: "ig-story", adjust: (kit, id) => lay(kit, id, LAYOUT.story) }
+    ]);
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  style_maximal_announcement_default
+};

package/dist/chunks/chunk-NVPPCPYU.js

@@ -0,0 +1,204 @@
+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 {
+  LATCH,
+  SPIKE,
+  WINDOW,
+  backdrop,
+  darkBrand,
+  fitBackdrop,
+  flagRows,
+  flagWindow,
+  lift,
+  notice
+} from "./chunk-HRPEKC4I.js";
+import {
+  camera,
+  float,
+  reelCuts,
+  reelSheet,
+  seenAt,
+  wideCut
+} from "./chunk-7LZFBGFD.js";
+import {
+  clicks,
+  glide,
+  pointer
+} from "./chunk-EWHVD52F.js";
+import {
+  captionStrip,
+  captionSwap
+} from "./chunk-WO4SSPCC.js";
+import {
+  score
+} from "./chunk-S7PL2DU7.js";
+import {
+  hide,
+  restyle
+} from "./chunk-T3XFQJUI.js";
+import {
+  logoBadge,
+  pill
+} from "./chunk-IL2F4BKM.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit,
+  preset
+} from "./chunk-5DE7NPKW.js";
+import {
+  ease
+} from "./chunk-6VIYCRKB.js";
+import {
+  COUNTER_PATH
+} from "./chunk-YY6HBXER.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/motion/style-dark-feature-demo.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var S = score("tension");
+var { beat } = S;
+var NAME = "Dark SaaS feature demo short";
+var STEP = [4, 10, 16, 24];
+var CROSS = beat(20);
+var BACK = 2e3;
+var W = WINDOW;
+var REST = { x: 716, y: 394 };
+var TARGETS = [{ x: 690, y: 528 }, { x: 468, y: 268 }];
+var SHOTS = [
+  { t: beat(STEP[0]), zoom: 1.75, x: 560, y: 480 },
+  { t: beat(STEP[1]), zoom: 1.5, x: 400, y: 200 },
+  { t: beat(STEP[2]), duration: 600, zoom: 1.28, x: 480, y: 330 },
+  { t: beat(STEP[3]), duration: 600, zoom: 1 }
+];
+var cues = [
+  { layer: "Brand row", preset: "fade-in", at: 0, params: { duration: 300 } },
+  { layer: "Hook", preset: "words-in", at: 0, params: { duration: 380, amount: 60 } },
+  { layer: "Stage", preset: "rise-in", at: 100, params: { duration: 500 } },
+  { layer: "Progress", preset: "fade-in", at: beat(2), params: { duration: 300 } },
+  ...STEP.slice(0, 3).map((b, i) => ({ layer: `Progress fill ${i + 1}`, preset: "wipe-in", at: beat(b), params: { duration: beat(STEP[i + 1] - b), ease: ease.linear } })),
+  // One: the guardrail goes on, and its line draws across the chart.
+  { layer: "Guardrail", preset: "pop-in", at: beat(STEP[0] + 2), params: { duration: 300 } },
+  { layer: "Threshold", preset: "wipe-in", at: beat(STEP[0] + 2), params: { duration: 900 } },
+  // Two: half the traffic.
+  { layer: "Step fill", preset: "wipe-in", at: beat(STEP[1] + 2), params: { duration: 500 }, stagger: { delay: 350 } },
+  // Three: the rate crosses the line.
+  { layer: "Stage", preset: "shake", at: CROSS, params: { duration: 400, distance: 10 } },
+  { layer: "Notice", preset: "drop-in", at: CROSS, params: { duration: 320 } },
+  { layer: "Error area", preset: "fade-in", at: CROSS + BACK, params: { duration: 500 } },
+  { layer: "Error dot", preset: "pop-in", at: CROSS + BACK + 300, params: { duration: 300 } },
+  { layer: "Call", preset: "fade-in", at: beat(2), params: { duration: 300 } },
+  { layer: "Call", preset: "pulse", at: beat(26), params: { duration: 500, amount: 0.06 } },
+  { layer: "Call", preset: "pulse", at: beat(29), params: { duration: 500, amount: 0.05 } },
+  { layer: "Call", preset: "pulse", at: beat(31), params: { duration: 400, amount: 0.05 } }
+];
+var counts = [
+  // Each rests at how the story ends: nothing rolled out, the rate back where it was.
+  { layer: "Percent figure", at: beat(STEP[1] + 2), duration: beat(3), counter: { from: 0, to: 50, suffix: "%", value: 0 } },
+  { layer: "Error figure", at: beat(STEP[2] + 1), duration: beat(3), ease: ease.named("cubic", "in"), counter: { from: 0.02, to: 1.4, decimals: 2, suffix: "%", value: 0.02 } },
+  { layer: "Notice figure", at: CROSS, duration: BACK, tick: 500, counter: { from: 0, to: 4, prefix: "Rolled back in ", suffix: " s" } }
+];
+var swaps = [captionSwap(["Set a line for errors.", "Send half your traffic over.", "Errors spike. It pulls back.", "Nobody paged. Fix it Monday."], 0, S.duration - 30, { stagger: 55, in: 260, out: 200, rise: 26 })];
+var style_dark_feature_demo_default = defineTemplate({
+  id: "motion-saas-style-dark-feature-demo",
+  meta: {
+    name: NAME,
+    description: "A 16-second feature demo in the dark precision look: a pointer works a product window step by step while a camera zooms to each click. A guardrail line draws across a chart, a rollout counts to 50%, the error rate spikes over the line and the product rolls itself back, with a step bar and burned-in captions. Music, 9:16 with square and 16:9 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "dark", "dark mode", "demo", "feature", "screen recording", "zoom", "cursor", "counter", "chart", "developer tools", "feature flags", "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;
+    darkBrand(k, { hook: "Rolled back before the pager rang." });
+    k.textStyle("Hook 88", { size: 88, fontWeight: 700, letterSpacing: -4.2, lineHeight: 84 });
+    k.textStyle("Hook 64", { size: 64, fontWeight: 700, letterSpacing: -2.8, lineHeight: 64 });
+    k.textStyle("Brand 30", { size: 30, fontWeight: 600, letterSpacing: -0.6, lineHeight: 36 });
+    k.textStyle("Caption 38", { size: 38, fontWeight: 600, letterSpacing: -0.8, lineHeight: 46 });
+    k.textStyle("Button 30", { size: 30, fontWeight: 600, letterSpacing: -0.5, lineHeight: 38 });
+    k.textStyle("Notice 20", { size: 20, fontWeight: 600, letterSpacing: -0.2, lineHeight: 26, fontFeatures: { tnum: 1 } });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 30", label: `Try the guardrail at ${LATCH.site}`, pad: [20, 34], radius: 10 });
+    const sheet = reelSheet(k, S, { name: "Feature demo", gap: 22 });
+    backdrop(k, sheet, 1080, 1920);
+    flagRows(k, sheet, { x: 140, y: 1486, width: 800, rows: 6 });
+    const brand = k.stack(sheet, { direction: "HORIZONTAL", gap: 14, align: "CENTER", name: "Brand row" });
+    logoBadge(k, brand, { fill: "primary", size: 28, radius: 8 });
+    k.text(brand, "{{brand.name}} guardrails", { style: "Brand 30", color: "text", autoWidth: true, name: "Brand name" });
+    k.text(sheet, "{{brand.hook}}", { style: "Hook 88", color: "text", name: "Hook" });
+    const stage = k.stack(sheet, { width: W.width, height: W.height, clip: true, radius: 14, effects: [lift(34, 90, 0.6)], name: "Stage" });
+    const cam = k.frame(stage, { x: 0, y: 0, width: W.width, height: W.height }, { name: "Camera" });
+    const win = flagWindow(k, cam, { absolute: { x: 0, y: 0 }, shadow: false, percent: "0%", values: SPIKE, status: "Rolled back" });
+    notice(k, stage, { style: "Notice 20", width: 190, absolute: { x: 530, y: 12 } });
+    const p = pointer(k, stage, { ...REST, size: 96, fill: "onCard", edge: "well", ring: "signal" });
+    const bars = k.stack(sheet, { direction: "HORIZONTAL", gap: 8, name: "Progress" });
+    for (let i = 1; i <= 3; i++) {
+      const track = k.stack(bars, { height: 6, fill: "line", radius: 3, clip: true, name: "Progress track" });
+      k.rect(track, "FILL", 6, "primary", { name: `Progress fill ${i}` });
+    }
+    captionStrip(k, sheet, swaps[0].words[0], { style: "Caption 38", fill: "card", ink: "onCard", radius: 12, pad: [16, 26], stroke: { color: "edge", width: 1, align: "INSIDE" } });
+    k.instance(sheet, "Button", { Label: "Try the guardrail at {{brand.site}}" }, { name: "Call" });
+    const fills = k.named(win.win, "Step fill");
+    fills.slice(2).forEach((id) => k.patch(id, { name: "Step idle", opacity: 0 }));
+    fills.slice(0, 2).forEach((id) => {
+      k.patch(id, { opacity: 0 });
+      k.animate(id, "opacity", [{ t: beat(STEP[1] + 2) - 1, v: 0, ease: ease.hold }, { t: beat(STEP[1] + 2), v: 1, ease: ease.hold }, { t: CROSS + 200, v: 1, ease: ease.out("cubic") }, { t: CROSS + 900, v: 0 }]);
+    });
+    k.counts(sheet, counts);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    k.animate(win.percent, COUNTER_PATH, [{ t: CROSS + 200, v: 50, ease: ease.out("expo") }, { t: CROSS + 1100, v: 0 }]);
+    for (const id of k.named(win.win, "Error figure")) k.animate(id, COUNTER_PATH, [{ t: CROSS + 600, v: 1.4, ease: ease.out("cubic") }, { t: CROSS + BACK, v: 0.02 }]);
+    for (const id of k.named(win.win, "Status label")) k.animate(id, "text.content", [{ t: 0, v: "Healthy", ease: ease.hold }, { t: CROSS, v: "Rolling back", ease: ease.hold }, { t: CROSS + BACK, v: "Rolled back" }]);
+    k.animate(win.chart.line, "trim.end", [{ t: beat(STEP[2]), v: 0, ease: ease.linear }, { t: CROSS, v: win.chart.crossing, ease: ease.linear }, { t: CROSS + BACK, v: 1 }]);
+    camera(k, cam, W.width, W.height, SHOTS);
+    const to = (i) => {
+      const at = seenAt(W.width, W.height, SHOTS[i], 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: beat(STEP[0] + 1.6), ...to(0) },
+      { t: beat(STEP[1]), ...to(0) },
+      { t: beat(STEP[1] + 1.6), ...to(1) },
+      { t: beat(STEP[2]), ...to(1) },
+      { t: beat(STEP[2] + 2), dx: -60, dy: 84 },
+      { t: beat(STEP[3]), dx: -60, dy: 84 },
+      { t: beat(STEP[3] + 1.5), dx: 0, dy: 0 }
+    ]);
+    clicks(k, p, [beat(STEP[0] + 2), beat(STEP[1] + 2)]);
+    k.variants(sheet, [...reelCuts({ post: 40, portrait: 70 }, {
+      post: (kit, id) => {
+        kit.patch(id, { itemSpacing: 18, counterAxisSpacing: 18, padding: { top: 36, right: 140, bottom: 36, left: 140 } });
+        fitBackdrop(kit, id);
+        hide(kit, id, ["Brand row", "Other flags"]);
+        restyle(kit, id, "Hook", "Hook 64");
+      }
+    }).slice(0, 1), wideCut(640, (kit, id, right) => {
+      const scale = right.width / W.width, top = right.y + Math.round((right.height - W.height * scale - 36) / 2);
+      fitBackdrop(kit, id);
+      float(kit, id, "Stage", right.x, top, { scale });
+      float(kit, id, "Progress", right.x, top + Math.round(W.height * scale) + 30, { width: right.width });
+      hide(kit, id, ["Other flags"]);
+    })]);
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  style_dark_feature_demo_default
+};

package/dist/chunks/chunk-NVUBYA47.js

@@ -0,0 +1,121 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  brand,
+  caption,
+  captionCues,
+  captionParts,
+  column,
+  glow,
+  rig,
+  sizes,
+  stage
+} from "./chunk-NKVEHB6Z.js";
+import {
+  scrollingRows
+} from "./chunk-UK25LSIG.js";
+import {
+  key
+} from "./chunk-BMLF62K7.js";
+import {
+  deviceShadow
+} from "./chunk-F4V4REOM.js";
+import {
+  PHONE_SCREEN,
+  appScreens
+} from "./chunk-ZRM763FB.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit,
+  preset
+} from "./chunk-5DE7NPKW.js";
+import {
+  ease
+} from "./chunk-6VIYCRKB.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/motion3d/screen-wall.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 1e4;
+var FPS = 30;
+var SIZES = ["video-1080p", "ig-story"];
+var SCREENS = ["Screen / Home", "Screen / Insights", "Screen / Goals", "Screen / Send"];
+var CAPTION = { name: "Caption", kicker: "Available now", title: "Everything about your money. One app.", body: "Accounts, budgets, goals and bills \u2014 on iPhone, iPad, Android and the web.", cta: "Get Fern free" };
+var CUES = [
+  { layer: "Caption", preset: "scale-in", at: 1400, params: { duration: 800, amount: 0.86 } },
+  ...captionCues(CAPTION, 1600)
+];
+function build(k, sheet, s) {
+  k.nameSheet(sheet, `Screen wall \xB7 ${preset(s.preset).name}`);
+  glow(k, sheet, "primary", Math.round(1500 * s.u), s.W * 0.5, s.H * 0.5, 0.5);
+  const scene = stage(k, sheet, s, { duration: DURATION, fps: FPS, perspective: 2e3 * s.u });
+  const rows = s.tall ? 6 : 4, perRow = s.tall ? 8 : 12, gap = 60;
+  const wall = rig(k, scene, s, "Wall", PHONE_SCREEN.width, PHONE_SCREEN.height, s.W / 2, s.H / 2);
+  k.patch(wall, { scaleX: 0.62, scaleY: 0.62, rotateX: 30 });
+  const turn = k.group(wall, { x: 0, y: 0, width: PHONE_SCREEN.width, height: PHONE_SCREEN.height }, { name: "Wall turn" });
+  k.patch(turn, { rotation: -20 });
+  const pitch = PHONE_SCREEN.width + gap;
+  scrollingRows(k, turn, {
+    rows,
+    perRow,
+    card: PHONE_SCREEN,
+    gap,
+    offset: true,
+    wrap: SCREENS.length,
+    // Centred on the wall: half the row to the left of it, the rows stacked about it.
+    x: () => Math.round(-(perRow * pitch) / 2 + PHONE_SCREEN.width / 2),
+    y: (r) => Math.round((r - (rows - 1) / 2) * (PHONE_SCREEN.height + gap)),
+    rate: (r) => (r % 2 ? 1 : -1) * (70 + r % 3 * 30),
+    make: (row, r, i) => {
+      const card = k.instance(row, SCREENS[(i + r) % SCREENS.length], {}, { name: `Screen ${r + 1}.${i + 1}` });
+      k.patch(card, { effects: [deviceShadow(0.4, 30, 60)] });
+      return card;
+    }
+  });
+  key(k, wall, "rotateX", [[0, 44, ease.out("expo")], [1600, 30, ease.inOut("sine")], [DURATION, 24]]);
+  key(k, wall, "translateY", [[0, k.node(wall).translateY + Math.round(420 * s.u), ease.out("expo")], [1600, k.node(wall).translateY]]);
+  key(k, scene, "scene3d.camera.z", [[0, 900, ease.inOut("sine")], [DURATION, -500]]);
+  key(k, scene, "scene3d.camera.x", [[0, -240, ease.inOut("sine")], [DURATION, 240]]);
+  k.rect(sheet, s.W, s.H, "background", { name: "Wash", opacity: 0.18, absolute: { x: 0, y: 0 } });
+  captionParts(k, s, { kicker: CAPTION.kicker, cta: CAPTION.cta });
+  const col = column(s, s.tall ? 96 : 360);
+  const block = caption(k, sheet, s, { ...CAPTION, width: col.width, align: "CENTER", panel: true, at: { x: col.x, y: 0 } });
+  const laid = k.finish().nodes[block];
+  k.patch(block, { y: Math.round((s.H - laid.height) / 2) });
+  k.cues(sheet, CUES);
+}
+var screen_wall_default = defineTemplate({
+  id: "motion-3d-screen-wall",
+  meta: {
+    name: "Screen wall",
+    description: "An endless 3D wall of your app's screens scrolls row against row while the camera flies in across it and a frosted caption comes up \u2014 a 10-second launch shot at 16:9 and 9:16, 30 fps. Every card is a screen component: edit one and the wall follows",
+    category: "animation",
+    tags: ["animation", "3d", "app", "screens", "wall", "screenshots", "launch", "promo", "fly-through"],
+    platforms: ["youtube", "instagram", "tiktok", "x", "linkedin", "web"],
+    formats: ["video", "ad", "reel", "intro"],
+    useCases: ["launch", "announcement"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  motion: { cues: CUES },
+  build() {
+    const k = new Kit("Screen wall", preset(SIZES[0]));
+    brand(k, "dark");
+    appScreens(k, ["Home", "Insights", "Goals", "Send", "Screenshot"]);
+    const [cover] = sizes(k, SIZES, (sheet, s) => build(k, sheet, s));
+    k.setCover(cover);
+    return k.finish();
+  }
+});
+
+export {
+  screen_wall_default
+};

package/dist/chunks/chunk-NWCRNNU3.js

@@ -0,0 +1,74 @@
+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 {
+  FOLIO,
+  caption,
+  comicMeta,
+  comicSetup,
+  folio,
+  pageGrid,
+  panel,
+  rows,
+  say,
+  sfx,
+  slantTier,
+  tier,
+  tierBox,
+  tilted
+} from "./chunk-ANDXJQ7W.js";
+import {
+  defineTemplate
+} from "./chunk-FC6VBE7Y.js";
+import {
+  Kit,
+  preset
+} from "./chunk-5DE7NPKW.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-W5QYHNL2.js";
+
+// templates/src/print/comic-hero-cascade.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var comic_hero_cascade_default = defineTemplate({
+  id: "comic-cascade",
+  meta: comicMeta("Cascade page", 'Page five of "Nightstar: Blackout": a surge sets a neon billboard falling down the page toward Rosa, Nightstar dives in to sweep her clear on a canted frame, and Voltrix laughs in the flames', ["cascade", "rescue", "falling", "sound effects"]),
+  stableNumbers: true,
+  build() {
+    const k = new Kit("Cascade page", preset("comic-page"));
+    comicSetup(k);
+    drawPage(k);
+    return k.finish();
+  }
+});
+function drawPage(k) {
+  const g = 12, { W, H } = pageGrid(k, k.sheet, 36, g);
+  const [h1, h2, h3, h4] = rows(H - FOLIO, g, [24, 30, 24, 22]);
+  const t1 = tierBox(k, k.sheet, W, h1, "Tier 1");
+  panel(k, t1, tier(W, h1, [1], g)[0], "cascade-1", { ground: "heroG1", name: "The surge" });
+  sfx(k, t1, "Vzzzt!", { x: W - 220, y: h1 - 100, w: 190, h: 90, deg: -6, seed: 2 });
+  const t2 = tierBox(k, k.sheet, W, h2, "Tier 2");
+  const [a, b] = slantTier(W, h2, [2, 3], 26, g);
+  panel(k, t2, a, "cascade-2", { ground: "heroG2", name: "The billboard falls" });
+  panel(k, t2, b, "cascade-3", { ground: "heroG3", name: "Rosa looks up" });
+  caption(k, t2, "Twelve storeys of steel and neon.", { x: 10, y: 10, width: 170 });
+  say(k, t2, "Oh no\u2014", { x: W - 110, y: 12, width: 96, to: { x: b.x + b.width * 0.55, y: h2 * 0.4 } });
+  const t3 = tierBox(k, k.sheet, W, h3, "Tier 3");
+  panel(k, t3, tilted(0, 0, W, h3, -24, 24), "cascade-4", { ground: "heroG1", name: "The save" });
+  sfx(k, t3, "Kranng!", { x: W - 360, y: 18, w: 330, h: 120, deg: 8, big: true, fill: "primary", seed: 17 });
+  const t4 = tierBox(k, k.sheet, W, h4, "Tier 4");
+  const [c, d] = tier(W, h4, [2, 3], g);
+  panel(k, t4, c, "cascade-5", { ground: "heroG2", name: "Shielded" });
+  panel(k, t4, d, "cascade-6", { ground: "heroG3", name: "Voltrix laughs" });
+  say(k, t4, "Stay down. Stay behind me.", { x: 10, y: 10, width: 128, to: { x: c.width * 0.4, y: h4 * 0.35 } });
+  say(k, t4, "Ha! Saved the girl. Lost the city.", { x: W - 170, y: 10, width: 160, to: { x: d.x + d.width * 0.5, y: h4 * 0.3 } });
+  folio(k, k.sheet, "Nightstar: Blackout \u2014 page 5");
+}
+
+export {
+  comic_hero_cascade_default,
+  drawPage
+};