sketchmark 2.0.0 → 2.1.0

package/examples/make-modal-dialog.cjs

@@ -0,0 +1,355 @@
+const fs = require("fs");
+const path = require("path");
+
+const width = 800;
+const height = 600;
+const bg = "rgba(15, 23, 42, 0.6)";
+const font = "Inter, system-ui, sans-serif";
+
+const colors = {
+  overlay: "#0f172a",
+  modalBg: "#ffffff",
+  modalBorder: "#e2e8f0",
+  title: "#0f172a",
+  description: "#475569",
+  label: "#1e293b",
+  helper: "#64748b",
+  inputBg: "#ffffff",
+  inputBorder: "#cbd5e1",
+  placeholder: "#94a3b8",
+  warningBg: "#fef2f2",
+  warningBorder: "#fecaca",
+  warningText: "#991b1b",
+  footerBg: "#f8fafc",
+  footerBorder: "#e2e8f0",
+  btnPrimaryBg: "#dc2626",
+  btnPrimaryText: "#ffffff",
+  btnSecondaryBg: "#ffffff",
+  btnSecondaryText: "#475569",
+  btnSecondaryBorder: "#cbd5e1"
+};
+
+const elements = [];
+
+// Overlay background
+elements.push({
+  id: "overlay",
+  type: "path",
+  d: `M 0 0 L ${width} 0 L ${width} ${height} L 0 ${height} Z`,
+  fill: colors.overlay,
+  opacity: 0.5,
+  stroke: "none"
+});
+
+// Modal dimensions
+const modalW = 520;
+const modalH = 480;
+const modalX = (width - modalW) / 2;
+const modalY = (height - modalH) / 2;
+const modalR = 12;
+const modalPad = 28;
+
+// Modal background
+elements.push({
+  id: "modal-bg",
+  type: "path",
+  d: roundedRect(modalX, modalY, modalW, modalH, modalR),
+  fill: colors.modalBg,
+  stroke: colors.modalBorder,
+  strokeWidth: 1,
+  effects: { shadow: { dx: 0, dy: 8, blur: 32, color: "#000000", opacity: 0.15 } }
+});
+
+let y = modalY + modalPad;
+const contentX = modalX + modalPad;
+const contentW = modalW - modalPad * 2;
+
+// Title (left aligned)
+elements.push({
+  id: "modal-title",
+  type: "text",
+  x: contentX,
+  y: y,
+  text: "Delete Project",
+  align: "left",
+  valign: "top",
+  fontSize: 20,
+  fontFamily: font,
+  weight: 700,
+  fill: colors.title
+});
+y += 32;
+
+// Description (left aligned)
+elements.push({
+  id: "modal-desc",
+  type: "text",
+  x: contentX,
+  y: y,
+  text: "This action will permanently remove the project and all associated\ndata. This cannot be undone.",
+  align: "left",
+  valign: "top",
+  fontSize: 14,
+  fontFamily: font,
+  weight: 400,
+  lineHeight: 1.55,
+  fill: colors.description,
+  maxWidth: contentW
+});
+y += 56;
+
+// Warning note
+const warnH = 56;
+const warnR = 6;
+const warnPad = 14;
+
+elements.push({
+  id: "warning-bg",
+  type: "path",
+  d: roundedRect(contentX, y, contentW, warnH, warnR),
+  fill: colors.warningBg,
+  stroke: colors.warningBorder,
+  strokeWidth: 1
+});
+
+elements.push({
+  id: "warning-text",
+  type: "text",
+  x: contentX + warnPad,
+  y: y + warnPad,
+  text: "Warning: 3 team members will lose access immediately. Any\nactive integrations connected to this project will stop working.",
+  align: "left",
+  valign: "top",
+  fontSize: 12,
+  fontFamily: font,
+  weight: 500,
+  lineHeight: 1.5,
+  fill: colors.warningText,
+  maxWidth: contentW - warnPad * 2
+});
+y += warnH + 24;
+
+// Field 1: Project name
+elements.push({
+  id: "field1-label",
+  type: "text",
+  x: contentX,
+  y: y,
+  text: "Project Name",
+  align: "left",
+  valign: "top",
+  fontSize: 13,
+  fontFamily: font,
+  weight: 600,
+  fill: colors.label
+});
+y += 22;
+
+elements.push({
+  id: "field1-helper",
+  type: "text",
+  x: contentX,
+  y: y,
+  text: "Enter the project name exactly as shown to confirm deletion.\nThis helps prevent accidental removal of important data.",
+  align: "left",
+  valign: "top",
+  fontSize: 12,
+  fontFamily: font,
+  weight: 400,
+  lineHeight: 1.5,
+  fill: colors.helper,
+  maxWidth: contentW
+});
+y += 42;
+
+// Input field 1
+const inputH = 38;
+const inputR = 6;
+
+elements.push({
+  id: "field1-input-bg",
+  type: "path",
+  d: roundedRect(contentX, y, contentW, inputH, inputR),
+  fill: colors.inputBg,
+  stroke: colors.inputBorder,
+  strokeWidth: 1
+});
+
+elements.push({
+  id: "field1-placeholder",
+  type: "text",
+  x: contentX + 12,
+  y: y + inputH / 2,
+  text: "acme-dashboard-v2",
+  align: "left",
+  valign: "middle",
+  fontSize: 13,
+  fontFamily: font,
+  weight: 400,
+  fill: colors.placeholder
+});
+y += inputH + 20;
+
+// Field 2: Confirmation phrase
+elements.push({
+  id: "field2-label",
+  type: "text",
+  x: contentX,
+  y: y,
+  text: "Confirmation Phrase",
+  align: "left",
+  valign: "top",
+  fontSize: 13,
+  fontFamily: font,
+  weight: 600,
+  fill: colors.label
+});
+y += 22;
+
+elements.push({
+  id: "field2-helper",
+  type: "text",
+  x: contentX,
+  y: y,
+  text: "Type \"delete my project\" to enable the delete button.",
+  align: "left",
+  valign: "top",
+  fontSize: 12,
+  fontFamily: font,
+  weight: 400,
+  fill: colors.helper,
+  maxWidth: contentW
+});
+y += 26;
+
+// Input field 2
+elements.push({
+  id: "field2-input-bg",
+  type: "path",
+  d: roundedRect(contentX, y, contentW, inputH, inputR),
+  fill: colors.inputBg,
+  stroke: colors.inputBorder,
+  strokeWidth: 1
+});
+
+elements.push({
+  id: "field2-placeholder",
+  type: "text",
+  x: contentX + 12,
+  y: y + inputH / 2,
+  text: "delete my project",
+  align: "left",
+  valign: "middle",
+  fontSize: 13,
+  fontFamily: font,
+  weight: 400,
+  fill: colors.placeholder
+});
+
+// Footer
+const footerH = 68;
+const footerY = modalY + modalH - footerH;
+const footerR = modalR;
+
+// Footer background (bottom rounded corners only)
+elements.push({
+  id: "footer-bg",
+  type: "path",
+  d: `M ${modalX} ${footerY} L ${modalX + modalW} ${footerY} L ${modalX + modalW} ${modalY + modalH - footerR} Q ${modalX + modalW} ${modalY + modalH} ${modalX + modalW - footerR} ${modalY + modalH} L ${modalX + footerR} ${modalY + modalH} Q ${modalX} ${modalY + modalH} ${modalX} ${modalY + modalH - footerR} Z`,
+  fill: colors.footerBg,
+  stroke: "none"
+});
+
+// Footer top border
+elements.push({
+  id: "footer-border",
+  type: "path",
+  d: `M ${modalX} ${footerY} L ${modalX + modalW} ${footerY}`,
+  stroke: colors.footerBorder,
+  strokeWidth: 1,
+  fill: "none"
+});
+
+// Footer buttons (right-aligned group)
+const btnH = 38;
+const btnR = 6;
+const btnGap = 12;
+const cancelBtnW = 80;
+const deleteBtnW = 120;
+const btnGroupW = cancelBtnW + btnGap + deleteBtnW;
+const btnGroupX = modalX + modalW - modalPad - btnGroupW;
+const btnY = footerY + (footerH - btnH) / 2;
+
+// Cancel button (secondary)
+elements.push({
+  id: "btn-cancel-bg",
+  type: "path",
+  d: roundedRect(btnGroupX, btnY, cancelBtnW, btnH, btnR),
+  fill: colors.btnSecondaryBg,
+  stroke: colors.btnSecondaryBorder,
+  strokeWidth: 1
+});
+
+elements.push({
+  id: "btn-cancel-label",
+  type: "text",
+  x: btnGroupX + cancelBtnW / 2,
+  y: btnY + btnH / 2,
+  text: "Cancel",
+  align: "center",
+  valign: "middle",
+  fontSize: 13,
+  fontFamily: font,
+  weight: 500,
+  fill: colors.btnSecondaryText
+});
+
+// Delete button (primary/destructive)
+const deleteBtnX = btnGroupX + cancelBtnW + btnGap;
+
+elements.push({
+  id: "btn-delete-bg",
+  type: "path",
+  d: roundedRect(deleteBtnX, btnY, deleteBtnW, btnH, btnR),
+  fill: colors.btnPrimaryBg,
+  stroke: "none"
+});
+
+elements.push({
+  id: "btn-delete-label",
+  type: "text",
+  x: deleteBtnX + deleteBtnW / 2,
+  y: btnY + btnH / 2,
+  text: "Delete Project",
+  align: "center",
+  valign: "middle",
+  fontSize: 13,
+  fontFamily: font,
+  weight: 600,
+  fill: colors.btnPrimaryText
+});
+
+function roundedRect(x, y, w, h, r) {
+  return [
+    `M ${x + r} ${y}`,
+    `L ${x + w - r} ${y}`,
+    `Q ${x + w} ${y} ${x + w} ${y + r}`,
+    `L ${x + w} ${y + h - r}`,
+    `Q ${x + w} ${y + h} ${x + w - r} ${y + h}`,
+    `L ${x + r} ${y + h}`,
+    `Q ${x} ${y + h} ${x} ${y + h - r}`,
+    `L ${x} ${y + r}`,
+    `Q ${x} ${y} ${x + r} ${y}`,
+    "Z"
+  ].join(" ");
+}
+
+const doc = {
+  version: 1,
+  canvas: { width, height, background: "#64748b" },
+  elements
+};
+
+const outPath = path.join(__dirname, "modal-dialog.visual.json");
+fs.writeFileSync(outPath, JSON.stringify(doc, null, 2));
+console.log("Written:", outPath);

