create-slide-deck 0.1.0

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

@@ -0,0 +1,159 @@
+import React from "react";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import { CANVAS, useRevealStep } from "../../../core/presets.ts";
+
+const CARDS = [
+  { letter: "O", title: "Observation", color: "#4361ee", desc: "Gather signals from traces, logs, and metrics across the system." },
+  { letter: "H", title: "Hypothesis", color: "#7c3aed", desc: "Propose a candidate root cause that explains the anomaly." },
+  { letter: "E", title: "Experiment", color: "#f72585", desc: "Probe the suspect path with targeted tests and replays." },
+  { letter: "A", title: "Analysis", color: "#4cc9f0", desc: "Compare results against expected behavior to confirm or reject." },
+  { letter: "C", title: "Conclusion", color: "#059669", desc: "Pinpoint the fault and report the verified root cause." },
+];
+
+// Fan-out target layout: spread across ~900px, slight upward arc.
+const FAN = [
+  { x: -380, y: 24, rot: -8 },
+  { x: -190, y: 6, rot: -4 },
+  { x: 0, y: 0, rot: 0 },
+  { x: 190, y: 6, rot: 4 },
+  { x: 380, y: 24, rot: 8 },
+];
+
+// Initial stacked layout: piled in center with slight offsets.
+function stackPose(i: number) {
+  return { x: 0, y: i * 3, rot: (i - 2) * 2 };
+}
+
+export default function DemoStackedCards({ Reveal }: SlideComponentProps) {
+  const rs = useRevealStep(Reveal);
+  const step = rs[0], ready = rs[1], instant = rs[2];
+
+  const cardRefs = React.useRef<(HTMLDivElement | null)[]>([]);
+  // Track which cards have already fanned out so each animation plays once.
+  const fannedRef = React.useRef([false, false, false, false, false]);
+
+  function applyPose(node: HTMLDivElement | null, pose: { x: number; y: number; rot: number }, animate: boolean) {
+    if (!node) return;
+    const anime = (window as any).anime;
+    const transform =
+      "translate(-50%, -50%) translateX(" + pose.x + "px) translateY(" + pose.y + "px) rotate(" + pose.rot + "deg)";
+    if (!animate || !anime || !anime.animate) {
+      node.style.transform = transform;
+      return;
+    }
+    anime.animate(node, {
+      translateX: pose.x + "px",
+      translateY: pose.y + "px",
+      rotate: pose.rot + "deg",
+      duration: 900,
+      ease: "spring(1, 80, 12, 0)",
+    });
+  }
+
+  React.useEffect(function () {
+    const id = requestAnimationFrame(function () {
+      CARDS.forEach(function (_, i) {
+        const node = cardRefs.current[i];
+        if (!node) return;
+        const fannedOut = step >= i;
+
+        if (instant) {
+          // Reset path: snap to correct pose, no animation.
+          applyPose(node, fannedOut ? FAN[i] : stackPose(i), false);
+          fannedRef.current[i] = fannedOut;
+          return;
+        }
+
+        if (fannedOut && !fannedRef.current[i]) {
+          fannedRef.current[i] = true;
+          applyPose(node, FAN[i], true);
+        } else if (!fannedOut && fannedRef.current[i]) {
+          fannedRef.current[i] = false;
+          applyPose(node, stackPose(i), true);
+        }
+      });
+    });
+    return function () { cancelAnimationFrame(id); };
+  }, [step, instant]);
+
+  return (
+    <div
+      style={{
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        fontFamily: CANVAS.fontFamily,
+        opacity: ready ? 1 : 0,
+        transition: "opacity 0.2s ease",
+      }}
+    >
+      {CARDS.map(function (card, i: number) {
+        const init = stackPose(i);
+        return (
+          <div
+            key={i}
+            ref={function (el) { cardRefs.current[i] = el; }}
+            style={{
+              position: "absolute",
+              left: "50%",
+              top: "50%",
+              width: 200,
+              height: 280,
+              marginLeft: 0,
+              marginTop: 0,
+              transform:
+                "translate(-50%, -50%) translateX(" + init.x + "px) translateY(" + init.y + "px) rotate(" + init.rot + "deg)",
+              transformOrigin: "center center",
+              background: "#fff",
+              borderRadius: 16,
+              boxShadow: "0 8px 32px rgba(0,0,0,0.12)",
+              overflow: "hidden",
+              zIndex: i,
+              boxSizing: "border-box",
+            }}
+          >
+            {/* Colored top band */}
+            <div style={{ height: 40, background: card.color }} />
+
+            <div
+              style={{
+                padding: 18,
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "flex-start",
+                gap: 14,
+                boxSizing: "border-box",
+              }}
+            >
+              {/* Icon: colored circle with letter */}
+              <div
+                style={{
+                  width: 60,
+                  height: 60,
+                  borderRadius: "50%",
+                  background: card.color,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  color: "#fff",
+                  fontSize: 28,
+                  fontWeight: 900,
+                }}
+              >
+                {card.letter}
+              </div>
+
+              <div style={{ fontSize: 20, fontWeight: 800, color: "#1d1d1d" }}>
+                {card.title}
+              </div>
+
+              <div style={{ fontSize: 14, color: "#767676", lineHeight: 1.45 }}>
+                {card.desc}
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,206 @@
+import React from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import { CANVAS, useRevealStep } from "../../../core/presets.ts";
+
+const TABS = ["Overview", "Architecture", "Performance", "Security"];
+const ACTIVE = "#4361ee";
+
+function OverviewPanel() {
+  const items = [
+    "A unified platform for building and shipping fast.",
+    "Modular components that compose without friction.",
+    "Observability and metrics baked in from day one.",
+    "Designed for teams that move quickly.",
+  ];
+  return (
+    <ul style={{ margin: 0, paddingLeft: 24, display: "flex", flexDirection: "column", gap: 16 }}>
+      {items.map(function (t, i: number) {
+        return <li key={i} style={{ fontSize: 20, color: "#333", lineHeight: 1.5 }}>{t}</li>;
+      })}
+    </ul>
+  );
+}
+
+function ArchitecturePanel() {
+  const nodes = ["Client", "Gateway", "Services", "Data"];
+  return (
+    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 18, height: "100%" }}>
+      {nodes.map(function (n, i: number) {
+        return (
+          <React.Fragment key={n}>
+            <div
+              style={{
+                padding: "22px 28px",
+                borderRadius: 12,
+                background: "#eef1ff",
+                border: "2px solid " + ACTIVE,
+                fontSize: 20,
+                fontWeight: 800,
+                color: "#1d3557",
+              }}
+            >
+              {n}
+            </div>
+            {i < nodes.length - 1 ? (
+              <div style={{ fontSize: 28, color: ACTIVE, fontWeight: 900 }}>→</div>
+            ) : null}
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+}
+
+function PerformancePanel() {
+  const bars = [
+    { label: "p50", value: 92, color: "#4cc9f0" },
+    { label: "p90", value: 74, color: "#4361ee" },
+    { label: "p99", value: 58, color: "#7209b7" },
+    { label: "max", value: 40, color: "#f72585" },
+  ];
+  return (
+    <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "center", gap: 40, height: "100%", paddingBottom: 10 }}>
+      {bars.map(function (b) {
+        return (
+          <div key={b.label} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 10 }}>
+            <motion.div
+              initial={{ height: 0 }}
+              animate={{ height: b.value * 2.4 }}
+              transition={{ duration: 0.6, ease: "easeOut" }}
+              style={{ width: 56, background: b.color, borderRadius: "6px 6px 0 0" }}
+            />
+            <div style={{ fontSize: 16, fontWeight: 700, color: "#767676" }}>{b.label}</div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function SecurityPanel() {
+  const checks = [
+    "TLS 1.3 enforced on all endpoints",
+    "Secrets rotated automatically every 24h",
+    "Role-based access control on every resource",
+    "Audit log streamed to immutable storage",
+  ];
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 18, justifyContent: "center", height: "100%" }}>
+      {checks.map(function (c, i: number) {
+        return (
+          <div key={i} style={{ display: "flex", alignItems: "center", gap: 14 }}>
+            <div
+              style={{
+                width: 30,
+                height: 30,
+                borderRadius: "50%",
+                background: "#2a9d8f",
+                color: "#fff",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontWeight: 900,
+                fontSize: 18,
+                flex: "0 0 auto",
+              }}
+            >
+              ✓
+            </div>
+            <div style={{ fontSize: 20, color: "#333" }}>{c}</div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+const PANELS = [OverviewPanel, ArchitecturePanel, PerformancePanel, SecurityPanel];
+
+export default function DemoTabs({ Reveal }: SlideComponentProps) {
+  const ref = useRevealStep(Reveal);
+  const step = ref[0], ready = ref[1], instant = ref[2];
+
+  // Step drives the active tab (clamped to range).
+  const active = Math.max(0, Math.min(step, TABS.length - 1));
+  const Panel = PANELS[active];
+
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 24,
+        fontFamily: CANVAS.fontFamily,
+        opacity: ready ? 1 : 0,
+        transition: "opacity 0.2s ease",
+      }}
+    >
+      <div style={{ display: "flex", gap: 8, width: 1100 }}>
+        {TABS.map(function (tab, i: number) {
+          const isActive = i === active;
+          return (
+            <div
+              key={tab}
+              style={{
+                position: "relative",
+                padding: "14px 26px",
+                fontSize: 20,
+                fontWeight: isActive ? 800 : 600,
+                color: isActive ? ACTIVE : "#888",
+                cursor: "default",
+              }}
+            >
+              {tab}
+              {isActive ? (
+                <motion.div
+                  layoutId="tab-underline"
+                  transition={instant ? { duration: 0 } : { type: "spring", stiffness: 500, damping: 32 }}
+                  style={{
+                    position: "absolute",
+                    left: 12,
+                    right: 12,
+                    bottom: 0,
+                    height: 4,
+                    borderRadius: 2,
+                    background: ACTIVE,
+                  }}
+                />
+              ) : null}
+            </div>
+          );
+        })}
+      </div>
+
+      <div
+        style={{
+          width: 1100,
+          height: 400,
+          background: "#fff",
+          borderRadius: 16,
+          boxShadow: "0 12px 36px rgba(49,49,49,0.14)",
+          padding: 40,
+          boxSizing: "border-box",
+          overflow: "hidden",
+        }}
+      >
+        <AnimatePresence mode="wait" initial={false}>
+          <motion.div
+            key={active}
+            initial={instant ? false : { opacity: 0, x: 24 }}
+            animate={{ opacity: 1, x: 0 }}
+            exit={instant ? { opacity: 0 } : { opacity: 0, x: -24 }}
+            transition={instant ? { duration: 0 } : { duration: 0.3, ease: "easeOut" }}
+            style={{ width: "100%", height: "100%" }}
+          >
+            <Panel />
+          </motion.div>
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,162 @@
+import React from "react";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import { CANVAS, SlideCanvas, useRevealStep } from "../../../core/presets.ts";
+
+const W = 1200, H = 560;
+
+const EVENTS = [
+  { label: "Design", desc: "Shape the idea", color: "#4361ee" },
+  { label: "Prototype", desc: "Build fast", color: "#3a0ca3" },
+  { label: "Develop", desc: "Ship features", color: "#7209b7" },
+  { label: "Test", desc: "Verify quality", color: "#f72585" },
+  { label: "Deploy", desc: "Go live", color: "#4cc9f0" },
+  { label: "Monitor", desc: "Watch metrics", color: "#4895ef" },
+];
+
+const LINE_Y = H / 2;
+const MARGIN_X = 120;
+const SPAN = W - MARGIN_X * 2;
+
+function nodeX(i: number) {
+  return MARGIN_X + (SPAN / (EVENTS.length - 1)) * i;
+}
+
+export default function DemoTimeline({ Reveal }: SlideComponentProps) {
+  // We need raw step access to drive imperative anime calls.
+  const ref = useRevealStep(Reveal);
+  const step = ref[0], instant = ref[2];
+
+  const lineRef = React.useRef<SVGLineElement>(null);
+  const lineDrawnRef = React.useRef(false);
+  const nodeRefs = React.useRef<(SVGGElement | null)[]>([]);
+
+  // Step 0: draw the connecting line (once only).
+  React.useEffect(function () {
+    const anime = (window as any).anime;
+    const el = lineRef.current;
+    if (!el) return;
+    const len = (el as any).getTotalLength();
+    el.style.strokeDasharray = String(len);
+    if (step < 0) {
+      lineDrawnRef.current = false;
+      el.style.strokeDashoffset = String(len);
+      return;
+    }
+    if (lineDrawnRef.current) return;
+    lineDrawnRef.current = true;
+    if (!anime || instant) {
+      el.style.strokeDashoffset = String(0);
+      return;
+    }
+    anime.animate(el, {
+      strokeDashoffset: [len, 0],
+      duration: 1100,
+      easing: "inOutQuad",
+    });
+  }, [step, instant]);
+
+  // Steps 1..6: light up nodes sequentially.
+  React.useEffect(function () {
+    const anime = (window as any).anime;
+    nodeRefs.current.forEach(function (g, i: number) {
+      if (!g) return;
+      const active = step >= i + 1;
+      if (!anime || instant) {
+        g.style.opacity = active ? "1" : "0";
+        g.style.transform = "none";
+        return;
+      }
+      if (active && g.dataset.shown !== "1") {
+        g.dataset.shown = "1";
+        anime.animate(g, {
+          opacity: [0, 1],
+          scale: [0.4, 1],
+          easing: "spring(1, 90, 12, 0)",
+          duration: 900,
+        });
+      } else if (!active) {
+        g.dataset.shown = "0";
+        g.style.opacity = "0";
+      }
+    });
+  }, [step, instant]);
+
+  return (
+    <SlideCanvas Reveal={Reveal} W={W} H={H}>{function (s: number, inst: boolean) { return (
+      <>
+        <line
+          ref={lineRef}
+          x1={nodeX(0)}
+          y1={LINE_Y}
+          x2={nodeX(EVENTS.length - 1)}
+          y2={LINE_Y}
+          stroke="#c9c9e8"
+          strokeWidth={4}
+          strokeLinecap="round"
+        />
+
+        {EVENTS.map(function (ev, i: number) {
+          const cx = nodeX(i);
+          return (
+            <g
+              key={i}
+              ref={function (el) { nodeRefs.current[i] = el; }}
+              style={{ opacity: 0, transformOrigin: cx + "px " + LINE_Y + "px" }}
+            >
+              <circle cx={cx} cy={LINE_Y} r={20} fill={ev.color} />
+              <circle cx={cx} cy={LINE_Y} r={20} fill="none" stroke="#fff" strokeWidth={3} />
+              <text
+                x={cx}
+                y={LINE_Y + 6}
+                textAnchor="middle"
+                fontSize={18}
+                fontWeight={900}
+                fill="#fff"
+                fontFamily={CANVAS.fontFamily}
+              >
+                {i + 1}
+              </text>
+
+              <text
+                x={cx}
+                y={LINE_Y - 44}
+                textAnchor="middle"
+                fontSize={20}
+                fontWeight={900}
+                fill="#313131"
+                fontFamily={CANVAS.fontFamily}
+              >
+                {ev.label}
+              </text>
+
+              <g transform={"translate(" + cx + "," + (LINE_Y + 46) + ")"}>
+                <rect
+                  x={-58}
+                  y={0}
+                  width={116}
+                  height={30}
+                  rx={15}
+                  fill={ev.color}
+                  fillOpacity={0.12}
+                  stroke={ev.color}
+                  strokeWidth={1.5}
+                />
+                <text
+                  x={0}
+                  y={20}
+                  textAnchor="middle"
+                  fontSize={14}
+                  fontWeight={700}
+                  fill={ev.color}
+                  fontFamily={CANVAS.fontFamily}
+                >
+                  {ev.desc}
+                </text>
+              </g>
+            </g>
+          );
+        })}
+      </>
+    ); }}</SlideCanvas>
+  );
+}

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

@@ -0,0 +1,161 @@
+import React from "react";
+import { treemap, hierarchy, treemapSquarify } from "d3-hierarchy";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import { CANVAS, useRevealStep, vis } from "../../../core/presets.ts";
+
+const W = 1200;
+const H = 560;
+const PAD_TOP = 8;
+
+const CATEGORY_COLOR: Record<string, string> = {
+  Compute: "#4361ee",
+  Storage: "#f72585",
+  Network: "#4cc9f0",
+  Database: "#3a0ca3",
+};
+
+const DATA: any = {
+  name: "Cloud Costs",
+  children: [
+    { name: "Compute", children: [
+      { name: "EC2", value: 45 },
+      { name: "Lambda", value: 20 },
+      { name: "ECS", value: 15 },
+    ] },
+    { name: "Storage", children: [
+      { name: "S3", value: 25 },
+      { name: "EBS", value: 18 },
+      { name: "Glacier", value: 5 },
+    ] },
+    { name: "Network", children: [
+      { name: "CloudFront", value: 22 },
+      { name: "VPC", value: 12 },
+      { name: "Route53", value: 3 },
+    ] },
+    { name: "Database", children: [
+      { name: "RDS", value: 35 },
+      { name: "DynamoDB", value: 28 },
+      { name: "ElastiCache", value: 10 },
+    ] },
+  ],
+};
+
+function buildLayout() {
+  const root = hierarchy(DATA).sum(function (d: any) { return d.value || 0; })
+    .sort(function (a: any, b: any) { return b.value - a.value; });
+  treemap()
+    .tile(treemapSquarify)
+    .size([W, H - PAD_TOP])
+    .paddingOuter(6)
+    .paddingTop(22)
+    .paddingInner(3)
+    .round(true)(root);
+  return root;
+}
+
+export default function DemoTreemap({ Reveal }: SlideComponentProps) {
+  const ref = useRevealStep(Reveal);
+  const step = ref[0], ready = ref[1], instant = ref[2];
+
+  const rootData = React.useMemo(buildLayout, []);
+  const leaves = rootData.leaves();
+  const groups = rootData.children || [];
+
+  // Top-3 leaves by value for the highlight step.
+  const topNames = React.useMemo(function () {
+    return leaves.slice().sort(function (a: any, b: any) { return b.value - a.value; })
+      .slice(0, 3).map(function (d: any) { return d.data.name; });
+  }, [leaves]);
+
+  const rectRefs = React.useRef<(SVGRectElement | null)[]>([]);
+
+  // Step 0: stagger zoom-in of all rects.
+  React.useEffect(function () {
+    const rects = rectRefs.current.filter(Boolean) as SVGRectElement[];
+    if (!rects.length) return;
+    const anime = (window as any).anime;
+    if (step < 0) {
+      rects.forEach(function (el) { el.style.opacity = "0"; el.style.transform = "scale(0)"; });
+      return;
+    }
+    if (!anime || instant) {
+      rects.forEach(function (el) { el.style.opacity = "1"; el.style.transform = "scale(1)"; });
+      return;
+    }
+    rects.forEach(function (el) { el.style.opacity = "0"; el.style.transform = "scale(0)"; });
+    anime.animate(rects, {
+      opacity: [0, 1],
+      scale: [0, 1],
+      duration: 520,
+      easing: "outBack",
+      delay: anime.stagger(45),
+    });
+  }, [step >= 0, instant]);
+
+  return (
+    <svg viewBox={"0 0 " + W + " " + H}
+      style={{ width: "100%", height: "100%", display: "block",
+               opacity: ready ? 1 : 0, transition: "opacity 0.2s ease" }}>
+      <g>
+          {/* Category background headers */}
+          {groups.map(function (g: any, gi: number) {
+            const cat = g.data.name;
+            const w = g.x1 - g.x0, h = g.y1 - g.y0;
+            return (
+              <g key={"grp" + gi} style={vis(step, 0, instant)} transform={"translate(" + g.x0 + "," + (g.y0 + PAD_TOP) + ")"}>
+                <rect x={0} y={0} width={w} height={h} rx={6}
+                  fill={CATEGORY_COLOR[cat]} opacity={0.10} />
+                <text x={8} y={15} fontFamily={CANVAS.fontFamily}
+                  fontSize={14} fontWeight={800} fill={CATEGORY_COLOR[cat]}>
+                  {cat}
+                </text>
+              </g>
+            );
+          })}
+
+          {/* Leaf cells */}
+          {leaves.map(function (leaf: any, i: number) {
+            const cat = leaf.parent.data.name;
+            const base = CATEGORY_COLOR[cat];
+            const isTop = topNames.indexOf(leaf.data.name) !== -1;
+            const fill = base;
+            let fillOpacity;
+            if (step >= 2) {
+              fillOpacity = isTop ? 1 : 0.4;
+            } else {
+              fillOpacity = 0.85;
+            }
+            const w = leaf.x1 - leaf.x0, h = leaf.y1 - leaf.y0;
+            const cx = w / 2, cy = h / 2;
+            const labelFits = w > 56 && h > 34;
+            return (
+              <g key={"leaf" + i}
+                transform={"translate(" + leaf.x0 + "," + (leaf.y0 + PAD_TOP) + ")"}>
+                <rect
+                  ref={function (el) { rectRefs.current[i] = el; }}
+                  x={0} y={0} width={w} height={h} rx={4}
+                  fill={fill} fillOpacity={fillOpacity}
+                  style={{
+                    transformOrigin: (cx) + "px " + (cy) + "px",
+                    transition: instant ? "none" : "fill-opacity 0.45s ease",
+                  }}
+                />
+                <g style={vis(step, 1, instant)} pointerEvents="none">
+                  {labelFits ? (
+                    <>
+                      <text x={cx} y={cy - 4} textAnchor="middle"
+                        fontFamily={CANVAS.fontFamily} fontSize={15} fontWeight={800}
+                        fill="#ffffff">{leaf.data.name}</text>
+                      <text x={cx} y={cy + 15} textAnchor="middle"
+                        fontFamily={CANVAS.fontFamily} fontSize={13} fontWeight={700}
+                        fill="#ffffff" opacity={0.92}>{"$" + leaf.data.value}</text>
+                    </>
+                  ) : null}
+                </g>
+              </g>
+            );
+          })}
+      </g>
+    </svg>
+  );
+}