create-slide-deck 0.1.0

package/template-full/src/reveal/decks/demo-showcase/components/demo-concept-map.tsx

@@ -0,0 +1,336 @@
+import React from "react";
+import { CANVAS, useRevealStep } from "../../../core/presets.ts";
+import type { SlideComponentProps } from "../../../core/types.ts";
+
+const W = 1200, H = 560;
+const CX = 600, CY = 280;
+
+// Branch palettes.
+const BLUE = { main: "#4361ee", leafFill: "#e7ecff", leafText: "#1d2a6b" };
+const PURPLE = { main: "#7c3aed", leafFill: "#f0e7ff", leafText: "#3d1d6b" };
+const GREEN = { main: "#059669", leafFill: "#dcf5ec", leafText: "#0b4f3a" };
+
+// Manually laid-out organic positions.
+const BRANCHES = [
+  {
+    key: "data",
+    palette: BLUE,
+    head: { label: "Data Collection", x: 260, y: 130 },
+    leaves: [
+      { label: "Traces", x: 80, y: 70 },
+      { label: "Logs", x: 90, y: 200 },
+      { label: "Metrics", x: 250, y: 40 },
+    ],
+  },
+  {
+    key: "causal",
+    palette: PURPLE,
+    head: { label: "Causal Inference", x: 940, y: 130 },
+    leaves: [
+      { label: "Graph Model", x: 1120, y: 70 },
+      { label: "Correlation", x: 1110, y: 210 },
+    ],
+  },
+  {
+    key: "fault",
+    palette: GREEN,
+    head: { label: "Fault Localization", x: 600, y: 480 },
+    leaves: [
+      { label: "Ranking", x: 380, y: 520 },
+      { label: "Validation", x: 600, y: 540 },
+      { label: "Reporting", x: 820, y: 520 },
+    ],
+  },
+];
+
+// Quadratic bezier path from parent to child with a gentle bow.
+function curvePath(x1: number, y1: number, x2: number, y2: number) {
+  const mx = (x1 + x2) / 2;
+  const my = (y1 + y2) / 2;
+  // Bow perpendicular to the line for an organic curve.
+  const dx = x2 - x1, dy = y2 - y1;
+  const len = Math.sqrt(dx * dx + dy * dy) || 1;
+  const nx = -dy / len, ny = dx / len;
+  const bow = 28;
+  const qx = mx + nx * bow, qy = my + ny * bow;
+  return "M " + x1 + " " + y1 + " Q " + qx + " " + qy + " " + x2 + " " + y2;
+}
+
+export default function DemoConceptMap({ Reveal }: SlideComponentProps) {
+  const rs = useRevealStep(Reveal);
+  const step = rs[0], ready = rs[1], instant = rs[2];
+
+  const centralRef = React.useRef<SVGGElement>(null);
+  const glowRef = React.useRef<SVGCircleElement>(null);
+  // Per-branch ref guards so each branch animates once.
+  const playedRef = React.useRef<Record<string, boolean>>({ central: false, data: false, causal: false, fault: false, pulse: false });
+
+  // Collect refs by branch key.
+  const pathRefs = React.useRef<Record<string, (SVGPathElement | null)[]>>({});
+  const nodeRefs = React.useRef<Record<string, (SVGGElement | null)[]>>({});
+
+  function registerPath(key: string, i: number, el: SVGPathElement | null) {
+    if (!pathRefs.current[key]) pathRefs.current[key] = [];
+    pathRefs.current[key][i] = el;
+  }
+  function registerNode(key: string, i: number, el: SVGGElement | null) {
+    if (!nodeRefs.current[key]) nodeRefs.current[key] = [];
+    nodeRefs.current[key][i] = el;
+  }
+
+  function showCentral(animate: boolean) {
+    const node = centralRef.current;
+    if (!node) return;
+    const anime = (window as any).anime;
+    node.style.opacity = String(1);
+    if (!animate || !anime || !anime.animate) {
+      node.style.transform = "scale(1)";
+      return;
+    }
+    anime.animate(node, {
+      scale: [0, 1],
+      duration: 700,
+      ease: "spring(1, 80, 10, 0)",
+    });
+  }
+
+  function hideCentral() {
+    const node = centralRef.current;
+    if (!node) return;
+    node.style.opacity = String(0);
+    node.style.transform = "scale(0)";
+  }
+
+  function showBranch(key: string, animate: boolean) {
+    const anime = (window as any).anime;
+    const paths = (pathRefs.current[key] || []).filter(Boolean) as SVGPathElement[];
+    const nodes = (nodeRefs.current[key] || []).filter(Boolean) as SVGGElement[];
+
+    paths.forEach(function (p) {
+      const len = p.getTotalLength ? p.getTotalLength() : 0;
+      p.style.strokeDasharray = String(len);
+      if (!animate || !anime || !anime.animate) {
+        p.style.strokeDashoffset = String(0);
+        p.style.opacity = String(1);
+        return;
+      }
+      p.style.opacity = String(1);
+      anime.animate(p, {
+        strokeDashoffset: [len, 0],
+        duration: 800,
+        ease: "inOutQuad",
+      });
+    });
+
+    nodes.forEach(function (n, i) {
+      n.style.opacity = String(1);
+      if (!animate || !anime || !anime.animate) {
+        n.style.transform = "scale(1)";
+        return;
+      }
+      anime.animate(n, {
+        scale: [0, 1],
+        duration: 600,
+        delay: 300 + i * 120,
+        ease: "spring(1, 80, 11, 0)",
+      });
+    });
+  }
+
+  function hideBranch(key: string) {
+    const paths = (pathRefs.current[key] || []).filter(Boolean) as SVGPathElement[];
+    const nodes = (nodeRefs.current[key] || []).filter(Boolean) as SVGGElement[];
+    paths.forEach(function (p) {
+      const len = p.getTotalLength ? p.getTotalLength() : 0;
+      p.style.strokeDasharray = String(len);
+      p.style.strokeDashoffset = String(len);
+      p.style.opacity = String(0);
+    });
+    nodes.forEach(function (n) {
+      n.style.opacity = String(0);
+      n.style.transform = "scale(0)";
+    });
+  }
+
+  function pulseAll() {
+    const anime = (window as any).anime;
+    if (!anime || !anime.animate) return;
+    const allPaths: SVGPathElement[] = [];
+    ["data", "causal", "fault"].forEach(function (k) {
+      (pathRefs.current[k] || []).filter(Boolean).forEach(function (p) { allPaths.push(p as SVGPathElement); });
+    });
+    if (allPaths.length) {
+      anime.animate(allPaths, {
+        opacity: [1, 0.4, 1],
+        duration: 1200,
+        ease: "inOutSine",
+      });
+    }
+    if (glowRef.current) {
+      anime.animate(glowRef.current, {
+        opacity: [0, 0.55, 0.3],
+        scale: [1, 1.25, 1.15],
+        duration: 1400,
+        ease: "inOutSine",
+      });
+    }
+  }
+
+  React.useEffect(function () {
+    const id = requestAnimationFrame(function () {
+      const played = playedRef.current;
+
+      // Central node (step 0).
+      if (step >= 0) {
+        if (instant) { showCentral(false); played.central = true; }
+        else if (!played.central) { played.central = true; showCentral(true); }
+      } else {
+        hideCentral();
+        played.central = false;
+      }
+
+      // Branches map to steps 1, 2, 3.
+      const order = [
+        { key: "data", req: 1 },
+        { key: "causal", req: 2 },
+        { key: "fault", req: 3 },
+      ];
+      order.forEach(function (b) {
+        if (step >= b.req) {
+          if (instant) { showBranch(b.key, false); played[b.key] = true; }
+          else if (!played[b.key]) { played[b.key] = true; showBranch(b.key, true); }
+        } else {
+          hideBranch(b.key);
+          played[b.key] = false;
+        }
+      });
+
+      // Step 4: pulse + glow.
+      if (step >= 4 && !instant) {
+        if (!played.pulse) { played.pulse = true; pulseAll(); }
+      } else if (step < 4) {
+        played.pulse = false;
+        if (glowRef.current) glowRef.current.style.opacity = String(0);
+      } else if (instant && glowRef.current) {
+        glowRef.current.style.opacity = String(0.3);
+      }
+    });
+    return function () { cancelAnimationFrame(id); };
+  }, [step, instant]);
+
+  return (
+    <svg
+      viewBox={"0 0 " + W + " " + H}
+      style={{ width: "100%", height: "100%", display: "block", fontFamily: CANVAS.fontFamily, opacity: ready ? 1 : 0, transition: "opacity 0.2s ease" }}
+    >
+      <defs>
+        <filter id="conceptGlow" x="-80%" y="-80%" width="260%" height="260%">
+          <feGaussianBlur stdDeviation="12" result="b" />
+          <feMerge>
+            <feMergeNode in="b" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+      </defs>
+
+      {/* Connections (drawn under nodes) */}
+      {BRANCHES.map(function (br) {
+        return (
+          <g key={"paths-" + br.key}>
+            {/* central -> head */}
+            <path
+              ref={function (el) { registerPath(br.key, 0, el); }}
+              d={curvePath(CX, CY, br.head.x, br.head.y)}
+              fill="none"
+              stroke={br.palette.main}
+              strokeWidth={4}
+              strokeLinecap="round"
+              style={{ opacity: 0 }}
+            />
+            {/* head -> leaves */}
+            {br.leaves.map(function (lf, i) {
+              return (
+                <path
+                  key={i}
+                  ref={function (el) { registerPath(br.key, i + 1, el); }}
+                  d={curvePath(br.head.x, br.head.y, lf.x, lf.y)}
+                  fill="none"
+                  stroke={br.palette.main}
+                  strokeWidth={3}
+                  strokeLinecap="round"
+                  style={{ opacity: 0 }}
+                />
+              );
+            })}
+          </g>
+        );
+      })}
+
+      {/* Branch nodes */}
+      {BRANCHES.map(function (br) {
+        return (
+          <g key={"nodes-" + br.key}>
+            {/* head node */}
+            <g
+              ref={function (el) { registerNode(br.key, 0, el); }}
+              style={{ opacity: 0, transform: "scale(0)", transformOrigin: br.head.x + "px " + br.head.y + "px", transformBox: "fill-box" }}
+            >
+              <circle cx={br.head.x} cy={br.head.y} r={30} fill="#fff" stroke={br.palette.main} strokeWidth={4} />
+              {twoLineLabel(br.head.label).map(function (line, li, arr) {
+                const dy = (li - (arr.length - 1) / 2) * 15;
+                return (
+                  <text key={li} x={br.head.x} y={br.head.y + dy} textAnchor="middle" dominantBaseline="central" fontSize={14} fontWeight={800} fill={br.palette.main}>
+                    {line}
+                  </text>
+                );
+              })}
+            </g>
+            {/* leaf nodes */}
+            {br.leaves.map(function (lf, i) {
+              return (
+                <g
+                  key={i}
+                  ref={function (el) { registerNode(br.key, i + 1, el); }}
+                  style={{ opacity: 0, transform: "scale(0)", transformOrigin: lf.x + "px " + lf.y + "px", transformBox: "fill-box" }}
+                >
+                  <circle cx={lf.x} cy={lf.y} r={22} fill={br.palette.leafFill} stroke={br.palette.main} strokeWidth={2} />
+                  <text x={lf.x} y={lf.y} textAnchor="middle" dominantBaseline="central" fontSize={14} fontWeight={700} fill={br.palette.leafText}>
+                    {lf.label}
+                  </text>
+                </g>
+              );
+            })}
+          </g>
+        );
+      })}
+
+      {/* Central node glow (behind central) */}
+      <circle
+        ref={glowRef}
+        cx={CX}
+        cy={CY}
+        r={45}
+        fill="#4361ee"
+        filter="url(#conceptGlow)"
+        style={{ opacity: 0, transformOrigin: CX + "px " + CY + "px", transformBox: "fill-box" }}
+      />
+
+      {/* Central node */}
+      <g
+        ref={centralRef}
+        style={{ opacity: 0, transform: "scale(0)", transformOrigin: CX + "px " + CY + "px", transformBox: "fill-box" }}
+      >
+        <circle cx={CX} cy={CY} r={45} fill="#4361ee" />
+        <text x={CX} y={CY - 8} textAnchor="middle" dominantBaseline="central" fontSize={15} fontWeight={900} fill="#fff">Root Cause</text>
+        <text x={CX} y={CY + 12} textAnchor="middle" dominantBaseline="central" fontSize={15} fontWeight={900} fill="#fff">Analysis</text>
+      </g>
+    </svg>
+  );
+}
+
+// Split a head label into at most two lines on whitespace for circle fit.
+function twoLineLabel(label: string) {
+  const parts = label.split(" ");
+  if (parts.length < 2) return [label];
+  return [parts[0], parts.slice(1).join(" ")];
+}

