sketchmark 2.0.0 → 2.1.0

package/examples/make-product-demo.cjs

@@ -0,0 +1,468 @@
+const fs = require("fs");
+const path = require("path");
+
+const width = 1280;
+const height = 720;
+const duration = 12;
+const fps = 30;
+const bg = "#0f172a";
+const font = "Inter, system-ui, sans-serif";
+const monoFont = "JetBrains Mono, Fira Code, monospace";
+
+const colors = {
+  headline: "#ffffff",
+  subtext: "#94a3b8",
+  accent: "#3b82f6",
+  accentGlow: "#60a5fa",
+  panelBg: "#1e293b",
+  panelBorder: "#334155",
+  codeBg: "#0f172a",
+  codeText: "#e2e8f0",
+  pillBg: "#3b82f6",
+  pillText: "#ffffff",
+  btnBg: "#ffffff",
+  btnText: "#0f172a",
+  labelText: "#64748b"
+};
+
+const curves = {
+  easeOut: { type: "cubicBezier", x1: 0.16, y1: 1, x2: 0.3, y2: 1 },
+  easeInOut: { type: "cubicBezier", x1: 0.42, y1: 0, x2: 0.58, y2: 1 }
+};
+
+const elements = [];
+
+// === SCENE 1: Logo + Tagline (0s - 3s) ===
+
+// Logo text
+elements.push({
+  id: "logo",
+  type: "text",
+  x: width / 2,
+  y: height / 2 - 40,
+  text: "Sketchmark",
+  align: "center",
+  valign: "middle",
+  fontSize: 72,
+  fontFamily: font,
+  weight: 800,
+  fill: colors.headline,
+  timeline: {
+    tracks: {
+      opacity: {
+        keyframes: [
+          { time: 0, value: 0, out: curves.easeOut },
+          { time: 0.6, value: 1 },
+          { time: 2.4, value: 1, out: curves.easeOut },
+          { time: 3, value: 0 }
+        ]
+      },
+      y: {
+        keyframes: [
+          { time: 0, value: height / 2 - 20, out: curves.easeOut },
+          { time: 0.6, value: height / 2 - 40 }
+        ]
+      }
+    }
+  }
+});
+
+// Tagline
+elements.push({
+  id: "tagline",
+  type: "text",
+  x: width / 2,
+  y: height / 2 + 30,
+  text: "Visual documents as JSON",
+  align: "center",
+  valign: "middle",
+  fontSize: 24,
+  fontFamily: font,
+  weight: 400,
+  fill: colors.subtext,
+  timeline: {
+    tracks: {
+      opacity: {
+        keyframes: [
+          { time: 0.3, value: 0, out: curves.easeOut },
+          { time: 0.9, value: 1 },
+          { time: 2.4, value: 1, out: curves.easeOut },
+          { time: 3, value: 0 }
+        ]
+      }
+    }
+  }
+});
+
+// === SCENE 2: Feature Pills (3s - 6s) ===
+
+const features = ["Render", "Animate", "Export"];
+const pillW = 140;
+const pillH = 48;
+const pillGap = 24;
+const pillsStartX = (width - (pillW * 3 + pillGap * 2)) / 2;
+
+features.forEach((label, i) => {
+  const px = pillsStartX + i * (pillW + pillGap);
+  const py = height / 2 - pillH / 2;
+  const delay = i * 0.15;
+
+  // Use a group to keep pill bg and text together
+  elements.push({
+    id: `pill-${i}`,
+    type: "group",
+    x: px,
+    y: py,
+    children: [
+      {
+        id: `pill-${i}-bg`,
+        type: "path",
+        d: roundedRect(0, 0, pillW, pillH, pillH / 2),
+        fill: colors.pillBg,
+        stroke: "none"
+      },
+      {
+        id: `pill-${i}-text`,
+        type: "text",
+        x: pillW / 2,
+        y: pillH / 2,
+        text: label,
+        align: "center",
+        valign: "middle",
+        fontSize: 18,
+        fontFamily: font,
+        weight: 600,
+        fill: colors.pillText
+      }
+    ],
+    opacity: 0,
+    timeline: {
+      tracks: {
+        opacity: {
+          keyframes: [
+            { time: 3 + delay, value: 0, out: curves.easeOut },
+            { time: 3.4 + delay, value: 1 },
+            { time: 5.4, value: 1, out: curves.easeOut },
+            { time: 6, value: 0 }
+          ]
+        },
+        y: {
+          keyframes: [
+            { time: 3 + delay, value: py + 20, out: curves.easeOut },
+            { time: 3.4 + delay, value: py }
+          ]
+        }
+      }
+    }
+  });
+});
+
+// Scene 2 headline
+elements.push({
+  id: "scene2-headline",
+  type: "text",
+  x: width / 2,
+  y: height / 2 - 80,
+  text: "Three simple commands",
+  align: "center",
+  valign: "middle",
+  fontSize: 20,
+  fontFamily: font,
+  weight: 500,
+  fill: colors.subtext,
+  opacity: 0,
+  timeline: {
+    tracks: {
+      opacity: {
+        keyframes: [
+          { time: 3, value: 0, out: curves.easeOut },
+          { time: 3.4, value: 1 },
+          { time: 5.4, value: 1, out: curves.easeOut },
+          { time: 6, value: 0 }
+        ]
+      }
+    }
+  }
+});
+
+// === SCENE 3: UI Panel Demo (6s - 10s) ===
+
+const panelW = 600;
+const panelH = 320;
+const panelX = (width - panelW) / 2;
+const panelY = (height - panelH) / 2 + 20;
+
+// Panel background
+elements.push({
+  id: "panel-bg",
+  type: "path",
+  d: roundedRect(panelX, panelY, panelW, panelH, 12),
+  fill: colors.panelBg,
+  stroke: colors.panelBorder,
+  strokeWidth: 1,
+  opacity: 0,
+  timeline: {
+    tracks: {
+      opacity: {
+        keyframes: [
+          { time: 6, value: 0, out: curves.easeOut },
+          { time: 6.5, value: 1 },
+          { time: 9.5, value: 1, out: curves.easeOut },
+          { time: 10, value: 0 }
+        ]
+      },
+      scale: {
+        keyframes: [
+          { time: 6, value: 0.95, out: curves.easeOut },
+          { time: 6.5, value: 1 }
+        ]
+      }
+    }
+  }
+});
+
+// Panel title bar
+elements.push({
+  id: "panel-title",
+  type: "text",
+  x: panelX + 20,
+  y: panelY + 20,
+  text: "scene.visual.json",
+  align: "left",
+  valign: "top",
+  fontSize: 12,
+  fontFamily: monoFont,
+  weight: 500,
+  fill: colors.labelText,
+  opacity: 0,
+  timeline: {
+    tracks: {
+      opacity: {
+        keyframes: [
+          { time: 6.3, value: 0, out: curves.easeOut },
+          { time: 6.7, value: 1 },
+          { time: 9.5, value: 1, out: curves.easeOut },
+          { time: 10, value: 0 }
+        ]
+      }
+    }
+  }
+});
+
+// Code preview
+const codeContent = `{
+  "version": 1,
+  "canvas": { "width": 1280, "height": 720 },
+  "elements": [
+    {
+      "id": "title",
+      "type": "text",
+      "text": "Hello World",
+      "x": 640, "y": 360,
+      "fontSize": 48
+    }
+  ]
+}`;
+
+elements.push({
+  id: "panel-code",
+  type: "text",
+  x: panelX + 20,
+  y: panelY + 48,
+  text: codeContent,
+  align: "left",
+  valign: "top",
+  fontSize: 13,
+  fontFamily: monoFont,
+  weight: 400,
+  lineHeight: 1.45,
+  fill: colors.codeText,
+  opacity: 0,
+  maxWidth: panelW - 40,
+  timeline: {
+    tracks: {
+      opacity: {
+        keyframes: [
+          { time: 6.5, value: 0, out: curves.easeOut },
+          { time: 7, value: 1 },
+          { time: 9.5, value: 1, out: curves.easeOut },
+          { time: 10, value: 0 }
+        ]
+      }
+    }
+  }
+});
+
+// Scene 3 headline
+elements.push({
+  id: "scene3-headline",
+  type: "text",
+  x: width / 2,
+  y: panelY - 50,
+  text: "Define visuals in JSON",
+  align: "center",
+  valign: "middle",
+  fontSize: 28,
+  fontFamily: font,
+  weight: 700,
+  fill: colors.headline,
+  opacity: 0,
+  timeline: {
+    tracks: {
+      opacity: {
+        keyframes: [
+          { time: 6, value: 0, out: curves.easeOut },
+          { time: 6.5, value: 1 },
+          { time: 9.5, value: 1, out: curves.easeOut },
+          { time: 10, value: 0 }
+        ]
+      }
+    }
+  }
+});
+
+// === SCENE 4: CTA (10s - 12s) ===
+
+elements.push({
+  id: "cta-headline",
+  type: "text",
+  x: width / 2,
+  y: height / 2 - 60,
+  text: "Start building",
+  align: "center",
+  valign: "middle",
+  fontSize: 52,
+  fontFamily: font,
+  weight: 800,
+  fill: colors.headline,
+  opacity: 0,
+  timeline: {
+    tracks: {
+      opacity: {
+        keyframes: [
+          { time: 10, value: 0, out: curves.easeOut },
+          { time: 10.5, value: 1 }
+        ]
+      },
+      y: {
+        keyframes: [
+          { time: 10, value: height / 2 - 40, out: curves.easeOut },
+          { time: 10.5, value: height / 2 - 60 }
+        ]
+      }
+    }
+  }
+});
+
+// CTA button
+const btnW = 200;
+const btnH = 52;
+const btnX = (width - btnW) / 2;
+const btnY = height / 2 + 10;
+
+elements.push({
+  id: "cta-btn-bg",
+  type: "path",
+  d: roundedRect(btnX, btnY, btnW, btnH, 8),
+  fill: colors.btnBg,
+  stroke: "none",
+  opacity: 0,
+  timeline: {
+    tracks: {
+      opacity: {
+        keyframes: [
+          { time: 10.3, value: 0, out: curves.easeOut },
+          { time: 10.7, value: 1 }
+        ]
+      },
+      y: {
+        keyframes: [
+          { time: 10.3, value: btnY + 20, out: curves.easeOut },
+          { time: 10.7, value: btnY }
+        ]
+      }
+    }
+  }
+});
+
+elements.push({
+  id: "cta-btn-text",
+  type: "text",
+  x: width / 2,
+  y: btnY + btnH / 2,
+  text: "Get Started",
+  align: "center",
+  valign: "middle",
+  fontSize: 16,
+  fontFamily: font,
+  weight: 600,
+  fill: colors.btnText,
+  opacity: 0,
+  timeline: {
+    tracks: {
+      opacity: {
+        keyframes: [
+          { time: 10.3, value: 0, out: curves.easeOut },
+          { time: 10.7, value: 1 }
+        ]
+      },
+      y: {
+        keyframes: [
+          { time: 10.3, value: btnY + btnH / 2 + 20, out: curves.easeOut },
+          { time: 10.7, value: btnY + btnH / 2 }
+        ]
+      }
+    }
+  }
+});
+
+// Footer label
+elements.push({
+  id: "footer-label",
+  type: "text",
+  x: width / 2,
+  y: height - 40,
+  text: "sketchmark.dev",
+  align: "center",
+  valign: "middle",
+  fontSize: 14,
+  fontFamily: font,
+  weight: 500,
+  fill: colors.subtext,
+  opacity: 0,
+  timeline: {
+    tracks: {
+      opacity: {
+        keyframes: [
+          { time: 10.5, value: 0, out: curves.easeOut },
+          { time: 11, value: 0.7 }
+        ]
+      }
+    }
+  }
+});
+
+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: bg, duration, fps },
+  elements
+};
+
+const outPath = path.join(__dirname, "product-demo.visual.json");
+fs.writeFileSync(outPath, JSON.stringify(doc, null, 2));
+console.log("Written:", outPath);

