@popcraft/kit 0.26.0 → 0.26.1

package/dist/chunks/chunk-5NIK3BGQ.js

@@ -0,0 +1,124 @@
+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,
+  column,
+  glow,
+  rig,
+  sizes,
+  stage,
+  typeStep
+} from "./chunk-5RBWERLP.js";
+import {
+  PHONE,
+  deviceShadow,
+  devices
+} from "./chunk-SKMGZGNY.js";
+import {
+  appScreens
+} from "./chunk-7LNASDR7.js";
+import {
+  defineTemplate
+} from "./chunk-QBBW3JXO.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SOHOKD4X.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/motion3d/product-turntable.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 12e3;
+var FPS = 30;
+var SIZES = ["video-1080p", "video-square"];
+var DEPTH = 34;
+var FEATURES = [
+  ["Face ID lock", "Only you open your money."],
+  ["Bank-grade encryption", "256-bit, end to end."],
+  ["Home Screen widgets", "Your balance at a glance."],
+  ["Works offline", "Syncs the moment you\u2019re back."]
+];
+var CAPTION = { name: "Headline", title: "Built like a vault. Feels like magic." };
+var CUES = [
+  ...captionCues(CAPTION, 200),
+  { layer: FEATURES.map((_, i) => `Feature ${i + 1}`), preset: "rise-in", at: 1200, params: { duration: 700 }, stagger: { delay: 1400 } }
+];
+function build(k, sheet, s) {
+  k.nameSheet(sheet, `Product turntable \xB7 ${preset(s.preset).name}`);
+  glow(k, sheet, "primary", Math.round(1e3 * s.u), s.W / 2, s.H * 0.58, 0.45);
+  const fill = { id: "fill", type: "AMBIENT", name: "Fill", color: { r: 0.85, g: 0.92, b: 1, a: 1 }, intensity: 0.55, x: 0, y: 0, z: 0, targetX: 0, targetY: 0, targetZ: 0 };
+  const keyLight = { id: "key", type: "DIRECTIONAL", name: "Key", color: { r: 1, g: 0.97, b: 0.92, a: 1 }, intensity: 0.75, x: s.W * 0.2, y: s.H * 0.1, z: 1600, targetX: s.W / 2, targetY: s.H / 2, targetZ: 0 };
+  const scene = stage(k, sheet, s, { duration: DURATION, fps: FPS, perspective: 2800 * s.u, lights: [fill, keyLight] });
+  const zoom = s.wide ? 0.9 : 0.62;
+  const cy = s.wide ? s.H * 0.53 : s.H * 0.6;
+  const table = rig(k, scene, s, "Turntable", 760, 760, s.W / 2, cy + PHONE.height / 2 * zoom);
+  k.patch(table, { scaleX: zoom, scaleY: zoom, rotateX: 78 });
+  k.ellipse(table, 760, "deviceEdge", { name: "Disc", opacity: 0.9 });
+  const turn = rig(k, scene, s, "Phone", PHONE.width, PHONE.height, s.W / 2, cy);
+  k.patch(turn, { scaleX: zoom, scaleY: zoom, rotateX: -6 });
+  const spin = k.group(turn, { x: 0, y: 0, width: PHONE.width, height: PHONE.height }, { name: "Spin" });
+  k.patch(spin, { rotateY: -28 });
+  k.behave(spin, "rotateY", [{ kind: "spin", rate: 360 / (DURATION / 1e3) }]);
+  const face = k.instance(spin, "Phone", { Screen: { swap: "Screen / Home" } }, { name: "Face" });
+  k.patch(face, { z: DEPTH / 2, effects: [deviceShadow(0.35, 30, 70)], material3d: { specular: 0.35, shininess: 60 } });
+  const back = k.instance(spin, "Phone back", {}, { name: "Back" });
+  k.patch(back, { z: -DEPTH / 2, rotateY: 180, material3d: { specular: 0.2, shininess: 30 } });
+  for (const side of [-1, 1]) {
+    const edge = k.rect(spin, DEPTH, PHONE.height - 2 * PHONE.radius + 40, "deviceEdge", { radius: DEPTH / 2, name: side < 0 ? "Left edge" : "Right edge" });
+    k.patch(edge, { x: side < 0 ? -DEPTH / 2 : PHONE.width - DEPTH / 2, y: PHONE.radius - 20, rotateY: side * 90 });
+  }
+  const col = column(s, 120);
+  caption(k, sheet, s, { ...CAPTION, step: s.wide ? "title" : "subtitle", width: col.width, align: "CENTER", at: { x: col.x, y: Math.round(64 * s.u) } });
+  const body = typeStep(k, s, "body");
+  const sideW = Math.round((s.wide ? 470 : 300) * s.u);
+  FEATURES.forEach(([t, b], i) => {
+    const left = i % 2 === 0, row = Math.floor(i / 2);
+    const box = k.stack(sheet, {
+      width: sideW,
+      gap: Math.round(8 * s.u),
+      align: left ? "MAX" : "MIN",
+      name: `Feature ${i + 1}`,
+      absolute: { x: left ? Math.round((s.wide ? 200 : 64) * s.u) : Math.round(s.W - (s.wide ? 200 : 64) * s.u - sideW), y: Math.round(cy + (row === 0 ? -170 : 60) * s.u) }
+    });
+    k.rect(box, Math.round(56 * s.u), 4, "accent", { radius: 2, name: "Rule" });
+    k.text(box, t, { style: typeStep(k, s, s.wide ? "subtitle" : "body"), color: "text", align: left ? "RIGHT" : "LEFT", name: "Feature" });
+    k.text(box, b, { style: body, color: "onBackground", align: left ? "RIGHT" : "LEFT", name: "Detail" });
+  });
+  k.cues(sheet, CUES);
+}
+var product_turntable_default = defineTemplate({
+  id: "motion-3d-product-turntable",
+  meta: {
+    name: "Product turntable",
+    description: "A phone turns a full circle on a lit 3D turntable \u2014 face, edge, back with your logo \u2014 while four feature callouts rise in either side. A seamless 12-second loop at 30 fps, 16:9 and square; swap the screen for your own",
+    category: "animation",
+    tags: ["animation", "3d", "product", "turntable", "phone", "device", "features", "callouts", "loop"],
+    platforms: ["youtube", "instagram", "linkedin", "x", "web"],
+    formats: ["video", "post", "ad"],
+    useCases: ["launch", "announcement"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  motion: { cues: CUES },
+  build() {
+    const k = new Kit("Product turntable", preset(SIZES[0]));
+    brand(k, "dark");
+    appScreens(k, ["Home", "Screenshot"]);
+    devices(k, ["Phone", "Phone back"]);
+    const [cover] = sizes(k, SIZES, (sheet, s) => build(k, sheet, s));
+    k.setCover(cover);
+    return k.finish();
+  }
+});
+
+export {
+  product_turntable_default
+};

package/dist/chunks/chunk-5NPZMARV.js

@@ -0,0 +1,182 @@
+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 {
+  SCENE,
+  mover
+} from "./chunk-G72OSJJR.js";
+import {
+  buntingPaths,
+  disc,
+  hill,
+  shape,
+  turn
+} from "./chunk-2OTT3QQU.js";
+import {
+  SERIF
+} from "./chunk-X23ZWFW2.js";
+import {
+  grain,
+  hardShadow
+} from "./chunk-HVK5T4I5.js";
+import {
+  curve3,
+  poly,
+  pt3,
+  rng
+} from "./chunk-BNVLVZUT.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/themes/festival-presale-folk-kit.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var AW = 1200;
+var AH = 860;
+var TOP = SCENE.h - AH;
+var SUN = { x: 850, y: 330, r: 168 };
+function fields(k, scene, still) {
+  const move = mover(k, still);
+  const bunting = (_k, parent, o) => {
+    const b = buntingPaths(o.x1, o.y1, o.x2, o.y2, o.sag, o.n, o.size);
+    shape(k, parent, [b.line], o.line, { name: `${o.name ?? "Bunting"} line`, strokeWidth: 2 });
+    o.colors.forEach((c, ci) => {
+      const id = shape(k, parent, b.flags.filter((_, i) => i % o.colors.length === ci), c, { name: o.name ?? "Bunting" });
+      move(id, "translateY", 2.5, 2, ci / o.colors.length);
+    });
+  };
+  const spin = (id, turns) => {
+    if (!still) turn(k, id, turns);
+  };
+  k.rect(scene, SCENE.w, SCENE.h, [k.gradient({ from: "sunPale", to: "sunPale", fromOpacity: 0, toOpacity: 0.5, angle: 90 })], { name: "Sky glow", absolute: { x: 0, y: 0 } });
+  const cloud = (art2, x, y, s, i) => {
+    const id = shape(k, art2, [disc(x, y, 46 * s, 30 * s), disc(x + 52 * s, y - 14 * s, 54 * s, 38 * s), disc(x + 112 * s, y, 50 * s, 30 * s), disc(x + 56 * s, y + 12 * s, 90 * s, 22 * s)], "cloud", { name: "Cloud", opacity: 0.9 });
+    move(id, "translateX", 14, 1, i / 3);
+  };
+  cloud(scene, 120, 260, 1.2, 1);
+  cloud(scene, 760, 150, 0.9, 2);
+  cloud(scene, 420, 470, 0.7, 0);
+  bunting(k, scene, { x1: -15, y1: 60, x2: 1215, y2: 30, sag: 70, n: 22, size: 36, colors: ["tentRed", "straw", "hillD", "tentBlue"], line: "bark", name: "High bunting" });
+  const art = k.frame(scene, { x: 0, y: TOP, width: AW, height: AH }, { name: "Fields" });
+  k.ellipse(art, SUN.r * 3.3, k.tint("sunPale", 0.4), { name: "Sun halo", absolute: { x: SUN.x - SUN.r * 1.65, y: SUN.y - SUN.r * 1.65 } });
+  const R = 330, rays = [];
+  for (let i = 0; i < 24; i++) {
+    const a = i / 24 * Math.PI * 2, d = 0.045, r0 = SUN.r + 22, r1 = i % 2 ? R : R - 60;
+    rays.push({ closed: true, points: [pt3(R + r0 * Math.cos(a - d), R + r0 * Math.sin(a - d)), pt3(R + r1 * Math.cos(a), R + r1 * Math.sin(a)), pt3(R + r0 * Math.cos(a + d), R + r0 * Math.sin(a + d))] });
+  }
+  const rayId = k.vector(art, R * 2, R * 2, rays, "sun", { name: "Sun rays", opacity: 0.8, absolute: { x: SUN.x - R, y: SUN.y - R } });
+  spin(rayId, 1 / 12);
+  k.ellipse(art, SUN.r * 2, "sun", { name: "Sun", absolute: { x: SUN.x - SUN.r, y: SUN.y - SUN.r } });
+  k.ellipse(art, SUN.r * 1.5, k.tint("sunPale", 0.35), { name: "Sun heart", absolute: { x: SUN.x - SUN.r * 0.75, y: SUN.y - SUN.r * 0.75 } });
+  cloud(art, 620, 150, 1, 0);
+  cloud(art, 1010, 96, 0.7, 1);
+  cloud(art, 1040, 520, 0.6, 2);
+  const birds = [[690, 250], [724, 232], [760, 262], [1060, 236], [1094, 250], [240, 120], [280, 96]].map(([x, y]) => curve3([{ x: x - 12, y: y - 4 }, { x: x - 5, y: y - 9 }, { x, y }, { x: x + 5, y: y - 9 }, { x: x + 12, y: y - 4 }], 0.3));
+  const flock = shape(k, art, birds, "bark", { name: "Birds", strokeWidth: 2.5 });
+  move(flock, "translateY", 6, 2);
+  shape(k, art, [hill(AW, [560, 520, 548, 512, 530, 506, 540], AH + 40)], "hillA", { name: "Far hills" });
+  shape(k, art, [{ closed: true, points: [pt3(1040, 518), { ...pt3(1110, 452), handleIn: pt3(1040, 466), handleOut: pt3(1180, 466) }, pt3(1180, 518)] }], "bark", { name: "Stage shell" });
+  shape(k, art, [{ closed: true, points: [pt3(1054, 518), { ...pt3(1110, 468), handleIn: pt3(1056, 480), handleOut: pt3(1164, 480) }, pt3(1166, 518)] }], "sunPale", { name: "Stage glow" });
+  shape(k, art, [poly([[1030, 518], [1190, 518], [1190, 526], [1030, 526]])], "bark", { name: "Stage deck" });
+  shape(k, art, [hill(AW, [600, 566, 590, 556, 596, 562, 580], AH + 40)], "hillB", { name: "Hills" });
+  const tents = [[90, 610, 74, "tentRed"], [176, 624, 96, "tentBlue"], [330, 616, 70, "straw"], [468, 606, 62, "straw"], [560, 612, 84, "tentRed"], [720, 600, 70, "tentBlue"], [824, 606, 104, "tentRed"], [952, 598, 66, "straw"], [1060, 604, 92, "tentBlue"], [1160, 598, 60, "tentRed"]];
+  tents.forEach(([x, base, w, b], i) => {
+    const h = w * 0.78, top = base - h;
+    shape(k, art, [poly([[x - w / 2, base], [x, top], [x + w / 2, base]])], "tentCream", { name: "Tent" });
+    shape(k, art, [poly([[x - w * 0.3, base], [x, top], [x - w * 0.12, base]]), poly([[x + w * 0.12, base], [x, top], [x + w * 0.3, base]])], b, { name: "Tent panels" });
+    shape(k, art, [poly([[x - w * 0.07, base], [x, base - h * 0.42], [x + w * 0.07, base]])], "bark", { name: "Tent door" });
+    shape(k, art, [{ closed: false, points: [pt3(x, top), pt3(x, top - w * 0.2)] }], "bark", { name: "Tent pole", strokeWidth: 2 });
+    const flag = shape(k, art, [poly([[x, top - w * 0.2], [x + w * 0.2, top - w * 0.14], [x, top - w * 0.08]])], b, { name: "Tent flag" });
+    k.patch(flag, { anchorX: 0 });
+    move(flag, "scaleX", 0.22, 3, i / 5);
+  });
+  shape(k, art, [hill(AW, [640, 668, 628, 664, 636, 672, 640], AH + 40)], "hillC", { name: "Near hills" });
+  const furrows = [];
+  for (let i = 0; i < 9; i++) furrows.push(curve3([{ x: -20, y: 700 + i * 20 }, { x: 300, y: 690 + i * 22 }, { x: 700, y: 706 + i * 21 }, { x: 1220, y: 688 + i * 23 }], 0.2));
+  shape(k, art, [hill(AW, [712, 690, 716, 694, 720, 700, 708], AH + 40)], "hillD", { name: "Field" });
+  shape(k, art, furrows, "hillC", { name: "Furrows", strokeWidth: 3, opacity: 0.55 });
+  bunting(k, art, { x1: 560, y1: 8, x2: 1215, y2: 52, sag: 26, n: 15, size: 30, colors: ["tentRed", "straw", "hillD", "tentBlue"], line: "bark" });
+  const r = rng(41);
+  for (let row = 0; row < 3; row++) {
+    const stalks = [], ears = [];
+    for (let x = -10 + row * 9; x < AW + 10; x += 27) {
+      const h = 70 + r() * 70, lean = (r() - 0.5) * 26, bx = x + r() * 10, ty = AH - h;
+      stalks.push(curve3([{ x: bx, y: AH + 4 }, { x: bx + lean * 0.4, y: AH - h * 0.55 }, { x: bx + lean, y: ty }], 0.25));
+      ears.push({ closed: true, points: [pt3(bx + lean - 5, ty + 4), pt3(bx + lean + lean * 0.12, ty - 30), pt3(bx + lean + 5, ty + 4), pt3(bx + lean, ty + 12)] });
+    }
+    const s1 = shape(k, art, stalks, row === 1 ? "straw" : "strawDark", { name: "Barley stalks", strokeWidth: 2.5 });
+    const s2 = shape(k, art, ears, row === 1 ? "straw" : "strawDark", { name: "Barley ears" });
+    for (const id of [s1, s2]) {
+      k.patch(id, { anchorY: 1 });
+      move(id, "rotation", 0.9, 2, row / 3);
+    }
+  }
+  k.patch(scene, { effects: grain(0.07, 2, 23) });
+}
+var serif = { ...SERIF, fontStyle: "italic" };
+var BARLEY_MOON = {
+  slug: "folk",
+  name: "Barley Moon",
+  brand: (k, fields2 = {}) => {
+    k.brand(
+      { paper: "#F4EBD6", text: "#3A2A1C", onPaper: "#6A5643", primary: "#B8461F", onPrimary: "#FFF6E4", accent: "#2F5D50", onAccent: "#FFF6E4", card: "#FCF6E7", onCard: "#3A2A1C", cardMuted: "#6A5643", panel: "#3A2A1C", onPanel: "#F4EBD6", panelMuted: "#D9CAAF", chip: "#EADDC1", onChip: "#3A2A1C", stage: "#F3DCAE", onStage: "#3A2A1C", stageMuted: "#59422F" },
+      { name: "Barley Moon", ...fields2 }
+    );
+    k.palette({ sun: "#E8743B", sunPale: "#F6B872", hillA: "#BFC690", hillB: "#93AB76", hillC: "#62855C", hillD: "#3F624A", straw: "#DDB95C", strawDark: "#B98F3C", tentRed: "#C4522A", tentCream: "#FFF3DA", tentBlue: "#3E6C8A", bark: "#4A3626", cloud: "#FFF6E4" });
+  },
+  type: {
+    Name: { ...serif, fontWeight: 900, ls: -0.035, lh: 0.88 },
+    Head: { ...serif, fontWeight: 900, ls: -0.03, lh: 1.02 },
+    Act: { ...SERIF, fontWeight: 700, ls: -0.01, lh: 1.3 },
+    More: { fontWeight: 600, ls: 0.1, lh: 1.6, upper: true },
+    Kicker: { fontWeight: 700, ls: 0.2, lh: 1.4, upper: true },
+    Clock: { ...SERIF, fontWeight: 900, ls: -0.028, lh: 1.04, tnum: true },
+    Unit: { fontWeight: 700, ls: 0.16, lh: 1.3, upper: true },
+    Body: { fontWeight: 500, ls: 0, lh: 1.42 },
+    Button: { fontWeight: 700, ls: 0, lh: 1.4 },
+    Caption: { ...SERIF, fontWeight: 800, ls: -0.01, lh: 1.22 },
+    Price: { ...serif, fontWeight: 900, ls: -0.035, lh: 1, tnum: true }
+  },
+  look: {
+    radius: 18,
+    chip: 999,
+    button: 999,
+    plate: "stage",
+    plateAlpha: 0.94,
+    plateStroke: { color: "text", width: 3, align: "INSIDE" },
+    plateEffects: (k) => [hardShadow(k, "bark", 6, 7, 0.9)],
+    tile: "panel",
+    tileInk: "onPanel",
+    tileMuted: "panelMuted",
+    glow: "sun",
+    hot: "primary",
+    hotInk: "onPrimary",
+    sep: "\xB7"
+  },
+  scene: fields,
+  horizon: TOP + 700,
+  dates: "22 \u2013 25 July 2027",
+  place: "Hartcombe Farm, Wessendale",
+  kicker: "Four days of songs in the fields",
+  heads: ["The Larkspur Union", "Hollow Kin", "Old Coat"],
+  acts: ["Odette Marlowe", "Maren & the Tide", "June Addison", "Fennel Road", "The Wren Sisters", "Half Acre"],
+  more: ["Paper Lantern Club", "Wilder Still", "Rook & Rowan", "Elsie Vane", "Bramble Choir", "Greenfinch"],
+  tba: "and more than fifty still to come",
+  presale: { by: "Sun 7 Feb", code: "Tue 9 Feb", opens: "Thu 11 Feb \xB7 9 am", day: "Thursday 11 February", time: "09:00", queue: "08:30", limit: "up to six tickets" },
+  clock: { days: "09", hours: "14", minutes: "27", from: 52, to: 46 },
+  tier: { tag: "Tier one", name: "Weekend, with camping", price: "\xA3189", next: "\xA3209", was: "\xA3168", sold: "Supporter tickets all gone", note: "On sale now to the mailing list. What is left opens to presale codes on 11 February.", stock: { label: "Going quickly", from: 3912, left: 3880, total: 1e4 } },
+  cta: "Sign up for presale",
+  code: "BM27-PRE-H7KD",
+  gate: "Orchard Gate",
+  track: "acoustic",
+  captions: ["The first names are here.", "Presale opens Thursday 11 February.", "Sign up by Sunday, free.", "Sign up for a code."],
+  picture: "a sun-bleached poster of the fields at the end of the day: a low sun with turning rays, drifting clouds, rolling hills with a stage shell, striped bell tents, bunting and swaying barley",
+  tags: ["folk", "indie", "summer", "camping", "fields", "serif"]
+};
+
+export {
+  BARLEY_MOON
+};

package/dist/chunks/chunk-5RBFX2VW.js

@@ -0,0 +1,118 @@
+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-5RBWERLP.js";
+import {
+  key
+} from "./chunk-FAAVZ2GX.js";
+import {
+  BASE,
+  LID,
+  PHONE,
+  deviceShadow,
+  devices
+} from "./chunk-SKMGZGNY.js";
+import {
+  DESKTOP_SCREEN,
+  appScreens
+} from "./chunk-7LNASDR7.js";
+import {
+  defineTemplate
+} from "./chunk-QBBW3JXO.js";
+import {
+  Kit,
+  preset
+} from "./chunk-SOHOKD4X.js";
+import {
+  applyPreset
+} from "./chunk-VTQNFI7N.js";
+import {
+  ease
+} from "./chunk-NKAPBBXH.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/motion3d/laptop-reveal.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var DURATION = 8e3;
+var FPS = 60;
+var SIZES = ["video-1080p"];
+var OPEN_AT = 700;
+var OPENED = 2300;
+var PHONE_AT = 4200;
+var CAPTION = { name: "Caption", kicker: "Fern for the web", title: "Your whole financial picture, on the big screen.", cta: "Open fern.app" };
+var CUES = captionCues(CAPTION, OPENED - 300);
+function build(k, sheet, s) {
+  k.nameSheet(sheet, `Laptop reveal \xB7 ${preset(s.preset).name}`);
+  glow(k, sheet, "primary", Math.round(1500 * s.u), s.W * 0.52, s.H * 0.62, 0.5);
+  const scene = stage(k, sheet, s, { duration: DURATION, fps: FPS, perspective: 2600 * s.u });
+  const laptop = rig(k, scene, s, "Laptop", LID.width, LID.height, s.W * 0.5, s.H * 0.66 - LID.height / 2);
+  k.patch(laptop, { scaleX: 0.47, scaleY: 0.47, rotateX: -16, rotateY: 10, anchorY: 1 });
+  const deck = k.instance(laptop, "Laptop base", {}, { name: "Keyboard deck" });
+  k.patch(deck, { x: Math.round((LID.width - BASE.width) / 2), y: LID.height, anchorY: 0, rotateX: 90, effects: [deviceShadow(0.45, 50, 90)] });
+  const hinge = k.group(laptop, { x: 0, y: 0, width: LID.width, height: LID.height }, { name: "Hinge" });
+  k.patch(hinge, { anchorY: 1, rotateX: 8 });
+  const display = k.instance(hinge, "Laptop lid", {}, { name: "Display" });
+  k.patch(display, { z: 2 });
+  const off = k.rect(hinge, DESKTOP_SCREEN.width, DESKTOP_SCREEN.height, "device", { radius: DESKTOP_SCREEN.radius, name: "Screen off" });
+  k.patch(off, { x: (LID.width - DESKTOP_SCREEN.width) / 2, y: 24, z: 4, opacity: 0 });
+  const outside = k.instance(hinge, "Laptop lid back", {}, { name: "Lid outside" });
+  k.patch(outside, { z: -2, rotateY: 180 });
+  key(k, hinge, "rotateX", [[OPEN_AT, -90, ease.out("expo")], [OPENED, 8]]);
+  key(k, off, "opacity", [[0, 1, ease.hold], [OPEN_AT + 500, 1, ease.out("cubic")], [OPENED + 200, 0]]);
+  key(k, laptop, "rotateY", [[0, 28, ease.inOut("cubic")], [OPENED + 400, 10, ease.inOut("sine")], [DURATION, 4]]);
+  key(k, laptop, "translateY", [[0, k.node(laptop).translateY + Math.round(160 * s.u), ease.out("expo")], [OPENED, k.node(laptop).translateY]]);
+  k.apply(scene, (n) => applyPreset(n, "push-in", { duration: DURATION, amount: 0.08 }));
+  const phone = rig(k, scene, s, "Phone", PHONE.width, PHONE.height, s.W * 0.75, s.H * 0.62);
+  k.patch(phone, { scaleX: 0.36, scaleY: 0.36, z: 240, rotateY: -16 });
+  const handset = k.instance(phone, "Phone", { Screen: { swap: "Screen / Home" } }, { name: "Handset" });
+  k.patch(handset, { effects: [deviceShadow(0.45, 40, 80)] });
+  key(k, phone, "translateY", [[PHONE_AT, k.node(phone).translateY + Math.round(700 * s.u), ease.out("expo")], [PHONE_AT + 1200, k.node(phone).translateY]]);
+  key(k, phone, "rotateY", [[PHONE_AT, -60, ease.out("expo")], [PHONE_AT + 1400, -16]]);
+  k.behave(phone, "translateY", [{ kind: "sine", amp: 10, freq: 0.3 }]);
+  captionParts(k, s, { kicker: CAPTION.kicker, cta: CAPTION.cta });
+  const col = column(s, 300);
+  caption(k, sheet, s, { ...CAPTION, step: "subtitle", width: col.width, align: "CENTER", at: { x: col.x, y: Math.round(64 * s.u) } });
+  k.cues(sheet, CUES);
+}
+var laptop_reveal_default = defineTemplate({
+  id: "motion-3d-laptop-reveal",
+  meta: {
+    name: "Laptop reveal",
+    description: "A closed laptop opens on its hinge in 3D, the screen wakes to your web app, the camera pushes in and a phone rises beside it \u2014 an 8-second, 60 fps 16:9 reveal for a web launch. Swap the display's screen, or drop in a screenshot",
+    category: "animation",
+    tags: ["animation", "3d", "laptop", "web app", "saas", "device", "mockup", "reveal", "launch"],
+    platforms: ["youtube", "linkedin", "x", "web"],
+    formats: ["video", "intro", "ad"],
+    useCases: ["launch", "announcement"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  build() {
+    const k = new Kit("Laptop reveal", preset(SIZES[0]));
+    brand(k, "dark");
+    appScreens(k, ["Home", "Dashboard", "Screenshot"]);
+    devices(k, ["Phone", "Laptop lid", "Laptop lid back", "Laptop base"], { laptop: "Screen / Dashboard" });
+    const [cover] = sizes(k, SIZES, (sheet, s) => build(k, sheet, s));
+    k.setCover(cover);
+    return k.finish();
+  }
+});
+
+export {
+  laptop_reveal_default
+};

package/dist/chunks/chunk-5RBWERLP.js

@@ -0,0 +1,170 @@
+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 {
+  DEVICE_COLORS
+} from "./chunk-SKMGZGNY.js";
+import {
+  APP_COLORS
+} from "./chunk-7LNASDR7.js";
+import {
+  pill
+} from "./chunk-EK5CFFJO.js";
+import {
+  presetSafeRect
+} from "./chunk-GUR6XRHF.js";
+import {
+  preset
+} from "./chunk-SOHOKD4X.js";
+import {
+  ease
+} from "./chunk-NKAPBBXH.js";
+import {
+  init_page_presets,
+  presetPx
+} from "./chunk-I3NUEMNB.js";
+import {
+  focalFromPerspective,
+  init_transform3d
+} from "./chunk-7ECF2YL5.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/motion3d/stage.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_page_presets();
+init_transform3d();
+var size = (id) => {
+  const { width: W, height: H } = presetPx(preset(id));
+  return { preset: id, W, H, u: Math.min(W, H) / 1080, tall: H > W * 1.2, wide: W > H * 1.2 };
+};
+var STAGE = {
+  dark: { background: "#07110D", text: "#F2F7F4", onBackground: "#A9BBB2" },
+  light: { background: "#EDF2EF", text: "#0E1A16", onBackground: "#4B5A53" }
+};
+function brand(k, stage2, more = {}) {
+  k.brand({ ...STAGE[stage2], ...APP_COLORS, ...DEVICE_COLORS, ...more }, { name: "Fern", tagline: "Money, sorted." });
+}
+function sizes(k, ids, build) {
+  return ids.map((id, i) => {
+    const sheet = i === 0 ? k.sheet : k.addSheet(preset(id));
+    build(sheet, size(id));
+    return sheet;
+  });
+}
+function stage(k, sheet, s, o) {
+  k.flowSheet(sheet, 0, 0, o.ground ?? "background", "CENTER", "CENTER");
+  k.patch(sheet, { clipsContent: true });
+  k.timeline(sheet, { duration: o.duration, fps: o.fps });
+  const scene = k.group(sheet, { x: 0, y: 0, width: s.W, height: s.H }, { name: "Scene", absolute: true });
+  k.scene3d(scene, { camera: { focalLength: focalFromPerspective(o.perspective ?? 2200 * s.u, s.W) }, ...o.lights ? { lights: o.lights } : {} });
+  return scene;
+}
+function restCamera(k, scene, camera) {
+  const s3 = k.node(scene).scene3d;
+  if (!s3) throw new Error("restCamera: not a 3D scene");
+  k.scene3d(scene, { ...s3, camera: { ...s3.camera, ...camera } });
+}
+function glow(k, sheet, role, d, cx, cy, opacity = 0.35, name = "Glow") {
+  const blur = { type: "LAYER_BLUR", radius: Math.round(d * 0.22), visible: true };
+  return k.ellipse(sheet, d, role, { name, opacity, effects: [blur], absolute: { x: Math.round(cx - d / 2), y: Math.round(cy - d / 2) } });
+}
+function typeStep(k, s, step) {
+  const px = Math.round(s.u * { display: s.tall ? 96 : 104, title: s.tall ? 72 : 76, subtitle: 56, body: 34, label: 26 }[step]);
+  const name = `${step[0].toUpperCase()}${step.slice(1)} ${px}`;
+  if (step === "display") k.textStyle(name, { size: px, fontWeight: 800, letterSpacing: -0.035 * px, lineHeight: Math.round(px * 1.04) });
+  else if (step === "title" || step === "subtitle") k.textStyle(name, { size: px, fontWeight: 800, letterSpacing: -0.03 * px, lineHeight: Math.round(px * 1.08) });
+  else if (step === "body") k.textStyle(name, { size: px, fontWeight: 500, lineHeight: Math.round(px * 1.35) });
+  else k.textStyle(name, { size: px, fontWeight: 800, letterSpacing: 0.08 * px, lineHeight: Math.round(px * 1.25), textCase: "UPPER" });
+  return name;
+}
+function captionParts(k, s, o = {}) {
+  const pad = (v, h) => [Math.round(v * s.u), Math.round(h * s.u)];
+  if (o.kicker !== void 0 && !k.hasComponent(`Kicker ${typeStep(k, s, "label")}`)) {
+    const st = typeStep(k, s, "label");
+    pill(k, `Kicker ${st}`, { fill: "accent", ink: "onAccent", style: st, label: o.kicker, pad: pad(12, 24) });
+  }
+  if (o.cta !== void 0 && !k.hasComponent(`Button ${typeStep(k, s, "body")}`)) {
+    const st = typeStep(k, s, "body");
+    pill(k, `Button ${st}`, { fill: "primary", ink: "onPrimary", style: st, label: o.cta, pad: pad(22, 44) });
+  }
+}
+function caption(k, parent, s, c) {
+  const center = c.align === "CENTER";
+  const block = k.stack(parent, {
+    width: c.width,
+    gap: Math.round(22 * s.u),
+    align: center ? "CENTER" : "MIN",
+    absolute: c.at,
+    name: c.name,
+    ...c.panel ? { fill: k.tint("background", 0.84), radius: Math.round(40 * s.u), padding: Math.round(56 * s.u), effects: [{ type: "BACKGROUND_BLUR", radius: 40, visible: true }] } : {}
+  });
+  if (c.kicker) k.instance(block, `Kicker ${typeStep(k, s, "label")}`, { Label: c.kicker }, { name: `${c.name} kicker` });
+  k.text(block, c.title, { style: typeStep(k, s, c.step ?? (c.big ? "display" : "title")), color: c.ink ?? "text", align: center ? "CENTER" : "LEFT", name: `${c.name} title` });
+  if (c.body) k.text(block, c.body, { style: typeStep(k, s, "body"), color: c.muted ?? "onBackground", align: center ? "CENTER" : "LEFT", name: `${c.name} body` });
+  if (c.cta) k.instance(block, `Button ${typeStep(k, s, "body")}`, { Label: c.cta }, { name: `${c.name} button` });
+  return block;
+}
+function captionCues(c, at, out, o = {}) {
+  const parts = [c.kicker && `${c.name} kicker`, o.title !== false && `${c.name} title`, c.body && `${c.name} body`, c.cta && `${c.name} button`].filter((x) => !!x);
+  return [
+    { layer: parts, preset: "rise-in", at, params: { duration: 700 }, stagger: { delay: 120 } },
+    ...out !== void 0 ? [{ layer: c.name, preset: "fade-out", at: out, params: { duration: 400 } }] : []
+  ];
+}
+function endCard(k, parent, s, o) {
+  const block = k.stack(parent, { width: o.width, gap: Math.round(24 * s.u), align: "CENTER", absolute: { x: Math.round((s.W - o.width) / 2), y: Math.round(o.y) }, name: "End card" });
+  const tile = k.stack(block, { width: "HUG", fill: "primary", radius: Math.round(44 * s.u), padding: Math.round(30 * s.u), name: "End logo" });
+  k.logo(tile, Math.round(110 * s.u), Math.round(110 * s.u));
+  k.text(block, "{{brand.name}}", { style: typeStep(k, s, "display"), color: "text", align: "CENTER", name: "End name" });
+  k.text(block, "{{brand.tagline}}", { style: typeStep(k, s, "body"), color: "onBackground", align: "CENTER", name: "End tagline" });
+  k.instance(block, `Button ${typeStep(k, s, "body")}`, { Label: o.cta }, { name: "End button" });
+  return block;
+}
+var END_CARD_PARTS = ["End logo", "End name", "End tagline", "End button"];
+function safeRectOf(s) {
+  return presetSafeRect(s.preset, s.W, s.H) ?? { x: 0, y: 0, width: s.W, height: s.H };
+}
+function rig(k, parent, s, name, w, h, cx, cy) {
+  const r = safeRectOf(s);
+  const x = Math.round(r.x + (r.width - w) / 2), y = Math.round(r.y + (r.height - h) / 2);
+  const g = k.group(parent, { x, y, width: w, height: h }, { name });
+  k.patch(g, { translateX: Math.round(cx - (x + w / 2)), translateY: Math.round(cy - (y + h / 2)) });
+  return g;
+}
+function column(s, margin = 96) {
+  const r = safeRectOf(s);
+  const side = Math.max(Math.round(margin * s.u), Math.ceil(r.x), Math.ceil(s.W - r.x - r.width));
+  return { x: side, width: s.W - 2 * side, top: Math.ceil(r.y), bottom: Math.floor(r.y + r.height) };
+}
+function phrases(k, id, list, o = {}) {
+  const fade = o.fade ?? 220, rise = o.rise ?? 24;
+  k.animate(id, "text.content", list.map(([t, v]) => ({ t, v, ease: ease.hold })));
+  const changes = list.slice(1).map(([t]) => t);
+  k.animate(id, "opacity", [{ t: 0, v: 1, ease: ease.hold }, ...changes.flatMap((t) => [{ t: t - fade, v: 1, ease: ease.named("cubic", "in") }, { t, v: 0, ease: ease.out("cubic") }, { t: t + fade, v: 1, ease: ease.hold }])]);
+  k.animate(id, "translateY", [{ t: 0, v: 0, ease: ease.hold }, ...changes.flatMap((t) => [{ t, v: rise, ease: ease.out("cubic") }, { t: t + fade, v: 0, ease: ease.hold }])]);
+}
+
+export {
+  size,
+  STAGE,
+  brand,
+  sizes,
+  stage,
+  restCamera,
+  glow,
+  typeStep,
+  captionParts,
+  caption,
+  captionCues,
+  endCard,
+  END_CARD_PARTS,
+  safeRectOf,
+  rig,
+  column,
+  phrases
+};

package/dist/chunks/chunk-5WOXBPD6.js

@@ -0,0 +1,55 @@
+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 {
+  slideshow
+} from "./chunk-R63EHB4Z.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/slideshow/holiday.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var story = {
+  id: "motion-slideshow-holiday",
+  song: "littleSteps",
+  meta: {
+    name: "Family holiday recap",
+    description: "A cosy fifty-second recap of the winter holidays: a title card with the family name, three parts (home, the snow, New Year\u2019s Eve), fourteen scenes cut on the beats of a music-box tune (made by PopCraft, CC0), gentle Ken Burns moves, dissolves, slides, dips and light leaks, and a closing card. Photos are CC0 from Wikimedia Commons; drop your own on any frame.",
+    tags: ["animation", "slideshow", "holiday", "christmas", "winter", "family", "recap", "photo", "music", "scenes", "ken burns", "video"],
+    platforms: ["instagram", "facebook", "youtube"],
+    formats: ["video", "reel", "post"],
+    useCases: ["event"],
+    created: "2026-09-29",
+    updated: "2026-09-29"
+  },
+  brand: { paper: "#F6F2EA", onPaper: "#2B3A33", accent: "#B5453A", shade: "#141A17", onPhoto: "#FFFFFF", leak: "#FFB763" },
+  fields: { names: "The Carter family", date: "December 2025" },
+  scenes: [
+    { kind: "title", name: "Opening", photo: "holiday-00", kicker: "Our holidays", beats: 8, move: "in", focus: 0.35 },
+    { kind: "chapter", name: "Chapter 1", kicker: "Part one", title: "Home for the holidays", beats: 4 },
+    { kind: "photo", name: "The tree", photo: "holiday-01", caption: "The tree went up on the first", beats: 6, move: "left", focus: 0.8 },
+    { kind: "photo", name: "Gingerbread", photo: "holiday-02", layout: "matted", caption: "Grandma\u2019s gingerbread village", beats: 4, move: "in", into: "push" },
+    { kind: "photo", name: "Orange and clove", photo: "holiday-06", layout: "matted", caption: "The kitchen smelled of orange and clove", beats: 4, move: "right" },
+    { kind: "dip", name: "Dip 1", to: "paper", beats: 1 },
+    { kind: "chapter", name: "Chapter 2", kicker: "Part two", title: "Out in the snow", beats: 4 },
+    { kind: "photo", name: "The cabin", photo: "holiday-03", caption: "Two nights at the cabin", beats: 6, move: "up", into: "slide" },
+    { kind: "photo", name: "Choosing the tree", photo: "holiday-05", caption: "Choosing the tree", beats: 6, move: "in", focus: 0.45 },
+    { kind: "photo", name: "Cocoa", photo: "holiday-04", caption: "Cocoa, then more cocoa", beats: 4, move: "in" },
+    { kind: "dip", name: "Dip 2", to: "shade", beats: 1 },
+    { kind: "chapter", name: "Chapter 3", kicker: "Part three", title: "New Year\u2019s Eve", beats: 4 },
+    { kind: "photo", name: "By the fire", photo: "holiday-07", caption: "By the fire", beats: 6, move: "in", into: "leak" },
+    { kind: "photo", name: "Midnight", photo: "holiday-08", caption: "Midnight", beats: 6, move: "in", focus: 0.45, into: "leak" },
+    { kind: "photo", name: "The year ahead", photo: "holiday-09", caption: "Here\u2019s to the year ahead", beats: 8, move: "right" },
+    { kind: "end", name: "Ending", kicker: "Happy holidays, with love" }
+  ]
+};
+var holiday_default = slideshow(story);
+
+export {
+  story,
+  holiday_default
+};