sketchmark 2.1.0 → 2.1.1

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

@@ -1,370 +0,0 @@
-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

@@ -1,169 +0,0 @@
-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));
-}