package/examples/make-product-hero.cjs

@@ -0,0 +1,223 @@
+const fs = require("fs");
+const path = require("path");
+
+const width = 1120;
+const height = 880;
+const bg = "#ffffff";
+const font = "Inter, system-ui, sans-serif";
+
+const colors = {
+  headline: "#0f172a",
+  subheadline: "#475569",
+  chipBg: "#f1f5f9",
+  chipBorder: "#e2e8f0",
+  chipText: "#334155",
+  sectionTitle: "#1e293b",
+  body: "#475569",
+  bullet: "#2563eb",
+  divider: "#e2e8f0"
+};
+
+const padX = 80;
+const contentW = width - padX * 2;
+let y = 72;
+
+const elements = [];
+
+// === HERO SECTION (centered) ===
+
+// Large centered headline
+elements.push({
+  id: "hero-headline",
+  type: "text",
+  x: width / 2,
+  y: y,
+  text: "Ship faster with less friction",
+  align: "center",
+  valign: "top",
+  fontSize: 48,
+  fontFamily: font,
+  weight: 800,
+  fill: colors.headline
+});
+y += 68;
+
+// Centered subheadline
+elements.push({
+  id: "hero-subheadline",
+  type: "text",
+  x: width / 2,
+  y: y,
+  text: "A modern platform for teams who want to build, deploy, and iterate\nwithout wrestling infrastructure or waiting on bottlenecks.",
+  align: "center",
+  valign: "top",
+  fontSize: 18,
+  fontFamily: font,
+  weight: 400,
+  lineHeight: 1.55,
+  fill: colors.subheadline,
+  maxWidth: contentW
+});
+y += 72;
+
+// Feature chips (centered row, centered text in each)
+const chips = [
+  "Real-time Collaboration",
+  "One-click Deploy",
+  "Built-in Analytics"
+];
+
+const chipH = 36;
+const chipR = 18;
+const chipPadX = 20;
+const chipGap = 14;
+
+// Calculate total row width to center the group
+let totalChipW = 0;
+const chipWidths = chips.map(label => {
+  const w = label.length * 8.5 + chipPadX * 2;
+  totalChipW += w;
+  return w;
+});
+totalChipW += chipGap * (chips.length - 1);
+
+let chipX = (width - totalChipW) / 2;
+
+chips.forEach((label, i) => {
+  const cw = chipWidths[i];
+
+  elements.push({
+    id: `chip-bg-${i}`,
+    type: "path",
+    d: roundedRect(chipX, y, cw, chipH, chipR),
+    fill: colors.chipBg,
+    stroke: colors.chipBorder,
+    strokeWidth: 1
+  });
+
+  elements.push({
+    id: `chip-text-${i}`,
+    type: "text",
+    x: chipX + cw / 2,
+    y: y + chipH / 2,
+    text: label,
+    align: "center",
+    valign: "middle",
+    fontSize: 14,
+    fontFamily: font,
+    weight: 500,
+    fill: colors.chipText
+  });
+
+  chipX += cw + chipGap;
+});
+y += chipH + 56;
+
+// Divider between hero and body
+elements.push({
+  id: "hero-divider",
+  type: "path",
+  d: `M ${padX} ${y} L ${width - padX} ${y}`,
+  stroke: colors.divider,
+  strokeWidth: 1,
+  fill: "none"
+});
+y += 48;
+
+// === BODY SECTION (left-aligned) ===
+
+// Section title
+elements.push({
+  id: "section-title",
+  type: "text",
+  x: padX,
+  y: y,
+  text: "Why teams choose us",
+  align: "left",
+  valign: "top",
+  fontSize: 26,
+  fontFamily: font,
+  weight: 700,
+  fill: colors.sectionTitle
+});
+y += 44;
+
+// Body paragraph
+elements.push({
+  id: "section-para",
+  type: "text",
+  x: padX,
+  y: y,
+  text: "Most platforms promise speed but deliver complexity. We took a different approach:\nstrip away everything that doesn't directly help you ship. No configuration mazes,\nno permission matrices, no waiting for DevOps. Just write code, push, and see it live.",
+  align: "left",
+  valign: "top",
+  fontSize: 15,
+  fontFamily: font,
+  weight: 400,
+  lineHeight: 1.7,
+  fill: colors.body,
+  maxWidth: contentW
+});
+y += 100;
+
+// Bullet list
+const bullets = [
+  "Zero-config deployments with automatic scaling and rollback",
+  "Collaborative editing with live cursors and instant sync",
+  "Unified dashboard for logs, metrics, and error tracking",
+  "Native integrations with GitHub, GitLab, and Bitbucket",
+  "SOC 2 Type II certified with end-to-end encryption"
+];
+
+bullets.forEach((text, i) => {
+  const by = y + i * 36;
+
+  // Bullet dot
+  elements.push({
+    id: `bullet-dot-${i}`,
+    type: "path",
+    d: `M ${padX + 5} ${by + 9} A 4 4 0 1 1 ${padX + 5} ${by + 9.01} Z`,
+    fill: colors.bullet,
+    stroke: "none"
+  });
+
+  elements.push({
+    id: `bullet-text-${i}`,
+    type: "text",
+    x: padX + 20,
+    y: by,
+    text: text,
+    align: "left",
+    valign: "top",
+    fontSize: 15,
+    fontFamily: font,
+    weight: 400,
+    fill: colors.body,
+    maxWidth: contentW - 20
+  });
+});
+
+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: bg },
+  elements
+};
+
+const outPath = path.join(__dirname, "product-hero.visual.json");
+fs.writeFileSync(outPath, JSON.stringify(doc, null, 2));
+console.log("Written:", outPath);