package/template-full/src/reveal/decks/demo-showcase/components/demo-counter.tsx

@@ -0,0 +1,194 @@
+import React from "react";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import { CANVAS, useRevealStep } from "../../../core/presets.ts";
+
+const CARDS = [
+  { label: "Users", target: 1247, suffix: "", decimals: 0, color: "#4361ee", spark: [4, 8, 6, 12, 9, 16, 14, 22] },
+  { label: "Uptime", target: 99.9, suffix: "%", decimals: 1, color: "#3a0ca3", spark: [18, 17, 19, 18, 20, 19, 21, 22] },
+  { label: "Latency", target: 42, suffix: "ms", decimals: 0, color: "#f72585", spark: [20, 16, 18, 12, 14, 9, 11, 7] },
+  { label: "Requests", target: 3.2, suffix: "M", decimals: 1, color: "#4cc9f0", spark: [5, 9, 7, 13, 11, 17, 15, 21] },
+];
+
+function formatVal(v: number, decimals: number) {
+  const fixed = v.toFixed(decimals);
+  // Add thousands separators for integer-style counts.
+  const parts = fixed.split(".");
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+  return parts.join(".");
+}
+
+function sparkPath(points: number[], w: number, h: number) {
+  const max = Math.max.apply(null, points);
+  const min = Math.min.apply(null, points);
+  const range = max - min || 1;
+  const step = w / (points.length - 1);
+  return points.map(function (p, i) {
+    const x = i * step;
+    const y = h - ((p - min) / range) * h;
+    return (i === 0 ? "M" : "L") + x.toFixed(1) + "," + y.toFixed(1);
+  }).join(" ");
+}
+
+export default function DemoCounter({ Reveal }: SlideComponentProps) {
+  const ref = useRevealStep(Reveal);
+  const step = ref[0], ready = ref[1], instant = ref[2];
+
+  const valuesState = React.useState(CARDS.map(function () { return 0; }));
+  const values = valuesState[0], setValues = valuesState[1];
+
+  const barRefs = React.useRef<(HTMLDivElement | null)[]>([]);
+  const sparkRefs = React.useRef<(SVGPathElement | null)[]>([]);
+
+  // Step 1: count numbers from 0 to target.
+  React.useEffect(function () {
+    const anime = (window as any).anime;
+    const visible = step >= 1;
+    if (!visible) {
+      setValues(CARDS.map(function () { return 0; }));
+      return;
+    }
+    if (!anime || instant) {
+      setValues(CARDS.map(function (c) { return c.target; }));
+      return;
+    }
+    const counters = CARDS.map(function () { return { v: 0 }; });
+    const anims = counters.map(function (counter, i) {
+      return anime.animate(counter, {
+        v: CARDS[i].target,
+        duration: 1600,
+        easing: "outCubic",
+        onUpdate: function () {
+          setValues(function (prev) {
+            const next = prev.slice();
+            next[i] = counter.v;
+            return next;
+          });
+        },
+      });
+    });
+    return function () { anims.forEach(function (a) { a.pause && a.pause(); }); };
+  }, [step, instant]);
+
+  // Step 2: progress bars fill.
+  React.useEffect(function () {
+    const anime = (window as any).anime;
+    const visible = step >= 2;
+    const fills = barRefs.current.filter(Boolean) as HTMLDivElement[];
+    if (!fills.length) return;
+    if (!visible) {
+      fills.forEach(function (el) { el.style.width = "0%"; });
+      return;
+    }
+    const targets = [78, 99, 58, 84];
+    if (!anime || instant) {
+      fills.forEach(function (el, i) { el.style.width = targets[i] + "%"; });
+      return;
+    }
+    anime.animate(fills, {
+      width: function (el: any, i: number) { return [0 + "%", targets[i] + "%"]; },
+      duration: 1100,
+      easing: "inOutQuad",
+      delay: anime.stagger(120),
+    });
+  }, [step, instant]);
+
+  // Step 3: sparklines draw via strokeDashoffset.
+  React.useEffect(function () {
+    const anime = (window as any).anime;
+    const visible = step >= 3;
+    const paths = sparkRefs.current.filter(Boolean) as SVGPathElement[];
+    if (!paths.length) return;
+    paths.forEach(function (el) {
+      const len = el.getTotalLength();
+      el.style.strokeDasharray = String(len);
+      el.style.strokeDashoffset = String(visible && (!anime || instant) ? 0 : len);
+    });
+    if (!visible || !anime || instant) return;
+    anime.animate(paths, {
+      strokeDashoffset: [function (el: SVGPathElement) { return el.getTotalLength(); }, 0],
+      duration: 1200,
+      easing: "outCubic",
+      delay: anime.stagger(150),
+    });
+  }, [step, instant]);
+
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        gap: 28,
+        padding: "20px 40px",
+        boxSizing: "border-box",
+        fontFamily: CANVAS.fontFamily,
+        opacity: ready ? 1 : 0,
+        transition: "opacity 0.2s ease",
+      }}
+    >
+      <div style={{ display: "flex", gap: 24, justifyContent: "center" }}>
+        {CARDS.map(function (card, i) {
+          return (
+            <div
+              key={i}
+              style={{
+                flex: "1 1 0",
+                maxWidth: 250,
+                background: "#fff",
+                borderRadius: 14,
+                borderTop: "5px solid " + card.color,
+                boxShadow: "0 8px 24px rgba(49,49,49,0.12)",
+                padding: "24px 22px",
+                boxSizing: "border-box",
+                opacity: step >= 0 ? 1 : 0,
+                transform: step >= 0 ? "translateY(0)" : "translateY(20px)",
+                transition: instant ? "none" : "opacity 0.45s ease " + (i * 60) + "ms, transform 0.45s ease " + (i * 60) + "ms",
+              }}
+            >
+              <div style={{ fontSize: 40, fontWeight: 900, color: card.color, lineHeight: 1 }}>
+                {formatVal(values[i], card.decimals) + card.suffix}
+              </div>
+              <div style={{ fontSize: 16, fontWeight: 700, color: "#767676", marginTop: 8 }}>
+                {card.label}
+              </div>
+
+              <div
+                style={{
+                  marginTop: 16,
+                  height: 8,
+                  borderRadius: 4,
+                  background: "#eee",
+                  overflow: "hidden",
+                }}
+              >
+                <div
+                  ref={function (el) { barRefs.current[i] = el; }}
+                  style={{ height: "100%", width: "0%", background: card.color, borderRadius: 4 }}
+                />
+              </div>
+
+              <svg
+                viewBox="0 0 200 50"
+                preserveAspectRatio="none"
+                style={{ width: "100%", height: 42, marginTop: 14, display: "block" }}
+              >
+                <path
+                  ref={function (el) { sparkRefs.current[i] = el; }}
+                  d={sparkPath(card.spark, 200, 44)}
+                  fill="none"
+                  stroke={card.color}
+                  strokeWidth={3}
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  transform="translate(0,3)"
+                />
+              </svg>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}