sketchmark 2.0.0 → 2.1.0

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

@@ -0,0 +1,370 @@
+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",
+  frame: "#31537f",
+  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 groupW = 180;
+const groupH = 120;
+const cellW = 270;
+const cellH = 240;
+const gridX = 70;
+const gridGap = 25;
+const scaleRowY = 150;
+const rotateRowY = 435;
+const groupOffsetX = 50;
+const groupOffsetY = 92;
+
+const originVariants = [
+  { key: "top_left", title: "Top-left origin", note: "[0, 0]", local: [0, 0] },
+  { key: "center", title: "Center origin", note: "[90, 60]", local: [groupW / 2, groupH / 2] },
+  { key: "bottom_right", title: "Bottom-right origin", note: "[180, 120]", local: [groupW, groupH] },
+  { key: "outside_right", title: "Outside-right origin", note: "[220, 60]", local: [groupW + 40, groupH / 2] }
+];
+
+const elements = [];
+
+elements.push({
+  id: "lab_title",
+  type: "text",
+  x: 70,
+  y: 52,
+  text: "Group 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 multi-child group, same motion, different origins.",
+  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, "group-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 + groupOffsetY + groupH / 2} L ${x + cellW - 20} ${y + groupOffsetY + groupH / 2}`,
+    fill: "none",
+    stroke: colors.grid,
+    strokeWidth: 1,
+    dashArray: [6, 6]
+  });
+
+  elements.push({
+    id: `${id}_guide_v`,
+    type: "path",
+    d: `M ${x + groupOffsetX + groupW / 2} ${y + 68} L ${x + groupOffsetX + groupW / 2} ${y + cellH - 20}`,
+    fill: "none",
+    stroke: colors.grid,
+    strokeWidth: 1,
+    dashArray: [6, 6]
+  });
+}
+
+function addScaleDemo(cellX, cellY, variant, fill) {
+  const groupX = cellX + groupOffsetX;
+  const groupY = cellY + groupOffsetY;
+  const originAbs = absoluteOrigin(groupX, groupY, variant.local);
+
+  elements.push(groupFrame(`scale_${variant.key}_frame`, groupX, groupY));
+  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: groupW,
+    height: groupH,
+    origin: originAbs,
+    children: buildDemoGroup(`scale_${variant.key}`, fill),
+    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 + groupOffsetX;
+  const groupY = cellY + groupOffsetY;
+  const originAbs = absoluteOrigin(groupX, groupY, variant.local);
+
+  elements.push(groupFrame(`rotate_${variant.key}_frame`, groupX, groupY));
+  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: groupW,
+    height: groupH,
+    origin: originAbs,
+    children: buildDemoGroup(`rotate_${variant.key}`, fill),
+    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 buildDemoGroup(prefix, fill) {
+  return [
+    {
+      id: `${prefix}_main`,
+      type: "path",
+      d: roundedRect(0, 18, groupW, 102, 18),
+      fill,
+      stroke: "#dbeafe",
+      strokeWidth: 2
+    },
+    {
+      id: `${prefix}_tag`,
+      type: "path",
+      d: roundedRect(12, 0, 66, 20, 10),
+      fill: "#0f172a",
+      stroke: "#7dd3fc",
+      strokeWidth: 1.5
+    },
+    {
+      id: `${prefix}_tag_text`,
+      type: "text",
+      x: 45,
+      y: 10,
+      text: "GROUP",
+      align: "center",
+      valign: "middle",
+      fontSize: 10,
+      fontFamily: font,
+      weight: 700,
+      fill: "#7dd3fc"
+    },
+    {
+      id: `${prefix}_accent`,
+      type: "path",
+      d: roundedRect(128, 38, 34, 34, 10),
+      fill: "#0f172a",
+      stroke: "#ffffff",
+      strokeWidth: 1.5
+    },
+    {
+      id: `${prefix}_bar_1`,
+      type: "path",
+      d: roundedRect(16, 50, 78, 10, 5),
+      fill: "rgba(255,255,255,0.9)",
+      stroke: "none"
+    },
+    {
+      id: `${prefix}_bar_2`,
+      type: "path",
+      d: roundedRect(16, 70, 112, 10, 5),
+      fill: "rgba(255,255,255,0.65)",
+      stroke: "none"
+    },
+    {
+      id: `${prefix}_footer`,
+      type: "path",
+      d: roundedRect(16, 92, 92, 12, 6),
+      fill: "rgba(255,255,255,0.35)",
+      stroke: "none"
+    }
+  ];
+}
+
+function groupFrame(id, x, y) {
+  return {
+    id,
+    type: "path",
+    d: roundedRect(x, y, groupW, groupH, 18),
+    fill: "none",
+    stroke: colors.frame,
+    strokeWidth: 1,
+    dashArray: [8, 6]
+  };
+}
+
+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-image-clip-radius.cjs

@@ -0,0 +1,169 @@
+const fs = require("fs");
+const path = require("path");
+
+const width = 960;
+const height = 540;
+const duration = 4;
+const fps = 30;
+
+const image = {
+  id: "photo",
+  type: "image",
+  src: svgDataUri(`
+    <svg xmlns="http://www.w3.org/2000/svg" width="900" height="560" viewBox="0 0 900 560">
+      <defs>
+        <linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
+          <stop offset="0" stop-color="#0f766e"/>
+          <stop offset="0.52" stop-color="#2563eb"/>
+          <stop offset="1" stop-color="#7c3aed"/>
+        </linearGradient>
+      </defs>
+      <rect width="900" height="560" fill="url(#bg)"/>
+      <circle cx="180" cy="150" r="86" fill="#fef3c7" opacity="0.9"/>
+      <circle cx="710" cy="120" r="120" fill="#bae6fd" opacity="0.42"/>
+      <circle cx="640" cy="415" r="180" fill="#f0abfc" opacity="0.35"/>
+      <path d="M 0 410 C 160 340 260 470 430 390 C 590 315 720 395 900 330 L 900 560 L 0 560 Z" fill="#022c22" opacity="0.45"/>
+      <path d="M 0 450 C 170 390 330 510 500 425 C 660 350 760 470 900 405 L 900 560 L 0 560 Z" fill="#020617" opacity="0.38"/>
+      <text x="60" y="488" font-family="Arial, sans-serif" font-size="48" font-weight="800" fill="#ffffff">clip.d radius animation</text>
+    </svg>
+  `),
+  x: 210,
+  y: 116,
+  width: 540,
+  height: 336,
+  clip: {
+    type: "path",
+    d: roundedRectClipPath(210, 116, 540, 336, 0)
+  },
+  timeline: {
+    tracks: {
+      "clip.d": {
+        keyframes: sampledRadiusKeyframes({
+          x: 210,
+          y: 116,
+          width: 540,
+          height: 336,
+          duration,
+          fps: 12,
+          radiusAt: (time) => {
+            const loop = pingPong(time / duration);
+            return 120 * easeInOut(loop);
+          }
+        })
+      },
+      opacity: {
+        keyframes: [
+          { time: 0, value: 0, out: curve("ease-out") },
+          { time: 0.35, value: 1 }
+        ]
+      }
+    }
+  }
+};
+
+const doc = {
+  version: 1,
+  canvas: {
+    width,
+    height,
+    background: "#f8fafc",
+    duration,
+    fps
+  },
+  elements: [
+    {
+      id: "title",
+      type: "text",
+      text: "Image radius is compiled to clip.d keyframes",
+      x: width / 2,
+      y: 54,
+      align: "center",
+      valign: "middle",
+      fontSize: 30,
+      weight: 800,
+      fill: "#0f172a"
+    },
+    {
+      id: "note",
+      type: "text",
+      text: "The kernel only sees an image plus animated clip path data.",
+      x: width / 2,
+      y: 494,
+      align: "center",
+      valign: "middle",
+      fontSize: 18,
+      fill: "#475569"
+    },
+    image
+  ]
+};
+
+const outPath = path.join(__dirname, "image-clip-radius.visual.json");
+fs.writeFileSync(outPath, JSON.stringify(doc, null, 2) + "\n", "utf8");
+console.log(`Wrote ${outPath}`);
+
+function sampledRadiusKeyframes({ x, y, width, height, duration, fps, radiusAt }) {
+  const frameCount = Math.max(1, Math.round(duration * fps));
+  const frames = [];
+  for (let index = 0; index <= frameCount; index += 1) {
+    const time = Number(((index / frameCount) * duration).toFixed(4));
+    const radius = radiusAt(time);
+    frames.push({
+      time,
+      value: roundedRectClipPath(x, y, width, height, radius)
+    });
+  }
+  return frames;
+}
+
+function roundedRectClipPath(x, y, width, height, radius) {
+  const left = finite(x);
+  const top = finite(y);
+  const w = Math.max(0, finite(width));
+  const h = Math.max(0, finite(height));
+  const r = Math.min(Math.max(0, finite(radius)), w / 2, h / 2);
+  const right = left + w;
+  const bottom = top + h;
+
+  if (r <= 0) return `M ${left} ${top} H ${right} V ${bottom} H ${left} Z`;
+
+  return [
+    `M ${round(left + r)} ${top}`,
+    `H ${round(right - r)}`,
+    `Q ${right} ${top} ${right} ${round(top + r)}`,
+    `V ${round(bottom - r)}`,
+    `Q ${right} ${bottom} ${round(right - r)} ${bottom}`,
+    `H ${round(left + r)}`,
+    `Q ${left} ${bottom} ${left} ${round(bottom - r)}`,
+    `V ${round(top + r)}`,
+    `Q ${left} ${top} ${round(left + r)} ${top}`,
+    "Z"
+  ].join(" ");
+}
+
+function pingPong(value) {
+  const t = Math.max(0, Math.min(1, value));
+  return t <= 0.5 ? t * 2 : (1 - t) * 2;
+}
+
+function easeInOut(t) {
+  return t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2;
+}
+
+function curve(name) {
+  if (name === "ease-out") return { type: "cubicBezier", x1: 0, y1: 0, x2: 0.58, y2: 1 };
+  return { type: "graph", points: [[0, 0], [1, 1]] };
+}
+
+function svgDataUri(svg) {
+  return `data:image/svg+xml,${encodeURIComponent(svg.replace(/\s+/g, " ").trim())}`;
+}
+
+function finite(value) {
+  const number = Number(value);
+  return Number.isFinite(number) ? number : 0;
+}
+
+function round(value) {
+  return Number(value.toFixed(2));
+}