package/examples/make-origin-effects-lab.cjs

@@ -0,0 +1,311 @@
+const fs = require("node:fs");
+const path = require("node:path");
+
+const width = 1280;
+const height = 760;
+const duration = 6;
+const fps = 30;
+const bg = "#07111f";
+const font = "Roboto, Arial, sans-serif";
+
+const colors = {
+  panel: "#0d1a2e",
+  panelStroke: "#193252",
+  title: "#f8fafc",
+  body: "#94a3b8",
+  marker: "#fde047",
+  markerStroke: "#0f172a",
+  grid: "#173054",
+  rowLabel: "#7dd3fc",
+  fills: ["#818cf8", "#38bdf8", "#22c55e", "#f59e0b"]
+};
+
+const curves = {
+  ease: { type: "cubicBezier", x1: 0.25, y1: 0.1, x2: 0.25, y2: 1 },
+  easeOut: { type: "cubicBezier", x1: 0, y1: 0, x2: 0.2, y2: 1 }
+};
+
+const rectW = 160;
+const rectH = 100;
+const cellW = 270;
+const cellH = 240;
+const gridX = 70;
+const gridGap = 25;
+const scaleRowY = 150;
+const rotateRowY = 435;
+const shapeOffsetX = 58;
+const shapeOffsetY = 98;
+const rectShape = roundedRect(0, 0, rectW, rectH, 18);
+
+const originVariants = [
+  { key: "top_left", title: "Top-left origin", note: "[0, 0]", local: [0, 0] },
+  { key: "center", title: "Center origin", note: "[80, 50]", local: [rectW / 2, rectH / 2] },
+  { key: "bottom_right", title: "Bottom-right origin", note: "[160, 100]", local: [rectW, rectH] },
+  { key: "outside_right", title: "Outside-right origin", note: "[200, 50]", local: [rectW + 40, rectH / 2] }
+];
+
+const elements = [];
+
+elements.push({
+  id: "lab_title",
+  type: "text",
+  x: 70,
+  y: 52,
+  text: "Origin Transform Lab",
+  fontSize: 38,
+  fontFamily: font,
+  weight: 700,
+  fill: colors.title
+});
+
+elements.push({
+  id: "lab_body",
+  type: "text",
+  x: 70,
+  y: 96,
+  text: "Same rounded rectangle, animated as a group. Only the origin changes.",
+  fontSize: 16,
+  fontFamily: font,
+  weight: 400,
+  fill: colors.body
+});
+
+elements.push({
+  id: "scale_row_label",
+  type: "text",
+  x: 70,
+  y: scaleRowY - 38,
+  text: "Scale tests",
+  fontSize: 18,
+  fontFamily: font,
+  weight: 700,
+  fill: colors.rowLabel
+});
+
+elements.push({
+  id: "rotate_row_label",
+  type: "text",
+  x: 70,
+  y: rotateRowY - 38,
+  text: "Rotation tests",
+  fontSize: 18,
+  fontFamily: font,
+  weight: 700,
+  fill: colors.rowLabel
+});
+
+originVariants.forEach((variant, index) => {
+  const cellX = gridX + index * (cellW + gridGap);
+  const fill = colors.fills[index % colors.fills.length];
+  addPanel(cellX, scaleRowY, `scale_${variant.key}`, variant.title, variant.note);
+  addScaleDemo(cellX, scaleRowY, variant, fill);
+  addPanel(cellX, rotateRowY, `rotate_${variant.key}`, variant.title, variant.note);
+  addRotateDemo(cellX, rotateRowY, variant, fill);
+});
+
+const doc = {
+  version: 1,
+  canvas: { width, height, background: bg, duration, fps },
+  elements
+};
+
+const outPath = path.join(__dirname, "origin-effects-lab.visual.json");
+fs.writeFileSync(outPath, JSON.stringify(doc, null, 2));
+console.log("Written:", outPath);
+
+function addPanel(x, y, id, title, note) {
+  elements.push({
+    id: `${id}_panel`,
+    type: "path",
+    d: roundedRect(x, y, cellW, cellH, 22),
+    fill: colors.panel,
+    stroke: colors.panelStroke,
+    strokeWidth: 1.5
+  });
+
+  elements.push({
+    id: `${id}_title`,
+    type: "text",
+    x: x + 20,
+    y: y + 18,
+    text: title,
+    fontSize: 16,
+    fontFamily: font,
+    weight: 700,
+    fill: colors.title
+  });
+
+  elements.push({
+    id: `${id}_note`,
+    type: "text",
+    x: x + 20,
+    y: y + 42,
+    text: note,
+    fontSize: 12,
+    fontFamily: font,
+    weight: 500,
+    fill: colors.body
+  });
+
+  elements.push({
+    id: `${id}_guide_h`,
+    type: "path",
+    d: `M ${x + 20} ${y + shapeOffsetY + rectH / 2} L ${x + cellW - 20} ${y + shapeOffsetY + rectH / 2}`,
+    fill: "none",
+    stroke: colors.grid,
+    strokeWidth: 1,
+    dashArray: [6, 6]
+  });
+
+  elements.push({
+    id: `${id}_guide_v`,
+    type: "path",
+    d: `M ${x + shapeOffsetX + rectW / 2} ${y + 68} L ${x + shapeOffsetX + rectW / 2} ${y + cellH - 20}`,
+    fill: "none",
+    stroke: colors.grid,
+    strokeWidth: 1,
+    dashArray: [6, 6]
+  });
+}
+
+function addScaleDemo(cellX, cellY, variant, fill) {
+  const groupX = cellX + shapeOffsetX;
+  const groupY = cellY + shapeOffsetY;
+  const originAbs = absoluteOrigin(groupX, groupY, variant.local);
+
+  elements.push(originMarker(`scale_${variant.key}_origin`, originAbs[0], originAbs[1]));
+
+  elements.push({
+    id: `scale_${variant.key}_group`,
+    type: "group",
+    x: groupX,
+    y: groupY,
+    width: rectW,
+    height: rectH,
+    origin: originAbs,
+    children: [
+      {
+        id: `scale_${variant.key}_rect`,
+        type: "path",
+        d: rectShape,
+        fill,
+        stroke: "#dbeafe",
+        strokeWidth: 2
+      }
+    ],
+    timeline: {
+      tracks: {
+        scale: {
+          keyframes: [
+            { time: 0, value: 1, out: curves.easeOut },
+            { time: 1.3, value: 1.45, out: curves.ease },
+            { time: 2.6, value: 0.72, out: curves.ease },
+            { time: 4, value: 1.18, out: curves.ease },
+            { time: 5.4, value: 1 }
+          ]
+        }
+      }
+    }
+  });
+}
+
+function addRotateDemo(cellX, cellY, variant, fill) {
+  const groupX = cellX + shapeOffsetX;
+  const groupY = cellY + shapeOffsetY;
+  const originAbs = absoluteOrigin(groupX, groupY, variant.local);
+
+  elements.push(originMarker(`rotate_${variant.key}_origin`, originAbs[0], originAbs[1]));
+
+  elements.push({
+    id: `rotate_${variant.key}_group`,
+    type: "group",
+    x: groupX,
+    y: groupY,
+    width: rectW,
+    height: rectH,
+    origin: originAbs,
+    children: [
+      {
+        id: `rotate_${variant.key}_rect`,
+        type: "path",
+        d: rectShape,
+        fill,
+        stroke: "#dbeafe",
+        strokeWidth: 2
+      }
+    ],
+    timeline: {
+      tracks: {
+        rotation: {
+          keyframes: [
+            { time: 0, value: 0, out: curves.easeOut },
+            { time: 1.5, value: 42, out: curves.ease },
+            { time: 3, value: -28, out: curves.ease },
+            { time: 4.5, value: 18, out: curves.ease },
+            { time: 5.8, value: 0 }
+          ]
+        }
+      }
+    }
+  });
+}
+
+function originMarker(id, x, y) {
+  return {
+    id,
+    type: "group",
+    x: x - 16,
+    y: y - 16,
+    children: [
+      {
+        id: `${id}_cross_h`,
+        type: "path",
+        d: "M 0 16 L 32 16",
+        fill: "none",
+        stroke: colors.marker,
+        strokeWidth: 2,
+        strokeCap: "round"
+      },
+      {
+        id: `${id}_cross_v`,
+        type: "path",
+        d: "M 16 0 L 16 32",
+        fill: "none",
+        stroke: colors.marker,
+        strokeWidth: 2,
+        strokeCap: "round"
+      },
+      {
+        id: `${id}_dot`,
+        type: "path",
+        d: circlePath(16, 16, 6),
+        fill: colors.marker,
+        stroke: colors.markerStroke,
+        strokeWidth: 1.5
+      }
+    ]
+  };
+}
+
+function absoluteOrigin(groupX, groupY, localOrigin) {
+  return [groupX + localOrigin[0], groupY + localOrigin[1]];
+}
+
+function circlePath(cx, cy, r) {
+  return `M ${cx - r} ${cy} a ${r} ${r} 0 1 0 ${r * 2} 0 a ${r} ${r} 0 1 0 ${-r * 2} 0`;
+}
+
+function roundedRect(x, y, w, h, r) {
+  return [
+    `M ${x + r} ${y}`,
+    `L ${x + w - r} ${y}`,
+    `Q ${x + w} ${y} ${x + w} ${y + r}`,
+    `L ${x + w} ${y + h - r}`,
+    `Q ${x + w} ${y + h} ${x + w - r} ${y + h}`,
+    `L ${x + r} ${y + h}`,
+    `Q ${x} ${y + h} ${x} ${y + h - r}`,
+    `L ${x} ${y + r}`,
+    `Q ${x} ${y} ${x + r} ${y}`,
+    "Z"
+  ].join(" ");
+}

