@popcraft/kit 0.53.4 → 0.53.5

package/dist/chunks/chunk-IEBF37LI.js

@@ -0,0 +1,287 @@
+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 {
+  desk,
+  dots,
+  draw,
+  hand,
+  marker,
+  pen,
+  redots,
+  sans,
+  scribbleCircle,
+  sketchBrand,
+  sketchWindow,
+  sticky,
+  tick,
+  underline
+} from "./chunk-WSNO4FJV.js";
+import {
+  COLUMN,
+  camera,
+  float,
+  reelCuts,
+  reelSheet,
+  section,
+  seenAt,
+  wideCut
+} from "./chunk-YUJ6YBZ6.js";
+import {
+  clicks,
+  glide
+} from "./chunk-2PJUAVAE.js";
+import {
+  captionStrip,
+  captionSwap
+} from "./chunk-3YQOE5KZ.js";
+import {
+  cutOn
+} from "./chunk-CLQ3FUJI.js";
+import {
+  hide,
+  place,
+  restyle
+} from "./chunk-LWSZATOL.js";
+import {
+  logoBadge,
+  pill
+} from "./chunk-KOAJ6HD2.js";
+import {
+  rng
+} from "./chunk-EJLCQVQK.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  ease
+} from "./chunk-PLZLKHOI.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/motion/style-sketch-feature-demo.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var S = section("acoustic", 2, 6);
+var { beat } = S;
+var NAME = "Sketch SaaS feature demo short";
+var WIN = { w: COLUMN, h: 640 };
+var STEP = [2, 3.5, 8, 14, 20];
+var T1 = beat(3);
+var T2 = beat(6);
+var T3 = beat(9.5);
+var T4 = beat(14.5);
+var SORT = beat(10);
+var PLAN = beat(15);
+var IDEAS = [
+  { text: "Dark mode for boards", votes: 5, color: "sticky", who: "JM", when: "Tue 14" },
+  { text: "Export to Notion", votes: 7, color: "mint", who: "PR", when: "Mon 13" },
+  { text: "Offline drawing", votes: 2, color: "peach", who: "", when: "" },
+  { text: "Template gallery", votes: 4, color: "peach", who: "AL", when: "Thu 16" },
+  { text: "Voice notes on stickies", votes: 1, color: "mint", who: "", when: "" },
+  { text: "Custom sticker packs", votes: 2, color: "sticky", who: "", when: "" }
+];
+var DOTS = IDEAS.reduce((n, i) => n + i.votes, 0);
+var RANK = IDEAS.map((idea, i) => IDEAS.filter((o, j) => o.votes > idea.votes || o.votes === idea.votes && j < i).length);
+var GRID = { pad: 22, gap: 18, rowGap: 18, noteH: 196 };
+var noteW = Math.floor((WIN.w - 2 * GRID.pad - 2 * GRID.gap) / 3);
+var cell = (r) => ({ x: GRID.pad + r % 3 * (noteW + GRID.gap), y: GRID.pad + Math.floor(r / 3) * (GRID.noteH + GRID.rowGap) });
+var REST = { x: 650, y: 590 };
+var BUTTON = { x: 712, y: 34 };
+var MYDOT = { x: cell(3).x + 150, y: cell(3).y + 74 + 110 };
+var SHOTS = [
+  { t: beat(4), duration: 700, zoom: 1.3, x: 300, y: 330 },
+  { t: beat(8), duration: 600, zoom: 1 },
+  { t: PLAN, duration: 700, zoom: 1.14, x: 400, y: 230 },
+  { t: beat(19), duration: 600, zoom: 1 }
+];
+var cues = [
+  // The board and its top row are on from the first frame, so the reel never opens on bare paper; the hook writes in over them.
+  { layer: "Hook", preset: "words-in", at: 0, params: { duration: 420 } },
+  { layer: "Step cell", preset: "rise-in", at: beat(1), stagger: { delay: 90, order: "selection" }, params: { duration: 380, distance: 24 } },
+  { layer: "Idea", preset: "pop-in", at: 200, stagger: { delay: 120, order: "selection" }, params: { duration: 420, amount: 0.7 } },
+  cutOn("Plan mark", PLAN, 120),
+  { layer: "Tidy button", preset: "pulse", at: T1, params: { duration: 400, amount: 0.08 } },
+  { layer: "Call row", preset: "slide-in", at: beat(STEP[4]), params: { direction: "up", duration: 520 } },
+  { layer: "Call", preset: "pulse", at: beat(22), params: { duration: 800, amount: 0.06 } }
+];
+var counts = [
+  ...IDEAS.map((idea, i) => ({ layer: `Tally ${i + 1}`, at: beat(STEP[1]) + 80 * i, duration: beat(4), ease: ease.out("cubic"), counter: { from: 0, to: idea.votes } })),
+  { layer: "Placed figure", at: beat(STEP[1]), duration: beat(4) + 400, tick: 100, counter: { from: 0, to: DOTS, suffix: ` of ${DOTS} dots placed` } }
+];
+var swaps = [captionSwap(["Tap Dot vote. Everyone gets three.", "Seven teammates vote in ten seconds.", "Sort by votes. Winners float up.", "Top three land in This week."], 0, S.duration - 30, { stagger: 55, in: 240, out: 160, rise: 14 })];
+var style_sketch_feature_demo_default = defineTemplate({
+  id: "motion-saas-style-sketch-feature-demo",
+  meta: {
+    name: NAME,
+    description: "A 15-second feature demo drawn with a marker: a marker pen runs a dot vote on a planning whiteboard step by step. Six ideas slap onto the board, seven teammates' dots pop onto them while the camera leans in and every tally counts inside a scribbled ring; on the music's lift the notes swap into rank order and the winners are circled in red, then the top three get a tick, a person and a date. Numbered step bar, burned-in captions and music. 9:16 with square and 16:9 cuts",
+    category: "animation",
+    tags: ["animation", "saas", "sketch", "hand-drawn", "whiteboard", "sticky notes", "doodle", "planning", "productivity", "demo", "feature", "voting", "cursor", "zoom", "counter", "captions", "music", "audio", "reel", "shorts"],
+    platforms: ["tiktok", "instagram", "youtube", "x", "linkedin"],
+    formats: ["reel", "short", "story", "post", "demo", "video"],
+    useCases: ["launch", "education", "onboarding"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  motion: { cues, counts, swaps },
+  build() {
+    const k = new Kit(NAME, preset("ig-story"));
+    k.quantizeGeometry = true;
+    sketchBrand(k, {});
+    hand(k, "Brand 32", 32);
+    sans(k, "Label 24", 24, { weight: 600 });
+    hand(k, "Hook 84", 84, { lead: 1.08, spacing: -0.035 });
+    hand(k, "Hook 64", 64, { lead: 1.08, spacing: -0.03 });
+    hand(k, "Step 24", 24, { lead: 1.15, spacing: 0 });
+    sans(k, "Note 22", 22, { weight: 700, lead: 1.2 });
+    sans(k, "Meta 18", 18, { weight: 700, lead: 1.2 });
+    hand(k, "Tally 30", 30, { lead: 1, spacing: 0 });
+    sans(k, "Ui 22", 22, { weight: 600, lead: 1.2 });
+    hand(k, "Button 22", 22, { lead: 1.15, spacing: 0 });
+    hand(k, "Status 28", 28, { lead: 1.15 });
+    sans(k, "Caption 34", 34, { weight: 600, lead: 1.3 });
+    hand(k, "Call 32", 32, { lead: 1.15, spacing: -0.01 });
+    pill(k, "Call", { fill: "primary", ink: "onPrimary", style: "Call 32", label: "Try Plotline free", pad: [20, 30], radius: 16 });
+    const sheet = reelSheet(k, S, { name: "Feature demo", gap: 16, justify: "MIN" });
+    dots(k, sheet);
+    desk(k, sheet, { w: 1080, h: 400, absolute: { x: 0, y: 1480 }, sway: 0.4, seed: 4 });
+    const top = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Top row" });
+    const brand = k.stack(top, { direction: "HORIZONTAL", width: "HUG", gap: 14, align: "CENTER", name: "Lockup" });
+    logoBadge(k, brand, { fill: "primary", size: 30, pad: 7, radius: 10 });
+    k.text(brand, "{{brand.name}}", { style: "Brand 32", color: "text", autoWidth: true, name: "Brand name" });
+    k.text(top, "Dot vote, step by step", { style: "Label 24", color: "text", autoWidth: true, name: "Feature words" });
+    const hook = k.text(sheet, "Sorted by the team.\nNo meeting needed.", { style: "Hook 84", color: "text", name: "Hook" });
+    const steps = k.stack(sheet, { direction: "HORIZONTAL", gap: 12, height: 60, name: "Steps" });
+    ["Start", "Dot", "Sort", "Plan"].forEach((label, i) => {
+      const c = k.stack(steps, { direction: "HORIZONTAL", gap: 10, align: "CENTER", width: "FILL", name: "Step cell" });
+      const ring = k.stack(c, { width: 44, height: 44, align: "CENTER", justify: "CENTER", name: "Step ring" });
+      marker(k, ring, 44, 44, scribbleCircle(44, 44, { seed: 80 + i, turns: 1.15, inset: 3 }), { name: "Step loop", color: "text", width: 3, absolute: { x: 0, y: 0 } });
+      k.text(ring, `${i + 1}`, { style: "Step 24", color: "text", autoWidth: true, name: "Step no" });
+      k.text(c, label, { style: "Step 24", color: "text", autoWidth: true, name: "Step label" });
+    });
+    const cellW = Math.round((WIN.w - 36) / 4);
+    const stepLine = marker(k, steps, cellW - 20, 14, underline(cellW - 20, 14, { seed: 90, flick: false }), { name: "Step marker", color: "red", width: 6, absolute: { x: 0, y: 50 } });
+    const stage = k.stack(sheet, { width: WIN.w, height: WIN.h, clip: true, name: "Stage" });
+    const cam = k.frame(stage, { x: 0, y: 0, width: WIN.w, height: WIN.h }, { name: "Camera" });
+    const w = sketchWindow(k, cam, { w: WIN.w, h: WIN.h, title: "Roadmap ideas, Q4", style: "Ui 22", button: "Dot vote", buttonStyle: "Button 22", absolute: { x: 0, y: 0 }, seed: 9 });
+    const ideas = IDEAS.map((idea, i) => ideaNote(k, w.body, idea, i));
+    const status = k.stack(w.body, { direction: "HORIZONTAL", width: "HUG", gap: 18, align: "CENTER", name: "Status", absolute: { x: GRID.pad + 4, y: WIN.h - w.bar - 66 } });
+    marker(k, status, 30, 30, tick(30), { name: "Status tick", color: "primary", width: 5 });
+    k.text(status, `${DOTS} of ${DOTS} dots placed`, { style: "Status 28", color: "onCard", width: 380, name: "Placed figure" });
+    k.text(status, "7 people", { style: "Ui 22", color: "cardMuted", autoWidth: true, name: "Status line" });
+    const p = pen(k, stage, { ...REST, size: 120 });
+    captionStrip(k, sheet, swaps[0].words[0], { style: "Caption 34", fill: "text", ink: "paper", radius: 14, pad: [18, 24] });
+    const call = k.stack(sheet, { direction: "HORIZONTAL", justify: "SPACE_BETWEEN", align: "CENTER", name: "Call row" });
+    k.instance(call, "Call", { Label: "Try Plotline free" }, { name: "Call" });
+    const site = k.stack(call, { width: "HUG", gap: 0, name: "Site box" });
+    k.text(site, "{{brand.site}}", { style: "Label 24", color: "text", autoWidth: true, name: "Site" });
+    const siteLine = marker(k, site, 220, 16, underline(220, 16, { seed: 4 }), { name: "Site line", color: "red", width: 4 });
+    k.counts(sheet, counts);
+    k.swaps(sheet, swaps);
+    k.cues(sheet, cues);
+    choreograph(k, sheet, { hook, stepLine, cellW, ideas, button: w.button, outline: k.named(w.win, "Window outline")[0], siteLine });
+    camera(k, cam, WIN.w, WIN.h, SHOTS);
+    const to = (pt, s) => {
+      const a = seenAt(WIN.w, WIN.h, s, pt);
+      return { dx: a.x - REST.x, dy: a.y - REST.y };
+    };
+    const body = (pt) => ({ x: pt.x, y: pt.y + w.bar });
+    glide(k, p, [
+      { t: 0, dx: 0, dy: 0 },
+      { t: beat(2), dx: 0, dy: 0 },
+      { t: T1 - 100, ...to(BUTTON, { t: 0, zoom: 1 }) },
+      { t: beat(4), ...to(BUTTON, { t: 0, zoom: 1 }) },
+      { t: T2 - 120, ...to(body(MYDOT), SHOTS[0]) },
+      { t: beat(7.5), ...to(body(MYDOT), SHOTS[0]) },
+      { t: T3 - 120, ...to(BUTTON, { t: 0, zoom: 1 }) },
+      { t: beat(11), ...to(BUTTON, { t: 0, zoom: 1 }) },
+      { t: T4 - 120, ...to(BUTTON, SHOTS[2]) },
+      { t: beat(16), ...to(BUTTON, SHOTS[2]) },
+      { t: beat(17.5), dx: 0, dy: 0 }
+    ]);
+    clicks(k, p, [T1, T2, T3, T4]);
+    k.variants(sheet, [...reelCuts({ post: 48, portrait: 60 }, {
+      post: (kit, id) => {
+        kit.patch(id, { itemSpacing: 16, counterAxisSpacing: 16, padding: { top: 48, right: 140, bottom: 48, left: 140 } });
+        redots(kit, id);
+        hide(kit, id, ["Desk", "Top row", "Steps"]);
+        restyle(kit, id, "Hook", "Hook 64");
+      }
+    }).slice(0, 1), wideCut(640, (kit, id, right) => {
+      redots(kit, id);
+      kit.patch(id, { primaryAxisAlignItems: "MIN", padding: { ...kit.node(id).padding, top: 110 } });
+      restyle(kit, id, "Hook", "Hook 64");
+      place(kit, id, "Desk", 40, 780, 0.62);
+      const cw = Math.round((640 - 36) / 4);
+      for (const n of kit.named(id, "Step marker")) {
+        kit.patch(n, { width: cw - 20, paths: underline(cw - 20, 14, { seed: 90, flick: false }) });
+        slideSteps(kit, n, cw);
+      }
+      const scale = Math.min(right.width / WIN.w, right.height / WIN.h);
+      float(kit, id, "Stage", right.x + Math.round((right.width - WIN.w * scale) / 2), right.y + Math.round((right.height - WIN.h * scale) / 2), { scale });
+    })]);
+    k.setCover(sheet);
+    return k.finish();
+  }
+});
+function ideaNote(k, body, idea, i) {
+  const at = cell(RANK[i]);
+  const { note } = sticky(k, body, { width: noteW, height: GRID.noteH, color: idea.color, text: idea.text, style: "Note 22", pad: 14, gap: 10, name: "Idea", absolute: at });
+  const row = k.stack(note, { direction: "HORIZONTAL", gap: 6, wrap: true, name: "Dot row" });
+  const roles = ["primary", "red", "text"];
+  for (let d = 0; d < idea.votes; d++) k.ellipse(row, 18, roles[(i + d) % 3], { name: "Vote dot" });
+  const foot = k.stack(note, { direction: "HORIZONTAL", gap: 10, align: "CENTER", absolute: { x: 14, y: GRID.noteH - 66 }, width: noteW - 28, name: "Note foot" });
+  const ring = k.stack(foot, { width: 54, height: 54, align: "CENTER", justify: "CENTER", name: "Tally ring" });
+  marker(k, ring, 54, 54, scribbleCircle(54, 54, { seed: 30 + i, turns: 1.2, inset: 3 }), { name: RANK[i] < 3 ? "Winner loop" : "Tally loop", color: RANK[i] < 3 ? "red" : "stickyInk", width: RANK[i] < 3 ? 4 : 2.5, absolute: { x: 0, y: 0 } });
+  k.text(ring, `${idea.votes}`, { style: "Tally 30", color: "stickyInk", width: 40, align: "CENTER", name: `Tally ${i + 1}` });
+  if (idea.who) {
+    const plan = k.stack(foot, { direction: "HORIZONTAL", width: "HUG", gap: 6, align: "CENTER", name: "Plan mark" });
+    marker(k, plan, 22, 22, tick(22), { name: "Plan tick", color: "primary", width: 4 });
+    const chip = k.stack(plan, { direction: "HORIZONTAL", width: "HUG", fill: "primary", radius: 999, padding: { top: 2, right: 8, bottom: 2, left: 8 }, name: "Owner" });
+    k.text(chip, idea.who, { style: "Meta 18", color: "onPrimary", autoWidth: true, name: "Owner initials" });
+    k.text(plan, idea.when, { style: "Meta 18", color: "stickyInk", autoWidth: true, name: "Note date" });
+  }
+  return note;
+}
+function slideSteps(k, id, cellW) {
+  const x = (i) => i * (cellW + 12);
+  k.patch(id, { translateX: x(3) });
+  k.animate(id, "translateX", STEP.slice(0, 4).flatMap((s, i) => i === 0 ? [{ t: beat(s), v: x(0), ease: ease.hold }] : [{ t: beat(s) - 1, v: x(i - 1), ease: ease.out("back") }, { t: beat(s) + 380, v: x(i), ...i < 3 ? { ease: ease.hold } : {} }]));
+}
+function choreograph(k, sheet, o) {
+  k.animate(o.hook, "text.content", [{ t: 0, v: "Six ideas. One slot.\nLet the dots decide.", ease: ease.hold }, { t: SORT, v: "Sorted by the team.\nNo meeting needed." }]);
+  for (const id of k.named(sheet, "Tidy label")) k.patch(id, { characters: "Move top 3" });
+  for (const id of k.named(sheet, "Tidy label")) k.animate(id, "text.content", [{ t: 0, v: "Dot vote", ease: ease.hold }, { t: beat(8), v: "Sort by votes", ease: ease.hold }, { t: beat(13.5), v: "Move top 3" }]);
+  slideSteps(k, o.stepLine, o.cellW);
+  draw(k, o.stepLine, beat(STEP[0]), 360);
+  draw(k, o.outline, 0, 700);
+  draw(k, o.siteLine, beat(STEP[4]) + 400, 420);
+  const all = o.ideas.flatMap((n) => k.named(n, "Vote dot"));
+  const rand = rng(77), order = all.map((id, i) => ({ id, r: rand(), i })).sort((a, b) => a.r - b.r);
+  const span = beat(4);
+  order.forEach(({ id }, j) => {
+    const t = beat(STEP[1]) + Math.round(j / all.length * span);
+    k.animate(id, "scaleX", [{ t, v: 0, ease: ease.back(2.2) }, { t: t + 260, v: 1 }]);
+    k.animate(id, "scaleY", [{ t, v: 0, ease: ease.back(2.2) }, { t: t + 260, v: 1 }]);
+  });
+  o.ideas.forEach((id, i) => {
+    const from = cell(i), to = cell(RANK[i]), dx = from.x - to.x, dy = from.y - to.y;
+    const t = SORT + RANK[i] * 70;
+    if (dx) k.animate(id, "translateX", [{ t: 0, v: dx, ease: ease.hold }, { t, v: dx, ease: ease.inOut("back") }, { t: t + 700, v: 0 }]);
+    if (dy) k.animate(id, "translateY", [{ t: 0, v: dy, ease: ease.hold }, { t, v: dy, ease: ease.inOut("back") }, { t: t + 700, v: 0 }]);
+    k.animate(id, "rotation", [{ t: 0, v: i % 2 ? 2.5 : -2.5, ease: ease.hold }, { t, v: i % 2 ? 2.5 : -2.5, ease: ease.inOut("cubic") }, { t: t + 700, v: 0 }]);
+  });
+  for (const id of k.named(sheet, "Winner loop")) draw(k, id, SORT + 800, 520);
+}
+
+export {
+  style_sketch_feature_demo_default
+};

package/dist/chunks/chunk-IEH3UJPI.js

@@ -0,0 +1,224 @@
+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 {
+  cartouche,
+  greatWave,
+  mount,
+  print,
+  seal,
+  stamp,
+  ukiyoBrand,
+  windowFrame
+} from "./chunk-6DHLBB7R.js";
+import {
+  MONO,
+  SERIF
+} from "./chunk-AXAAXHZF.js";
+import {
+  buttons,
+  nav,
+  page,
+  webResponsive
+} from "./chunk-ZMD3C2YJ.js";
+import {
+  pill
+} from "./chunk-KOAJ6HD2.js";
+import {
+  defineTemplate
+} from "./chunk-YDW25Z3P.js";
+import {
+  Kit,
+  preset
+} from "./chunk-4G7VHQUV.js";
+import {
+  ease
+} from "./chunk-PLZLKHOI.js";
+import {
+  init_define_POPCRAFT_COMPONENT_IDS
+} from "./chunk-WKDVCZ45.js";
+
+// templates/src/web/ukiyo-e-landing.ts
+init_define_POPCRAFT_COMPONENT_IDS();
+var LOOP = 6e3;
+var MOUNT = { w: 540, h: 690, margin: 18 };
+var STAGE = { w: MOUNT.w + 80, h: MOUNT.h + 60, x: 40, y: 14 };
+var PRINT = {
+  w: MOUNT.w - 2 * MOUNT.margin,
+  h: MOUNT.h - 2 * MOUNT.margin,
+  horizon: 396,
+  front: 520,
+  pattern: 540,
+  u: 0.52,
+  loopMs: LOOP,
+  seed: 21,
+  band: 120,
+  high: 8,
+  sun: { x: 380, y: 318, size: 124 },
+  mountain: { x: 366, w: 210, h: 92 },
+  mist: [{ x: 420, y: 336, w: 170 }, { x: 320, y: 366, w: 140 }, { x: 110, y: 196, w: 170 }, { x: 250, y: 150, w: 120 }],
+  rows: 7,
+  behind: 3,
+  wave: { x: -150, y: 150, w: 560 },
+  boat: { x: 372, len: 150 },
+  birds: [{ x: 300, y: 250, size: 8 }, { x: 326, y: 236, size: 6 }, { x: 278, y: 232, size: 6 }],
+  pines: [{ x: -8, y: -8, size: 250 }],
+  fore: [606]
+};
+var VIEWS = [
+  ["View 1", "Before the wave", "Keel watches the swell, not the crest: when connections climb, read replicas are warm and in rotation before your users arrive."],
+  ["View 2", "In the wave", "Every write is acknowledged only once it is kept twice, in two regions. A zone can go under and the ledger is still whole."],
+  ["View 3", "After the wave", "Any second of the last thirty days restores with one command, into a new database you can inspect before you trust it."],
+  ["View 4", "On a calm day", "Replicas you no longer need are stood down within the hour, so a quiet Tuesday costs what a quiet Tuesday should."]
+];
+var counts = [{ layer: "Crest figure", at: 2200, duration: 2400, counter: { from: 1200, to: 48210, separator: "," } }];
+var cues = [
+  { layer: "Offer bar", preset: "drop-in", at: 0, params: { duration: 600 } },
+  { layer: "Nav", preset: "fade-in", at: 100, params: { duration: 700 } },
+  { layer: "Eyebrow", preset: "fade-in", at: 300, params: { duration: 700 } },
+  { layer: "Headline", preset: "blur-in", at: 350, params: { duration: 1e3, amount: 22 } },
+  { layer: "Mount", preset: "fade-in", at: 300, params: { duration: 900 } },
+  { layer: "Wave", preset: "rise-in", at: 600, params: { duration: 1300 } },
+  { layer: "Lead", preset: "rise-in", at: 900, params: { duration: 800 } },
+  { layer: ["CTA primary", "CTA quiet"], preset: "rise-in", at: 1300, params: { duration: 700 }, stagger: { delay: 140 } },
+  { layer: "Boat", preset: "slide-in", at: 1400, params: { duration: 1400, direction: "right", distance: 260 } },
+  { layer: "Claw", preset: "scale-in", at: 1700, params: { duration: 520 }, stagger: { delay: 40 } },
+  { layer: "Proof", preset: "fade-in", at: 2e3, params: { duration: 800 } },
+  { layer: "Crest", preset: "pop-in", at: 2100, params: { duration: 450 } },
+  { layer: "Spray", preset: "pop-in", at: 2400, params: { duration: 450 }, stagger: { delay: 140 } },
+  { layer: "Reading", preset: "pop-in", at: 3300, params: { duration: 450 } }
+];
+var ukiyo_e_landing_default = defineTemplate({
+  id: "web-ukiyo-e-landing",
+  meta: {
+    name: "Woodblock landing page",
+    description: "A landing page drawn as a Japanese woodblock print, for a database, backup or any product whose promise is steadiness in a storm: a storm-log bar, a hero where a mounted print cuts itself (a great wave rises and breaks claw by claw over a boat that keeps its line, the sun climbs behind the far mountain, the seal stamps under a title cartouche, and the requests at the crest count up over the mount), four views of uptime as a ruled ledger, and the storm in one sentence beside a breaking wave \u2014 at desktop, laptop, tablet and phone widths",
+    category: "web",
+    tags: ["woodblock", "ukiyo-e", "japanese print", "great wave", "landing page", "hero", "website", "saas", "database", "backup", "reliability", "counter", "animation", "responsive", "serif"],
+    platforms: ["web"],
+    formats: ["page"],
+    useCases: ["launch", "brand-intro"],
+    created: "2026-10-02",
+    updated: "2026-10-02"
+  },
+  stableNumbers: true,
+  breakpoints: true,
+  motion: { cues, counts },
+  build() {
+    const k = new Kit("Woodblock landing page", preset("web-desktop"));
+    k.quantizeGeometry = true;
+    ukiyoBrand(k);
+    k.textStyle("Nav 16", { size: 16, fontWeight: 500, lineHeight: 24 });
+    k.textStyle("Brand 22", { ...SERIF, size: 22, fontWeight: 800, letterSpacing: -0.3, lineHeight: 28 });
+    k.textStyle("Button 16", { size: 16, fontWeight: 700, lineHeight: 24 });
+    k.textStyle("Bar 15", { size: 15, fontWeight: 700, lineHeight: 22, textAlign: "CENTER" });
+    k.textStyle("Eyebrow 14", { size: 14, fontWeight: 700, letterSpacing: 4, lineHeight: 20, textCase: "UPPER" });
+    k.textStyle("Display 76", { ...SERIF, size: 76, fontWeight: 800, letterSpacing: -2.8, lineHeight: 76 });
+    k.textStyle("Display 68", { ...SERIF, size: 68, fontWeight: 800, letterSpacing: -2.4, lineHeight: 68 });
+    k.textStyle("Display 62", { ...SERIF, size: 62, fontWeight: 800, letterSpacing: -2, lineHeight: 62 });
+    k.textStyle("Display 42", { ...SERIF, size: 42, fontWeight: 800, letterSpacing: -1.2, lineHeight: 44 });
+    k.textStyle("Lead 20", { size: 20, fontWeight: 400, lineHeight: 32 });
+    k.textStyle("Lead 17", { size: 17, fontWeight: 400, lineHeight: 27 });
+    k.textStyle("Proof 15", { ...MONO, size: 15, fontWeight: 500, lineHeight: 24 });
+    k.textStyle("Section 46", { ...SERIF, size: 46, fontWeight: 800, letterSpacing: -1.4, lineHeight: 52 });
+    k.textStyle("Section 34", { ...SERIF, size: 34, fontWeight: 800, letterSpacing: -0.9, lineHeight: 40 });
+    k.textStyle("When 15", { ...MONO, size: 15, fontWeight: 600, letterSpacing: 1.5, lineHeight: 32, textCase: "UPPER" });
+    k.textStyle("Entry 26", { ...SERIF, size: 26, fontWeight: 700, letterSpacing: -0.4, lineHeight: 32 });
+    k.textStyle("Body 18", { size: 18, fontWeight: 400, lineHeight: 30 });
+    k.textStyle("Statement 40", { ...SERIF, size: 40, fontWeight: 600, letterSpacing: -0.9, lineHeight: 50 });
+    k.textStyle("Statement 28", { ...SERIF, size: 28, fontWeight: 600, letterSpacing: -0.5, lineHeight: 36 });
+    k.textStyle("Small 14", { size: 14, fontWeight: 500, lineHeight: 22 });
+    k.textStyle("Reading 13", { ...MONO, size: 13, fontWeight: 700, lineHeight: 18 });
+    k.textStyle("Crest label 12", { size: 12, fontWeight: 700, letterSpacing: 1.6, lineHeight: 16, textCase: "UPPER" });
+    k.textStyle("Crest 26", { ...MONO, size: 26, fontWeight: 700, letterSpacing: -0.8, lineHeight: 32 });
+    k.textStyle("Cartouche 13", { ...SERIF, size: 13, fontWeight: 700, letterSpacing: 1.2, lineHeight: 17, textCase: "UPPER", textAlign: "CENTER" });
+    buttons(k, { style: "Button 16", pad: [15, 26], radius: 8 });
+    pill(k, "Reading pill", { fill: "card", ink: "onCard", style: "Reading 13", label: "p99 \xB7 42 ms \xB7 steady", pad: [9, 14], radius: 6 });
+    const sheet = k.sheet;
+    page(k, sheet, { gap: 72, top: 24 });
+    k.timeline(sheet, { duration: LOOP, fps: 30 });
+    const bar = k.stack(sheet, { fill: "primary", radius: 8, padding: { top: 10, right: 24, bottom: 10, left: 24 }, align: "CENTER", name: "Offer bar" });
+    k.text(bar, "Storm log, 14 September: 48,210 requests a second at the crest, and the p99 moved 3 ms. Read how it held.", { style: "Bar 15", color: "onPrimary", name: "Offer bar text" });
+    nav(k, sheet, { links: ["Product", "Storm log", "Pricing", "Docs"], cta: "Start a database", 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: 26, name: "Copy" });
+    k.text(copy, "Managed Postgres for launch days", { style: "Eyebrow 14", color: "onPaper", name: "Eyebrow" });
+    k.text(copy, "The database that stays upright.", { style: "Display 76", color: "text", name: "Headline" });
+    k.text(copy, "Keel adds replicas before the crest, keeps every write in two regions and restores any second of the last thirty days in one command. You watch the launch. It watches the sea.", { style: "Lead 20", color: "onPaper", name: "Lead" });
+    const cta = k.stack(copy, { direction: "HORIZONTAL", gap: 12, wrap: true, name: "CTAs" });
+    k.instance(cta, "Button", { Label: "Start a database" }, { name: "CTA primary" });
+    k.instance(cta, "Button quiet", { Label: "Read the storm log" }, { name: "CTA quiet" });
+    k.text(copy, "99.997% uptime in 2026 \xB7 30-day restore \xB7 2 regions by default", { style: "Proof 15", color: "onPaper", name: "Proof" });
+    const visual = k.stack(hero, { width: STAGE.w, height: STAGE.h, radius: 6, clip: true, name: "Visual" });
+    const m = mount(k, visual, MOUNT.w, MOUNT.h, { margin: MOUNT.margin, absolute: { x: STAGE.x, y: STAGE.y } });
+    print(k, m.window, PRINT);
+    windowFrame(k, m.sheet, MOUNT.w, MOUNT.h, MOUNT.margin);
+    const corner = k.stack(m.sheet, { width: 80, gap: 8, align: "CENTER", name: "Corner", absolute: { x: MOUNT.w - MOUNT.margin - 96, y: MOUNT.margin + 18 } });
+    cartouche(k, corner, ["Views", "of", "uptime", "No. 1"], { style: "Cartouche 13", width: 80 });
+    seal(k, corner, 44);
+    const crest = k.stack(visual, { width: "HUG", gap: 2, fill: "card", radius: 6, stroke: { color: "text", width: 1.5 }, padding: { top: 12, right: 18, bottom: 12, left: 18 }, name: "Crest", absolute: { x: 16, y: 484 }, effects: [{ type: "DROP_SHADOW", color: { r: 0.04, g: 0.07, b: 0.16, a: 0.25 }, offset: { x: 0, y: 6 }, blur: 16, spread: 0, visible: true }] });
+    k.text(crest, "Requests a second, at the crest", { style: "Crest label 12", color: "onCard", autoWidth: true, name: "Crest label" });
+    const cell = k.stack(crest, { width: 200, name: "Crest cell" });
+    k.text(cell, "48,210", { style: "Crest 26", color: "onCard", name: "Crest figure" });
+    k.instance(visual, "Reading pill", { Label: "p99 \xB7 42 ms \xB7 steady" }, { name: "Reading", absolute: { x: 414, y: 574 } });
+    const views = k.stack(sheet, { gap: 0, name: "Views" });
+    k.text(views, "Four views of uptime", { style: "Section 46", color: "text", name: "Views title" });
+    k.stack(views, { height: 28, name: "Gap" });
+    for (const [when, title, account] of VIEWS) {
+      k.rect(views, "FILL", 2, "text", { name: "Rule", opacity: 0.55 });
+      const row = k.stack(views, { direction: "HORIZONTAL", gap: 32, padding: { top: 24, right: 0, bottom: 24, left: 0 }, name: "Entry" });
+      k.text(row, when, { style: "When 15", color: "onPaper", width: 150, name: "When" });
+      k.text(row, title, { style: "Entry 26", color: "text", width: 330, name: "Entry title" });
+      k.text(row, account, { style: "Body 18", color: "onPaper", name: "Account" });
+    }
+    k.rect(views, "FILL", 2, "text", { name: "Rule", opacity: 0.55 });
+    const band = k.stack(sheet, { gap: 24, fill: "card", radius: 6, clip: true, stroke: { color: "text", width: 1.5 }, padding: { top: 56, right: 440, bottom: 56, left: 56 }, name: "Band" });
+    greatWave(k, band, { x: 800, y: 36, w: 470, flip: true, u: 0.5, loopMs: LOOP, seed: 4 });
+    for (const w of k.named(band, "Wave")) k.patch(w, { name: "Band wave" });
+    for (const name of ["Claw", "Spray"]) for (const c of k.named(band, name)) k.patch(c, { name: `Band ${name.toLowerCase()}` });
+    k.text(band, "On 14 September one customer\u2019s launch went from 1,200 to 48,210 requests a second in nine minutes. Their p99 moved by three milliseconds.", { style: "Statement 40", color: "onCard", name: "Statement" });
+    k.instance(band, "Button", { Label: "Read the storm log" }, { name: "Band button" });
+    const footer = k.stack(sheet, { fill: "paper", name: "Footer" });
+    k.text(footer, "\xA9 2026 Keel Data Works \xB7 Status \xB7 Security \xB7 Storm logs \xB7 Docs", { style: "Small 14", color: "onPaper", name: "Footer text" });
+    for (const s of k.named(m.window, "Sun")) k.animate(s, "translateY", [{ t: 0, v: 110, ease: ease.out("cubic") }, { t: 4200, v: 0 }]);
+    for (const s of k.named(corner, "Seal")) stamp(k, s, 2700);
+    k.counts(sheet, counts);
+    k.cues(sheet, cues);
+    webResponsive(k, sheet, {
+      stack: ["Hero", "Entry"],
+      restyle: {
+        "Display 76": { laptop: "Display 68", tablet: "Display 62", mobile: "Display 42" },
+        "Lead 20": { mobile: "Lead 17" },
+        "Section 46": { mobile: "Section 34" },
+        "Statement 40": { tablet: "Statement 28", mobile: "Statement 28" }
+      },
+      gap: { tablet: 56, mobile: 44 },
+      tweak: (kit, id, size) => {
+        if (size === "laptop") for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 40 });
+        if (size === "tablet" || size === "mobile") {
+          for (const n of kit.named(id, "Hero")) kit.patch(n, { itemSpacing: 44, counterAxisAlignItems: "CENTER" });
+          for (const n of kit.named(id, "Entry")) kit.patch(n, { itemSpacing: 6 });
+        }
+        if (size === "mobile") {
+          for (const n of kit.named(id, "Visual")) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: 335, height: 620 });
+          for (const n of kit.named(id, "Mount")) kit.patch(n, { x: -185, y: -26 });
+          for (const n of kit.named(id, "Crest")) kit.patch(n, { x: 12, y: 176 });
+          for (const n of kit.named(id, "Reading")) kit.patch(n, { x: 150, y: 574 });
+        }
+        if (size === "tablet") for (const n of kit.named(id, "Visual")) kit.patch(n, { layoutSizingHorizontal: "FIXED", width: STAGE.w });
+        if (size === "tablet" || size === "mobile") for (const n of kit.named(id, "Band")) {
+          kit.patch(n, { padding: size === "mobile" ? { top: 28, right: 24, bottom: 28, left: 24 } : { top: 40, right: 296, bottom: 40, left: 40 } });
+          for (const w of kit.named(n, "Band wave")) kit.patch(w, size === "mobile" ? { visible: false } : { x: 376, y: 150 });
+        }
+      }
+    });
+    return k.finish();
+  }
+});
+
+export {
+  ukiyo_e_landing_default
+};