@popcraft/kit 0.24.2 → 0.25.0

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

@@ -0,0 +1,558 @@
+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 {
+  buildTemplateWall
+} from "./chunk-V6COW3DB.js";
+import {
+  APPS,
+  BEAT,
+  BENTO,
+  BENTO_GAP,
+  BENTO_ORDER,
+  BOARD,
+  COLLABORATORS,
+  COLLAB_FEATURES,
+  COLORS,
+  FX,
+  FX_LEN,
+  FX_START,
+  GH,
+  GW,
+  GX,
+  GY,
+  H,
+  HERO,
+  MODES,
+  W,
+  WIPE_RADIUS,
+  hexColor
+} from "./chunk-4CV2R2GI.js";
+import {
+  key,
+  scale
+} from "./chunk-FAAVZ2GX.js";
+import {
+  ease
+} from "./chunk-6DWY3DOQ.js";
+import {
+  hash01,
+  init_modifiers
+} from "./chunk-CAGDE6PT.js";
+import {
+  evalInterp,
+  init_easing
+} from "./chunk-6YICR6OK.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-6VMOKHMF.js";
+
+// templates/src/motion/launch-trailer/scenes.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_easing();
+init_modifiers();
+var OUT = ease.out("cubic");
+var IO = ease.inOut("cubic");
+var IN = ease.named("cubic", "in");
+var BACK = ease.back(1.9);
+var EXPO = ease.out("expo");
+var LIN = ease.linear;
+var HOLD = ease.hold;
+var QUAD_IN = ease.named("quad", "in");
+function reach(interp, y) {
+  let lo = 0, hi = 1;
+  for (let i = 0; i < 40; i++) {
+    const m = (lo + hi) / 2;
+    if (evalInterp(interp, m, 1) >= y) hi = m;
+    else lo = m;
+  }
+  return hi;
+}
+var behave = (k, id, path, mods) => {
+  for (const p of path === "scale" ? ["scaleX", "scaleY"] : [path]) k.behave(id, p, mods);
+};
+var arrive = (a, b, curve, gain) => [[a, 0, LIN], [a + (b - a) * reach(curve, 1 / gain), 1]];
+var shadow = (hex, alpha, y, blur, spread = 0) => ({ type: "DROP_SHADOW", color: hexColor(hex, alpha), offset: { x: 0, y }, blur, spread, visible: true, blendMode: "NORMAL" });
+function layer(k, parent, name, o = {}) {
+  return k.stack(parent, { name, width: W, height: H, absolute: { x: 0, y: 0 }, ...o.center ? { align: "CENTER", justify: "CENTER" } : {}, ...o.fill ? { fill: o.fill } : {} });
+}
+function macWindow(k, parent, title, shot, width, at, name = "Window") {
+  const win = k.stack(parent, {
+    name,
+    width,
+    height: 44 + width * 0.625,
+    fill: "chrome",
+    radius: 22,
+    clip: true,
+    absolute: at,
+    effects: [shadow("#000000", 0.55, 60, 120), shadow("#FFFFFF", 0.08, 0, 0, 1.5)]
+  });
+  const bar = k.stack(win, { name: "Title bar", direction: "HORIZONTAL", height: 44, fill: "chromeBar", gap: 10, padding: { top: 0, right: 0, bottom: 0, left: 18 }, align: "CENTER" });
+  for (const c of ["lightRed", "lightAmber", "lightGreen"]) k.ellipse(bar, 14, c, { name: "Light" });
+  const t = k.text(bar, title, { style: "Window title 17", color: "chromeTitle", width: "FILL", align: "CENTER", name: "Title" });
+  k.patch(t, { translateX: -40 });
+  k.picture(win, `/screenshots/${shot}`, "FILL", width * 0.625, { name: "Screenshot" });
+  return win;
+}
+function scene1(k, s) {
+  const dot = k.ellipse(s, 120, "pop", { name: "Dot", absolute: { x: W / 2 - 60, y: H / 2 - 60 } });
+  scale(k, dot, [[0, 1e-4, BACK], [400, 1, HOLD], [500, 1, IO], [1500, 40]]);
+  behave(k, dot, "scale", [{ kind: "sine", amp: 0.06, freq: 18 / (2 * Math.PI), animated: { amp: [{ id: "a1", t: 0, v: 0, out: LIN }, { id: "a2", t: 500, v: 0.06, out: HOLD }, { id: "a3", t: 501, v: 0, out: HOLD }] } }]);
+  const cols = ["pink", "blue", "mint", "popPaper", "popInk"];
+  for (let i = 0; i < 26; i++) {
+    const sz = 26 + i * 37 % 60, kind = i % 3;
+    const at = { x: W / 2 - sz / 2, y: H / 2 - sz / 2 };
+    const id = kind === 0 ? k.ellipse(s, sz, cols[i % 5], { name: "Confetti", absolute: at }) : kind === 1 ? k.rect(s, sz, sz, cols[i % 5], { name: "Confetti", radius: 8, absolute: at }) : k.vector(s, sz, sz, [{ closed: true, points: [{ x: sz / 2, y: 0 }, { x: sz, y: sz }, { x: 0, y: sz }] }], cols[i % 5], { name: "Confetti", absolute: at });
+    const ang = i / 26 * Math.PI * 2 + i % 4 * 0.2, dist = 520 + i * 131 % 420;
+    const dx = Math.cos(ang) * dist, dy = Math.sin(ang) * dist * 0.62, rot = (i % 2 ? 1 : -1) * (140 + i * 13);
+    const a = 1050 + i * 4;
+    k.patch(id, { translateX: dx, translateY: dy, rotation: rot });
+    key(k, id, "translateX", [[a, 0, EXPO], [2400, dx]]);
+    key(k, id, "translateY", [[a, 0, EXPO], [2400, dy]]);
+    key(k, id, "y", [[1500, at.y, QUAD_IN], [4200, at.y + 180]]);
+    key(k, id, "rotation", [[a, 0, EXPO], [2400, rot]]);
+    scale(k, id, [[a, 0, EXPO], [2400, 1, HOLD], [3300, 1, LIN], [4e3, 0]]);
+    key(k, id, "opacity", [[a, 0, HOLD], [a + 1, 1, HOLD], [3300, 1, LIN], [4e3, 0]]);
+  }
+  const meet = layer(k, s, "Meet", { center: true });
+  const words = k.text(meet, "Meet PopCraft.", { style: "Meet 210", color: "popInk", autoWidth: true, name: "Meet PopCraft" });
+  const animator = { id: "ta1", name: "Words rise", unit: "word", range: { start: 0, end: 1, offset: 0 }, order: "forward", stagger: 280, props: { translateY: 0, scale: 1, opacity: 1 } };
+  k.patch(words, { textAnimators: [animator] });
+  key(k, words, "text.animators[@ta1].props.translateY", [[1600, 160, BACK], [2300, 0]]);
+  key(k, words, "text.animators[@ta1].props.scale", [[1600, 0.7, BACK], [2300, 1]]);
+  key(k, words, "text.animators[@ta1].props.opacity", arrive(1600, 2300, BACK, 1.5));
+  scale(k, meet, [[2600, 1, LIN], [4200, 1.06]]);
+  key(k, meet, "opacity", [[3850, 1, IN], [4200, 0]]);
+}
+function scene2(k, s) {
+  const a = layer(k, s, "Your whole studio", { center: true });
+  k.text(a, "Your whole studio.", { style: "Statement 150", color: "popInk", autoWidth: true, name: "Line 1" });
+  key(k, a, "translateY", [[50, 90, OUT], [600, 0, HOLD], [1500, 0, IN], [1800, -140]]);
+  key(k, a, "opacity", [[50, 0, OUT], [600, 1, HOLD], [1500, 1, IN], [1800, 0]]);
+  const b = layer(k, s, "Now on your desktop", { center: true });
+  const row = k.stack(b, { name: "Line 2", direction: "HORIZONTAL", width: "HUG", align: "CENTER", gap: 0 });
+  k.text(row, "Now on your\xA0", { style: "Statement 150", color: "popInk", autoWidth: true, name: "Now on your" });
+  const mark = k.stack(row, { name: "Highlight", direction: "HORIZONTAL", width: "HUG", fill: "popInk", radius: 18, padding: { top: 22, right: 27, bottom: 22, left: 27 } });
+  k.text(mark, "desktop.", { style: "Statement 150", color: "pop", autoWidth: true, name: "desktop" });
+  key(k, b, "translateY", [[1750, 140, BACK], [2350, 0]]);
+  key(k, b, "opacity", arrive(1750, 2350, BACK, 1.4));
+  scale(k, b, [[2300, 1, LIN], [3400, 1.05]]);
+}
+function scene3(k, s) {
+  const wallpaper = [{
+    type: "GRADIENT_RADIAL",
+    opacity: 1,
+    visible: true,
+    gradientStops: [["#FFE96A", 0], ["#F7B733", 0.35], ["#E45A84", 0.7], ["#4A2A73", 1]].map(([h, position]) => ({ position, color: hexColor(h) })),
+    gradientHandlePositions: [{ x: 0.3, y: 0.2 }, { x: 1.35, y: 0.2 }, { x: 0.3, y: 1.25 }]
+  }];
+  const desk = layer(k, s, "Desktop", { fill: wallpaper });
+  scale(k, desk, [[0, 1.08, OUT], [600, 1, HOLD], [4600, 1, IN], [5e3, 1.5]]);
+  key(k, desk, "opacity", [[4700, 1, IN], [5e3, 0]]);
+  const menu = k.stack(desk, { name: "Menu bar", direction: "HORIZONTAL", width: W, height: 36, fill: k.tint("white", 0.45), justify: "SPACE_BETWEEN", align: "CENTER", padding: { top: 0, right: 22, bottom: 0, left: 22 }, absolute: { x: 0, y: 0 }, effects: [{ type: "BACKGROUND_BLUR", radius: 20, visible: true }] });
+  const left = k.stack(menu, { name: "Menus", direction: "HORIZONTAL", width: "HUG", gap: 28, align: "CENTER" });
+  k.text(left, "\u25CF", { style: "Menu mark 20", color: "popInk", autoWidth: true, name: "Apple" });
+  k.text(left, "PopCraft", { style: "Menu bold 17", color: "popInk", autoWidth: true, name: "App menu" });
+  for (const m of ["File", "Edit", "View", "Object", "Window"]) k.text(left, m, { style: "Menu 17", color: "popInk", autoWidth: true, name: m });
+  k.text(menu, "Fri 9:41", { style: "Menu 17", color: "popInk", autoWidth: true, name: "Clock" });
+  key(k, menu, "opacity", [[2100, 0, LIN], [2400, 1]]);
+  const dock = k.stack(desk, { name: "Dock", direction: "HORIZONTAL", width: 760, height: 118, radius: 32, fill: k.tint("white", 0.38), justify: "CENTER", align: "CENTER", gap: 18, absolute: { x: W / 2 - 380, y: H - 150 } });
+  let icon = "";
+  for (const c of ["tileSky", "tileGreen", "tileOrange", "POP", "tilePurple", "tileRed", "tileGrey"]) {
+    if (c === "POP") icon = k.picture(dock, "/press/popcraft-app-icon.png", 92, 92, { fit: "FIT", name: "PopCraft" });
+    else k.rect(dock, 84, 84, c, { radius: 20, opacity: 0.9, name: "App" });
+  }
+  const light = k.ellipse(dock, 8, "popInk", { name: "Running light", absolute: { x: 375, y: 104 } });
+  key(k, dock, "translateY", [[200, 200, BACK], [800, 0]]);
+  behave(k, icon, "translateY", [{ kind: "bounce", amp: -60, freq: 2 / 1.3, decay: 0.4 / 1.3, start: 900, end: 2200 }]);
+  key(k, light, "opacity", [[1400, 0, LIN], [1600, 1]]);
+  const win = macWindow(k, desk, "Untitled \u2014 PopCraft", "editor-design.png", 1500, { x: (W - 1500) / 2, y: 90 }, "Mac window");
+  k.patch(win, { anchorY: 1.15 });
+  scale(k, win, [[2e3, 0.04, EXPO], [2800, 1, LIN], [5e3, 1.05]]);
+  key(k, win, "translateY", [[2e3, 420, EXPO], [2800, 0, LIN], [5e3, -20]]);
+  key(k, win, "opacity", arrive(2e3, 2800, EXPO, 3));
+}
+function scene4(k, s) {
+  MODES.forEach((m, i) => {
+    const beat = k.stack(s, { name: `Beat ${i + 1} \xB7 ${m.title}`, width: W, height: H, clip: true, absolute: { x: 0, y: 0 } });
+    k.patch(beat, { motion: { tracks: {}, span: { in: i * BEAT, out: (i + 1) * BEAT }, timeOffset: i * BEAT } });
+    if (i > 0) {
+      const cx = i % 2 ? W * 0.9 : W * 0.1, cy = i % 2 ? H * 0.9 : H * 0.1, d = WIPE_RADIUS * 2;
+      const mask = k.ellipse(beat, d, "white", { name: "Circle wipe", mask: true, absolute: { x: cx - d / 2, y: cy - d / 2 } });
+      scale(k, mask, [[0, 0, EXPO], [350, 1]]);
+    }
+    k.rect(beat, W, H, m.ground, { name: "Ground", absolute: { x: 0, y: 0 } });
+    const word = k.text(beat, m.word, { style: "Mode 220", color: m.ink, autoWidth: true, name: "Word", absolute: { x: 110, y: 120 } });
+    key(k, word, "translateX", [[50, -220, BACK], [500, 0]]);
+    key(k, word, "rotation", [[50, -6, BACK], [500, 0]]);
+    key(k, word, "opacity", arrive(50, 500, BACK, 1.5));
+    const idx = k.text(beat, `0${i + 1} / 0${MODES.length}`, { style: "Index 30", color: m.ink, autoWidth: true, name: "Index", absolute: { x: 118, y: 76 } });
+    k.patch(idx, { opacity: 0.85 });
+    key(k, idx, "opacity", [[150, 0, LIN], [400, 0.85]]);
+    const win = macWindow(k, beat, `${m.title} \u2014 PopCraft`, m.shot, 1180, { x: 640, y: 350 });
+    key(k, win, "x", [[0, 640, LIN], [BEAT, 600]]);
+    key(k, win, "translateX", [[120, 900, EXPO], [700, 0]]);
+    key(k, win, "translateY", [[120, 120, EXPO], [700, 0]]);
+    key(k, win, "rotation", [[120, 8, EXPO], [700, -1.5]]);
+    const blob = i % 2 ? k.ellipse(beat, 260, m.ink, { name: "Blob", opacity: 0.12, absolute: { x: 150, y: 640 } }) : k.rect(beat, 260, 260, m.ink, { name: "Blob", radius: 48, opacity: 0.12, absolute: { x: 150, y: 640 } });
+    behave(k, blob, "rotation", [{ kind: "spin", rate: 60 }]);
+    scale(k, blob, [[100, 0.3, BACK], [700, 1]]);
+  });
+}
+function sceneA(k, s) {
+  const head = k.stack(s, { name: "Five tools", width: W, align: "CENTER", absolute: { x: 0, y: 110 } });
+  k.text(head, "Five tools you switch between all day.", { style: "Caption 46", color: "caption", autoWidth: true, name: "Five tools" });
+  key(k, head, "opacity", [[0, 0, LIN], [300, 1, HOLD], [2200, 1, LIN], [2400, 0]]);
+  APPS.forEach(([name, color], i) => {
+    const bx = 160 + i * 150, by = 250 + i * 150;
+    const id = k.text(s, name, { style: "Big 150", color, autoWidth: true, name: "App", absolute: { x: bx, y: by } });
+    const w = k.node(id).width;
+    const a = 150 + i * 180, b = 750 + i * 180;
+    key(k, id, "x", [[a, bx - 1400, EXPO], [b, bx, HOLD], [2e3, bx, IO], [2550, W / 2 - w / 2]]);
+    key(k, id, "y", [[2e3, by, IO], [2550, H / 2 - 90]]);
+    key(k, id, "rotation", [[a, -8, EXPO], [b, 0]]);
+    scale(k, id, [[2e3, 1, IO], [2550, 0.05]]);
+    key(k, id, "opacity", [[a, 0, EXPO], [b, 1, HOLD], [2e3, 1, IO], [2550, 0]]);
+  });
+  const one = layer(k, s, "One canvas", { center: true });
+  k.text(one, "One canvas.", { style: "One 200", color: "pop", autoWidth: true, name: "One canvas" });
+  scale(k, one, [[2450, 0.2, BACK], [2950, 1, LIN], [3600, 1.06]]);
+  key(k, one, "opacity", [...arrive(2450, 2950, BACK, 2).map((x, j) => j === 1 ? [x[0], 1, HOLD] : x), [3400, 1, IN], [3600, 0]]);
+}
+function sceneB(k, s) {
+  buildTemplateWall(k, s, { pill: "popInk", onPill: "pop", caption: "caption", card: "white" });
+}
+var rgb = (role) => hexColor(COLORS[role]);
+var BRAND_PLASMA = `struct Params {
+  speed: f32,    // @range 0 4 @default 1
+  colorA: vec4f, // @default #3D7BFF
+  colorB: vec4f, // @default #FF4FA3
+  colorC: vec4f, // @default #FFED00
+}
+
+fn shade(uv: vec2<f32>, res: vec2<f32>, time: f32) -> vec4<f32> {
+  let t = time * p.speed;
+  let q = vec2<f32>(uv.x, 1.0 - uv.y) * vec2<f32>(res.x / res.y, 1.0) * 6.0;
+  let v = sin(q.x + t * 2.0) + sin(q.y * 1.3 + t * 1.4) + sin((q.x + q.y) * 0.7 + t * 1.7) + sin(length(q - vec2<f32>(5.0, 3.0)) * 1.4 - t * 2.5);
+  let k = 0.5 + 0.5 * sin(v * 1.1 + t * 0.3);
+  let k2 = 0.5 + 0.5 * sin(v * 0.7 - 1.3);
+  let c = mix(mix(p.colorA.rgb, p.colorB.rgb, smoothstep(0.2, 0.8, k)), p.colorC.rgb, smoothstep(0.55, 0.95, k2));
+  return vec4<f32>(c, 1.0);
+}`;
+var EDGE_STEP = 1920 / 0.7;
+function edgePoints() {
+  const pts = [];
+  for (let y = 0; y <= H; y += 20) {
+    const u = y / H * 8, i = Math.floor(u), f = u - i, sm = f * f * (3 - 2 * f);
+    const n = hash01(7, i) + (hash01(7, i + 1) - hash01(7, i)) * sm;
+    pts.push({ x: -(0.3 / 0.7) * W * (1 - y / H) - (n - 0.5) * 0.12 * EDGE_STEP, y });
+  }
+  return pts;
+}
+var WIPE_FROM = -0.15 * EDGE_STEP;
+var WIPE_TO = 1.25 * EDGE_STEP;
+var WIPE_MS = 350;
+function sceneC(k, s) {
+  const fx = layer(k, s, "Effects");
+  scale(k, fx, [[0, 1, LIN], [6400, 1.064]]);
+  key(k, fx, "opacity", [[0, 0, LIN], [200, 1, HOLD], [6100, 1, IN], [6400, 0]]);
+  const start = (i) => FX_START + i * FX_LEN;
+  const shot = "/screenshots/draw-mode.png";
+  const edge = edgePoints();
+  const OFF = 4200;
+  const content = [
+    (p) => {
+      k.rect(p, W, H, k.shader("Mesh gradient", { speed: 1, spread: 0.45, colorA: rgb("pop"), colorB: rgb("pink"), colorC: rgb("blue"), base: rgb("mint") }), { name: "Mesh gradient", absolute: { x: 0, y: 0 } });
+    },
+    (p) => {
+      k.rect(p, W, H, k.shader("Brand plasma", { speed: 1, colorA: rgb("blue"), colorB: rgb("pink"), colorC: rgb("pop") }, BRAND_PLASMA), { name: "Plasma", absolute: { x: 0, y: 0 } });
+    },
+    (p) => {
+      k.picture(p, shot, W, H, { name: "Screenshot", absolute: { x: 0, y: 0 } });
+      k.rect(p, W, H, "black", { name: "Dim", opacity: 0.2, absolute: { x: 0, y: 0 } });
+      const R = 0.34 * H;
+      const lens = k.ellipse(p, R * 2, k.tint("white", 0.04), { name: "Lens", absolute: { x: 0.85 / 1.78 * W - R, y: 0.45 * H - R }, effects: [{ type: "GLASS", radius: 0, refraction: 48, dispersion: 0.4, rim: 0.7, depth: 0.6, visible: true }] });
+      const t0 = 31.8;
+      behave(k, lens, "x", [{ kind: "sine", amp: 0.22 / 1.78 * W, freq: 1.3 / (2 * Math.PI), phase: 1.3 * t0 / (2 * Math.PI) % 1 }]);
+      behave(k, lens, "y", [{ kind: "sine", amp: -0.15 * H, freq: 1.7 / (2 * Math.PI), phase: (1.7 * t0 / (2 * Math.PI) + 0.25) % 1 }]);
+    },
+    (p) => {
+      const dots = k.rect(p, W, H, "pop", { name: "Halftone", absolute: { x: 0, y: 0 }, effects: [{ type: "HALFTONE", angle: 45, dotSize: 22, contrast: 1, color1: rgb("pink"), color2: rgb("pop"), colorMode: "INK", shape: "CIRCLE", layout: "UNIFORM", toneSource: "RADIAL_GRADIENT", center: { x: 0.5, y: 0.5 }, visible: true }] });
+      behave(k, dots, "effects[#0].center.x", [{ kind: "sine", amp: 0.2, freq: 1 / (2 * Math.PI), phase: 31.8 / (2 * Math.PI) % 1 }]);
+    },
+    (p) => {
+      k.picture(p, shot, W, H, { name: "Progressive blur", absolute: { x: 0, y: 0 }, effects: [{ type: "PROGRESSIVE_BLUR", radius: 48, angle: 270, start: 0, end: 0.85, visible: true }] });
+    },
+    (p) => {
+      k.rect(p, W, H, k.shader("Grid glow", { cells: 12, speed: 3, line: 0.06, accent: rgb("blue"), base: rgb("popInk") }), { name: "Grid glow", absolute: { x: 0, y: 0 } });
+    }
+  ];
+  FX.forEach(([name], i) => {
+    const holder = i === 0 ? layer(k, fx, name) : k.stack(fx, { name, width: W, height: H, clip: true, absolute: { x: 0, y: 0 } });
+    const until = i < FX.length - 1 ? start(i + 1) + WIPE_MS : void 0;
+    k.patch(holder, { motion: { tracks: {}, span: { in: i === 0 ? 0 : start(i), ...until !== void 0 ? { out: until } : {} } } });
+    if (i > 0) {
+      const m = k.vector(holder, OFF + 400, H, [{ closed: true, points: [{ x: 0, y: 0 }, ...edge.map((p) => ({ x: p.x + OFF, y: p.y })), { x: 0, y: H }] }], "white", { name: "Noisy wipe", mask: true, absolute: { x: -OFF, y: 0 } });
+      key(k, m, "translateX", [[start(i), WIPE_FROM, IO], [start(i) + WIPE_MS, WIPE_TO]]);
+    }
+    content[i](holder);
+  });
+  const line = k.vector(fx, OFF + 400, H, [{ closed: false, points: edge.map((p) => ({ x: p.x + OFF, y: p.y })) }], "white", { name: "Wipe edge", strokeWidth: 28, absolute: { x: -OFF, y: 0 }, effects: [{ type: "LAYER_BLUR", radius: 10, visible: true }] });
+  const lineX = [], lineO = [[0, 0, HOLD]];
+  for (let i = 1; i < FX.length; i++) {
+    lineX.push([start(i), WIPE_FROM, IO], [start(i) + WIPE_MS, WIPE_TO, HOLD]);
+    lineO.push([start(i), 1, HOLD], [start(i) + WIPE_MS, 0, HOLD]);
+  }
+  lineX[lineX.length - 1] = [lineX[lineX.length - 1][0], WIPE_TO];
+  lineO[lineO.length - 1] = [lineO[lineO.length - 1][0], 0];
+  key(k, line, "translateX", lineX);
+  key(k, line, "opacity", lineO);
+  const head = k.text(s, "Effects that\nrun on the GPU.", { style: "Head 120", color: "white", autoWidth: true, name: "Effects that run on the GPU", absolute: { x: 110, y: 96 }, effects: [shadow("#000000", 0.55, 6, 40)] });
+  key(k, head, "translateY", [[0, 60, BACK], [500, 0]]);
+  key(k, head, "opacity", [...arrive(0, 500, BACK, 2).map((x, j) => j === 1 ? [x[0], 1, HOLD] : x), [6100, 1, LIN], [6400, 0]]);
+  const sub = k.stack(s, { name: "Effect note", direction: "HORIZONTAL", width: "HUG", fill: k.tint("popInk", 0.7), radius: 12, padding: { top: 10, right: 16, bottom: 10, left: 16 }, absolute: { x: 110, y: 830 } });
+  const subText = k.text(sub, FX[0][1], { style: "Sub 30", color: "white", autoWidth: true, name: "Note" });
+  const chip = k.stack(s, { name: "Effect name", direction: "HORIZONTAL", width: "HUG", fill: "pop", radius: 999, padding: { top: 18, right: 34, bottom: 18, left: 34 }, absolute: { x: 110, y: 880 } });
+  const chipText = k.text(chip, FX[0][0], { style: "Chip 44", color: "popInk", autoWidth: true, name: "Name" });
+  k.patch(chip, { anchorX: 0 });
+  const swap = (id, col) => k.animate(id, "text.content", FX.map((f, i) => ({ t: i === 0 ? 0 : start(i), v: f[col], ...i < FX.length - 1 ? { ease: HOLD } : {} })));
+  swap(chipText, 0);
+  swap(subText, 1);
+  const cx = [], cs = [], co = [[0, 0, HOLD]], so = [[0, 0, HOLD]];
+  FX.forEach((_, i) => {
+    const a = start(i), b = a + 350;
+    cx.push([a, -80, BACK], [b, 0, HOLD]);
+    cs.push([a, 0.6, BACK], [b, 1, HOLD]);
+    co.push([a, 0, LIN], [a + 350 * reach(BACK, 0.5), 1, HOLD]);
+    so.push([a, 0, OUT], [b, 0.8, HOLD]);
+  });
+  cx[cx.length - 1] = [cx[cx.length - 1][0], 0];
+  cs[cs.length - 1] = [cs[cs.length - 1][0], 1];
+  co.push([6100, 1, LIN], [6400, 0]);
+  so.push([6100, 0.8, LIN], [6400, 0]);
+  key(k, chip, "translateX", cx);
+  scale(k, chip, cs);
+  key(k, chip, "opacity", co);
+  key(k, sub, "opacity", so);
+  k.patch(sub, { opacity: 0.8 });
+}
+function sceneD(k, s) {
+  const cam = k.stack(s, { name: "Camera", width: W, height: H, absolute: { x: 0, y: 0 } });
+  scale(k, cam, [[0, 1.04, LIN], [3400, 1, IO], [5e3, 2.4]]);
+  key(k, cam, "translateX", [[3400, 0, IO], [5e3, -300]]);
+  behave(k, cam, "translateX", [{ kind: "sine", amp: 12, freq: 0.8 / (2 * Math.PI) }]);
+  key(k, cam, "translateY", [[3400, 0, IO], [5e3, -150]]);
+  key(k, cam, "rotation", [[3400, 0, IO], [5e3, -4]]);
+  const cards = BENTO.map((c, i) => {
+    const [col, row, cs, rs] = c.at;
+    const w = cs * GW + (cs - 1) * BENTO_GAP, h = rs * GH + (rs - 1) * BENTO_GAP;
+    const at = { x: GX + col * (GW + BENTO_GAP), y: GY + row * (GH + BENTO_GAP) };
+    const shadowFx = [shadow(COLORS.popInk, 0.22, 26, 60)];
+    let card;
+    if ("shot" in c) {
+      card = k.stack(cam, { name: c.label, width: w, height: h, radius: 26, clip: true, fill: "chrome", effects: shadowFx, absolute: at });
+      k.picture(card, `/screenshots/${c.shot}`, w, h, { name: "Screenshot", absolute: { x: 0, y: 0 } });
+      k.instance(card, "Label", { Label: c.label }, { name: "Label", absolute: { x: 18, y: h - 18 - 50 } });
+    } else {
+      card = k.stack(cam, { name: c.big, width: w, height: h, radius: 26, clip: true, fill: c.ground, effects: shadowFx, justify: "SPACE_BETWEEN", padding: { top: 30, right: 34, bottom: 30, left: 34 }, absolute: at });
+      const note = k.text(card, c.small, { style: "Card note 26", color: c.ink, name: "Note" });
+      k.patch(note, { opacity: c.ground === "blue" ? 0.85 : 0.7 });
+      k.text(card, c.big, { style: "Card 46", color: c.ink, name: "Title" });
+    }
+    const order = BENTO_ORDER[i];
+    scale(k, card, [[100, 0.3, BACK], [550, 1]]);
+    key(k, card, "rotation", [[100, order % 2 ? 8 : -8, BACK], [550, 0]]);
+    key(k, card, "opacity", arrive(100, 550, BACK, 2));
+    return { card, order };
+  });
+  k.stagger(cam, 110, { ids: [...cards].sort((a, b) => a.order - b.order).map((c) => c.card) });
+  const head = layer(k, s, "And so much more", { center: true });
+  const pill = k.stack(head, { name: "Headline card", width: "HUG", fill: "pop", radius: 40, padding: { top: 10, right: 60, bottom: 30, left: 60 }, effects: [shadow("#000000", 0.3, 40, 90)] });
+  k.text(pill, "And so much more.", { style: "Head 170", color: "popInk", autoWidth: true, name: "And so much more" });
+  scale(k, head, [[2900, 0.4, BACK], [3350, 1]]);
+  key(k, head, "rotation", [[2900, -6, BACK], [3350, 0]]);
+  key(k, head, "opacity", [...arrive(2900, 3350, BACK, 2).map((x, j) => j === 1 ? [x[0], 1, HOLD] : x), [4700, 1, IN], [5e3, 0]]);
+}
+function cursor(k, parent, c, at) {
+  const cur = k.stack(parent, { name: `Cursor \xB7 ${c.name}`, width: 160, height: 56, absolute: at });
+  const u = 40 / 24;
+  k.vector(cur, 40, 40, [{ closed: true, points: [[3, 2], [10, 21], [12.6, 13.6], [20, 11]].map(([x, y]) => ({ x: x * u, y: y * u })) }], c.color, { name: "Arrow", stroke: { color: "white", width: 1.4 * u }, absolute: { x: 0, y: 0 } });
+  const tag = k.stack(cur, { name: "Name tag", direction: "HORIZONTAL", width: "HUG", fill: c.color, radius: 10, padding: { top: 8, right: 12, bottom: 8, left: 12 }, absolute: { x: 58, y: 16 } });
+  k.text(tag, c.name, { style: "Tag 20", color: c.ink, autoWidth: true, name: "Name" });
+  return cur;
+}
+function avatar(k, parent, c, size, at) {
+  const av = k.stack(parent, { name: `Avatar \xB7 ${c.name}`, width: size, height: size, radius: size / 2, fill: c.color, align: "CENTER", justify: "CENTER", stroke: { color: "popPaper", width: 3 }, ...at ? { absolute: at } : {} });
+  k.text(av, c.name[0], { style: "Tag 20", color: c.ink, autoWidth: true, name: "Initial" });
+  return av;
+}
+function popIn(k, id, t, o = {}) {
+  const len = o.len ?? 450;
+  scale(k, id, [[t, o.from ?? 0.3, BACK], [t + len, 1]]);
+  key(k, id, "opacity", [[t, 0, LIN], [t + len * 0.4, 1]]);
+  if (o.turn) key(k, id, "rotation", [[t, o.turn, BACK], [t + len, 0]]);
+}
+function travel(k, id, path, curve = IO) {
+  key(k, id, "x", path.map(([t, x], i) => [t, x, i < path.length - 1 ? curve : void 0]));
+  key(k, id, "y", path.map(([t, , y], i) => [t, y, i < path.length - 1 ? curve : void 0]));
+}
+function scene5(k, s) {
+  const grid = k.stack(s, { name: "Grid", width: W, height: H + 80, absolute: { x: 0, y: -80 } });
+  for (let x = 0; x < W; x += 80) k.rect(grid, 1.5, H + 80, "pop", { name: "Grid line", opacity: 0.07, absolute: { x, y: 0 } });
+  for (let y = 0; y < H + 80; y += 80) k.rect(grid, W, 1.5, "pop", { name: "Grid line", opacity: 0.07, absolute: { x: 0, y } });
+  behave(k, grid, "translateY", [{ kind: "spin", rate: 30 }, { kind: "mod", period: 80 }]);
+  key(k, grid, "opacity", [[0, 0, LIN], [400, 1]]);
+  const cam = layer(k, s, "Camera");
+  scale(k, cam, [[0, 1.04, OUT], [5e3, 1]]);
+  key(k, cam, "opacity", [[0, 1, HOLD], [4600, 1, IN], [5e3, 0]]);
+  const head = k.text(cam, "Better\ntogether.", { style: "Head 120", color: "pop", autoWidth: true, name: "Better together", absolute: { x: 110, y: 220 } });
+  key(k, head, "translateY", [[100, 70, EXPO], [800, 0]]);
+  key(k, head, "opacity", [[100, 0, OUT], [500, 1]]);
+  const sub = k.text(cam, "One file. Everyone in it, live.", { style: "Caption 46", color: "caption", autoWidth: true, name: "Line", absolute: { x: 110, y: 470 } });
+  k.patch(sub, { textAlign: "LEFT", opacity: 0.85 });
+  key(k, sub, "translateY", [[300, 40, OUT], [900, 0]]);
+  key(k, sub, "opacity", [[300, 0, OUT], [900, 0.85]]);
+  const chips = k.stack(cam, { name: "Features", direction: "HORIZONTAL", wrap: true, width: 640, gap: 16, absolute: { x: 110, y: 570 } });
+  COLLAB_FEATURES.forEach(([label, ground], i) => {
+    const chip = k.stack(chips, { name: label, direction: "HORIZONTAL", width: "HUG", gap: 12, align: "CENTER", fill: ground, radius: 999, padding: { top: 14, right: 24, bottom: 14, left: 20 } });
+    k.ellipse(chip, 14, ground === "popPaper" ? "pink" : "popInk", { name: "Dot" });
+    k.text(chip, label, { style: "Label 26", color: ground === "blue" ? "popPaper" : "popInk", autoWidth: true, name: "Label" });
+    popIn(k, chip, 800 + i * 140, { from: 0.4, turn: i % 2 ? 6 : -6 });
+  });
+  const board = k.stack(cam, { name: "Board", width: BOARD.width, height: BOARD.height, fill: "popPaper", radius: 28, clip: true, absolute: { x: BOARD.x, y: BOARD.y }, effects: [shadow("#000000", 0.5, 50, 110)] });
+  key(k, board, "translateX", [[0, 260, EXPO], [900, 0]]);
+  key(k, board, "rotation", [[0, 5, EXPO], [900, 0]]);
+  key(k, board, "opacity", [[0, 0, OUT], [300, 1]]);
+  k.rect(board, BOARD.width, 72, "white", { name: "Top bar", absolute: { x: 0, y: 0 } });
+  k.rect(board, BOARD.width, 2, "popInk", { name: "Rule", opacity: 0.08, absolute: { x: 0, y: 72 } });
+  const title = k.stack(board, { name: "Title", direction: "HORIZONTAL", width: "HUG", gap: 14, align: "CENTER", absolute: { x: 30, y: 18 } });
+  k.text(title, "Team / Launch / Board", { style: "Label 26", color: "popInk", autoWidth: true, name: "Team, project, file" });
+  const kind = k.stack(title, { name: "PopCorn", direction: "HORIZONTAL", width: "HUG", fill: "pink", radius: 999, padding: { top: 6, right: 12, bottom: 6, left: 12 } });
+  k.text(kind, "PopCorn", { style: "Tag 20", color: "popInk", autoWidth: true, name: "Label" });
+  const joins = [250, 450, 650, 1900];
+  COLLABORATORS.forEach((c, i) => {
+    const at = { x: 856 - (COLLABORATORS.length - 1 - i) * 34 - 110, y: 14 };
+    if (i === COLLABORATORS.length - 1) {
+      const ring = k.ellipse(board, 44, [], { name: "Join ring", stroke: { color: c.color, width: 4 }, absolute: at });
+      scale(k, ring, [[joins[i], 1, OUT], [joins[i] + 600, 1.9]]);
+      key(k, ring, "opacity", [[joins[i], 0, HOLD], [joins[i] + 1, 1, OUT], [joins[i] + 600, 0]]);
+    }
+    popIn(k, avatar(k, board, c, 44, at), joins[i], { from: 0 });
+  });
+  const share = k.stack(board, { name: "Share", direction: "HORIZONTAL", width: "HUG", fill: "popInk", radius: 999, padding: { top: 9, right: 22, bottom: 9, left: 22 }, absolute: { x: 868, y: 15 } });
+  k.text(share, "Share", { style: "Tag 20", color: "pop", autoWidth: true, name: "Label" });
+  scale(k, share, [[2650, 1, OUT], [2720, 0.86, BACK], [2950, 1]]);
+  const hero = k.stack(board, { name: "Hero card", width: HERO.width, height: HERO.height, absolute: { x: HERO.x, y: HERO.y } });
+  k.patch(hero, { anchorX: 0, anchorY: 0 });
+  k.picture(hero, "/screenshots/board.png", HERO.width, HERO.height, { name: "Picture", radius: 14, absolute: { x: 0, y: 0 }, effects: [shadow("#000000", 0.18, 12, 30)] });
+  const sel = k.rect(hero, HERO.width, HERO.height, [], { name: "Selection", stroke: { color: "blue", width: 3, align: "OUTSIDE" }, absolute: { x: 0, y: 0 } });
+  const handles = [[0, 0], [1, 0], [0, 1], [1, 1]].map(([u, v]) => k.rect(hero, 14, 14, "white", { name: "Handle", stroke: { color: "blue", width: 3 }, absolute: { x: u * HERO.width - 7, y: v * HERO.height - 7 } }));
+  scale(k, hero, [[HERO.at, HERO.from, IO], [HERO.to, 1]]);
+  key(k, hero, "opacity", [[350, 0, OUT], [700, 1]]);
+  for (const id of [sel, ...handles]) key(k, id, "opacity", [[0, 0, HOLD], [800, 0, LIN], [900, 1, HOLD], [2300, 1, LIN], [2450, 0]]);
+  k.patch(hero, { scaleX: HERO.from, scaleY: HERO.from });
+  const STICKIES = [
+    { text: "Ship it Friday", fill: "pop", at: { x: 620, y: 110 }, r: -4 },
+    { text: "New logo?", fill: "mint", at: { x: 810, y: 124 }, r: 3 },
+    { text: "Hero bigger", fill: "pink", at: { x: 632, y: 300 }, r: 2 },
+    { text: "Vote: A or B", fill: "blue", at: { x: 812, y: 310 }, r: -3 }
+  ];
+  const stickies = STICKIES.map((st, i) => {
+    const note = k.stack(board, { name: `Sticky \xB7 ${st.text}`, width: 170, height: 170, fill: st.fill, radius: 6, padding: 18, absolute: st.at, effects: [shadow("#000000", 0.18, 10, 22)] });
+    k.text(note, st.text, { style: "Sticky 30", color: st.fill === "blue" ? "popPaper" : "popInk", width: 134, name: "Note" });
+    k.patch(note, { rotation: st.r });
+    scale(k, note, [[450 + i * 170, 0.3, BACK], [900 + i * 170, 1]]);
+    key(k, note, "rotation", [[450 + i * 170, st.r * 4, BACK], [900 + i * 170, st.r]]);
+    key(k, note, "opacity", [[450 + i * 170, 0, LIN], [600 + i * 170, 1]]);
+    return note;
+  });
+  const DRAG = { at: 2200, to: 3e3, dy: 130 };
+  key(k, stickies[3], "translateY", [[DRAG.at, 0, IO], [DRAG.to, DRAG.dy]]);
+  const hist = k.stack(board, { name: "Version history", direction: "HORIZONTAL", width: BOARD.width - 60, height: 52, gap: 22, align: "CENTER", fill: "popInk", radius: 999, padding: { top: 0, right: 26, bottom: 0, left: 26 }, absolute: { x: 30, y: BOARD.height - 76 } });
+  k.text(hist, "History", { style: "Tag 20", color: "pop", autoWidth: true, name: "Label" });
+  const track = k.stack(hist, { name: "Track", width: 560, height: 20 });
+  k.rect(track, 560, 4, "caption", { name: "Line", opacity: 0.25, radius: 2, absolute: { x: 0, y: 8 } });
+  const SAVES = [300, 900, 1500, 2050, 2600, 3150, 3700];
+  SAVES.forEach((t, i) => popIn(k, k.ellipse(track, 12, "caption", { name: "Version", absolute: { x: i * 90, y: 4 } }), t, { from: 0, len: 300 }));
+  const head2 = k.ellipse(track, 20, "pop", { name: "Playhead", absolute: { x: -4, y: 0 } });
+  key(k, head2, "translateX", SAVES.flatMap((t, i) => i ? [[t - 1, (i - 1) * 90, OUT], [t + 250, i * 90]] : [[t, 0, HOLD]]));
+  const named = k.text(hist, "v1 \xB7 Kickoff", { style: "Tag 20", color: "popPaper", autoWidth: true, name: "Named version" });
+  k.animate(named, "text.content", [{ t: 0, v: "v1 \xB7 Kickoff", ease: HOLD }, { t: 2050, v: "v4 \xB7 Hero bigger", ease: HOLD }, { t: 3700, v: "v7 \xB7 Sent to client", ease: HOLD }]);
+  const COMMENTS = [
+    { by: 0, text: "@Leo a bit bigger?", at: { x: 330, y: 146 }, t: 700 },
+    { by: 2, text: "Love the new hero!", at: { x: 40, y: 470 }, t: 1450 },
+    { by: 1, text: "Done. Better?", at: { x: 360, y: 470 }, t: 2250 },
+    { by: 3, text: "Approved for launch", at: { x: 40, y: 555 }, t: 3350 }
+  ];
+  for (const cm of COMMENTS) {
+    const c = COLLABORATORS[cm.by];
+    const pin = k.stack(board, { name: `Comment \xB7 ${c.name}`, direction: "HORIZONTAL", width: "HUG", gap: 10, align: "CENTER", absolute: cm.at });
+    k.patch(pin, { anchorX: 0, anchorY: 0.5 });
+    avatar(k, pin, c, 40);
+    const bubble = k.stack(pin, { name: "Bubble", direction: "HORIZONTAL", width: "HUG", fill: "white", radius: 20, padding: { top: 12, right: 18, bottom: 12, left: 18 }, effects: [shadow("#000000", 0.22, 12, 28)] });
+    k.text(bubble, cm.text, { style: "Comment 24", color: "popInk", autoWidth: true, name: "Text" });
+    popIn(k, pin, cm.t, { from: 0.2, len: 500 });
+  }
+  const toast = k.stack(board, { name: "Link access", direction: "HORIZONTAL", width: "HUG", gap: 10, align: "CENTER", fill: "popInk", radius: 16, padding: { top: 14, right: 20, bottom: 14, left: 20 }, absolute: { x: 596, y: 86 }, effects: [shadow("#000000", 0.3, 18, 40)] });
+  k.ellipse(toast, 12, "mint", { name: "Dot" });
+  k.text(toast, "Anyone with the link can edit", { style: "Tag 20", color: "popPaper", autoWidth: true, name: "Label" });
+  popIn(k, toast, 2780, { from: 0.6 });
+  key(k, toast, "opacity", [[2780, 0, LIN], [2960, 1, HOLD], [4100, 1, IN], [4400, 0]]);
+  const bx = (x) => BOARD.x + x, by = (y) => BOARD.y + y;
+  const corner = (sc) => [bx(HERO.x + HERO.width * sc) - 5, by(HERO.y + HERO.height * sc) - 3];
+  const drag0 = [bx(812 + 85) - 5, by(310 + 40) - 3];
+  const PATHS = [
+    // Maya: posts "a bit bigger?", then crosses to Share and clicks it.
+    [[0, 620, 1020], [650, bx(330 + 20), by(146 + 20)], [1700, bx(400), by(250)], [2600, bx(868 + 50), by(15 + 22)], [2900, bx(868 + 50), by(15 + 22)], [3900, bx(560), by(260)], [5e3, bx(520), by(300)]],
+    // Leo: takes the hero's corner and drags it out, then answers.
+    [[0, 1960, 900], [800, ...corner(HERO.from)], [HERO.at, ...corner(HERO.from)], [HERO.to, ...corner(1)], [2200, bx(360 + 20), by(470 + 20)], [3500, bx(260), by(380)], [5e3, bx(300), by(420)]],
+    // Ari: comments on the hero, then drags the "Vote" sticky down.
+    [[0, 1960, 260], [1400, bx(40 + 20), by(470 + 20)], [DRAG.at, ...drag0], [DRAG.to, drag0[0], drag0[1] + DRAG.dy], [4200, bx(760), by(560)], [5e3, bx(720), by(600)]],
+    // Jo: joins late, and approves it.
+    [[0, 1700, 1100], [1900, 1700, 1100], [3300, bx(40 + 20), by(555 + 20)], [5e3, bx(16), by(598)]]
+  ];
+  COLLABORATORS.forEach((c, i) => {
+    const end = PATHS[i][PATHS[i].length - 1];
+    const cur = cursor(k, cam, c, { x: end[1], y: end[2] });
+    travel(k, cur, PATHS[i]);
+    const a = i === 3 ? 1900 : 100 + i * 150;
+    key(k, cur, "opacity", [[a, 0, LIN], [a + 250, 1]]);
+  });
+}
+function scene6(k, s) {
+  const ring = k.ellipse(s, 1400, "pop", { name: "Ring", absolute: { x: W / 2 - 700, y: H / 2 - 700 } });
+  scale(k, ring, [[0, 0, EXPO], [800, 1.9]]);
+  k.patch(ring, { scaleX: 1.9, scaleY: 1.9 });
+  const mark = k.picture(s, "/press/popcraft-wordmark.svg", 1040, 1040 * 645.63 / 1750.14, { fit: "FIT", name: "Wordmark", absolute: { x: W / 2 - 520, y: 250 } });
+  key(k, mark, "translateY", [[500, 120, BACK], [1200, 0]]);
+  scale(k, mark, [[500, 0.8, BACK], [1200, 1, LIN], [4600, 1 + 0.03 * 3400 / 3600]]);
+  key(k, mark, "opacity", arrive(500, 1200, BACK, 2));
+  const cta = k.stack(s, { name: "Call to action", direction: "HORIZONTAL", width: W, justify: "CENTER", absolute: { x: 0, y: 720 } });
+  const row = k.stack(cta, { name: "Row", direction: "HORIZONTAL", width: "HUG", gap: 22, align: "CENTER" });
+  const btn = k.stack(row, { name: "Download", direction: "HORIZONTAL", width: "HUG", fill: "popInk", radius: 999, padding: { top: 22, right: 44, bottom: 22, left: 44 } });
+  k.text(btn, "Download for macOS", { style: "Chip 44", color: "pop", autoWidth: true, name: "Download for macOS" });
+  k.text(row, "popcraft.app", { style: "Chip 44", color: "popInk", autoWidth: true, name: "URL" });
+  key(k, cta, "translateY", [[1300, 60, OUT], [1900, 0]]);
+  key(k, cta, "opacity", [[1300, 0, OUT], [1900, 1]]);
+}
+var SCENE_BUILDERS = { s1: scene1, s2: scene2, s3: scene3, s4: scene4, sA: sceneA, sB: sceneB, sC: sceneC, sD: sceneD, s5: scene5, s6: scene6 };
+
+export {
+  OUT,
+  IO,
+  IN,
+  BACK,
+  EXPO,
+  LIN,
+  HOLD,
+  QUAD_IN,
+  reach,
+  shadow,
+  cursor,
+  popIn,
+  travel,
+  SCENE_BUILDERS
+};