package/examples/make-preset-character-motion.cjs

@@ -0,0 +1,32 @@
+const fs = require("node:fs");
+const path = require("node:path");
+
+const { applyPresetFragments, characters, effects, motions, scenes, shapes } = require("../dist/src/presets");
+
+const outputPath = path.join(__dirname, "preset-character-motion.visual.json");
+
+const doc = {
+  version: 1,
+  canvas: { width: 960, height: 540, background: "#f8fafc", duration: 4, fps: 30 },
+  elements: []
+};
+
+const visual = applyPresetFragments(doc, [
+  scenes.gridBackground({ id: "stage.grid", x: 0, y: 0, width: 960, height: 540, step: 48 }),
+  shapes.line({ id: "stage.ground", from: [80, 430], to: [880, 430], stroke: "#cbd5e1", strokeWidth: 8 }),
+  characters.stickPerson({ id: "hero", x: 150, y: 235, height: 190 }),
+  characters.simpleDog({ id: "dog", x: 470, y: 335, width: 190, height: 100 }),
+  characters.simpleSpider({ id: "spider", x: 730, y: 330, width: 130, height: 130 }),
+  shapes.speechBubble({ id: "caption", x: 280, y: 84, width: 400, height: 90, text: "Characters are just kernel groups", fill: "#ffffff", stroke: "#94a3b8" }),
+  effects.dropShadow({ id: "hero", dy: 8, blur: 18, opacity: 0.16 }),
+  effects.dropShadow({ id: "dog", dy: 7, blur: 16, opacity: 0.14 }),
+  effects.glow({ id: "spider", color: "#60a5fa", blur: 12, opacity: 0.22 }),
+  motions.slideIn({ id: "hero", from: [80, 235], to: [150, 235], start: 0, duration: 0.7 }),
+  motions.bob({ id: "dog", to: [470, 335], start: 0.4, duration: 1.4, distance: 12 }),
+  motions.shake({ id: "spider", start: 1.1, duration: 0.8, amount: 10 }),
+  motions.stagger({ ids: ["hero.head", "hero.body", "hero.leftArm", "hero.rightArm"], start: 0.1, duration: 0.35, each: 0.08 }),
+  motions.fadeIn({ id: "caption", start: 0.45, duration: 0.45 })
+]);
+
+fs.writeFileSync(outputPath, JSON.stringify(visual, null, 2));
+console.log(`Wrote ${outputPath}`);