@popcraft/kit 0.53.4 → 0.53.6

package/dist/chunks/chunk-JHG3V54T.js

@@ -0,0 +1,251 @@
+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 {
+  SITE_CONTENT,
+  SITE_LOOP,
+  SITE_RESTYLE,
+  artBox,
+  disc,
+  fitArt,
+  gridAt,
+  linkOut,
+  linkTo,
+  ruledRows,
+  section,
+  sectionHead,
+  shape,
+  siteType,
+  sway
+} from "./chunk-FA7EKDGX.js";
+import {
+  SERIF
+} from "./chunk-AXAAXHZF.js";
+import {
+  compactNav
+} from "./chunk-YHF6LRMF.js";
+import {
+  buttons,
+  nav,
+  page,
+  webResponsive
+} from "./chunk-ZMD3C2YJ.js";
+import {
+  box,
+  curve3,
+  poly,
+  pt3,
+  rng
+} from "./chunk-EJLCQVQK.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/web/everyday-hotel.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var NAME = "Hotel and B&B website: coastal inn";
+var AW = 560;
+var AH = 600;
+var BOOK = "https://book.saltmarshhouse.example/rooms";
+var MAP = "https://maps.example.com/?q=Saltmarsh+House+Ocean+Avenue+Kennebunkport";
+var ROOMS = [
+  ["The Lookout", "King bed \xB7 sleeps 2 \xB7 sea view from the bed", "From $340 a night"],
+  ["The Boathouse", "Queen bed \xB7 sleeps 2 \xB7 its own porch on the dune", "From $295 a night"],
+  ["Two Lights", "King and a daybed \xB7 sleeps 3 \xB7 corner windows", "From $315 a night"],
+  ["The Loft", "Two queens \xB7 sleeps 4 \xB7 under the eaves, for families", "From $380 a night"]
+];
+var INCLUDED = [
+  ["Breakfast", "Cooked to order, 7:30 to 10", "Blueberry pancakes, eggs from the farm up the road, and coffee in the sunroom or on the porch."],
+  ["The beach", "Two minutes down the boardwalk", "Towels, chairs and an umbrella in the hall: take them, bring them back sandy."],
+  ["Bicycles", "Six, with baskets", "Free to borrow for the day. The village is a flat fifteen minutes along the shore road."],
+  ["Arrival", "Check in 3 pm, out 11 am", "We will keep your bags if you arrive early or leave late. Ask for a later check-out."],
+  ["Parking", "Free, behind the house", "One car a room. A charger for electric cars by the barn, for a small fee."],
+  ["Quiet", "No weddings, no events", "Eight rooms and a library. Children are welcome in the Loft and Two Lights."]
+];
+var ROUTES = [
+  ["By car", "From Portland, 35 minutes", "Route 1 south, then Ocean Avenue. Look for the blue gate after the lighthouse turn."],
+  ["By train", "The Downeaster to Wells", "Twenty minutes from the station; we can book you a taxi or collect you on request."],
+  ["By air", "Portland Jetport (PWM)", "Forty minutes by car. Boston Logan is an hour and forty."]
+];
+var cues = [
+  { layer: "Nav", preset: "fade-in", at: 0, params: { duration: 500 } },
+  { layer: "Art", preset: "fade-in", at: 100, params: { duration: 900 } },
+  { layer: "Eyebrow", preset: "rise-in", at: 250, params: { duration: 600 } },
+  { layer: "Headline", preset: "blur-in", at: 350, params: { duration: 1e3, amount: 18 } },
+  { layer: "Lead", preset: "rise-in", at: 850, params: { duration: 700 } },
+  { layer: ["CTA primary", "CTA quiet"], preset: "rise-in", at: 1150, params: { duration: 600 }, stagger: { delay: 140 } }
+];
+function sea(y, amp, n) {
+  const pts = Array.from({ length: n * 2 + 1 }, (_, i) => ({ x: -80 + (AW + 160) * i / (n * 2), y: y + (i % 2 ? -amp : amp) }));
+  return { closed: true, points: [...curve3(pts, 0.25).points, pt3(AW + 80, AH), pt3(-80, AH)] };
+}
+function gull(x, y, s) {
+  return [curve3([{ x: x - s, y }, { x: x - s / 2, y: y - s * 0.45 }, { x, y }], 0.3), curve3([{ x, y }, { x: x + s / 2, y: y - s * 0.45 }, { x: x + s, y }], 0.3)];
+}
+function coast(k, art) {
+  shape(k, art, [disc(110, 140, 46)], "sun", { name: "Sun" });
+  const far = shape(k, art, [sea(300, 3, 7)], "seaFar", { name: "Sea far" });
+  const near = shape(k, art, [sea(330, 5, 6)], "sea", { name: "Sea" });
+  sway(k, far, "translateX", 10, SITE_LOOP, 1);
+  sway(k, near, "translateX", 16, SITE_LOOP, 1, 0.5);
+  shape(k, art, [poly([[512, 300], [532, 300], [528, 236], [516, 236]])], "house", { name: "Lighthouse" });
+  shape(k, art, [box(514, 228, 16, 10)], "roof", { name: "Lighthouse lamp" });
+  shape(k, art, [{ closed: true, points: [pt3(-20, 420), { ...pt3(200, 360), handleIn: pt3(100, 380), handleOut: pt3(300, 344) }, { ...pt3(580, 400), handleIn: pt3(460, 360) }, pt3(580, 620), pt3(-20, 620)] }], "sand", { name: "Dune" });
+  shape(k, art, [box(150, 250, 210, 140), poly([[140, 252], [255, 170], [370, 252]])], "house", { name: "House" });
+  shape(k, art, [poly([[132, 256], [255, 162], [378, 256], [366, 262], [255, 178], [144, 262]])], "roof", { name: "Roof" });
+  shape(k, art, [box(360, 290, 110, 100), poly([[352, 292], [478, 292], [470, 270], [360, 270]])], "house", { name: "Wing" });
+  shape(k, art, [poly([[352, 292], [478, 292], [470, 268], [360, 268]])], "roof", { name: "Wing roof" });
+  shape(k, art, [box(305, 150, 20, 50)], "roof", { name: "Chimney" });
+  const boards = [];
+  for (let y = 262; y < 390; y += 10) boards.push(box(150, y, 210, 1.2), box(360, Math.max(y, 296), 110, 1.2));
+  shape(k, art, boards, "clap", { name: "Clapboard" });
+  const dark = [], lit = [];
+  [[176, 280], [236, 280], [296, 280], [176, 330], [296, 330], [384, 316], [430, 316], [244, 206]].forEach(([x, y], i) => (i === 1 || i === 5 ? lit : dark).push(box(x, y, 30, 36)));
+  shape(k, art, dark, "window", { name: "Windows" });
+  const glow = shape(k, art, lit, "lamp", { name: "Lit windows" });
+  sway(k, glow, "opacity", 0.08, SITE_LOOP, 1);
+  shape(k, art, [box(242, 330, 28, 60)], "door", { name: "Door" });
+  shape(k, art, [box(140, 386, 240, 10), box(140, 352, 6, 34), box(374, 352, 6, 34), box(140, 352, 240, 5)], "clap", { name: "Porch" });
+  const planks = [];
+  for (let i = 0; i < 9; i++) planks.push(poly([[250 + i * 4, 400 + i * 22], [290 + i * 10, 400 + i * 22], [292 + i * 10, 410 + i * 22], [250 + i * 4, 410 + i * 22]]));
+  shape(k, art, planks, "wood", { name: "Boardwalk" });
+  const r = rng(13);
+  for (const [x0, x1, y, h, ph] of [[0, 220, 470, 70, 0], [360, 560, 450, 60, 0.3], [20, 560, 580, 90, 0.6]]) {
+    const blades = [];
+    for (let x = x0; x < x1; x += 7 + r() * 6) {
+      const hh = h * (0.6 + r() * 0.5), lean = (r() - 0.3) * 18;
+      blades.push(curve3([{ x, y }, { x: x + lean * 0.4, y: y - hh * 0.5 }, { x: x + lean, y: y - hh }], 0.3));
+    }
+    const id = shape(k, art, blades, "grass", { name: "Beach grass", strokeWidth: 2.4 });
+    sway(k, id, "translateX", 2.5, SITE_LOOP, 2, ph);
+  }
+  ;
+  [[300, 90, 16, 0], [380, 120, 11, 0.4]].forEach(([x, y, s, ph]) => {
+    const id = shape(k, art, gull(x, y, s), "gull", { name: "Gull", strokeWidth: 2.5 });
+    sway(k, id, "translateX", 22, SITE_LOOP, 1, ph);
+    sway(k, id, "translateY", 6, SITE_LOOP, 2, ph);
+  });
+}
+var everyday_hotel_default = defineTemplate({
+  id: "web-everyday-hotel",
+  meta: {
+    name: NAME,
+    description: "A website for a small hotel or bed and breakfast. The hero is the house on its dune in the morning, with the sea rolling in behind, beach grass that sways and gulls drifting over. Then the rooms with a photo frame each, the bed, who it sleeps and the price from, a gallery of photo frames, what is included, where it is and how to get there with directions, and a footer. Every Book button links out to your own booking page. Desktop, laptop, tablet and phone",
+    category: "web",
+    tags: ["hotel", "b&b", "bed and breakfast", "inn", "guest house", "rooms", "gallery", "amenities", "location", "travel", "hospitality", "coast", "illustration", "book now", "animation", "responsive", "website", "small business"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["brand-intro"],
+    created: "2026-10-10",
+    updated: "2026-10-10"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues },
+  build() {
+    const k = new Kit(NAME, preset("web-desktop"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#F6F4EF", text: "#16263A", onPaper: "#4F5B69", primary: "#1D3B5C", onPrimary: "#F6F4EF", card: "#E4ECEF", onCard: "#16263A", cardMuted: "#4A5866", panel: "#16263A", onPanel: "#F6F4EF", panelMuted: "#BCC7D2", line: "#D7DADB" },
+      { name: "Saltmarsh House" }
+    );
+    k.palette({ sun: "#F4D58D", seaFar: "#8FB3C4", sea: "#4F7F99", sand: "#E8D9B8", house: "#FBFAF6", clap: "#D9DCD8", roof: "#56606A", window: "#3B4D5E", lamp: "#F6CF7A", door: "#1D3B5C", wood: "#A88A66", grass: "#8E9A5B", gull: "#3B4D5E" });
+    siteType(k, { ...SERIF, fontWeight: 600 });
+    buttons(k, { style: "Button 16", pad: [15, 26], radius: 4 });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 96, top: 28 });
+    k.timeline(sheet, { duration: SITE_LOOP, fps: 30 });
+    nav(k, sheet, { links: ["Rooms", "Gallery", "Included", "Getting here"], cta: "Book a room", style: "Nav 16", brandStyle: "Brand 22" });
+    const hero = k.stack(sheet, { direction: "HORIZONTAL", gap: 72, align: "CENTER", name: "Hero" });
+    const copy = k.stack(hero, { gap: 24, name: "Copy" });
+    k.text(copy, "A BED AND BREAKFAST ON THE MAINE COAST", { style: "Kicker 13", color: "onPaper", name: "Eyebrow" });
+    k.text(copy, "Eight rooms on the dune, two minutes from the sea.", { style: "Display 76", color: "text", name: "Headline" });
+    k.text(copy, "An 1890s sea captain\u2019s house at the end of Ocean Avenue in Kennebunkport, with breakfast cooked to order, bicycles to borrow and the beach at the bottom of the boardwalk.", { style: "Lead 20", color: "onPaper", name: "Lead" });
+    const ctas = k.stack(copy, { direction: "HORIZONTAL", gap: 12, wrap: true, name: "CTAs" });
+    linkOut(k, k.instance(ctas, "Button", { Label: "Check dates and book" }, { name: "CTA primary" }), BOOK);
+    const seeRooms = k.instance(ctas, "Button quiet", { Label: "See the rooms" }, { name: "CTA quiet" });
+    k.text(copy, "Open April to December \xB7 Two-night minimum on weekends", { style: "Label 14", color: "onPaper", name: "Season" });
+    coast(k, artBox(k, hero, AW, AH, { radius: 4 }));
+    const rooms = section(k, sheet, "Rooms");
+    sectionHead(k, rooms, { kicker: "THE ROOMS", title: "Eight rooms, four of them on the sea", aside: "Every room has its own bathroom, a good bed, wool blankets, and no television. Prices include breakfast for two." });
+    const grid = k.stack(rooms, { direction: "HORIZONTAL", wrap: true, gap: 32, name: "Room grid" });
+    for (const [name, beds, price] of ROOMS) {
+      const card = k.stack(grid, { gap: 14, name: "Room" });
+      k.photo(card, 584, 380, { radius: 4, ground: "card", name: "Room photo" });
+      const line = k.stack(card, { direction: "HORIZONTAL", gap: 16, justify: "SPACE_BETWEEN", align: "CENTER", name: "Room line" });
+      const words = k.stack(line, { gap: 4, name: "Room words" });
+      k.text(words, name, { style: "Title 24", color: "text", name: "Room name" });
+      k.text(words, beds, { style: "Body 16", color: "onPaper", name: "Room beds" });
+      k.text(words, price, { style: "Label 14", color: "text", name: "Room price" });
+      linkOut(k, k.instance(line, "Button quiet", { Label: "Book" }, { name: "Room book" }), BOOK);
+    }
+    const gallery = section(k, sheet, "Gallery");
+    sectionHead(k, gallery, { kicker: "THE HOUSE", title: "Around the house and down the beach" });
+    const pics = k.stack(gallery, { direction: "HORIZONTAL", wrap: true, gap: 16, name: "Gallery grid" });
+    for (let i = 0; i < 6; i++) k.photo(pics, 389, 290, { radius: 4, ground: "card", name: "Gallery photo" });
+    const inc = section(k, sheet, "Included");
+    sectionHead(k, inc, { kicker: "WHAT IS INCLUDED", title: "Breakfast, bicycles and the beach" });
+    ruledRows(k, inc, INCLUDED, { name: "Included rows", labelWidth: 160 });
+    const here = section(k, sheet, "Getting here", { direction: "HORIZONTAL", gap: 64, fill: "panel", radius: 4, padding: 56 });
+    const where = k.stack(here, { gap: 20, name: "Where" });
+    sectionHead(k, where, { kicker: "GETTING HERE", title: "At the end of Ocean\xA0Avenue", ink: "onPanel", muted: "panelMuted" });
+    k.text(where, "Saltmarsh House, 212 Ocean Avenue, Kennebunkport, Maine 04046. Ten minutes on foot from Dock Square along the river.", { style: "Body 17", color: "panelMuted", name: "Address" });
+    const btns = k.stack(where, { direction: "HORIZONTAL", gap: 20, wrap: true, align: "CENTER", name: "Where buttons" });
+    linkOut(k, k.instance(btns, "Button", { Label: "Get directions" }, { name: "Directions" }), MAP);
+    const phone = k.text(btns, "(207) 555-0178", { style: "Button 16", color: "onPanel", autoWidth: true, name: "Phone" });
+    k.patch(phone, { semantics: { link: { kind: "tel", value: "+12075550178" } } });
+    ruledRows(k, here, ROUTES, { name: "Routes", labelWidth: 90, ink: "onPanel", muted: "panelMuted", rule: "panelMuted" });
+    const foot = k.stack(sheet, { gap: 8, padding: { top: 32, right: 0, bottom: 16, left: 0 }, name: "Footer" });
+    k.rect(foot, "FILL", 1, "line", { name: "Rule" });
+    k.text(foot, "{{brand.name}} \xB7 212 Ocean Avenue, Kennebunkport, Maine \xB7 Open April to December", { style: "Small 14", color: "onPaper", name: "Footer line" });
+    k.text(foot, "Bookings are made on our booking partner\u2019s site; its terms and cancellation policy apply.", { style: "Small 14", color: "onPaper", name: "Footer note" });
+    for (const b of k.named(sheet, "Nav button")) linkOut(k, b, BOOK);
+    const targets = { Rooms: rooms, Gallery: gallery, Included: inc, "Getting here": here };
+    for (const l of k.named(sheet, "Nav link")) linkTo(k, l, targets[k.node(l).characters]);
+    linkTo(k, seeRooms, rooms);
+    gridAt(k, sheet, { name: "Room grid", item: "Room", cols: 2, gap: 32, inside: SITE_CONTENT.desktop, photo: "Room photo", ratio: 0.62 });
+    gridAt(k, sheet, { name: "Gallery grid", item: "Gallery photo", cols: 3, gap: 16, inside: SITE_CONTENT.desktop, photo: "Gallery photo", ratio: 0.75 });
+    k.cues(sheet, cues);
+    webResponsive(k, sheet, {
+      stack: ["Hero", "Getting here"],
+      stackMobile: ["Row", "Room line"],
+      restyle: { ...SITE_RESTYLE },
+      gap: { tablet: 80, mobile: 64 },
+      tweak: (kit, id, size) => {
+        const inside = SITE_CONTENT[size];
+        const each = (name, props) => {
+          for (const n of kit.named(id, name)) kit.patch(n, props);
+        };
+        if (size === "laptop") each("Hero", { itemSpacing: 48 });
+        if (size === "tablet" || size === "mobile") {
+          each("Hero", { itemSpacing: 40 });
+          each("Getting here", { itemSpacing: 32 });
+          each("Getting here", { padding: size === "mobile" ? { top: 32, right: 20, bottom: 32, left: 20 } : { top: 44, right: 40, bottom: 44, left: 40 } });
+        }
+        if (size === "tablet") compactNav(kit, id, ["Included", "Getting here"]);
+        if (size === "mobile") {
+          each("Row", { itemSpacing: 6 });
+          each("Room line", { itemSpacing: 12, counterAxisAlignItems: "MIN" });
+        }
+        fitArt(kit, id, AW, AH, inside);
+        gridAt(kit, id, { name: "Room grid", item: "Room", cols: size === "mobile" ? 1 : 2, gap: size === "mobile" ? 40 : 24, inside, photo: "Room photo", ratio: 0.62 });
+        gridAt(kit, id, { name: "Gallery grid", item: "Gallery photo", cols: size === "mobile" ? 2 : 3, gap: size === "mobile" ? 10 : 16, inside, photo: "Gallery photo", ratio: 0.75 });
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  everyday_hotel_default
+};

package/dist/chunks/chunk-JHH3L6NP.js

@@ -0,0 +1,360 @@
+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 {
+  sceneLengths,
+  type,
+  withSound
+} from "./chunk-6KMAJZO7.js";
+import {
+  productWindow,
+  screenshotSlot
+} from "./chunk-MJ3CSPFJ.js";
+import {
+  SERIF
+} from "./chunk-AXAAXHZF.js";
+import {
+  bed
+} from "./chunk-KHGNV7UQ.js";
+import {
+  shadow
+} from "./chunk-YORIY3BT.js";
+import {
+  logoBadge,
+  pill,
+  verticalPadding
+} from "./chunk-KOAJ6HD2.js";
+import {
+  into,
+  playScenes,
+  sceneSheets
+} from "./chunk-Y46APA7K.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  ease
+} from "./chunk-PLZLKHOI.js";
+import {
+  init_page_presets,
+  presetPx
+} from "./chunk-PQID5H2U.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/scenes/saas-film-product-hunt-launch.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+init_page_presets();
+var B = bed("launch", 64);
+var { beat } = B;
+var ON = [0, 8, 16, 24, 32, 40, 50];
+var SLIPS = [
+  ["maya@loomly.io", "Checkout button does nothing on Safari"],
+  ["App Store review, two stars", "Can\u2019t pay. Tried three cards."],
+  ["#feedback \xB7 Jon", "safari checkout broken again?"],
+  ["priya@northfold.co", "CSV export drops the header row"],
+  ["Intercom \xB7 Luis", "Payment page just spins"],
+  ["sam@parcelhaus.de", "Invoice shows USD, we pay in EUR"],
+  ["Intercom \xB7 Aiko", "Pay now button is dead (Safari 17)"],
+  ["G2 review", "Great tool, but checkout fails on Mac"],
+  ["#feedback \xB7 Dee", "export is missing column names"]
+];
+var HEAP = [[0.05, 0.02, -4], [0.95, 0, 3], [0.5, 0.2, -2], [0, 0.41, 2], [1, 0.37, -3], [0.4, 0.61, 4], [0.98, 0.73, 2], [0.03, 0.85, -3], [0.6, 1, 1]];
+var HEAP_SQUARE = [[0, 0, -2], [1, 0.03, 2], [0.05, 0.5, 2], [0.96, 0.52, -2], [0, 1, -1], [1, 0.98, 2]];
+var DUPES = [0, 1, 2, 4, 6];
+var MOVES = [
+  { title: "It reads every message.", body: "Email, Intercom, app reviews, the #feedback channel. All of it, as it lands.", url: "siftwell.app / inbox" },
+  { title: "Folds the duplicates into one issue.", body: "Forty-one reports of one checkout bug become a single ticket, every sender attached.", url: "siftwell.app / issues" },
+  { title: "Ranks issues by revenue at risk.", body: "See which fix keeps the most MRR before you plan the sprint.", url: "siftwell.app / ranked" }
+];
+var INBOX = [
+  ["maya@loomly.io", "Checkout button does nothing on Safari", "checkout"],
+  ["priya@northfold.co", "CSV export drops the header row", "export"],
+  ["Intercom \xB7 Luis", "Payment page just spins", "checkout"],
+  ["sam@parcelhaus.de", "Invoice shows USD, we pay in EUR", "billing"],
+  ["Intercom \xB7 Aiko", "Pay now button is dead (Safari 17)", "checkout"],
+  ["#feedback \xB7 Dee", "export is missing column names", "export"]
+];
+var OTHERS = [["CSV export drops the header row", "17 reports"], ["Invoice shows the wrong currency", "12 reports"], ["Slack digest arrives twice", "6 reports"], ["Dark mode loses the chart legend", "4 reports"]];
+var RANKED = [["Checkout fails on Safari 17", "$4,180 MRR", 1], ["Invoice shows the wrong currency", "$1,960 MRR", 0.47], ["CSV export drops the header row", "$1,240 MRR", 0.3], ["Slack digest arrives twice", "$310 MRR", 0.08]];
+var scenesFor = (suffix) => {
+  const move = (i, cues, counts) => ({
+    sheet: `Move ${i + 1}${suffix}`,
+    transition: into("PUSH_FROM_RIGHT", 420),
+    cues: [
+      { layer: "Step tag", preset: "pop-in", at: 200, params: { duration: 350 } },
+      { layer: "Move title", preset: "words-in", at: 280, params: { duration: 600, amount: 70 } },
+      { layer: "Move body", preset: "fade-in", at: beat(2), params: { duration: 500 } },
+      { layer: "Window", preset: "rise-in", at: 150, params: { duration: 750 } },
+      ...cues
+    ],
+    ...counts ? { counts } : {}
+  });
+  return [
+    { sheet: `Cold open${suffix}`, cues: [
+      { layer: "Brand row", preset: "fade-in", at: 0, params: { duration: 300 } },
+      { layer: "Slip", preset: "drop-in", at: 0, params: { duration: 420 }, stagger: { delay: 70 } },
+      { layer: "Hook figure", preset: "pop-in", at: 80, params: { duration: 380 } },
+      { layer: "Hook turn", preset: "words-in", at: beat(2), params: { duration: 500, amount: 80 } },
+      { layer: "Hook sub", preset: "fade-in", at: beat(3.5), params: { duration: 500 } }
+    ], counts: [{ layer: "Hook figure", at: 80, duration: 900, counter: { from: 0, to: 412, suffix: " emails." } }] },
+    { sheet: `Problem${suffix}`, transition: into("CIRCLE_WIPE", 520, { center: { x: 0.2, y: 0.5 } }), cues: [
+      { layer: "Problem title", preset: "words-in", at: 250, params: { duration: 600, amount: 70 } },
+      { layer: "Dupe", preset: "slide-in", at: beat(1.5), params: { duration: 480, direction: "right" }, stagger: { delay: 130 } },
+      { layer: "Verdict", preset: "pop-in", at: beat(4.5), params: { duration: 420 } },
+      { layer: "Verdict", preset: "pulse", at: beat(6), params: { duration: 600, amount: 0.06 } }
+    ] },
+    move(0, [{ layer: "Tag chip", preset: "pop-in", at: beat(2.6), params: { duration: 300 }, stagger: { delay: Math.round(beat(0.8)) } }]),
+    move(1, [
+      { layer: "Issue", preset: "pop-in", at: beat(2), params: { duration: 420 } },
+      { layer: "Sender", preset: "pop-in", at: beat(2.5), params: { duration: 260 }, stagger: { delay: 90 } },
+      { layer: "Other issue", preset: "rise-in", at: beat(5), params: { duration: 450 }, stagger: { delay: 180 } }
+    ], [{ layer: "Merged figure", at: beat(2.5), duration: beat(3.5), counter: { from: 1, to: 41 } }]),
+    move(2, [
+      { layer: "Risk bar", preset: "wipe-in", at: beat(2), params: { duration: 700, direction: "right" }, stagger: { delay: 220 } },
+      { layer: "Fix first", preset: "pop-in", at: beat(5.5), params: { duration: 380 } },
+      { layer: "Fix first", preset: "pulse", at: beat(6.5), params: { duration: 600, amount: 0.08 } }
+    ]),
+    { sheet: `Proof${suffix}`, transition: into("DISSOLVE", 450), cues: [
+      { layer: "Stars", preset: "pop-in", at: 150, params: { duration: 380 } },
+      { layer: "Quote", preset: "words-in", at: 300, params: { duration: 500, amount: 55 } },
+      { layer: "Who", preset: "rise-in", at: beat(4), params: { duration: 550 } },
+      { layer: "Proof card", preset: "pop-in", at: beat(2), params: { duration: 480 } }
+    ], counts: [{ layer: "Proof figure", at: beat(2.5), duration: beat(3), counter: { from: 540, to: 40, suffix: " min" } }, { layer: "Teams figure", at: beat(5), duration: beat(3), counter: { from: 900, to: 1280, suffix: " teams" } }] },
+    { sheet: `End card${suffix}`, transition: into("CIRCLE_WIPE", 520), cues: [
+      { layer: "Rings", preset: "scale-in", at: 0, params: { duration: 1100 } },
+      { layer: "Launch chip", preset: "drop-in", at: 250, params: { duration: 450 } },
+      { layer: "End logo", preset: "pop-in", at: 350, params: { duration: 450 } },
+      { layer: "End name", preset: "rise-in", at: 500, params: { duration: 650 } },
+      { layer: "End tagline", preset: "fade-in", at: beat(2), params: { duration: 500 } },
+      { layer: "End button", preset: "pop-in", at: beat(3), params: { duration: 420 } },
+      { layer: "End button", preset: "pulse", at: beat(5), params: { duration: 600, amount: 0.06 } },
+      { layer: "End button", preset: "pulse", at: beat(7), params: { duration: 600, amount: 0.06 } }
+    ] }
+  ];
+};
+var SIZES = [{ preset: "video-1080p", suffix: "", comp: "comp-ph-wide", label: "16:9" }, { preset: "ig-story", suffix: " \xB7 9:16", comp: "comp-ph-tall", label: "9:16" }, { preset: "video-square", suffix: " \xB7 1:1", comp: "comp-ph-square", label: "1:1" }];
+var SPECS = SIZES.map((s) => scenesFor(s.suffix));
+var LENGTHS = sceneLengths(ON.map((b) => beat(b)), B.duration, SPECS[0]);
+var GROUNDS = ["paper", "primary", "paper", "paper", "paper", "paper", "primary"];
+var saas_film_product_hunt_launch_default = defineTemplate({
+  id: "motion-saas-film-product-hunt-launch",
+  meta: {
+    name: "SaaS film: Product Hunt launch video",
+    description: 'A 32-second launch video in seven scenes: a cold-open hook over a heap of feedback, the problem, the product in three moves (each a product window with a picture slot for your screenshot), a customer\u2019s proof, and a "Live on Product Hunt today" end card. Warm editorial serif on ivory, music, every scene cut to the beat. 1920\xD71080, with 9:16 and square sets of the same scenes',
+    category: "animation",
+    tags: ["animation", "saas", "saas film", "product hunt", "launch video", "launch", "scenes", "composition", "serif", "editorial", "demo", "music", "audio", "16:9", "end card"],
+    platforms: ["product-hunt", "youtube", "x", "linkedin", "web", "instagram", "tiktok"],
+    formats: ["video", "demo", "ad", "reel", "post"],
+    useCases: ["launch", "announcement", "testimonial"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { scenes: SPECS[0], more: SPECS.slice(1) },
+  build() {
+    const k = new Kit("SaaS film: Product Hunt launch video", preset("video-1080p"));
+    k.quantizeGeometry = true;
+    k.brand(
+      { paper: "#F5F0E6", text: "#16201B", onPaper: "#1F5B45", primary: "#1F5B45", onPrimary: "#F5F0E6", card: "#FFFFFF", onCard: "#16201B", accent: "#F2A413", onAccent: "#201400" },
+      { name: "Siftwell", tagline: "Feedback in. Priorities out." }
+    );
+    k.palette({ ink: "#16201B", faint: "#50554E", rule: "#DDD5C5", side: "#F3EEE4", slip: "#FFFDF8", mint: "#DCEBE2", forest: "#1F5B45", hot: "#D8432B", hotInk: "#B93118", ring: "#3E8468", dotA: "#F2A413", dotB: "#7FB69B", dotC: "#D8432B", dotD: "#16201B" });
+    const made = /* @__PURE__ */ new Set();
+    const T = (name, px, o = {}) => type(k, made, name, px, o);
+    k.component("Slip", {
+      width: 500,
+      gap: 8,
+      fill: "slip",
+      radius: 18,
+      padding: { top: 20, right: 26, bottom: 24, left: 26 },
+      stroke: { color: "rule", width: 2, align: "INSIDE" },
+      effects: [shadow(k, "ink", 0.14, 14, 28)],
+      description: "One piece of feedback: who sent it, and what it says.",
+      props: { Sender: SLIPS[0][0], Subject: SLIPS[0][1] }
+    }, (id) => {
+      const from = k.stack(id, { direction: "HORIZONTAL", gap: 10, align: "CENTER", name: "From" });
+      k.ellipse(from, 18, "dotB", { name: "Sender dot" });
+      k.propText(from, "Sender", { style: T("Sender", 20, { fontWeight: 500, leading: 1.3 }), color: "faint", autoWidth: true });
+      k.propText(id, "Subject", { style: T("Slip", 28, { fontWeight: 600, leading: 1.25, tracking: -0.01 }), color: "ink" });
+    });
+    pill(k, "Step", { fill: "primary", ink: "onPrimary", style: T("Tag", 20, { fontWeight: 800, tracking: 0.12, leading: 1.2 }), label: "MOVE 1 OF 3", pad: [10, 20], radius: 8 });
+    pill(k, "Launch", { fill: "accent", ink: "onAccent", style: T("Tag", 20, { fontWeight: 800, tracking: 0.12, leading: 1.2 }), label: "LIVE ON PRODUCT HUNT TODAY", pad: [12, 24], radius: 8 });
+    const sound = {};
+    SIZES.forEach((size, row) => {
+      const { width: W, height: H } = presetPx(preset(size.preset));
+      const wide = W > H, tall = H > W;
+      const pad = tall ? verticalPadding() : wide ? { top: 70, right: 110, bottom: 70, left: 110 } : { top: 64, right: 64, bottom: 64, left: 64 };
+      const CW = W - pad.left - pad.right, CH = H - pad.top - pad.bottom;
+      const hook = T("Hook", wide ? 136 : tall ? 92 : 96, { fontWeight: 700, leading: 1.02, tracking: -0.03, ...SERIF });
+      const head = T("Head", wide ? 92 : tall ? 76 : 64, { fontWeight: 700, leading: 1.06, tracking: -0.025, ...SERIF });
+      const body = T("Body", wide ? 36 : tall ? 32 : 28, { fontWeight: 500, leading: 1.36 });
+      const brandStyle = T("Brand", wide ? 38 : 30, { fontWeight: 800, tracking: -0.02 });
+      const sheets = sceneSheets(k, size.preset, SPECS[row].map((s) => s.sheet), row);
+      sheets.forEach((id, i) => {
+        k.flowSheet(id, wide ? 0 : tall ? 28 : 22, pad, GROUNDS[i], "CENTER", "MIN");
+        k.timeline(id, { duration: LENGTHS[i], fps: 30 });
+      });
+      const [open, problem, m1, m2, m3, proof, end] = sheets;
+      const split = (sheet, leftWidth, gap) => {
+        if (!wide) return { left: sheet, right: sheet };
+        const rowId = k.stack(sheet, { direction: "HORIZONTAL", gap, align: "CENTER", height: CH, name: "Layout" });
+        return { left: k.stack(rowId, { width: leftWidth, gap: 30, name: "Words" }), right: k.stack(rowId, { align: "MAX", justify: "CENTER", height: CH, name: "Picture" }) };
+      };
+      {
+        const { left, right } = split(open, 820, 50);
+        const brand = k.stack(left, { direction: "HORIZONTAL", gap: 14, align: "CENTER", name: "Brand row" });
+        logoBadge(k, brand, { fill: "primary", size: wide ? 38 : 30, radius: 12 });
+        k.text(brand, "{{brand.name}}", { style: brandStyle, color: "text", autoWidth: true, name: "Brand name" });
+        const words = k.stack(left, { gap: 0, name: "Hook" });
+        k.text(words, "412 emails.", { style: hook, color: "text", name: "Hook figure" });
+        k.text(words, "9 real problems.", { style: hook, color: "onPaper", name: "Hook turn" });
+        k.text(left, "Most of your feedback is the same few things, said again. Siftwell finds them.", { style: body, color: "text", name: "Hook sub", ...wide ? { width: 720 } : {} });
+        const SW = wide ? CW - 820 - 50 : CW, SH = wide ? 900 : tall ? 700 : 500, slipW = wide ? 500 : tall ? 356 : 456;
+        const heap = k.stack(right, { width: SW, height: SH, name: "Heap" });
+        const n = wide ? 9 : 6;
+        SLIPS.slice(0, n).forEach(([Sender, Subject], i) => {
+          const [fx, fy, turn] = (wide ? HEAP : HEAP_SQUARE)[i];
+          const edge = tall ? 28 : 10;
+          const y = fy * (SH - (wide ? 160 : 150));
+          const slip = k.instance(heap, "Slip", { Sender, Subject }, { name: "Slip", width: slipW, absolute: { x: Math.round(fx * (SW - slipW - 2 * edge)) + edge, y: Math.round(y) } });
+          k.patch(slip, { rotation: turn });
+        });
+      }
+      {
+        const { left, right } = split(problem, 760, 80);
+        k.text(left, "The same bug, reported forty-one ways.", { style: hook, color: "onPrimary", name: "Problem title" });
+        const list = k.stack(right, { gap: 14, name: "Dupes", ...wide ? { width: CW - 840 } : {} });
+        DUPES.slice(0, wide || tall ? 5 : 3).forEach((i) => k.instance(list, "Slip", { Sender: SLIPS[i][0], Subject: SLIPS[i][1] }, { name: "Dupe", width: "FILL" }));
+        const verdict = k.stack(wide ? left : problem, { direction: "HORIZONTAL", width: "HUG", gap: 12, align: "CENTER", fill: "accent", radius: 10, padding: { top: 12, right: 22, bottom: 12, left: 18 }, name: "Verdict" });
+        k.ellipse(verdict, 16, "hot", { name: "Verdict dot" });
+        k.text(verdict, "One bug. 41 senders. 9 hours of reading.", { style: T("Verdict", wide ? 28 : 22, { fontWeight: 800, tracking: -0.01, leading: 1.25 }), color: "onAccent", autoWidth: true, name: "Verdict words" });
+      }
+      const us = wide ? 1.25 : tall ? 1 : 1.12, px = (n) => Math.round(n * us);
+      const WIN = wide ? { width: 1030, height: 760 } : tall ? { width: CW, height: 780 } : { width: CW, height: 560 };
+      const ui16 = () => T("UI", px(16), { fontWeight: 500, leading: 1.3 });
+      const ui18 = () => T("UI strong", px(18), { fontWeight: 600, leading: 1.3 });
+      const chip16 = () => T("Chip", px(16), { fontWeight: 800, leading: 1.25, tracking: 0.02 });
+      const look = { fill: "card", bar: "side", titleStyle: ui16(), titleInk: "faint", dots: "rule", radius: 18, barHeight: 48, rule: "rule", effects: [shadow(k, "ink", 0.2, 30, 70)] };
+      [m1, m2, m3].forEach((sheet, i) => {
+        const { left, right } = split(sheet, 600, 70);
+        k.instance(left, "Step", { Label: `MOVE ${i + 1} OF 3` }, { name: "Step tag" });
+        k.text(left, MOVES[i].title, { style: head, color: "text", name: "Move title" });
+        k.text(left, MOVES[i].body, { style: body, color: "text", name: "Move body" });
+        const { body: screen, bodyHeight: bh } = productWindow(k, right, { ...WIN, title: MOVES[i].url, look });
+        const bw = WIN.width;
+        screenshotSlot(k, screen, bw, bh, "side");
+        const ui = k.frame(screen, { x: 0, y: 0, width: bw, height: bh }, { name: "Placeholder screen", fill: "card" });
+        const sb = px(bw >= 900 ? 176 : 156), x0 = sb + px(28), mw = bw - sb - px(56), top = px(70);
+        k.rect(ui, sb, bh, "side", { name: "Sidebar", absolute: { x: 0, y: 0 } });
+        k.rect(ui, 2, bh, "rule", { name: "Sidebar rule", absolute: { x: sb, y: 0 } });
+        k.rect(ui, sb - px(24), px(40), "mint", { name: "Nav selected", radius: 9, absolute: { x: px(12), y: px(18 + i * 46) } });
+        ["Inbox", "Issues", "Ranked", "Sources"].forEach((label, j) => k.text(ui, label, { style: j === i ? ui18() : ui16(), color: j === i ? "forest" : "faint", autoWidth: true, name: "Nav item", absolute: { x: px(26), y: px(26 + j * 46) } }));
+        const title = T("UI title", px(22), { fontWeight: 700, tracking: -0.015, leading: 1.25 });
+        const heading = (words) => k.text(ui, words, { style: title, color: "ink", autoWidth: true, name: "Screen title", absolute: { x: x0, y: px(22) } });
+        if (i === 0) {
+          heading("Inbox \xB7 412 new");
+          const rh = Math.floor((bh - top - px(10)) / INBOX.length);
+          const scan = k.rect(ui, bw - sb - 2, rh, k.tint("accent", 0.24), { name: "Reader", absolute: { x: sb + 2, y: top } });
+          const step = beat(0.8), t0 = beat(2.2);
+          k.animate(scan, "translateY", [{ t: t0, v: 0, ease: ease.hold }, ...INBOX.slice(1).flatMap((_, r) => [{ t: Math.round(t0 + (r + 0.55) * step), v: r * rh, ease: ease.inOut("cubic") }, { t: Math.round(t0 + (r + 1) * step), v: (r + 1) * rh, ...r < INBOX.length - 2 ? { ease: ease.hold } : {} }])]);
+          k.animate(scan, "opacity", [{ t: 0, v: 0, ease: ease.hold }, { t: beat(2), v: 0, ease: ease.out("cubic") }, { t: beat(2.4), v: 1, ease: ease.hold }, { t: Math.round(t0 + 5.6 * step), v: 1, ease: ease.out("cubic") }, { t: Math.round(t0 + 6.4 * step), v: 0 }]);
+          INBOX.forEach(([sender, subject, tag], r) => {
+            const y = top + r * rh, mid = y + Math.round(rh / 2);
+            k.rect(ui, mw, 2, "rule", { name: "Row rule", absolute: { x: x0, y: y + rh - 2 } });
+            k.ellipse(ui, px(32), ["dotA", "dotB", "dotC", "dotD"][r % 4], { name: "Avatar", absolute: { x: x0, y: mid - px(16) } });
+            k.text(ui, sender, { style: ui16(), color: "faint", autoWidth: true, name: "Sender name", absolute: { x: x0 + px(46), y: mid - px(24) } });
+            k.text(ui, subject, { style: ui18(), color: "ink", autoWidth: true, name: "Subject", absolute: { x: x0 + px(46), y: mid - px(1) } });
+            const chip = k.stack(ui, { width: px(112), height: px(32), justify: "CENTER", align: "CENTER", fill: "mint", radius: 8, name: "Tag chip", absolute: { x: x0 + mw - px(112), y: mid - px(16) } });
+            k.text(chip, tag, { style: chip16(), color: "forest", autoWidth: true, name: "Tag" });
+          });
+        } else if (i === 1) {
+          heading("Issues \xB7 9 open");
+          const others = OTHERS.slice(0, wide ? 4 : 2), oh = px(60), ih = bh - top - others.length * oh - px(26);
+          const issue = k.stack(ui, { width: mw, height: ih, fill: "mint", radius: 16, padding: { top: px(22), right: px(26), bottom: px(24), left: px(26) }, justify: "SPACE_BETWEEN", name: "Issue", absolute: { x: x0, y: top } });
+          k.text(issue, "Checkout fails on Safari 17", { style: T("Issue", px(26), { fontWeight: 700, tracking: -0.02, leading: 1.2 }), color: "ink", name: "Issue title" });
+          const merged = k.stack(issue, { direction: "HORIZONTAL", gap: 16, align: "CENTER", name: "Merged" });
+          k.text(merged, "41", { style: T("Figure", px(80), { fontWeight: 700, leading: 1, tracking: -0.03, fontFeatures: { tnum: 1 }, ...SERIF }), color: "forest", autoWidth: true, name: "Merged figure" });
+          k.text(merged, "reports folded into one issue", { style: ui18(), color: "ink", name: "Merged label" });
+          const senders = k.stack(issue, { direction: "HORIZONTAL", gap: px(6), name: "Senders" });
+          for (let n = 0; n < Math.min(14, Math.floor((mw - px(52)) / px(40))); n++) k.ellipse(senders, px(34), ["dotA", "dotB", "dotC", "dotD", "forest"][n % 5], { name: "Sender", stroke: { color: "card", width: 3, align: "OUTSIDE" } });
+          others.forEach(([name, count], r) => {
+            const other = k.stack(ui, { direction: "HORIZONTAL", width: mw, height: oh - px(10), justify: "SPACE_BETWEEN", align: "CENTER", fill: "side", radius: 10, padding: { top: 0, right: px(18), bottom: 0, left: px(18) }, name: "Other issue", absolute: { x: x0, y: top + ih + px(14) + r * oh } });
+            k.text(other, name, { style: ui18(), color: "ink", autoWidth: true, name: "Other title" });
+            k.text(other, count, { style: ui16(), color: "faint", autoWidth: true, name: "Other count" });
+          });
+        } else {
+          heading("Ranked by revenue at risk");
+          const rh = Math.floor((bh - top - px(14)) / RANKED.length);
+          RANKED.forEach(([name, mrr, share], r) => {
+            const y = top + px(10) + r * rh;
+            k.text(ui, name, { style: ui18(), color: "ink", autoWidth: true, name: "Risk title", absolute: { x: x0, y } });
+            k.text(ui, mrr, { style: ui18(), color: r === 0 ? "hotInk" : "ink", width: px(150), align: "RIGHT", name: "Risk figure", absolute: { x: x0 + mw - px(150), y } });
+            const bar = k.stack(ui, { width: mw, height: px(22), fill: "side", radius: px(11), clip: true, name: "Risk bar", absolute: { x: x0, y: y + px(38) } });
+            k.rect(bar, Math.round(mw * share), px(22), r === 0 ? "hot" : "forest", { name: "Risk fill", radius: px(11) });
+          });
+          const first = k.stack(ui, { width: "HUG", fill: "accent", radius: 8, padding: { top: px(4), right: px(12), bottom: px(4), left: px(12) }, name: "Fix first", absolute: { x: x0 + mw - px(150) - px(104), y: top + px(6) } });
+          k.text(first, "Fix first", { style: chip16(), color: "onAccent", autoWidth: true, name: "Fix first label" });
+        }
+      });
+      {
+        const { left, right } = split(proof, 1e3, 80);
+        if (!wide) k.patch(proof, { primaryAxisAlignItems: "SPACE_BETWEEN" });
+        const stars = k.stack(left, { direction: "HORIZONTAL", width: "HUG", gap: 8, name: "Stars" });
+        for (let s = 0; s < 5; s++) k.star(stars, wide ? 48 : 34, "accent", { name: "Star" });
+        k.text(left, "\u201CWe cut triage from nine hours a week to forty minutes. Monday\u2019s meeting is short now.\u201D", { style: T("Quote", wide ? 84 : tall ? 70 : 58, { fontWeight: 600, leading: 1.12, tracking: -0.02, ...SERIF }), color: "text", name: "Quote" });
+        const who = k.stack(left, { direction: "HORIZONTAL", gap: 20, align: "CENTER", name: "Who" });
+        k.photo(who, wide ? 110 : 88, wide ? 110 : 88, { radius: wide ? 55 : 44, ground: "mint", name: "Customer photo" });
+        const whoWords = k.stack(who, { gap: 2, name: "Who words" });
+        k.text(whoWords, "Dana Whitfield", { style: T("Name", wide ? 36 : 28, { fontWeight: 800, tracking: -0.015 }), color: "text", name: "Who name" });
+        k.text(whoWords, "Head of Support, Parcelhaus", { style: T("Role", wide ? 28 : 22, { fontWeight: 500, leading: 1.3 }), color: "text", name: "Who role" });
+        const card = k.stack(right, { gap: wide ? 18 : 10, fill: "primary", radius: 28, padding: wide ? 44 : { top: 28, right: 32, bottom: 30, left: 32 }, effects: [shadow(k, "ink", 0.22, 26, 60)], name: "Proof card", ...wide ? { width: CW - 1e3 - 80 } : {} });
+        if (!wide) k.patch(card, { layoutSizingHorizontal: "FILL" });
+        k.text(card, "40 min", { style: T("Proof", wide ? 140 : 96, { fontWeight: 700, leading: 1, tracking: -0.04, fontFeatures: { tnum: 1 }, ...SERIF }), color: "onPrimary", name: "Proof figure" });
+        k.text(card, "a week on triage. It was nine hours.", { style: body, color: "onPrimary", name: "Proof label" });
+        k.rect(card, "FILL", 2, "ring", { name: "Proof rule" });
+        k.text(card, "1,280 teams", { style: T("Teams", wide ? 44 : 28, { fontWeight: 800, tracking: -0.02, fontFeatures: { tnum: 1 } }), color: "onPrimary", name: "Teams figure" });
+        k.text(card, "plan their sprint from a Siftwell queue", { style: T("Role", wide ? 28 : 22, { fontWeight: 500, leading: 1.3 }), color: "onPrimary", name: "Teams label" });
+      }
+      {
+        k.patch(end, { counterAxisAlignItems: "CENTER", itemSpacing: wide ? 30 : 24, counterAxisSpacing: 30 });
+        const R = Math.round(Math.max(W, H) * 0.92);
+        const rings = Array.from({ length: 7 }, (_, r) => {
+          const d = R * (1 - r * 0.13);
+          return { closed: true, points: [0, 1, 2, 3].map((q) => ({ x: R / 2 + d / 2 * [0, 1, 0, -1][q], y: R / 2 + d / 2 * [-1, 0, 1, 0][q], handleIn: { x: R / 2 + d / 2 * [-0.5523, 1, 0.5523, -1][q], y: R / 2 + d / 2 * [-1, -0.5523, 1, 0.5523][q] }, handleOut: { x: R / 2 + d / 2 * [0.5523, 1, -0.5523, -1][q], y: R / 2 + d / 2 * [-1, 0.5523, 1, -0.5523][q] } })) };
+        });
+        k.vector(end, R, R, rings, "ring", { name: "Rings", strokeWidth: 4, absolute: { x: Math.round((W - R) / 2), y: Math.round((H - R) / 2) } });
+        k.instance(end, "Launch", { Label: "LIVE ON PRODUCT HUNT TODAY" }, { name: "Launch chip" });
+        logoBadge(k, end, { fill: "accent", size: wide ? 110 : 72, radius: wide ? 36 : 26, name: "End logo" });
+        k.text(end, "{{brand.name}}", { style: T("End", wide ? 250 : tall ? 110 : 132, { fontWeight: 700, leading: 1, tracking: -0.04, textAlign: "CENTER", ...SERIF }), color: "onPrimary", name: "End name" });
+        k.text(end, "{{brand.tagline}}", { style: T("Tagline", wide ? 58 : 36, { fontWeight: 500, leading: 1.25, tracking: -0.01, textAlign: "CENTER" }), color: "onPrimary", name: "End tagline" });
+        const button = k.stack(end, { direction: "HORIZONTAL", width: "HUG", gap: 14, align: "CENTER", fill: "card", radius: 14, padding: wide ? { top: 24, right: 40, bottom: 24, left: 32 } : { top: 18, right: 30, bottom: 18, left: 24 }, effects: [shadow(k, "ink", 0.3, 16, 36)], name: "End button" });
+        k.vector(button, 26, 22, [{ closed: true, points: [{ x: 13, y: 0 }, { x: 26, y: 22 }, { x: 0, y: 22 }] }], "hot", { name: "Upvote" });
+        k.text(button, "Upvote us at siftwell.app/launch", { style: T("Button", wide ? 38 : 26, { fontWeight: 800, tracking: -0.015, leading: 1.25 }), color: "onCard", autoWidth: true, name: "End button label" });
+      }
+      if (tall) sheets.slice(0, 6).forEach((id, i) => {
+        const dots = ["dotA", "dotB", "dotC", "dotD", "forest"];
+        for (let n = 0; n < 22; n++) {
+          const row2 = n % 2, x = Math.round(-30 + (n >> 1) * 104 + row2 * 52 + (n * 37 + i * 11) % 23), y = 1560 + row2 * 110 + (n * 53 + i * 7) % 41;
+          k.ellipse(id, 64 - n * 13 % 22, dots[(n + i) % 5], { name: "Sender crowd", opacity: i === 1 ? 0.35 : 0.55, absolute: { x, y } });
+        }
+      });
+      playScenes(k, size.comp, `Product Hunt launch video (${size.label})`, sheets, SPECS[row], "paper");
+      sound[size.comp] = B.audio;
+      if (row === 0) k.setCover(open);
+    });
+    return withSound(k.finish(), sound);
+  }
+});
+
+export {
+  saas_film_product_hunt_launch_default
+};