@popcraft/kit 0.31.0 → 0.32.0

package/dist/chunks/chunk-ORTGNUHE.js

@@ -0,0 +1,128 @@
+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 {
+  SERVICES,
+  SPANWISE,
+  body,
+  code,
+  dataBrand,
+  dataButton,
+  display,
+  figure,
+  heatMap,
+  label,
+  lockup,
+  panel,
+  servicesTable,
+  ts
+} from "./chunk-G3YVVHCF.js";
+import {
+  EMAIL_FPS,
+  HEADER
+} from "./chunk-K3QP3IUF.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit
+} from "./chunk-2P7ISWIA.js";
+import {
+  ease
+} from "./chunk-YYQUCS6P.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/email/style-data-header.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Data SaaS email header";
+var DURATION = 6e3;
+var ROW_H = 36;
+var ROWS = SERVICES.slice(1, 5);
+var FLAG = ROWS.findIndex((s) => s.anomaly);
+var cues = [
+  { layer: "Open button", preset: "pulse", at: 2400, params: { duration: 800, amount: 0.05 } },
+  { layer: "Anomaly p99", preset: "pulse", at: 1300, params: { duration: 800, amount: 0.08 } },
+  { layer: "Strip cell", preset: "pulse", at: 3e3, stagger: { delay: 50, order: "selection" }, params: { duration: 500, amount: 0.3 } }
+];
+var style_data_header_default = defineTemplate({
+  id: "email-saas-style-data-header",
+  meta: {
+    name: `${NAME} (animated GIF)`,
+    description: "A 600 \xD7 300 animated header for a launch email in a data-dense enterprise look for an observability platform: the sender, the news, the button and a small console of services with a sparkline each, one flagged red, all on the first frame; then a cobalt scan bar runs down the rows and settles on the anomaly, its figure pulses and latency cells light in a wave, all returning to where they began. A seamless 6-second GIF",
+    category: "email",
+    tags: ["email", "gif", "animated", "header", "banner", "saas", "data", "dashboard", "enterprise", "observability", "devops", "launch", "announcement", "newsletter", "loop"],
+    platforms: ["email"],
+    formats: ["email", "banner"],
+    useCases: ["announcement", "launch", "newsletter"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, loop: true },
+  build() {
+    const k = new Kit(NAME, HEADER);
+    k.quantizeGeometry = true;
+    dataBrand(k);
+    ts(k, "Brand 16", display(16));
+    ts(k, "Label 12", label(12));
+    ts(k, "Offer 28", display(28, { lead: 1.08 }));
+    ts(k, "When 13", body(13));
+    ts(k, "Button 13", display(13));
+    ts(k, "Mono 12", code(12));
+    ts(k, "Name 13", code(13, 600));
+    ts(k, "Fig 13", figure(13, 500));
+    dataButton(k, "Button", { style: "Button 13", label: "See what changed", pad: [9, 14] });
+    const sheet = k.sheet;
+    k.flowSheet(sheet, 0, { top: 0, right: 24, bottom: 0, left: 24 }, "paper", "CENTER", "MIN");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: EMAIL_FPS });
+    const band = k.stack(sheet, { direction: "HORIZONTAL", gap: 20, align: "CENTER", name: "Band" });
+    const words = k.stack(band, { width: 236, gap: 10, name: "Words" });
+    const top = k.stack(words, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Brand row" });
+    lockup(k, top, { size: 22, style: "Brand 16" });
+    k.text(top, `Release ${SPANWISE.version}`, { style: "Mono 12", color: "onPaper", autoWidth: true, name: "Release" });
+    k.text(words, "Every anomaly\nnames its deploy.", { style: "Offer 28", color: "text", name: "Offer" });
+    k.text(words, "Change correlation lines each regression up with the deploy behind it, in seconds.", { style: "When 13", color: "onPaper", name: "When" });
+    k.instance(words, "Button", { Label: "See what changed" }, { name: "Open button" });
+    const con = panel(k, band, { width: 296, name: "Console", lift: 0.5 });
+    const bar = k.stack(con, { direction: "HORIZONTAL", height: 30, align: "CENTER", justify: "SPACE_BETWEEN", padding: { top: 0, right: 12, bottom: 0, left: 12 }, name: "Title bar" });
+    k.text(bar, "SERVICES \xB7 PROD", { style: "Label 12", color: "onCard", autoWidth: true, name: "Panel title" });
+    const lv = k.stack(bar, { direction: "HORIZONTAL", width: "HUG", gap: 6, align: "CENTER", name: "Live" });
+    const live = k.ellipse(lv, 7, "up", { name: "Live dot" });
+    k.text(lv, "LIVE", { style: "Label 12", color: "cardMuted", autoWidth: true, name: "Live word" });
+    k.rect(con, "FILL", 1, "line", { name: "Bar rule" });
+    const t = servicesTable(k, con, { w: 296, rowH: ROW_H, rows: ROWS, cols: ["service", "p99", "trend"], widths: { p99: 66, trend: 70 }, styles: { head: "Label 12", name: "Name 13", sub: "Mono 12", fig: "Fig 13" }, pad: 12, headH: 24 });
+    const an = t.rows[FLAG];
+    if (an.glow) k.patch(an.glow, { opacity: 1 });
+    if (an.flag) k.patch(an.flag, { visible: false });
+    k.patch(an.p99, { characters: "2,340 ms" });
+    for (const r of t.rows) for (const reg of k.named(r.row, "Service region")) k.patch(reg, { visible: false });
+    const scan = k.rect(t.body, 4, ROW_H, "primary", { name: "Scan edge", absolute: { x: 0, y: FLAG * ROW_H } });
+    const sb = k.stack(con, { padding: { top: 8, right: 12, bottom: 10, left: 12 }, fill: "well", name: "Strip box" });
+    const st = heatMap(k, sb, { cols: 17, rows: 1, cell: 14, gap: 2.5, seed: 9, name: "Strip" });
+    for (const c of st.cells) k.patch(c, { name: "Strip cell" });
+    k.cues(sheet, cues);
+    const dy = (row) => (row - FLAG) * ROW_H;
+    k.animate(scan, "translateY", [
+      { t: 0, v: dy(0), ease: ease.hold },
+      { t: 300, v: dy(0), ease: ease.inOut("cubic") },
+      { t: 1100, v: dy(FLAG), ease: ease.hold },
+      { t: 5e3, v: dy(FLAG), ease: ease.inOut("cubic") },
+      { t: 5800, v: dy(0), ease: ease.hold },
+      { t: DURATION, v: dy(0) }
+    ]);
+    const keys = Array.from({ length: 13 }, (_, i) => ({ t: i * 500, v: i % 2 ? 0.3 : 1, ease: ease.hold }));
+    delete keys[keys.length - 1].ease;
+    k.animate(live, "opacity", keys);
+    return k.finish();
+  }
+});
+
+export {
+  style_data_header_default
+};

