create-slide-deck 0.1.0

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

@@ -0,0 +1,153 @@
+import React from "react";
+import { CANVAS, vis, useRevealStep } from "../../../core/presets.ts";
+import type { SlideComponentProps } from "../../../core/types.ts";
+
+const anime = (typeof window !== "undefined") ? (window as any).anime : null;
+
+const R = 60;
+const CIRC = 2 * Math.PI * R;
+
+const GAUGES = [
+  { key: "precision", label: "Precision", value: 94.2, suffix: "%", color: "#2563eb", baseline: "78.3%" },
+  { key: "recall", label: "Recall", value: 87.3, suffix: "%", color: "#9333ea", baseline: "71.2%" },
+  { key: "f1", label: "F1 Score", value: 90.6, suffix: "%", color: "#db2777", baseline: "74.5%" },
+  { key: "speed", label: "Speed", value: 7, suffix: "x", color: "#059669", baseline: "3x", max: 10 },
+];
+
+export default function DemoArcProgress(props: SlideComponentProps) {
+  const Reveal = props.Reveal;
+  const ref = useRevealStep(Reveal);
+  const step = ref[0], ready = ref[1], instant = ref[2];
+
+  // animated fraction (0..1) and displayed number per gauge
+  const animRef = React.useState(GAUGES.map(function () { return { frac: 0, num: 0 }; }));
+  const anims = animRef[0], setAnims = animRef[1];
+
+  const playedRef = React.useRef(false);
+
+  React.useEffect(function () {
+    if (step >= 0) {
+      if (playedRef.current) return;
+      playedRef.current = true;
+      if (!anime || !anime.animate) {
+        setAnims(GAUGES.map(function (g) {
+          const frac = g.value / (g.max || 100);
+          return { frac: frac, num: g.value };
+        }));
+        return;
+      }
+      GAUGES.forEach(function (g, i) {
+        const target = g.value / (g.max || 100);
+        const obj = { frac: 0, num: 0 };
+        anime.animate(obj, {
+          frac: target,
+          num: g.value,
+          duration: 1400,
+          ease: "outCubic",
+          update: function () {
+            setAnims(function (prev) {
+              const next = prev.slice();
+              next[i] = { frac: obj.frac, num: obj.num };
+              return next;
+            });
+          },
+        });
+      });
+    } else {
+      playedRef.current = false;
+      setAnims(GAUGES.map(function () { return { frac: 0, num: 0 }; }));
+    }
+  }, [step]);
+
+  return (
+    <div style={{
+      width: "100%", height: "100%",
+      display: "flex", flexDirection: "column",
+      alignItems: "center", justifyContent: "center",
+      fontFamily: CANVAS.fontFamily,
+      opacity: ready ? 1 : 0,
+      transition: "opacity 0.2s ease",
+    }}>
+      <div style={{ display: "flex", gap: 48, alignItems: "flex-start" }}>
+        {GAUGES.map(function (g, i) {
+          const a = anims[i] || { frac: 0, num: 0 };
+          const offset = CIRC * (1 - a.frac);
+          const isBest = g.key === "precision";
+          const displayNum = g.suffix === "x"
+            ? a.num.toFixed(1)
+            : a.num.toFixed(1);
+          return (
+            <div key={g.key} style={{
+              display: "flex", flexDirection: "column", alignItems: "center",
+            }}>
+              <div style={{ position: "relative", width: 160, height: 160 }}>
+                <svg viewBox="0 0 160 160" style={{ width: 160, height: 160 }}>
+                  {isBest && (
+                    <circle
+                      cx="80" cy="80" r={R + 12}
+                      fill="none"
+                      stroke={g.color}
+                      strokeWidth="3"
+                      style={Object.assign({
+                        transformOrigin: "80px 80px",
+                        animation: step >= 1 ? "arcPulse 1.6s ease-in-out infinite" : "none",
+                        opacity: step >= 1 ? 1 : 0,
+                        transition: instant ? "none" : "opacity 0.4s ease",
+                      })}
+                    />
+                  )}
+                  <circle
+                    cx="80" cy="80" r={R}
+                    fill="none"
+                    stroke="#e5e7eb"
+                    strokeWidth="10"
+                  />
+                  <circle
+                    cx="80" cy="80" r={R}
+                    fill="none"
+                    stroke={g.color}
+                    strokeWidth="10"
+                    strokeLinecap="round"
+                    strokeDasharray={CIRC}
+                    strokeDashoffset={offset}
+                    transform="rotate(-90 80 80)"
+                  />
+                </svg>
+                <div style={{
+                  position: "absolute", top: 0, left: 0,
+                  width: 160, height: 160,
+                  display: "flex", alignItems: "center", justifyContent: "center",
+                  fontSize: 32, fontWeight: 900, color: g.color,
+                  fontVariantNumeric: "tabular-nums",
+                }}>
+                  {displayNum}{g.suffix}
+                </div>
+              </div>
+              <div style={{ fontSize: 14, fontWeight: 700, color: "#374151", marginTop: 8 }}>
+                {g.label}
+              </div>
+              <div style={Object.assign({
+                fontSize: 14, color: "#9ca3af", marginTop: 6,
+              }, vis(step, 2, instant))}>
+                vs. {g.baseline}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      <div style={Object.assign({
+        marginTop: 18, fontSize: 14, color: "#9ca3af",
+      }, vis(step, 2, instant))}>
+        vs. best baseline: 78.3% / 71.2% / 74.5% / 3x
+      </div>
+
+      <style>{
+        "@keyframes arcPulse {" +
+        "0%,100% { opacity: 0.25; transform: scale(0.98); }" +
+        "50% { opacity: 0.8; transform: scale(1.02); }" +
+        "}"
+      }</style>
+    </div>
+  );
+}

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

@@ -0,0 +1,164 @@
+import React from "react";
+import { X, Check, ArrowRight } from "lucide-react";
+import { CANVAS, useRevealStep, vis } from "../../../core/presets.ts";
+import type { SlideComponentProps } from "../../../core/types.ts";
+
+const PAIRS = [
+  { before: "Manual log analysis", after: "Automated trace parsing" },
+  { before: "30+ min mean time to detect", after: "4.2 min detection (7x faster)" },
+  { before: "Single-metric alerting", after: "Multi-signal correlation" },
+  { before: "Expert-dependent diagnosis", after: "ML-driven root cause ranking" },
+];
+
+const RED = "#dc2626";
+const GREEN = "#16a34a";
+const ROW_TOP = 150;
+const ROW_GAP = 78;
+
+export default function DemoBeforeAfter({ Reveal }: SlideComponentProps) {
+  const ref = useRevealStep(Reveal);
+  const step = ref[0], ready = ref[1], instant = ref[2];
+
+  const trans = function (extra?: string) {
+    return instant ? "none" : (extra || "opacity 0.5s ease, transform 0.5s ease");
+  };
+
+  return (
+    <div style={{
+      position: "relative", width: "100%", height: "100%",
+      overflow: "hidden", fontFamily: CANVAS.fontFamily,
+      opacity: ready ? 1 : 0, transition: "opacity 0.2s ease",
+    }}>
+      {/* Left panel: Before (red), clipped to a 5-degree diagonal on its right edge */}
+      <div style={{
+        position: "absolute", inset: 0,
+        background: "#fef2f2",
+        clipPath: "polygon(0 0, 53% 0, 47% 100%, 0 100%)",
+        opacity: vis(step, 0, instant).opacity,
+        transition: trans("opacity 0.5s ease"),
+      }} />
+
+      {/* Right panel: After (green), slides in from the right */}
+      <div style={{
+        position: "absolute", inset: 0,
+        background: "#f0fdf4",
+        clipPath: "polygon(53% 0, 100% 0, 100% 100%, 47% 100%)",
+        opacity: step >= 1 ? 1 : 0,
+        transform: step >= 1 ? "translateX(0)" : "translateX(60px)",
+        transition: trans(),
+      }} />
+
+      {/* Diagonal divider line */}
+      <svg viewBox="0 0 1200 560" preserveAspectRatio="none" style={{
+        position: "absolute", inset: 0, width: "100%", height: "100%",
+        pointerEvents: "none",
+        opacity: step >= 1 ? 1 : 0,
+        transition: trans("opacity 0.5s ease"),
+      }}>
+        <line x1="636" y1="0" x2="564" y2="560" stroke="#94a3b8" strokeWidth="3" />
+      </svg>
+
+      {/* Left header */}
+      <div style={{
+        position: "absolute", top: 48, left: 70,
+        display: "flex", alignItems: "center", gap: 14,
+        opacity: vis(step, 0, instant).opacity,
+        transition: trans("opacity 0.5s ease"),
+      }}>
+        <div style={{
+          width: 48, height: 48, borderRadius: 12, background: RED,
+          display: "flex", alignItems: "center", justifyContent: "center",
+        }}>
+          <X size={30} color="#fff" strokeWidth={3} />
+        </div>
+        <span style={{ fontSize: 38, fontWeight: 900, color: RED, letterSpacing: 0.5 }}>Before</span>
+      </div>
+
+      {/* Right header */}
+      <div style={{
+        position: "absolute", top: 48, right: 70,
+        display: "flex", alignItems: "center", gap: 14,
+        opacity: step >= 1 ? 1 : 0,
+        transform: step >= 1 ? "translateX(0)" : "translateX(60px)",
+        transition: trans(),
+      }}>
+        <span style={{ fontSize: 38, fontWeight: 900, color: GREEN, letterSpacing: 0.5 }}>After</span>
+        <div style={{
+          width: 48, height: 48, borderRadius: 12, background: GREEN,
+          display: "flex", alignItems: "center", justifyContent: "center",
+        }}>
+          <Check size={30} color="#fff" strokeWidth={3} />
+        </div>
+      </div>
+
+      {/* Rows */}
+      {PAIRS.map(function (p, i) {
+        const y = ROW_TOP + i * ROW_GAP;
+        return (
+          <React.Fragment key={i}>
+            {/* Left item */}
+            <div style={{
+              position: "absolute", left: 70, top: y, width: 430,
+              display: "flex", alignItems: "center", gap: 14,
+              opacity: vis(step, 0, instant).opacity,
+              transition: trans("opacity 0.5s ease"),
+            }}>
+              <span style={{
+                flex: "0 0 auto", width: 12, height: 12, borderRadius: "50%", background: RED,
+              }} />
+              <span style={{ fontSize: 23, fontWeight: 700, color: "#7f1d1d", lineHeight: 1.2 }}>
+                {p.before}
+              </span>
+            </div>
+
+            {/* Connecting arrow */}
+            <div style={{
+              position: "absolute", left: 540, top: y - 4, width: 120,
+              display: "flex", alignItems: "center", justifyContent: "center",
+              opacity: step >= 2 ? 1 : 0,
+              transform: step >= 2 ? "translateX(0)" : "translateX(-20px)",
+              transition: trans(),
+            }}>
+              <ArrowRight size={34} color="#475569" strokeWidth={2.5} />
+            </div>
+
+            {/* Right item */}
+            <div style={{
+              position: "absolute", right: 70, top: y, width: 430,
+              display: "flex", alignItems: "center", justifyContent: "flex-end", gap: 14,
+              textAlign: "right",
+              opacity: step >= 1 ? 1 : 0,
+              transform: step >= 1 ? "translateX(0)" : "translateX(60px)",
+              transition: trans(),
+            }}>
+              <span style={{ fontSize: 23, fontWeight: 700, color: "#14532d", lineHeight: 1.2 }}>
+                {p.after}
+              </span>
+              <span style={{
+                flex: "0 0 auto", width: 12, height: 12, borderRadius: "50%", background: GREEN,
+              }} />
+            </div>
+          </React.Fragment>
+        );
+      })}
+
+      {/* Bottom banner */}
+      <div style={{
+        position: "absolute", left: "50%", bottom: 30,
+        transform: step >= 3
+          ? "translateX(-50%) translateY(0)"
+          : "translateX(-50%) translateY(30px)",
+        opacity: step >= 3 ? 1 : 0,
+        transition: trans(),
+        padding: "16px 44px", borderRadius: 14,
+        background: "linear-gradient(90deg, #dc2626 0%, #16a34a 100%)",
+        boxShadow: "0 8px 28px rgba(0,0,0,0.22)",
+        whiteSpace: "nowrap",
+      }}>
+        <span style={{ fontSize: 26, fontWeight: 900, color: "#fff", letterSpacing: 0.3 }}>
+          SRCA bridges this gap automatically
+        </span>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,70 @@
+import React from "react";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import { CANVAS, vis, useRevealStep } from "../../../core/presets.ts";
+
+export default function DemoBigText({ Reveal }: SlideComponentProps) {
+  const ref = useRevealStep(Reveal);
+  const step = ref[0], ready = ref[1], instant = ref[2];
+  const numRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(function () {
+    if (!ready || step < 0) return;
+    const anime = (window as any).anime;
+    const el = numRef.current;
+    if (!el) return;
+    if (instant || !anime || !anime.animate) {
+      el.style.transform = "scale(1)";
+      el.style.opacity = "1";
+      return;
+    }
+    anime.animate(el, {
+      scale: [0.9, 1],
+      opacity: [0, 1],
+      duration: 700,
+      ease: "spring(1, 80, 12, 0)",
+    });
+  }, [ready, instant]);
+
+  return (
+    <div style={{
+      width: "100%", height: "100%", boxSizing: "border-box",
+      background: "#ffffff", fontFamily: CANVAS.fontFamily,
+      display: "flex", flexDirection: "column",
+      alignItems: "center", justifyContent: "center",
+      opacity: ready ? 1 : 0, transition: "opacity 0.2s ease",
+    }}>
+      <div
+        ref={numRef}
+        style={{
+          fontSize: 120, fontWeight: 800, color: "#4361ee",
+          lineHeight: 1, letterSpacing: -2,
+        }}
+      >
+        94.2%
+      </div>
+
+      <div style={{
+        marginTop: 28, fontSize: 28, fontWeight: 300, color: "#8b8b8b",
+        letterSpacing: 0.3, textAlign: "center",
+        ...vis(step, 1, instant),
+      }}>
+        Top-1 accuracy on 3 benchmark suites
+      </div>
+
+      <div style={{
+        marginTop: 48, display: "flex", flexDirection: "column",
+        alignItems: "center", gap: 14,
+        ...vis(step, 2, instant),
+      }}>
+        <div style={{ width: 200, height: 1, background: "#d8d8d8" }} />
+        <div style={{
+          fontSize: 17, fontWeight: 400, color: "#9a9a9a",
+          display: "flex", alignItems: "baseline", gap: 12,
+        }}>
+          <span>vs. 78.3% best baseline</span>
+          <span style={{ color: "#2e9e5b", fontWeight: 700 }}>+15.9%</span>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,118 @@
+import React from "react";
+import { Zap, Shield, Layers } from "lucide-react";
+import { CANVAS, useRevealStep } from "../../../core/presets.ts";
+import type { SlideComponentProps } from "../../../core/types.ts";
+
+const CARDS = [
+  { Icon: Zap, title: "Speed", subtitle: "Fast by default", stat: "12ms", desc: "Sub-frame response times keep every interaction instant and fluid." },
+  { Icon: Shield, title: "Security", subtitle: "Locked down", stat: "0 CVE", desc: "End-to-end encryption and zero open vulnerabilities across the stack." },
+  { Icon: Layers, title: "Scale", subtitle: "Grows with you", stat: "10x", desc: "Horizontal scaling absorbs traffic spikes without a redeploy." },
+];
+
+export default function DemoCardFlip({ Reveal }: SlideComponentProps) {
+  const ref = useRevealStep(Reveal);
+  const step = ref[0], ready = ref[1], instant = ref[2];
+
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 40,
+        fontFamily: CANVAS.fontFamily,
+        opacity: ready ? 1 : 0,
+        transition: "opacity 0.2s ease",
+      }}
+    >
+      {CARDS.map(function (card, i) {
+        const flipped = step >= i;
+        const Icon = card.Icon;
+        return (
+          <div
+            key={i}
+            style={{
+              width: 280,
+              height: 350,
+              perspective: 1200,
+            }}
+          >
+            <div
+              style={{
+                position: "relative",
+                width: "100%",
+                height: "100%",
+                transformStyle: "preserve-3d",
+                transform: flipped ? "rotateY(180deg)" : "rotateY(0deg)",
+                transition: instant ? "none" : "transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)",
+              }}
+            >
+              {/* Front */}
+              <div
+                style={{
+                  position: "absolute",
+                  inset: 0,
+                  backfaceVisibility: "hidden",
+                  WebkitBackfaceVisibility: "hidden",
+                  borderRadius: 16,
+                  background: "#fff",
+                  boxShadow: "0 12px 32px rgba(49,49,49,0.16)",
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: 18,
+                }}
+              >
+                <div
+                  style={{
+                    width: 96,
+                    height: 96,
+                    borderRadius: "50%",
+                    background: "#eef1ff",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  <Icon size={52} color="#4361ee" strokeWidth={2} />
+                </div>
+                <div style={{ fontSize: 30, fontWeight: 900, color: "#1d3557" }}>{card.title}</div>
+                <div style={{ fontSize: 16, fontWeight: 600, color: "#767676" }}>{card.subtitle}</div>
+              </div>
+
+              {/* Back */}
+              <div
+                style={{
+                  position: "absolute",
+                  inset: 0,
+                  backfaceVisibility: "hidden",
+                  WebkitBackfaceVisibility: "hidden",
+                  transform: "rotateY(180deg)",
+                  borderRadius: 16,
+                  background: "linear-gradient(145deg, #4361ee, #3a0ca3)",
+                  boxShadow: "0 12px 32px rgba(58,12,163,0.32)",
+                  color: "#fff",
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  gap: 16,
+                  padding: "0 28px",
+                  boxSizing: "border-box",
+                  textAlign: "center",
+                }}
+              >
+                <div style={{ fontSize: 52, fontWeight: 900, lineHeight: 1 }}>{card.stat}</div>
+                <div style={{ fontSize: 22, fontWeight: 800 }}>{card.title}</div>
+                <div style={{ fontSize: 16, fontWeight: 500, lineHeight: 1.5, opacity: 0.92 }}>{card.desc}</div>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}