create-slide-deck 0.1.0

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

@@ -0,0 +1,169 @@
+import React from "react";
+import {
+  forceSimulation, forceLink, forceManyBody, forceCenter, forceCollide,
+} from "d3-force";
+import { CANVAS, SlideCanvas, vis } from "../../../core/presets.ts";
+import type { SlideComponentProps } from "../../../core/types.ts";
+
+const W = 1200, H = 560;
+const R = 22;
+
+// type -> color
+const TYPE_COLOR: Record<string, string> = {
+  api: "#2E6FDB",      // blue
+  data: "#3FA34D",     // green
+  compute: "#E8912D",  // orange
+  infra: "#7B61FF",    // purple
+};
+
+const RAW_NODES = [
+  { id: "API Gateway", type: "api" },
+  { id: "Auth", type: "compute" },
+  { id: "Users", type: "compute" },
+  { id: "Orders", type: "compute" },
+  { id: "Products", type: "compute" },
+  { id: "Payments", type: "compute" },
+  { id: "Inventory", type: "compute" },
+  { id: "Notifications", type: "compute" },
+  { id: "Search", type: "compute" },
+  { id: "Analytics", type: "data" },
+  { id: "Cache", type: "infra" },
+  { id: "Database", type: "data" },
+];
+
+const RAW_LINKS = [
+  ["API Gateway", "Auth"],
+  ["API Gateway", "Users"],
+  ["API Gateway", "Orders"],
+  ["API Gateway", "Products"],
+  ["API Gateway", "Search"],
+  ["Orders", "Payments"],
+  ["Orders", "Inventory"],
+  ["Orders", "Notifications"],
+  ["Users", "Cache"],
+  ["Products", "Cache"],
+  ["Auth", "Database"],
+  ["Users", "Database"],
+  ["Orders", "Database"],
+  ["Inventory", "Database"],
+  ["Analytics", "Database"],
+];
+
+// Failure cascade order (3-4 nodes turning red sequentially).
+const CASCADE = ["Database", "Orders", "Payments", "Inventory"];
+
+function computeLayout() {
+  const nodes: any[] = RAW_NODES.map(function (n) { return { id: n.id, type: n.type }; });
+  const links: any[] = RAW_LINKS.map(function (l) { return { source: l[0], target: l[1] }; });
+  const sim = forceSimulation(nodes)
+    .force("link", forceLink(links).id(function (d: any) { return d.id; }).distance(120).strength(0.4))
+    .force("charge", forceManyBody().strength(-420))
+    .force("center", forceCenter(W / 2, H / 2))
+    .force("collide", forceCollide(R + 18))
+    .stop();
+  sim.alpha(1).alphaDecay(0.02);
+  for (let i = 0; i < 300; i++) sim.tick();
+  // clamp into canvas
+  nodes.forEach(function (n) {
+    n.x = Math.max(R + 60, Math.min(W - R - 60, n.x));
+    n.y = Math.max(R + 50, Math.min(H - R - 30, n.y));
+  });
+  return { nodes: nodes, links: links };
+}
+
+export default function DemoForceGraph({ Reveal }: SlideComponentProps) {
+  const stateRef = React.useState<any>(null);
+  const graph = stateRef[0], setGraph = stateRef[1];
+
+  React.useEffect(function () {
+    setGraph(computeLayout());
+  }, []);
+
+  return (
+    <SlideCanvas Reveal={Reveal} W={W} H={H}>{function (step: number, instant: boolean) {
+      if (!graph) return null;
+      const nodes = graph.nodes;
+      const links = graph.links;
+      const byId: Record<string, any> = {};
+      nodes.forEach(function (n: any) { byId[n.id] = n; });
+
+      // cascade index reached at this step: step 2 -> show cascade reds
+      const cascadeActive = step >= 2;
+      const cascadeSet: Record<string, boolean> = {};
+      if (cascadeActive) {
+        CASCADE.forEach(function (id) { cascadeSet[id] = true; });
+      }
+
+      function nodeFill(n: any) {
+        if (cascadeSet[n.id]) return "#C00000";
+        return TYPE_COLOR[n.type];
+      }
+
+      return (
+        <g style={{ fontFamily: CANVAS.fontFamily }}>
+          <defs>
+            <marker id="dfg-arrow" viewBox="0 0 10 10" refX="9" refY="5"
+              markerWidth="6" markerHeight="6" orient="auto-start-reverse">
+              <path d="M0,0 L10,5 L0,10 z" fill="#BFBFBF" />
+            </marker>
+          </defs>
+
+          {/* Step 1: links */}
+          <g style={vis(step, 1, instant)}>
+            {links.map(function (l: any, i: number) {
+              const s = byId[l.source.id || l.source];
+              const t = byId[l.target.id || l.target];
+              if (!s || !t) return null;
+              const red = cascadeSet[s.id] && cascadeSet[t.id];
+              // trim line to circle edges
+              const dx = t.x - s.x, dy = t.y - s.y;
+              const len = Math.sqrt(dx * dx + dy * dy) || 1;
+              const ux = dx / len, uy = dy / len;
+              const x1 = s.x + ux * R, y1 = s.y + uy * R;
+              const x2 = t.x - ux * (R + 6), y2 = t.y - uy * (R + 6);
+              return (
+                <line key={"l" + i}
+                  x1={x1} y1={y1} x2={x2} y2={y2}
+                  stroke={red ? "#C00000" : "#BFBFBF"}
+                  strokeWidth={red ? 3 : 1.6}
+                  markerEnd="url(#dfg-arrow)"
+                  style={{ transition: instant ? "none" : "stroke 0.4s ease, stroke-width 0.4s ease" }}
+                />
+              );
+            })}
+          </g>
+
+          {/* Step 3: ripple blast radius around cascade nodes */}
+          <g style={vis(step, 3, instant)}>
+            {CASCADE.map(function (id, i) {
+              const n = byId[id];
+              if (!n) return null;
+              return (
+                <circle key={"rip" + i} cx={n.x} cy={n.y} r={R + 18 + i * 4}
+                  fill="none" stroke="#C00000" strokeWidth="2" strokeOpacity="0.35"
+                  strokeDasharray="6 5" />
+              );
+            })}
+          </g>
+
+          {/* Step 0: nodes */}
+          <g style={vis(step, 0, instant)}>
+            {nodes.map(function (n: any, i: number) {
+              return (
+                <g key={"n" + i} transform={"translate(" + n.x + "," + n.y + ")"}>
+                  <circle r={R} fill={nodeFill(n)}
+                    stroke="#fff" strokeWidth="2.5"
+                    style={{ transition: instant ? "none" : "fill 0.4s ease" }} />
+                  <text y={R + 16} textAnchor="middle"
+                    fontSize="14" fontWeight="700" fill="#313131">
+                    {n.id}
+                  </text>
+                </g>
+              );
+            })}
+          </g>
+        </g>
+      );
+    }}</SlideCanvas>
+  );
+}

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