package/dist/chunks/chunk-OSLU6VYJ.js

@@ -0,0 +1,194 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  burst,
+  diwaliBrand,
+  diyas,
+  drawRangoli,
+  fitScene,
+  hangings,
+  lightDiyas,
+  lightWriting,
+  rangoli,
+  sky,
+  writeLight
+} from "./chunk-A5WDD3S4.js";
+import {
+  SERIF
+} from "./chunk-PFCHOCEN.js";
+import {
+  bed
+} from "./chunk-42LEBOKV.js";
+import {
+  feedVariants,
+  pill,
+  verticalPadding
+} from "./chunk-LEKU2ZW3.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset,
+  swapTimes
+} from "./chunk-2P7ISWIA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/motion/diwali-lamps-reel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var MUSIC = bed("festive", 28);
+var beat = MUSIC.beat;
+var DURATION = MUSIC.duration;
+var lamps = (front, side, back) => [
+  { x: 540, y: front, size: 88 },
+  { x: 345, y: front, size: 88 },
+  { x: 735, y: front, size: 88 },
+  { x: 150, y: front, size: 88 },
+  { x: 930, y: front, size: 88 },
+  ...side.flatMap((y, i) => [{ x: 104 + i % 2 * 14, y, size: 70 - i * 8 }, { x: 976 - i % 2 * 14, y, size: 70 - i * 8 }]),
+  ...back ? [{ x: 250, y: back, size: 124 }, { x: 830, y: back, size: 124 }, { x: 540, y: back + 30, size: 132 }] : []
+];
+var STORY = {
+  w: 1080,
+  h: 1920,
+  u: 1,
+  loopMs: DURATION,
+  dust: { top: 690, bottom: 800 },
+  fireworks: [{ x: 150, y: 806, r: 132 }, { x: 934, y: 800, r: 140 }, { x: 600, y: 806, r: 84 }],
+  roofs: { y: 904, rise: 160 },
+  rangoli: { x: 540, y: 1136, r: 222 },
+  garlands: [{ y: 44, sag: 76, swags: 3, flower: 25, toran: true }],
+  lanterns: [{ x: 66, drop: 170, size: 92 }, { x: 1014, drop: 236, size: 104 }],
+  diyas: lamps(1612, [1370, 1176, 1e3], 1810)
+};
+var underline = (x0, y0, w) => {
+  const pts = [];
+  for (let i = 0; i <= 24; i++) {
+    const t = i / 24;
+    pts.push([Math.round(x0 + w * 0.86 * t), Math.round(y0 + 12 * Math.sin(t * Math.PI * 2.2))]);
+  }
+  const cx = x0 + w * 0.86, cy = y0 + 12 * Math.sin(Math.PI * 2.2) - 26;
+  for (let i = 1; i <= 14; i++) {
+    const a = Math.PI / 2 - i / 14 * Math.PI * 1.7;
+    pts.push([Math.round(cx + 30 * Math.cos(a) * (1 + i / 28)), Math.round(cy + 26 * Math.sin(a))]);
+  }
+  return pts;
+};
+var TRAIL = underline(140, 514, 640);
+var swaps = [
+  { layer: "Caption", words: ["On Diwali, merchants open a new book of accounts.", "Bahi keeps yours: every invoice, receipt and payment.", "Books closed by the 2nd, not the 20th.", "Our festival gift: 25% off every annual plan."], at: beat(2), hold: 2e3, stagger: 45, in: 350, out: 250, unit: "word", rise: 28 }
+];
+var cues = [
+  { layer: "Eyebrow", preset: "fade-in", at: 0, params: { duration: 400 } },
+  { layer: "Headline", preset: "words-in", at: 0, params: { duration: 500 } },
+  { layer: "Call", preset: "rise-in", at: beat(18), params: { duration: 600 } },
+  { layer: "Call", preset: "pulse", at: beat(22), params: { duration: 900, amount: 0.06 } }
+];
+var BURSTS = [[1, 8, 14, 20], [3, 10, 17, 23], [5, 12, 19]];
+var diwali_lamps_reel_default = defineTemplate({
+  id: "motion-diwali-lamps-reel",
+  meta: {
+    name: "Diwali lamps reel",
+    description: "A 16-second Diwali reel for a SaaS with a festival offer: the headline lands with a sparkler writing light under it, a rangoli draws itself outward petal by petal, clay lamps are lit one after another on the beat and fireworks burst over rooftops hung with lights, while burned-in captions tell the story before the button rises \u2014 marigold garlands, paper lanterns and real flame glow on an aubergine night. Cut to a plucked guitar (made by PopCraft, CC0). 9:16 with 1:1 and 4:5 cuts",
+    category: "animation",
+    tags: ["animation", "diwali", "deepavali", "festival of lights", "diya", "rangoli", "marigold", "fireworks", "sparkler", "offer", "saas", "reel", "captions", "music", "audio", "seasonal"],
+    platforms: ["instagram", "tiktok", "youtube", "linkedin"],
+    formats: ["reel", "short", "story", "post", "portrait-post"],
+    useCases: ["sale", "announcement", "launch"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, swaps },
+  build() {
+    const k = new Kit("Diwali lamps reel", preset("ig-story"));
+    k.quantizeGeometry = true;
+    diwaliBrand(k, { headline: "Light up the\nnew year\u2019s books." });
+    k.textStyle("Eyebrow 26", { size: 26, fontWeight: 700, letterSpacing: 5, lineHeight: 34, textCase: "UPPER" });
+    k.textStyle("Display 92", { ...SERIF, size: 92, fontWeight: 900, letterSpacing: -3, lineHeight: 94 });
+    k.textStyle("Display 76", { ...SERIF, size: 76, fontWeight: 900, letterSpacing: -2.4, lineHeight: 78 });
+    k.textStyle("Caption 40", { size: 40, fontWeight: 700, letterSpacing: -0.4, lineHeight: 50 });
+    k.textStyle("Caption 32", { size: 32, fontWeight: 700, letterSpacing: -0.3, lineHeight: 40 });
+    k.textStyle("Button 32", { size: 32, fontWeight: 800, lineHeight: 40 });
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 32", label: "Code DIYA25 \xB7 25% off annual", pad: [22, 40], radius: 12 });
+    const sheet = k.sheet;
+    k.nameSheet(sheet, "Lamps reel");
+    k.flowSheet(sheet, 0, verticalPadding(), "paper", "SPACE_BETWEEN", "CENTER");
+    k.patch(sheet, { clipsContent: true });
+    k.timeline(sheet, { duration: DURATION, fps: 30, audio: MUSIC.audio });
+    const s = STORY;
+    sky(k, sheet, s);
+    const mandala = rangoli(k, sheet, s.rangoli);
+    diyas(k, sheet, s);
+    const light = lightWriting(k, sheet, TRAIL, { r: 44, loopMs: DURATION });
+    const top = k.stack(sheet, { gap: 16, name: "Top" });
+    k.text(top, "{{brand.name}} \xB7 Diwali offer", { style: "Eyebrow 26", color: "onPaper", name: "Eyebrow" });
+    k.text(top, "{{brand.headline}}", { style: "Display 92", color: "text", name: "Headline" });
+    k.stack(top, { height: 30, name: "Gap" });
+    k.text(top, swaps[0].words[0], { style: "Caption 40", color: "text", name: "Caption" });
+    k.instance(sheet, "Button", { Label: "Code DIYA25 \xB7 25% off annual" }, { name: "Call" });
+    hangings(k, sheet, s);
+    if (swapTimes(swaps[0]).at(-1).gone > DURATION) throw new Error("diwali reel: the captions run past the music");
+    k.named(sheet, "Firework").forEach((f, i) => burst(k, f, BURSTS[i].map(beat)));
+    writeLight(k, light, TRAIL, 250, beat(2));
+    drawRangoli(k, mandala, beat(1), 150);
+    lightDiyas(k, sheet, s.diyas.map((_, i) => i ? beat(3 + i * 0.5) : void 0));
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    const moveLight = (kit, id, x, y) => {
+      const dx = x - TRAIL[0][0], dy = y - TRAIL[0][1];
+      for (const name of ["Light trail", "Sparks"]) for (const n of kit.named(id, name)) {
+        const box = kit.node(name === "Sparks" ? light.sparks : light.trail);
+        kit.patch(n, { x: box.x + dx, y: box.y + dy, width: box.width, height: box.height });
+      }
+    };
+    k.variants(sheet, feedVariants({ post: 56, portrait: 72 }, {
+      post: (kit, id) => {
+        for (const n of kit.named(id, "Headline")) kit.restyle(n, "Display 76");
+        for (const n of kit.named(id, "Caption")) kit.restyle(n, "Caption 32");
+        for (const n of kit.named(id, "Gap")) kit.patch(n, { height: 14 });
+        fitScene(kit, id, {
+          ...s,
+          h: 1080,
+          dust: { top: 430, bottom: 540 },
+          fireworks: [{ x: 880, y: 150, r: 130 }, { x: 150, y: 470, r: 104 }, { x: 930, y: 440, r: 90 }],
+          roofs: { y: 590, rise: 130 },
+          rangoli: { x: 540, y: 772, r: 232 },
+          garlands: [{ y: -14, sag: 40, swags: 2, flower: 20, toran: false }],
+          lanterns: [{ x: -400, drop: 170, size: 92 }, { x: 1500, drop: 236, size: 104 }],
+          diyas: [...lamps(1500, [1010, 850, 690]).slice(0, 5), { x: 150, y: 1010, size: 78 }, { x: 930, y: 1010, size: 78 }, { x: 84, y: 850, size: 62 }, { x: 996, y: 850, size: 62 }, { x: 150, y: 690, size: 50 }, { x: 930, y: 690, size: 50 }, { x: 250, y: 1500, size: 124 }, { x: 830, y: 1500, size: 124 }, { x: 540, y: 1500, size: 132 }]
+        });
+        for (const n of kit.named(id, "Rangoli")) kit.patch(n, { scaleX: 0.74, scaleY: 0.74 });
+        moveLight(kit, id, 56, 268);
+      },
+      portrait: (kit, id) => {
+        for (const n of kit.named(id, "Gap")) kit.patch(n, { height: 20 });
+        fitScene(kit, id, {
+          ...s,
+          h: 1350,
+          dust: { top: 500, bottom: 660 },
+          fireworks: [{ x: 890, y: 200, r: 150 }, { x: 170, y: 610, r: 120 }, { x: 900, y: 590, r: 110 }],
+          roofs: { y: 740, rise: 160 },
+          rangoli: { x: 540, y: 968, r: 232 },
+          garlands: [{ y: -14, sag: 44, swags: 2, flower: 20, toran: false }],
+          lanterns: [{ x: -400, drop: 170, size: 92 }, { x: 1500, drop: 236, size: 104 }],
+          diyas: [...lamps(1900, []).slice(0, 5), { x: 120, y: 1290, size: 90 }, { x: 960, y: 1290, size: 90 }, { x: 96, y: 1080, size: 72 }, { x: 984, y: 1080, size: 72 }, { x: 110, y: 890, size: 58 }, { x: 970, y: 890, size: 58 }, { x: 290, y: 1310, size: 70 }, { x: 790, y: 1310, size: 70 }, { x: 540, y: 1900, size: 132 }]
+        });
+        for (const n of kit.named(id, "Rangoli")) kit.patch(n, { scaleX: 0.9, scaleY: 0.9 });
+        moveLight(kit, id, 72, 322);
+      }
+    }));
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+
+export {
+  diwali_lamps_reel_default
+};

package/dist/chunks/chunk-OSWMUR34.js

@@ -0,0 +1,163 @@
+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 {
+  SPOOL,
+  bloomAt,
+  button,
+  code,
+  deep,
+  display,
+  gradientBrand,
+  lockup,
+  longShadow,
+  mesh,
+  orbitCam,
+  parallax,
+  plateChip,
+  renderRun,
+  rimLight,
+  tilted,
+  ts,
+  winStyles
+} from "./chunk-6XFQWKQU.js";
+import {
+  section
+} from "./chunk-UA7OECXL.js";
+import {
+  captionStrip,
+  captionSwap
+} from "./chunk-ERLSOXU6.js";
+import {
+  presetSafeRect
+} from "./chunk-QVURWCH2.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-2P7ISWIA.js";
+import {
+  ease
+} from "./chunk-YYQUCS6P.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/motion/style-gradient-launch-reel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var S = section("launch", 8, 8);
+var { beat } = S;
+var NAME = "Gradient SaaS launch reel";
+var FLY = beat(1);
+var RUN = beat(2);
+var DONE = beat(10);
+var BIG = beat(11);
+var CLOSE = beat(22);
+var HEADS = ["A minute of video,\nrendered in\n4.2 seconds.", "Not 38 seconds.\nRendered on\nthe edge.", "Send JSON.\nGet video."];
+var cues = [
+  { layer: "Head wrap", preset: "blur-in", at: 0, params: { duration: 900, amount: 26 } },
+  { layer: "Headline", preset: "words-in", at: 0, params: { duration: 700 } },
+  { layer: "Lockup", preset: "fade-in", at: 0, params: { duration: 600 } },
+  { layer: "Kicker", preset: "rise-in", at: beat(1), params: { duration: 700, distance: 18 } },
+  { layer: "Scene", preset: "blur-in", at: FLY, params: { duration: 1200, amount: 30 } },
+  { layer: "Job", preset: "rise-in", at: beat(13), stagger: { delay: beat(1), order: "selection" }, params: { duration: 700, distance: 22 } },
+  { layer: "Call", preset: "rise-in", at: CLOSE, params: { duration: 800, distance: 30 } },
+  { layer: "Site chip", preset: "rise-in", at: CLOSE + beat(1), params: { duration: 800, distance: 30 } },
+  { layer: "Call", preset: "pulse", at: beat(28), params: { duration: 1e3, amount: 0.04 } }
+];
+var counts = [
+  { layer: "Render figure", at: RUN, duration: DONE - RUN, ease: ease.linear, counter: { from: 0, to: SPOOL.render, decimals: 1, suffix: " s" } }
+];
+var swaps = [captionSwap(["Spool 3 ships today.", "One minute in 4.2s.", "Rendered on edge workers.", "Send JSON. Get video."], 0, S.duration - 30, { stagger: 70, in: 340, out: 240, rise: 16 })];
+var LAYS = {
+  "ig-story": { x: 140, w: 800, brandY: 250, headY: 336, head: "Head 86", scene: { x: 0, y: 640, w: 1080, h: 800 }, scale: 0.88, rotY: -26, mesh: { x: -120, y: 690, w: 1320, h: 1150 }, capY: 1352, capW: 800, bar: 520 },
+  "ig-post": { x: 72, w: 936, brandY: 60, headY: 136, head: "Head 64", scene: { x: 220, y: 320, w: 860, h: 660 }, scale: 0.72, rotY: -28, mesh: { x: 300, y: 320, w: 820, h: 760 }, capY: 968, capW: 600, bar: 420 },
+  "ig-portrait": { x: 72, w: 936, brandY: 64, headY: 150, head: "Head 74", scene: { x: 40, y: 470, w: 1040, h: 740 }, scale: 0.74, rotY: -26, mesh: { x: 0, y: 520, w: 1080, h: 830 }, capY: 1236, capW: 936, bar: 460 },
+  "video-1080p": { x: 110, w: 700, brandY: 92, headY: 186, head: "Head 86", scene: { x: 760, y: 30, w: 1160, h: 1e3 }, scale: 1.04, rotY: -28, mesh: { x: 800, y: 60, w: 1120, h: 1020 }, capY: 914, capW: 700, bar: 520 }
+};
+var style_gradient_launch_reel_default = defineTemplate({
+  id: "motion-saas-style-gradient-launch-reel",
+  meta: {
+    name: NAME,
+    description: "A 16-second launch video in the gradient and depth look for a video rendering API: the product window tilted in 3D space over a deep ocean ground and a warm coral-to-lagoon mesh, with a cast shadow, floating planes and a reflection. The hook rises out of a soft blur in the first second, the window renders a video while a timer counts, the mesh blooms and a band of light crosses the glass on the downbeat, the camera orbits, and the close lands on the button. Music and burned-in captions. 9:16 with square, 4:5 and 16:9 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "gradient", "mesh gradient", "depth", "3d", "shader", "grain", "developer", "api", "video", "launch", "reel", "counter", "captions", "music", "audio", "tiktok", "shorts", "cinematic"],
+    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;
+    gradientBrand(k);
+    const st = winStyles(k);
+    ts(k, "Brand 30", display(30));
+    ts(k, "Kicker 22", code(22));
+    for (const n of [64, 74, 86]) ts(k, `Head ${n}`, display(n));
+    ts(k, "Caption 32", display(32, { lead: 1.3, weight: 600 }));
+    ts(k, "Button 28", display(28, { weight: 700 }));
+    ts(k, "Site 22", code(22));
+    button(k, "Call", { style: "Button 28", label: "Start free \xB7 200 minutes", pad: [20, 32] });
+    const sheets = ["ig-story", "ig-post", "ig-portrait", "video-1080p"].map((id, i) => {
+      const sheet = i === 0 ? k.sheet : k.addSheet(preset(id));
+      lay(k, sheet, id, st);
+      return sheet;
+    });
+    k.setCover(sheets[0]);
+    return k.finish();
+  }
+});
+function lay(k, sheet, id, st) {
+  const L = LAYS[id];
+  k.nameSheet(sheet, `Launch reel \xB7 ${preset(id).name}`);
+  k.flowSheet(sheet, 0, 0, "night", "MIN", "MIN");
+  k.patch(sheet, { clipsContent: true });
+  k.timeline(sheet, { duration: S.duration, fps: 30, audio: S.audio });
+  deep(k, sheet, { duration: S.duration });
+  const glow = mesh(k, sheet, { ...L.mesh, duration: S.duration });
+  bloomAt(k, glow, BIG - 200, 800, 3200);
+  const t = tilted(k, sheet, { ...L.scene, scale: L.scale, rotateY: L.rotY, rotateX: 12, safe: safeBox(k, sheet, id), width: id === "ig-story" ? 860 : void 0, styles: st, jobs: 3, sweeps: [BIG, beat(29)], duration: S.duration });
+  renderRun(k, t.win, RUN, DONE - RUN);
+  k.animate(t.rig, "z", [{ t: FLY, v: -900, ease: ease.out("quart") }, { t: FLY + 1800, v: 0 }]);
+  k.animate(t.rig, "rotateY", [{ t: FLY, v: L.rotY - 26, ease: ease.out("quart") }, { t: FLY + 2e3, v: L.rotY }]);
+  orbitCam(k, t.scene, { at: FLY, until: S.duration, from: -6, to: 14, z0: 120, z1: -60 });
+  parallax(k, t, S.duration / 2, 14);
+  const brandRow = k.stack(sheet, { direction: "HORIZONTAL", width: L.w, justify: "SPACE_BETWEEN", align: "CENTER", name: "Brand row", absolute: { x: L.x, y: L.brandY } });
+  lockup(k, brandRow, { size: 52, style: "Brand 30" });
+  plateChip(k, brandRow, `${SPOOL.version} \xB7 out today`, { style: "Kicker 22", name: "Kicker", dot: "primary" });
+  const wrap = k.stack(sheet, { width: L.w, name: "Head wrap", absolute: { x: L.x, y: L.headY } });
+  const head = k.text(wrap, HEADS[0], { style: L.head, color: "onNight", name: "Headline" });
+  k.finish();
+  const headBottom = L.headY + k.node(wrap).height;
+  const slotY = headBottom + (id === "ig-post" ? 22 : 34);
+  const call = k.stack(sheet, { direction: "HORIZONTAL", width: "HUG", gap: 18, align: "CENTER", name: "Close row", absolute: { x: L.x, y: slotY - 4 } });
+  k.instance(call, "Call", { Label: "Start free \xB7 200 minutes" }, { name: "Call" });
+  plateChip(k, call, "{{brand.site}}", { style: "Site 22", name: "Site chip", pad: [16, 22] });
+  const cap = k.stack(sheet, { width: L.capW, name: "Caption box", absolute: { x: L.capX ?? L.x, y: L.capY } });
+  captionStrip(k, cap, swaps[0].words[0], { style: "Caption 32", fill: "plate", ink: "onPlate", radius: 22, pad: [18, 26], effects: [longShadow(k, 0.5, 20, 50), ...rimLight(k, 0.12)] });
+  k.counts(sheet, counts);
+  k.swaps(sheet, swaps);
+  k.cues(sheet, cues);
+  const changes = [[BIG, HEADS[1]], [CLOSE - beat(1), HEADS[2]]];
+  k.animate(head, "text.content", [{ t: 0, v: HEADS[0], ease: ease.hold }, ...changes.map(([t2, v], i) => ({ t: t2, v, ...i < changes.length - 1 ? { ease: ease.hold } : {} }))]);
+  k.animate(head, "opacity", [{ t: 0, v: 1, ease: ease.hold }, ...changes.flatMap(([t2]) => [{ t: t2 - 300, v: 1, ease: ease.named("cubic", "in") }, { t: t2, v: 0, ease: ease.out("cubic") }, { t: t2 + 700, v: 1, ease: ease.hold }])].map((key, i, a) => i === a.length - 1 ? { t: key.t, v: key.v } : key));
+  k.animate(head, "translateY", [{ t: 0, v: 0, ease: ease.hold }, ...changes.flatMap(([t2]) => [{ t: t2, v: 36, ease: ease.out("expo") }, { t: t2 + 800, v: 0, ease: ease.hold }])].map((key, i, a) => i === a.length - 1 ? { t: key.t, v: key.v } : key));
+}
+function safeBox(k, sheet, id) {
+  const { width, height } = k.node(sheet);
+  const r = presetSafeRect(id, width, height);
+  return r ? { x: Math.ceil(r.x), y: Math.ceil(r.y), w: Math.floor(r.width), h: Math.floor(r.height) } : void 0;
+}
+
+export {
+  style_gradient_launch_reel_default
+};

package/dist/chunks/chunk-OT5B7QDA.js

@@ -0,0 +1,150 @@
+import { createRequire as __popcraftRequire } from 'node:module';
+import { fileURLToPath as __popcraftPath } from 'node:url';
+import { dirname as __popcraftDirname } from 'node:path';
+const require = __popcraftRequire(import.meta.url);
+const __filename = __popcraftPath(import.meta.url);
+const __dirname = __popcraftDirname(__filename);
+import {
+  logoBadge,
+  pill
+} from "./chunk-LEKU2ZW3.js";
+import {
+  into,
+  playScenes,
+  sceneSheets
+} from "./chunk-L6NNGCPO.js";
+import {
+  defineTemplate
+} from "./chunk-HLBQLOTA.js";
+import {
+  Kit,
+  preset
+} from "./chunk-2P7ISWIA.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-FFS4SO7R.js";
+
+// templates/src/scenes/web-scroll.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var STEPS = [
+  ["Bring it in", "Lamps, toasters, jeans, bikes: anything you can carry."],
+  ["Fix it together", "A volunteer fixer sits with you and shows you how."],
+  ["Take it home", "Free. A cup of tea while you wait, and a biscuit."]
+];
+var NUMBERS = [{ name: "Mended", to: 3412, label: "things mended since 2019" }, { name: "Success", to: 71, label: "fixed on the first visit", suffix: "%" }, { name: "Kept", to: 9, label: "tonnes kept out of landfill", suffix: " t" }];
+var sections = (suffix) => [
+  { sheet: `Hero${suffix}`, cues: [
+    { layer: "Nav", preset: "fade-in", at: 0 },
+    { layer: "Hero title", preset: "lines-in", at: 150, params: { duration: 650, amount: 180 } },
+    { layer: "Hero lede", preset: "fade-in", at: 700 },
+    { layer: "Hero button", preset: "pop-in", at: 900 }
+  ] },
+  { sheet: `How${suffix}`, transition: into("PUSH_FROM_BOTTOM", 600), cues: [
+    { layer: "Section title", preset: "rise-in", at: 100 },
+    { layer: "Step card", preset: "rise-in", at: 350, stagger: { delay: 150 } }
+  ] },
+  { sheet: `Numbers${suffix}`, transition: into("PUSH_FROM_BOTTOM", 600), cues: [
+    { layer: "Section title", preset: "rise-in", at: 100 },
+    { layer: "Number", preset: "fade-in", at: 300, stagger: { delay: 150 } }
+  ], counts: NUMBERS.map((n, i) => ({ layer: `${n.name} figure`, at: 300 + i * 150, duration: 1300, counter: { from: 0, to: n.to, ...n.suffix ? { suffix: n.suffix } : {} } })) },
+  { sheet: `Voices${suffix}`, transition: into("PUSH_FROM_BOTTOM", 600), cues: [
+    { layer: "Quote", preset: "words-in", at: 150, params: { duration: 550, amount: 50 } },
+    { layer: "Who", preset: "fade-in", at: 1100 }
+  ] },
+  { sheet: `Visit${suffix}`, transition: into("PUSH_FROM_BOTTOM", 600), cues: [
+    { layer: "Visit title", preset: "rise-in", at: 100 },
+    { layer: "When", preset: "fade-in", at: 400 },
+    { layer: "Visit button", preset: "pop-in", at: 700 }
+  ] }
+];
+var desktop = sections("");
+var mobile = sections(" \xB7 mobile");
+var web_scroll_default = defineTemplate({
+  id: "motion-web-scroll-sections",
+  meta: {
+    name: "Scroll-reveal website sections",
+    description: "A repair caf\xE9\u2019s one-page site as five scroll-reveal sections \u2014 hero, how it works, numbers that count, a quote, the next session \u2014 each a scene with its reveal, played as one scroll; desktop 1440 with a mobile set",
+    category: "animation",
+    tags: ["animation", "web", "scroll", "reveal", "sections", "landing page", "scenes", "community"],
+    platforms: ["web"],
+    formats: ["page", "screen", "video"],
+    useCases: ["announcement", "event"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  motion: { scenes: desktop, more: [mobile] },
+  build() {
+    const k = new Kit("Scroll-reveal website sections", preset("web-desktop"));
+    k.brand(
+      { paper: "#F7F3EA", text: "#1F2A24", onPaper: "#55605A", primary: "#2F6B4F", onPrimary: "#FFFFFF", card: "#FFFFFF", onCard: "#1F2A24", deep: "#1F2A24", onDeep: "#F7F3EA", figure: "#F2B84B", badge: "#2F6B4F" },
+      { name: "Mend Street Repair Caf\xE9", when: "Next session: Saturday 11 October, 10 am \u2013 1 pm \xB7 St Anne\u2019s Hall" }
+    );
+    const T = (name, size, weight, lh, align = "LEFT", ls = 0) => k.textStyle(name, { size, fontWeight: weight, lineHeight: lh, textAlign: align, letterSpacing: ls });
+    T("Nav 18", 18, 600, 24);
+    T("Brand 22", 22, 800, 28);
+    T("Hero 96", 96, 900, 100, "LEFT", -3);
+    T("Hero 44", 44, 900, 48, "LEFT", -1);
+    T("Lede 24", 24, 500, 34);
+    T("Lede 18", 18, 500, 26);
+    T("Section 56", 56, 900, 62, "LEFT", -1);
+    T("Section 32", 32, 900, 38, "LEFT", -1);
+    T("Card title 28", 28, 800, 34);
+    T("Card body 20", 20, 500, 28);
+    T("Card body 16", 16, 500, 24);
+    T("Figure 96", 96, 900, 100, "LEFT", -3);
+    T("Figure 52", 52, 900, 56, "LEFT", -1);
+    T("Quote 56", 56, 800, 64, "LEFT", -1);
+    T("Quote 28", 28, 800, 34);
+    T("Button 20", 20, 800, 26);
+    pill(k, "Button", { fill: "primary", ink: "onPrimary", style: "Button 20", label: "Find the next session", pad: [18, 32], radius: 14 });
+    k.component("Step card", { width: 380, gap: 12, fill: "card", radius: 24, padding: 32, props: { Title: STEPS[0][0], Body: STEPS[0][1] } }, (id) => {
+      k.propText(id, "Title", { style: "Card title 28", color: "onCard" });
+      k.propText(id, "Body", { style: "Card body 20", color: "onCard" });
+    });
+    const sizes = [{ preset: "web-desktop", specs: desktop, m: false }, { preset: "web-mobile", specs: mobile, m: true }];
+    sizes.forEach(({ preset: p, specs, m }, row) => {
+      const ids = sceneSheets(k, p, specs.map((s) => s.sheet), row);
+      const pad = m ? { top: 40, right: 20, bottom: 40, left: 20 } : { top: 48, right: 120, bottom: 96, left: 120 };
+      const length = [2400, 2200, 2400, 2200, 2400];
+      ids.forEach((id, i) => {
+        k.flowSheet(id, m ? 24 : 40, pad, i === 2 ? "deep" : "paper", i === 0 ? "MIN" : "CENTER", "MIN");
+        k.timeline(id, { duration: length[i], fps: 30 });
+      });
+      const [hero, how, numbers, voices, visit] = ids;
+      const nav = k.stack(hero, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Nav" });
+      const brand = k.stack(nav, { direction: "HORIZONTAL", width: "HUG", gap: 12, align: "CENTER", name: "Brand" });
+      logoBadge(k, brand, { fill: "badge", size: 28, name: "Logo", pad: 8 });
+      k.text(brand, m ? "Mend Street" : "{{brand.name}}", { style: "Brand 22", color: "text", name: "Brand name", autoWidth: true });
+      if (!m) {
+        const links = k.stack(nav, { direction: "HORIZONTAL", width: "HUG", gap: 32, name: "Links" });
+        for (const l of ["How it works", "Sessions", "Volunteer"]) k.text(links, l, { style: "Nav 18", color: "onPaper", name: "Link", autoWidth: true });
+      }
+      k.stack(hero, { height: m ? 32 : 96, name: "Space" });
+      k.text(hero, "Don\u2019t bin it.\nBring it.\nWe\u2019ll fix it together.", { style: m ? "Hero 44" : "Hero 96", color: "text", name: "Hero title" });
+      k.text(hero, "A free repair caf\xE9 in a church hall, run by neighbours who like fixing things \u2014 every second Saturday.", { style: m ? "Lede 18" : "Lede 24", color: "onPaper", name: "Hero lede", width: m ? "FILL" : 720 });
+      k.instance(hero, "Button", { Label: "Find the next session" }, { name: "Hero button" });
+      k.text(how, "How it works", { style: m ? "Section 32" : "Section 56", color: "text", name: "Section title" });
+      const cards = k.stack(how, { direction: m ? "VERTICAL" : "HORIZONTAL", gap: m ? 12 : 32, name: "Steps" });
+      for (const [t, b] of STEPS) k.instance(cards, "Step card", { Title: t, Body: b }, { name: "Step card", ...m ? { width: "FILL" } : {} });
+      k.text(numbers, "Six years of Saturdays", { style: m ? "Section 32" : "Section 56", color: "onDeep", name: "Section title" });
+      const row2 = k.stack(numbers, { direction: m ? "VERTICAL" : "HORIZONTAL", gap: m ? 16 : 48, name: "Numbers" });
+      for (const n of NUMBERS) {
+        const cell = k.stack(row2, { width: m ? "FILL" : 400, gap: 4, name: "Number" });
+        k.text(cell, `${n.to.toLocaleString("en-US")}${n.suffix ?? ""}`, { style: m ? "Figure 52" : "Figure 96", color: "figure", name: `${n.name} figure` });
+        k.text(cell, n.label, { style: m ? "Card body 16" : "Card body 20", color: "onDeep", name: `${n.name} label` });
+      }
+      k.text(voices, "\u201CMy grandad\u2019s radio works again, and now I know how to change a fuse.\u201D", { style: m ? "Quote 28" : "Quote 56", color: "text", name: "Quote", width: m ? "FILL" : 1e3 });
+      k.text(voices, "Maya, 16, first visit in March", { style: m ? "Card body 16" : "Card body 20", color: "onPaper", name: "Who" });
+      k.text(visit, "Come along", { style: m ? "Section 32" : "Section 56", color: "text", name: "Visit title" });
+      k.text(visit, "{{brand.when}}", { style: m ? "Lede 18" : "Lede 24", color: "onPaper", name: "When" });
+      k.instance(visit, "Button", { Label: "Find the next session" }, { name: "Visit button" });
+      playScenes(k, m ? "comp-mobile" : "comp-desktop", `Scroll reveal (${m ? "mobile" : "desktop"})`, ids, specs, "paper");
+      if (!m) k.setCover(hero);
+    });
+    return k.finish();
+  }
+});
+
+export {
+  web_scroll_default
+};