@@ -0,0 +1,109 @@
+import React from "react";
+import { CANVAS, useRevealStep } from "../../../core/presets.ts";
+import type { SlideComponentProps } from "../../../core/types.ts";
+
+const DATA = [
+  { name: "SRCA", value: 94.2 },
+  { name: "MicroRCA", value: 87.1 },
+  { name: "RCAeval", value: 82.5 },
+  { name: "CloudRCA", value: 78.3 },
+  { name: "DiagFusion", value: 71.6 },
+  { name: "TraceAnomaly", value: 65.2 },
+  { name: "Sage", value: 58.4 },
+];
+
+// Deep blue (top) -> lighter blue (bottom)
+function barColor(i: number, n: number) {
+  const top = [30, 58, 95];     // #1e3a5f
+  const bot = [72, 149, 239];   // #4895ef
+  const t = n <= 1 ? 0 : i / (n - 1);
+  const c = top.map(function (v, k) { return Math.round(v + (bot[k] - v) * t); });
+  return "rgb(" + c[0] + "," + c[1] + "," + c[2] + ")";
+}
+
+export default function DemoFullbleedBars({ Reveal }: SlideComponentProps) {
+  const ref = useRevealStep(Reveal);
+  const step = ref[0], ready = ref[1], instant = ref[2];
+  const barsRef = React.useRef<(HTMLDivElement | null)[]>([]);
+
+  const maxValue = Math.max.apply(null, DATA.map(function (d) { return d.value; }));
+
+  React.useEffect(function () {
+    if (!ready || step < 0) return;
+    const anime = (window as any).anime;
+    barsRef.current.forEach(function (el, i) {
+      if (!el) return;
+      const target = (DATA[i].value / maxValue) * 100;
+      if (instant || !anime || !anime.animate) {
+        el.style.width = target + "%";
+        return;
+      }
+      anime.animate(el, {
+        width: ["0%", target + "%"],
+        duration: 900,
+        delay: i * 80,
+        ease: "outCubic",
+      });
+    });
+  }, [ready, instant]);
+
+  const n = DATA.length;
+
+  return (
+    <div style={{
+      width: "100%", height: "100%", boxSizing: "border-box",
+      background: "#f8f9fa", display: "flex", flexDirection: "column",
+      justifyContent: "center", gap: 4, padding: 0,
+      fontFamily: CANVAS.fontFamily,
+      opacity: ready ? 1 : 0, transition: "opacity 0.2s ease",
+    }}>
+      {DATA.map(function (d, i) {
+        const isTop = i === 0;
+        const dimmed = step >= 2 && i >= n - 3;
+        const highlighted = step >= 1 && isTop;
+        const rowOpacity = dimmed ? 0.3 : 1;
+        return (
+          <div key={d.name} style={{
+            position: "relative", flex: "1 1 0", minHeight: 0,
+            display: "flex", alignItems: "center",
+            opacity: rowOpacity,
+            transition: instant ? "none" : "opacity 0.45s ease",
+          }}>
+            <div
+              ref={function (el) { barsRef.current[i] = el; }}
+              style={{
+                position: "relative", height: "100%", width: "0%",
+                background: barColor(i, n),
+                display: "flex", alignItems: "center",
+                justifyContent: "space-between",
+                padding: "0 24px", boxSizing: "border-box",
+                borderRadius: "0 6px 6px 0",
+                boxShadow: highlighted
+                  ? "0 0 0 3px #ffd60a, 0 0 24px rgba(255,214,10,0.55)"
+                  : "none",
+                transition: instant ? "none" : "box-shadow 0.4s ease",
+              }}
+            >
+              <span style={{
+                color: "#fff", fontSize: 18, fontWeight: 700,
+                whiteSpace: "nowrap", letterSpacing: 0.2,
+              }}>{d.name}</span>
+              <span style={{
+                color: "#fff", fontSize: 18, fontWeight: 600,
+                whiteSpace: "nowrap", opacity: 0.95,
+              }}>{d.value.toFixed(1)}%</span>
+              {highlighted && (
+                <span style={{
+                  position: "absolute", right: -84, top: "50%",
+                  transform: "translateY(-50%)",
+                  color: "#b8860b", fontSize: 16, fontWeight: 800,
+                  letterSpacing: 1, textTransform: "uppercase",
+                }}>Best</span>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

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

@@ -0,0 +1,177 @@
+import React from "react";
+import { CANVAS, useRevealStep } from "../../../core/presets.ts";
+import type { SlideComponentProps } from "../../../core/types.ts";
+
+const W = 1200;
+const H = 560;
+const N = 5;
+const STAGE_W = W / N; // 240px each — flows edge to edge
+const CHEVRON = 34;    // how far the arrow point juts into the next stage
+
+const STAGES = [
+  { name: "Collect", sub: "Traces + Logs", color: "#1e3a5f" },
+  { name: "Parse", sub: "Dependency Graph", color: "#2563eb" },
+  { name: "Correlate", sub: "Causal Analysis", color: "#7c3aed" },
+  { name: "Rank", sub: "Fault Scoring", color: "#db2777" },
+  { name: "Report", sub: "Top-K Results", color: "#059669" },
+];
+
+// Which step reveals each stage: [Collect,Parse]=0, [Correlate]=1, [Rank,Report]=2
+const STAGE_STEP = [0, 0, 1, 2, 2];
+
+// A chevron-shaped band for stage i: left edge is notched in, right edge juts out.
+function chevronPath(i: number) {
+  const x0 = i * STAGE_W;
+  const x1 = x0 + STAGE_W;
+  const isFirst = i === 0;
+  const isLast = i === N - 1;
+  const leftNotch = isFirst ? x0 : x0 + CHEVRON;
+  const rightTip = isLast ? x1 : x1 + CHEVRON;
+  const mid = H / 2;
+  // Start top-left, across the top to the right tip, down to bottom, back, and the left notch indent.
+  return [
+    "M", x0, 0,
+    "L", x1, 0,
+    "L", rightTip, mid,
+    "L", x1, H,
+    "L", x0, H,
+    "L", leftNotch, mid,
+    "Z",
+  ].join(" ");
+}
+
+// Simple per-stage glyph drawn from primitive SVG shapes, centered at (cx, cy).
+function StageIcon(props: { cx: number; cy: number; kind: string }) {
+  const cx = props.cx, cy = props.cy, kind = props.kind;
+  const s = "#ffffff";
+  if (kind === "Collect") {
+    // stacked layers / inbox
+    return (
+      <g stroke={s} strokeWidth="3" fill="none" strokeLinejoin="round">
+        <path d={`M ${cx - 26} ${cy - 14} L ${cx} ${cy - 26} L ${cx + 26} ${cy - 14} L ${cx} ${cy - 2} Z`} />
+        <path d={`M ${cx - 26} ${cy + 4} L ${cx} ${cy + 16} L ${cx + 26} ${cy + 4}`} />
+        <path d={`M ${cx - 26} ${cy + 18} L ${cx} ${cy + 30} L ${cx + 26} ${cy + 18}`} />
+      </g>
+    );
+  }
+  if (kind === "Parse") {
+    // dependency graph: nodes + edges
+    return (
+      <g stroke={s} strokeWidth="3" fill={s}>
+        <line x1={cx - 22} y1={cy - 18} x2={cx + 18} y2={cy - 4} />
+        <line x1={cx - 22} y1={cy - 18} x2={cx - 6} y2={cy + 22} />
+        <line x1={cx + 18} y1={cy - 4} x2={cx - 6} y2={cy + 22} />
+        <circle cx={cx - 22} cy={cy - 18} r="7" />
+        <circle cx={cx + 18} cy={cy - 4} r="7" />
+        <circle cx={cx - 6} cy={cy + 22} r="7" />
+      </g>
+    );
+  }
+  if (kind === "Correlate") {
+    // overlapping rings
+    return (
+      <g stroke={s} strokeWidth="3" fill="none">
+        <circle cx={cx - 12} cy={cy} r="20" />
+        <circle cx={cx + 12} cy={cy} r="20" />
+      </g>
+    );
+  }
+  if (kind === "Rank") {
+    // ranked bars
+    return (
+      <g fill={s}>
+        <rect x={cx - 26} y={cy + 2} width="14" height="26" rx="2" />
+        <rect x={cx - 7} y={cy - 12} width="14" height="40" rx="2" />
+        <rect x={cx + 12} y={cy - 26} width="14" height="54" rx="2" />
+      </g>
+    );
+  }
+  // Report: document with lines + checkmark
+  return (
+    <g stroke={s} strokeWidth="3" fill="none" strokeLinecap="round">
+      <rect x={cx - 18} y={cy - 26} width="36" height="48" rx="3" />
+      <line x1={cx - 9} y1={cy - 12} x2={cx + 9} y2={cy - 12} />
+      <line x1={cx - 9} y1={cy - 2} x2={cx + 9} y2={cy - 2} />
+      <path d={`M ${cx - 8} ${cy + 12} L ${cx - 1} ${cy + 19} L ${cx + 12} ${cy + 4}`} />
+    </g>
+  );
+}
+
+export default function DemoFullbleedFlow({ Reveal }: SlideComponentProps) {
+  const ref = useRevealStep(Reveal);
+  const step = ref[0], ready = ref[1], instant = ref[2];
+
+  const dotsRef = React.useRef<(SVGCircleElement | null)[]>([]);
+  const DOT_COUNT = 6;
+
+  // Step 3: animate dots traveling left -> right along the flow.
+  React.useEffect(function () {
+    if (step < 3) {
+      dotsRef.current.forEach(function (d) { if (d) d.style.opacity = String(0); });
+      return;
+    }
+    const anime = (window as any).anime;
+    const startX = 0, endX = W;
+    if (!anime || !anime.animate || instant) {
+      dotsRef.current.forEach(function (d) { if (d) { d.style.opacity = String(1); } });
+      return;
+    }
+    dotsRef.current.forEach(function (d) {
+      if (d) { d.style.opacity = String(1); d.setAttribute("transform", "translate(0,0)"); }
+    });
+    anime.animate(dotsRef.current.filter(Boolean), {
+      translateX: [startX - 30, endX + 30],
+      duration: 2600,
+      loop: true,
+      ease: "linear",
+      delay: anime.stagger(2600 / DOT_COUNT),
+    });
+  }, [step >= 3, instant]);
+
+  const midY = H / 2;
+
+  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",
+    }}>
+      {STAGES.map(function (st, i) {
+        const revealed = step >= STAGE_STEP[i];
+        const cx = i * STAGE_W + STAGE_W / 2 + (i === N - 1 ? 0 : CHEVRON / 2);
+        return (
+          <g key={i} style={{
+            opacity: revealed ? 1 : 0,
+            transition: instant ? "none" : "opacity 0.5s ease",
+          }}>
+            <path d={chevronPath(i)} fill={st.color} />
+            <StageIcon cx={cx} cy={midY - 30} kind={st.name} />
+            <text x={cx} y={midY + 38} textAnchor="middle" style={{
+              fontSize: 30, fontWeight: 900, fill: "#fff",
+            }}>{st.name}</text>
+            <text x={cx} y={midY + 66} textAnchor="middle" style={{
+              fontSize: 16, fontWeight: 600, fill: "rgba(255,255,255,0.78)",
+            }}>{st.sub}</text>
+          </g>
+        );
+      })}
+
+      {/* Step 3: data-flow dots traveling across the whole flow. */}
+      <g>
+        {Array.from({ length: DOT_COUNT }).map(function (_, i) {
+          return (
+            <circle
+              key={i}
+              ref={function (el) { dotsRef.current[i] = el; }}
+              cx={0}
+              cy={midY + 92}
+              r={7}
+              fill="#ffffff"
+              style={{ opacity: 0, filter: "drop-shadow(0 0 6px rgba(255,255,255,0.9))" }}
+            />
+          );
+        })}
+      </g>
+    </svg>
+  );
+}

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

@@ -0,0 +1,135 @@
+import React from "react";
+import { scaleLinear } from "d3-scale";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import { CANVAS, SlideCanvas, vis } from "../../../core/presets.ts";
+
+const W = 1200, H = 560;
+const ROWS = 8;   // Mon-Sun + Avg
+const COLS = 12;  // 00:00..22:00 in 2h steps
+
+const GRID = { x: 150, y: 90, gap: 4 };
+const CELL = 70;
+
+const ROW_LABELS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Avg"];
+const COL_LABELS: string[] = [];
+for (let c = 0; c < COLS; c++) COL_LABELS.push((c * 2 < 10 ? "0" : "") + (c * 2) + ":00");
+
+// deterministic pseudo-random value in [0,100]
+function valueAt(r: number, c: number) {
+  const v = Math.sin(r * 1.7 + 0.5) * Math.cos(c * 0.9 + 1.3) + Math.sin((r + c) * 0.6);
+  const n = (v + 2) / 4; // ~[0,1]
+  const bump = Math.exp(-Math.pow((c - 6.5) / 4, 2)) * 0.4; // daytime activity bump
+  return Math.max(0, Math.min(1, n * 0.7 + bump)) * 100;
+}
+
+const colorScale = scaleLinear<string>()
+  .domain([0, 50, 100])
+  .range(["#ffffb2", "#fd8d3c", "#bd0026"]);
+
+const NEUTRAL = "#ECECEC";
+
+function cellX(c: number) { return GRID.x + c * (CELL + GRID.gap); }
+function cellY(r: number) { return GRID.y + r * (CELL + GRID.gap); }
+
+// Inner component so the animation hook lives at component top level.
+function HeatGrid(props: { step: number; instant: boolean }) {
+  const step = props.step, instant = props.instant;
+  const cellsRef = React.useRef<(SVGRectElement | null)[]>([]);
+
+  React.useEffect(function () {
+    const targets = cellsRef.current.filter(Boolean) as SVGRectElement[];
+    if (!targets.length) return;
+    const anime = typeof window !== "undefined" ? (window as any).anime : null;
+
+    if (step < 1) {
+      targets.forEach(function (el) { el.setAttribute("fill", NEUTRAL); });
+      return;
+    }
+    if (!anime || instant) {
+      targets.forEach(function (el) {
+        el.setAttribute("fill", el.getAttribute("data-color") || NEUTRAL);
+      });
+      return;
+    }
+    targets.forEach(function (el) { el.setAttribute("fill", NEUTRAL); });
+    anime.animate(targets, {
+      fill: function (el: SVGRectElement) { return el.getAttribute("data-color"); },
+      delay: function (el: SVGRectElement) {
+        const r = +(el.getAttribute("data-r") || 0);
+        const c = +(el.getAttribute("data-c") || 0);
+        return (r + c) * 45;
+      },
+      duration: 400,
+      ease: "outQuad",
+    });
+  }, [step, instant]);
+
+  const legendX = GRID.x, legendY = cellY(ROWS) + 28, legendW = 360, legendH = 16;
+
+  return (
+    <g style={{ fontFamily: CANVAS.fontFamily }}>
+      <defs>
+        <linearGradient id="hm-legend" x1="0" x2="1" y1="0" y2="0">
+          <stop offset="0%" stopColor="#ffffb2" />
+          <stop offset="50%" stopColor="#fd8d3c" />
+          <stop offset="100%" stopColor="#bd0026" />
+        </linearGradient>
+      </defs>
+
+      {/* Step 0: grid (neutral). Cells colored via anime at step 1. */}
+      <g style={vis(step, 0, instant)}>
+        {ROW_LABELS.map(function (_, r) {
+          return COL_LABELS.map(function (__, c) {
+            const color = colorScale(valueAt(r, c));
+            const i = r * COLS + c;
+            return (
+              <rect key={"cell" + i}
+                ref={function (el) { cellsRef.current[i] = el; }}
+                x={cellX(c)} y={cellY(r)} width={CELL} height={CELL}
+                rx="6" ry="6"
+                data-color={color} data-r={r} data-c={c}
+                fill={NEUTRAL} />
+            );
+          });
+        })}
+      </g>
+
+      {/* Step 2: labels + legend */}
+      <g style={vis(step, 2, instant)}>
+        {ROW_LABELS.map(function (lab, r) {
+          return (
+            <text key={"rl" + r} x={GRID.x - 14} y={cellY(r) + CELL / 2}
+              dy="0.35em" textAnchor="end" fontSize="15" fontWeight="700"
+              fill="#313131">{lab}</text>
+          );
+        })}
+        {COL_LABELS.map(function (lab, c) {
+          return (
+            <text key={"cl" + c} x={cellX(c) + CELL / 2} y={GRID.y - 12}
+              textAnchor="middle" fontSize="14" fontWeight="700"
+              fill="#5a5a5a">{lab}</text>
+          );
+        })}
+
+        {/* color scale legend */}
+        <rect x={legendX} y={legendY} width={legendW} height={legendH}
+          rx="4" fill="url(#hm-legend)" stroke="#ccc" strokeWidth="0.5" />
+        <text x={legendX} y={legendY + legendH + 16} fontSize="14" fill="#5a5a5a">Low</text>
+        <text x={legendX + legendW} y={legendY + legendH + 16} textAnchor="end"
+          fontSize="14" fill="#5a5a5a">High</text>
+        <text x={legendX + legendW / 2} y={legendY + legendH + 16}
+          textAnchor="middle" fontSize="14" fontWeight="700" fill="#313131">
+          Activity
+        </text>
+      </g>
+    </g>
+  );
+}
+
+export default function DemoHeatmap({ Reveal }: SlideComponentProps) {
+  return (
+    <SlideCanvas Reveal={Reveal} W={W} H={H}>{function (step, instant) {
+      return <HeatGrid step={step} instant={instant} />;
+    }}</SlideCanvas>
+  );
+}