create-slide-deck 0.1.0

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

@@ -0,0 +1,143 @@
+import React from "react";
+import {
+  Server, Database, Shield, Zap, Globe, Cloud, Lock, Cpu,
+  HardDrive, Wifi, Monitor, Smartphone, Code, Terminal, GitBranch, Layers,
+} from "lucide-react";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import { CANVAS, useRevealStep } from "../../../core/presets.ts";
+
+const PALETTE = ["#4361ee", "#3a0ca3", "#7209b7", "#f72585", "#4cc9f0"];
+
+const ICONS = [
+  { Icon: Server, label: "Server" },
+  { Icon: Database, label: "Database" },
+  { Icon: Shield, label: "Shield" },
+  { Icon: Zap, label: "Compute" },
+  { Icon: Globe, label: "Network" },
+  { Icon: Cloud, label: "Cloud" },
+  { Icon: Lock, label: "Security" },
+  { Icon: Cpu, label: "CPU" },
+  { Icon: HardDrive, label: "Storage" },
+  { Icon: Wifi, label: "Wireless" },
+  { Icon: Monitor, label: "Desktop" },
+  { Icon: Smartphone, label: "Mobile" },
+  { Icon: Code, label: "Code" },
+  { Icon: Terminal, label: "Shell" },
+  { Icon: GitBranch, label: "Branch" },
+  { Icon: Layers, label: "Layers" },
+];
+
+export default function DemoIconWall({ Reveal }: SlideComponentProps) {
+  const ref = useRevealStep(Reveal);
+  const step = ref[0], ready = ref[1], instant = ref[2];
+
+  const gridRef = React.useRef<HTMLDivElement>(null);
+  const cellRefs = React.useRef<(HTMLDivElement | null)[]>([]);
+
+  // Step 0: stagger wave-in across the 4x4 grid.
+  React.useEffect(function () {
+    const cells = cellRefs.current.filter(Boolean) as HTMLDivElement[];
+    if (!cells.length) return;
+    const anime = (window as any).anime;
+    if (step < 0) {
+      cells.forEach(function (el) { el.style.opacity = "0"; el.style.transform = "scale(0)"; });
+      return;
+    }
+    if (!anime || instant) {
+      cells.forEach(function (el) { el.style.opacity = "1"; el.style.transform = "scale(1)"; });
+      return;
+    }
+    cells.forEach(function (el) { el.style.opacity = "0"; el.style.transform = "scale(0)"; });
+    anime.animate(cells, {
+      opacity: [0, 1],
+      scale: [0, 1],
+      duration: 520,
+      easing: "outBack",
+      delay: anime.stagger(80, { grid: [4, 4], from: "first" }),
+    });
+  }, [step >= 0, instant]);
+
+  // Step 2: one icon pulses to demo interaction.
+  React.useEffect(function () {
+    const anime = (window as any).anime;
+    const target = cellRefs.current[5];
+    if (!target) return;
+    if (step < 2 || !anime || instant) {
+      target.style.transform = "scale(1)";
+      return;
+    }
+    const loop = anime.animate(target, {
+      scale: [1, 1.12, 1],
+      duration: 900,
+      easing: "inOutQuad",
+      loop: true,
+    });
+    return function () { loop && loop.pause && loop.pause(); };
+  }, [step >= 2, instant]);
+
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontFamily: CANVAS.fontFamily,
+        opacity: ready ? 1 : 0,
+        transition: "opacity 0.2s ease",
+      }}
+    >
+      <div
+        ref={gridRef}
+        style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(4, 140px)",
+          gridTemplateRows: "repeat(4, 130px)",
+          gap: 16,
+        }}
+      >
+        {ICONS.map(function (item, i) {
+          const color = PALETTE[i % PALETTE.length];
+          const colored = step >= 1;
+          const Icon = item.Icon;
+          return (
+            <div
+              key={i}
+              ref={function (el) { cellRefs.current[i] = el; }}
+              style={{
+                width: 140,
+                height: 130,
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                gap: 10,
+                borderRadius: 8,
+                background: colored ? "#fff" : "#f7f7f9",
+                boxShadow: colored ? "0 6px 18px rgba(49,49,49,0.12)" : "0 2px 6px rgba(49,49,49,0.06)",
+                transition: instant ? "none" : "background 0.4s ease, box-shadow 0.4s ease",
+              }}
+            >
+              <div
+                style={{
+                  width: 64,
+                  height: 64,
+                  borderRadius: "50%",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  background: colored ? color : "transparent",
+                  transition: instant ? "none" : "background 0.4s ease",
+                }}
+              >
+                <Icon size={40} color={colored ? "#fff" : "#767676"} strokeWidth={2} />
+              </div>
+              <div style={{ fontSize: 14, fontWeight: 600, color: "#767676" }}>{item.label}</div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,103 @@
+import React from "react";
+import katex from "katex";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import { CANVAS, useRevealStep } from "../../../core/presets.ts";
+
+const KATEX_CSS = `@font-face{font-display:block;font-family:KaTeX_AMS;font-style:normal;font-weight:400;src:url(/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.woff2) format("woff2"),url(/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.woff) format("woff"),url(/node_modules/katex/dist/fonts/KaTeX_AMS-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:700;src:url(/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.woff2) format("woff2"),url(/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.woff) format("woff"),url(/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Bold.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Caligraphic;font-style:normal;font-weight:400;src:url(/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.woff2) format("woff2"),url(/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.woff) format("woff"),url(/node_modules/katex/dist/fonts/KaTeX_Caligraphic-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:700;src:url(/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.woff2) format("woff2"),url(/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.woff) format("woff"),url(/node_modules/katex/dist/fonts/KaTeX_Fraktur-Bold.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Fraktur;font-style:normal;font-weight:400;src:url(/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.woff2) format("woff2"),url(/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.woff) format("woff"),url(/node_modules/katex/dist/fonts/KaTeX_Fraktur-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:700;src:url(/node_modules/katex/dist/fonts/KaTeX_Main-Bold.woff2) format("woff2"),url(/node_modules/katex/dist/fonts/KaTeX_Main-Bold.woff) format("woff"),url(/node_modules/katex/dist/fonts/KaTeX_Main-Bold.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:700;src:url(/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.woff2) format("woff2"),url(/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.woff) format("woff"),url(/node_modules/katex/dist/fonts/KaTeX_Main-BoldItalic.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:italic;font-weight:400;src:url(/node_modules/katex/dist/fonts/KaTeX_Main-Italic.woff2) format("woff2"),url(/node_modules/katex/dist/fonts/KaTeX_Main-Italic.woff) format("woff"),url(/node_modules/katex/dist/fonts/KaTeX_Main-Italic.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Main;font-style:normal;font-weight:400;src:url(/node_modules/katex/dist/fonts/KaTeX_Main-Regular.woff2) format("woff2"),url(/node_modules/katex/dist/fonts/KaTeX_Main-Regular.woff) format("woff"),url(/node_modules/katex/dist/fonts/KaTeX_Main-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:700;src:url(/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.woff2) format("woff2"),url(/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.woff) format("woff"),url(/node_modules/katex/dist/fonts/KaTeX_Math-BoldItalic.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Math;font-style:italic;font-weight:400;src:url(/node_modules/katex/dist/fonts/KaTeX_Math-Italic.woff2) format("woff2"),url(/node_modules/katex/dist/fonts/KaTeX_Math-Italic.woff) format("woff"),url(/node_modules/katex/dist/fonts/KaTeX_Math-Italic.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:700;src:url(/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.woff2) format("woff2"),url(/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.woff) format("woff"),url(/node_modules/katex/dist/fonts/KaTeX_SansSerif-Bold.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:italic;font-weight:400;src:url(/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.woff2) format("woff2"),url(/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.woff) format("woff"),url(/node_modules/katex/dist/fonts/KaTeX_SansSerif-Italic.ttf) format("truetype")}@font-face{font-display:block;font-family:"KaTeX_SansSerif";font-style:normal;font-weight:400;src:url(/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.woff2) format("woff2"),url(/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.woff) format("woff"),url(/node_modules/katex/dist/fonts/KaTeX_SansSerif-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Script;font-style:normal;font-weight:400;src:url(/node_modules/katex/dist/fonts/KaTeX_Script-Regular.woff2) format("woff2"),url(/node_modules/katex/dist/fonts/KaTeX_Script-Regular.woff) format("woff"),url(/node_modules/katex/dist/fonts/KaTeX_Script-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size1;font-style:normal;font-weight:400;src:url(/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.woff2) format("woff2"),url(/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.woff) format("woff"),url(/node_modules/katex/dist/fonts/KaTeX_Size1-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size2;font-style:normal;font-weight:400;src:url(/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.woff2) format("woff2"),url(/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.woff) format("woff"),url(/node_modules/katex/dist/fonts/KaTeX_Size2-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size3;font-style:normal;font-weight:400;src:url(/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.woff2) format("woff2"),url(/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.woff) format("woff"),url(/node_modules/katex/dist/fonts/KaTeX_Size3-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Size4;font-style:normal;font-weight:400;src:url(/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.woff2) format("woff2"),url(/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.woff) format("woff"),url(/node_modules/katex/dist/fonts/KaTeX_Size4-Regular.ttf) format("truetype")}@font-face{font-display:block;font-family:KaTeX_Typewriter;font-style:normal;font-weight:400;src:url(/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.woff2) format("woff2"),url(/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.woff) format("woff"),url(/node_modules/katex/dist/fonts/KaTeX_Typewriter-Regular.ttf) format("truetype")}.katex{font:normal 1.21em KaTeX_Main,Times New Roman,serif;line-height:1.2;position:relative;text-indent:0;text-rendering:auto}.katex *{-ms-high-contrast-adjust:none!important;border-color:currentColor}.katex .katex-version:after{content:"0.17.0"}.katex .katex-mathml{border:0;-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;padding:0;position:absolute;width:1px}.katex .katex-html>.newline{display:block}.katex .base{position:relative;white-space:nowrap;width:-webkit-min-content;width:-moz-min-content;width:min-content}.katex .base,.katex .strut{display:inline-block}.katex .textbf{font-weight:700}.katex .textit{font-style:italic}.katex .textrm{font-family:KaTeX_Main}.katex .textsf{font-family:KaTeX_SansSerif}.katex .texttt{font-family:KaTeX_Typewriter}.katex .mathnormal{font-family:KaTeX_Math;font-style:italic}.katex .mathit{font-family:KaTeX_Main;font-style:italic}.katex .mathrm{font-style:normal}.katex .mathbf{font-family:KaTeX_Main;font-weight:700}.katex .boldsymbol{font-family:KaTeX_Math;font-style:italic;font-weight:700}.katex .amsrm,.katex .mathbb,.katex .textbb{font-family:KaTeX_AMS}.katex .mathcal{font-family:KaTeX_Caligraphic}.katex .mathfrak,.katex .textfrak{font-family:KaTeX_Fraktur}.katex .mathboldfrak,.katex .textboldfrak{font-family:KaTeX_Fraktur;font-weight:700}.katex .mathtt{font-family:KaTeX_Typewriter}.katex .mathscr,.katex .textscr{font-family:KaTeX_Script}.katex .mathsf,.katex .textsf{font-family:KaTeX_SansSerif}.katex .mathboldsf,.katex .textboldsf{font-family:KaTeX_SansSerif;font-weight:700}.katex .mathitsf,.katex .mathsfit,.katex .textitsf{font-family:KaTeX_SansSerif;font-style:italic}.katex .mainrm{font-family:KaTeX_Main;font-style:normal}.katex .vlist-t{border-collapse:collapse;display:inline-table;table-layout:fixed}.katex .vlist-r{display:table-row}.katex .vlist{display:table-cell;position:relative;vertical-align:bottom}.katex .vlist>span{display:block;height:0;position:relative}.katex .vlist>span>span{display:inline-block}.katex .vlist>span>.pstrut{overflow:hidden;width:0}.katex .vlist-t2{margin-right:-2px}.katex .vlist-s{display:table-cell;font-size:1px;min-width:2px;vertical-align:bottom;width:2px}.katex .vbox{align-items:baseline;display:inline-flex;flex-direction:column}.katex .hbox{width:100%}.katex .hbox,.katex .thinbox{display:inline-flex;flex-direction:row}.katex .thinbox{max-width:0;width:0}.katex .msupsub{text-align:left}.katex .mfrac>span>span{text-align:center}.katex .mfrac .frac-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline,.katex .hline,.katex .mfrac .frac-line,.katex .overline .overline-line,.katex .rule,.katex .underline .underline-line{min-height:1px}.katex .mspace{display:inline-block}.katex .smash{display:inline;line-height:0}.katex .clap,.katex .llap,.katex .rlap{position:relative;width:0}.katex .clap>.inner,.katex .llap>.inner,.katex .rlap>.inner{position:absolute}.katex .clap>.fix,.katex .llap>.fix,.katex .rlap>.fix{display:inline-block}.katex .llap>.inner{right:0}.katex .clap>.inner,.katex .rlap>.inner{left:0}.katex .clap>.inner>span{margin-left:-50%;margin-right:50%}.katex .rule{border:0 solid;display:inline-block;position:relative}.katex .hline,.katex .overline .overline-line,.katex .underline .underline-line{border-bottom-style:solid;display:inline-block;width:100%}.katex .hdashline{border-bottom-style:dashed;display:inline-block;width:100%}.katex .sqrt>.root{margin-left:.2777777778em;margin-right:-.5555555556em}.katex .fontsize-ensurer.reset-size1.size1,.katex .sizing.reset-size1.size1{font-size:1em}.katex .fontsize-ensurer.reset-size1.size2,.katex .sizing.reset-size1.size2{font-size:1.2em}.katex .fontsize-ensurer.reset-size1.size3,.katex .sizing.reset-size1.size3{font-size:1.4em}.katex .fontsize-ensurer.reset-size1.size4,.katex .sizing.reset-size1.size4{font-size:1.6em}.katex .fontsize-ensurer.reset-size1.size5,.katex .sizing.reset-size1.size5{font-size:1.8em}.katex .fontsize-ensurer.reset-size1.size6,.katex .sizing.reset-size1.size6{font-size:2em}.katex .fontsize-ensurer.reset-size1.size7,.katex .sizing.reset-size1.size7{font-size:2.4em}.katex .fontsize-ensurer.reset-size1.size8,.katex .sizing.reset-size1.size8{font-size:2.88em}.katex .fontsize-ensurer.reset-size1.size9,.katex .sizing.reset-size1.size9{font-size:3.456em}.katex .fontsize-ensurer.reset-size1.size10,.katex .sizing.reset-size1.size10{font-size:4.148em}.katex .fontsize-ensurer.reset-size1.size11,.katex .sizing.reset-size1.size11{font-size:4.976em}.katex .fontsize-ensurer.reset-size2.size1,.katex .sizing.reset-size2.size1{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size2.size2,.katex .sizing.reset-size2.size2{font-size:1em}.katex .fontsize-ensurer.reset-size2.size3,.katex .sizing.reset-size2.size3{font-size:1.1666666667em}.katex .fontsize-ensurer.reset-size2.size4,.katex .sizing.reset-size2.size4{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size2.size5,.katex .sizing.reset-size2.size5{font-size:1.5em}.katex .fontsize-ensurer.reset-size2.size6,.katex .sizing.reset-size2.size6{font-size:1.6666666667em}.katex .fontsize-ensurer.reset-size2.size7,.katex .sizing.reset-size2.size7{font-size:2em}.katex .fontsize-ensurer.reset-size2.size8,.katex .sizing.reset-size2.size8{font-size:2.4em}.katex .fontsize-ensurer.reset-size2.size9,.katex .sizing.reset-size2.size9{font-size:2.88em}.katex .fontsize-ensurer.reset-size2.size10,.katex .sizing.reset-size2.size10{font-size:3.4566666667em}.katex .fontsize-ensurer.reset-size2.size11,.katex .sizing.reset-size2.size11{font-size:4.1466666667em}.katex .fontsize-ensurer.reset-size3.size1,.katex .sizing.reset-size3.size1{font-size:.7142857143em}.katex .fontsize-ensurer.reset-size3.size2,.katex .sizing.reset-size3.size2{font-size:.8571428571em}.katex .fontsize-ensurer.reset-size3.size3,.katex .sizing.reset-size3.size3{font-size:1em}.katex .fontsize-ensurer.reset-size3.size4,.katex .sizing.reset-size3.size4{font-size:1.1428571429em}.katex .fontsize-ensurer.reset-size3.size5,.katex .sizing.reset-size3.size5{font-size:1.2857142857em}.katex .fontsize-ensurer.reset-size3.size6,.katex .sizing.reset-size3.size6{font-size:1.4285714286em}.katex .fontsize-ensurer.reset-size3.size7,.katex .sizing.reset-size3.size7{font-size:1.7142857143em}.katex .fontsize-ensurer.reset-size3.size8,.katex .sizing.reset-size3.size8{font-size:2.0571428571em}.katex .fontsize-ensurer.reset-size3.size9,.katex .sizing.reset-size3.size9{font-size:2.4685714286em}.katex .fontsize-ensurer.reset-size3.size10,.katex .sizing.reset-size3.size10{font-size:2.9628571429em}.katex .fontsize-ensurer.reset-size3.size11,.katex .sizing.reset-size3.size11{font-size:3.5542857143em}.katex .fontsize-ensurer.reset-size4.size1,.katex .sizing.reset-size4.size1{font-size:.625em}.katex .fontsize-ensurer.reset-size4.size2,.katex .sizing.reset-size4.size2{font-size:.75em}.katex .fontsize-ensurer.reset-size4.size3,.katex .sizing.reset-size4.size3{font-size:.875em}.katex .fontsize-ensurer.reset-size4.size4,.katex .sizing.reset-size4.size4{font-size:1em}.katex .fontsize-ensurer.reset-size4.size5,.katex .sizing.reset-size4.size5{font-size:1.125em}.katex .fontsize-ensurer.reset-size4.size6,.katex .sizing.reset-size4.size6{font-size:1.25em}.katex .fontsize-ensurer.reset-size4.size7,.katex .sizing.reset-size4.size7{font-size:1.5em}.katex .fontsize-ensurer.reset-size4.size8,.katex .sizing.reset-size4.size8{font-size:1.8em}.katex .fontsize-ensurer.reset-size4.size9,.katex .sizing.reset-size4.size9{font-size:2.16em}.katex .fontsize-ensurer.reset-size4.size10,.katex .sizing.reset-size4.size10{font-size:2.5925em}.katex .fontsize-ensurer.reset-size4.size11,.katex .sizing.reset-size4.size11{font-size:3.11em}.katex .fontsize-ensurer.reset-size5.size1,.katex .sizing.reset-size5.size1{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size5.size2,.katex .sizing.reset-size5.size2{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size5.size3,.katex .sizing.reset-size5.size3{font-size:.7777777778em}.katex .fontsize-ensurer.reset-size5.size4,.katex .sizing.reset-size5.size4{font-size:.8888888889em}.katex .fontsize-ensurer.reset-size5.size5,.katex .sizing.reset-size5.size5{font-size:1em}.katex .fontsize-ensurer.reset-size5.size6,.katex .sizing.reset-size5.size6{font-size:1.1111111111em}.katex .fontsize-ensurer.reset-size5.size7,.katex .sizing.reset-size5.size7{font-size:1.3333333333em}.katex .fontsize-ensurer.reset-size5.size8,.katex .sizing.reset-size5.size8{font-size:1.6em}.katex .fontsize-ensurer.reset-size5.size9,.katex .sizing.reset-size5.size9{font-size:1.92em}.katex .fontsize-ensurer.reset-size5.size10,.katex .sizing.reset-size5.size10{font-size:2.3044444444em}.katex .fontsize-ensurer.reset-size5.size11,.katex .sizing.reset-size5.size11{font-size:2.7644444444em}.katex .fontsize-ensurer.reset-size6.size1,.katex .sizing.reset-size6.size1{font-size:.5em}.katex .fontsize-ensurer.reset-size6.size2,.katex .sizing.reset-size6.size2{font-size:.6em}.katex .fontsize-ensurer.reset-size6.size3,.katex .sizing.reset-size6.size3{font-size:.7em}.katex .fontsize-ensurer.reset-size6.size4,.katex .sizing.reset-size6.size4{font-size:.8em}.katex .fontsize-ensurer.reset-size6.size5,.katex .sizing.reset-size6.size5{font-size:.9em}.katex .fontsize-ensurer.reset-size6.size6,.katex .sizing.reset-size6.size6{font-size:1em}.katex .fontsize-ensurer.reset-size6.size7,.katex .sizing.reset-size6.size7{font-size:1.2em}.katex .fontsize-ensurer.reset-size6.size8,.katex .sizing.reset-size6.size8{font-size:1.44em}.katex .fontsize-ensurer.reset-size6.size9,.katex .sizing.reset-size6.size9{font-size:1.728em}.katex .fontsize-ensurer.reset-size6.size10,.katex .sizing.reset-size6.size10{font-size:2.074em}.katex .fontsize-ensurer.reset-size6.size11,.katex .sizing.reset-size6.size11{font-size:2.488em}.katex .fontsize-ensurer.reset-size7.size1,.katex .sizing.reset-size7.size1{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size7.size2,.katex .sizing.reset-size7.size2{font-size:.5em}.katex .fontsize-ensurer.reset-size7.size3,.katex .sizing.reset-size7.size3{font-size:.5833333333em}.katex .fontsize-ensurer.reset-size7.size4,.katex .sizing.reset-size7.size4{font-size:.6666666667em}.katex .fontsize-ensurer.reset-size7.size5,.katex .sizing.reset-size7.size5{font-size:.75em}.katex .fontsize-ensurer.reset-size7.size6,.katex .sizing.reset-size7.size6{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size7.size7,.katex .sizing.reset-size7.size7{font-size:1em}.katex .fontsize-ensurer.reset-size7.size8,.katex .sizing.reset-size7.size8{font-size:1.2em}.katex .fontsize-ensurer.reset-size7.size9,.katex .sizing.reset-size7.size9{font-size:1.44em}.katex .fontsize-ensurer.reset-size7.size10,.katex .sizing.reset-size7.size10{font-size:1.7283333333em}.katex .fontsize-ensurer.reset-size7.size11,.katex .sizing.reset-size7.size11{font-size:2.0733333333em}.katex .fontsize-ensurer.reset-size8.size1,.katex .sizing.reset-size8.size1{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size8.size2,.katex .sizing.reset-size8.size2{font-size:.4166666667em}.katex .fontsize-ensurer.reset-size8.size3,.katex .sizing.reset-size8.size3{font-size:.4861111111em}.katex .fontsize-ensurer.reset-size8.size4,.katex .sizing.reset-size8.size4{font-size:.5555555556em}.katex .fontsize-ensurer.reset-size8.size5,.katex .sizing.reset-size8.size5{font-size:.625em}.katex .fontsize-ensurer.reset-size8.size6,.katex .sizing.reset-size8.size6{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size8.size7,.katex .sizing.reset-size8.size7{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size8.size8,.katex .sizing.reset-size8.size8{font-size:1em}.katex .fontsize-ensurer.reset-size8.size9,.katex .sizing.reset-size8.size9{font-size:1.2em}.katex .fontsize-ensurer.reset-size8.size10,.katex .sizing.reset-size8.size10{font-size:1.4402777778em}.katex .fontsize-ensurer.reset-size8.size11,.katex .sizing.reset-size8.size11{font-size:1.7277777778em}.katex .fontsize-ensurer.reset-size9.size1,.katex .sizing.reset-size9.size1{font-size:.2893518519em}.katex .fontsize-ensurer.reset-size9.size2,.katex .sizing.reset-size9.size2{font-size:.3472222222em}.katex .fontsize-ensurer.reset-size9.size3,.katex .sizing.reset-size9.size3{font-size:.4050925926em}.katex .fontsize-ensurer.reset-size9.size4,.katex .sizing.reset-size9.size4{font-size:.462962963em}.katex .fontsize-ensurer.reset-size9.size5,.katex .sizing.reset-size9.size5{font-size:.5208333333em}.katex .fontsize-ensurer.reset-size9.size6,.katex .sizing.reset-size9.size6{font-size:.5787037037em}.katex .fontsize-ensurer.reset-size9.size7,.katex .sizing.reset-size9.size7{font-size:.6944444444em}.katex .fontsize-ensurer.reset-size9.size8,.katex .sizing.reset-size9.size8{font-size:.8333333333em}.katex .fontsize-ensurer.reset-size9.size9,.katex .sizing.reset-size9.size9{font-size:1em}.katex .fontsize-ensurer.reset-size9.size10,.katex .sizing.reset-size9.size10{font-size:1.2002314815em}.katex .fontsize-ensurer.reset-size9.size11,.katex .sizing.reset-size9.size11{font-size:1.4398148148em}.katex .fontsize-ensurer.reset-size10.size1,.katex .sizing.reset-size10.size1{font-size:.2410800386em}.katex .fontsize-ensurer.reset-size10.size2,.katex .sizing.reset-size10.size2{font-size:.2892960463em}.katex .fontsize-ensurer.reset-size10.size3,.katex .sizing.reset-size10.size3{font-size:.337512054em}.katex .fontsize-ensurer.reset-size10.size4,.katex .sizing.reset-size10.size4{font-size:.3857280617em}.katex .fontsize-ensurer.reset-size10.size5,.katex .sizing.reset-size10.size5{font-size:.4339440694em}.katex .fontsize-ensurer.reset-size10.size6,.katex .sizing.reset-size10.size6{font-size:.4821600771em}.katex .fontsize-ensurer.reset-size10.size7,.katex .sizing.reset-size10.size7{font-size:.5785920926em}.katex .fontsize-ensurer.reset-size10.size8,.katex .sizing.reset-size10.size8{font-size:.6943105111em}.katex .fontsize-ensurer.reset-size10.size9,.katex .sizing.reset-size10.size9{font-size:.8331726133em}.katex .fontsize-ensurer.reset-size10.size10,.katex .sizing.reset-size10.size10{font-size:1em}.katex .fontsize-ensurer.reset-size10.size11,.katex .sizing.reset-size10.size11{font-size:1.1996142719em}.katex .fontsize-ensurer.reset-size11.size1,.katex .sizing.reset-size11.size1{font-size:.2009646302em}.katex .fontsize-ensurer.reset-size11.size2,.katex .sizing.reset-size11.size2{font-size:.2411575563em}.katex .fontsize-ensurer.reset-size11.size3,.katex .sizing.reset-size11.size3{font-size:.2813504823em}.katex .fontsize-ensurer.reset-size11.size4,.katex .sizing.reset-size11.size4{font-size:.3215434084em}.katex .fontsize-ensurer.reset-size11.size5,.katex .sizing.reset-size11.size5{font-size:.3617363344em}.katex .fontsize-ensurer.reset-size11.size6,.katex .sizing.reset-size11.size6{font-size:.4019292605em}.katex .fontsize-ensurer.reset-size11.size7,.katex .sizing.reset-size11.size7{font-size:.4823151125em}.katex .fontsize-ensurer.reset-size11.size8,.katex .sizing.reset-size11.size8{font-size:.578778135em}.katex .fontsize-ensurer.reset-size11.size9,.katex .sizing.reset-size11.size9{font-size:.6945337621em}.katex .fontsize-ensurer.reset-size11.size10,.katex .sizing.reset-size11.size10{font-size:.8336012862em}.katex .fontsize-ensurer.reset-size11.size11,.katex .sizing.reset-size11.size11{font-size:1em}.katex .delimsizing.size1{font-family:KaTeX_Size1}.katex .delimsizing.size2{font-family:KaTeX_Size2}.katex .delimsizing.size3{font-family:KaTeX_Size3}.katex .delimsizing.size4{font-family:KaTeX_Size4}.katex .delimsizing.mult .delim-size1>span{font-family:KaTeX_Size1}.katex .delimsizing.mult .delim-size4>span{font-family:KaTeX_Size4}.katex .nulldelimiter{display:inline-block;width:.12em}.katex .delimcenter,.katex .op-symbol{position:relative}.katex .op-symbol.small-op{font-family:KaTeX_Size1}.katex .op-symbol.large-op{font-family:KaTeX_Size2}.katex .accent>.vlist-t,.katex .op-limits>.vlist-t{text-align:center}.katex .accent .accent-body{position:relative}.katex .accent .accent-body:not(.accent-full){width:0}.katex .overlay{display:block}.katex .mtable .vertical-separator{display:inline-block;min-width:1px}.katex .mtable .arraycolsep{display:inline-block}.katex .mtable .col-align-c>.vlist-t{text-align:center}.katex .mtable .col-align-l>.vlist-t{text-align:left}.katex .mtable .col-align-r>.vlist-t{text-align:right}.katex .svg-align{text-align:left}.katex svg{fill:currentColor;stroke:currentColor;display:block;height:inherit;position:absolute;width:100%}.katex svg path{stroke:none}.katex svg{fill-rule:nonzero;fill-opacity:1;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1}.katex img{border-style:none;max-height:none;max-width:none;min-height:0;min-width:0}.katex .stretchy{display:block;overflow:hidden;position:relative;width:100%}.katex .stretchy:after,.katex .stretchy:before{content:""}.katex .hide-tail{overflow:hidden;position:relative;width:100%}.katex .halfarrow-left{left:0;overflow:hidden;position:absolute;width:50.2%}.katex .halfarrow-right{overflow:hidden;position:absolute;right:0;width:50.2%}.katex .brace-left{left:0;overflow:hidden;position:absolute;width:25.1%}.katex .brace-center{left:25%;overflow:hidden;position:absolute;width:50%}.katex .brace-right{overflow:hidden;position:absolute;right:0;width:25.1%}.katex .x-arrow-pad{padding:0 .5em}.katex .cd-arrow-pad{padding:0 .55556em 0 .27778em}.katex .mover,.katex .munder,.katex .x-arrow{text-align:center}.katex .boxpad{padding:0 .3em}.katex .fbox,.katex .fcolorbox{border:.04em solid;box-sizing:border-box}.katex .cancel-pad{padding:0 .2em}.katex .cancel-lap{margin-left:-.2em;margin-right:-.2em}.katex .sout{border-bottom-style:solid;border-bottom-width:.08em}.katex .angl{border-right:.049em solid;border-top:.049em solid;box-sizing:border-box;margin-right:.03889em}.katex .anglpad{padding:0 .03889em}.katex .eqn-num:before{content:"(" counter(katexEqnNo) ")";counter-increment:katexEqnNo}.katex .mml-eqn-num:before{content:"(" counter(mmlEqnNo) ")";counter-increment:mmlEqnNo}.katex .mtr-glue{width:50%}.katex .cd-vert-arrow{display:inline-block;position:relative}.katex .cd-label-left{display:inline-block;position:absolute;right:calc(50% + .3em);text-align:left}.katex .cd-label-right{display:inline-block;left:calc(50% + .3em);position:absolute;text-align:right}.katex-display{display:block;margin:1em 0;text-align:center}.katex-display>.katex{display:block;text-align:center;white-space:nowrap}.katex-display>.katex>.katex-html{display:block;position:relative}.katex-display>.katex>.katex-html>.tag{position:absolute;right:0}.katex-display.leqno>.katex>.katex-html>.tag{left:0;right:auto}.katex-display.fleqn>.katex{padding-left:2em;text-align:left}body{counter-reset:katexEqnNo mmlEqnNo}
+`;
+
+const EXTRA_CSS = "\
+.dm-card .katex{font-size:1.5em;}\
+.dm-card .katex-display{margin:0;}";
+
+const FORMULAS = [
+  {
+    name: "Bayes' Theorem",
+    tex: "P(A\\mid B) = \\frac{P(B\\mid A)\\,P(A)}{P(B)}",
+  },
+  {
+    name: "Cross-Entropy Loss",
+    tex: "H(p,q) = -\\sum_{x} p(x)\\,\\log q(x)",
+  },
+  {
+    name: "Softmax",
+    tex: "\\mathrm{softmax}(x_i) = \\frac{e^{x_i}}{\\sum_{j} e^{x_j}}",
+  },
+];
+
+function renderTex(tex: string) {
+  return katex.renderToString(tex, { throwOnError: false, displayMode: true });
+}
+
+export default function DemoMath({ 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",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: 20,
+      fontFamily: CANVAS.fontFamily,
+      opacity: ready ? 1 : 0,
+      transition: "opacity 0.2s ease",
+    }}>
+      <style dangerouslySetInnerHTML={{ __html: KATEX_CSS + EXTRA_CSS }} />
+
+      {FORMULAS.map(function (f, i) {
+        const shown = step >= i;
+        return (
+          <div
+            key={i}
+            className="dm-card"
+            style={{
+              opacity: shown ? 1 : 0,
+              transform: shown ? "translateY(0)" : "translateY(16px)",
+              transition: instant ? "none" : "opacity 0.45s ease, transform 0.45s ease",
+              background: "#ffffff",
+              borderRadius: 16,
+              padding: "26px 30px",
+              boxShadow: "0 6px 22px rgba(0,0,0,0.10)",
+              width: 760,
+              maxWidth: 900,
+              boxSizing: "border-box",
+              textAlign: "center",
+            }}
+          >
+            <div style={{ fontSize: 18, fontWeight: 800, color: "#4361ee", marginBottom: 14 }}>
+              {f.name}
+            </div>
+            <div dangerouslySetInnerHTML={{ __html: renderTex(f.tex) }} />
+          </div>
+        );
+      })}
+
+      <div style={{
+        opacity: step >= 3 ? 1 : 0,
+        transform: step >= 3 ? "translateY(0)" : "translateY(16px)",
+        transition: instant ? "none" : "opacity 0.45s ease, transform 0.45s ease",
+        marginTop: 4,
+        background: "#eef2ff",
+        border: "1px solid #c7d2fe",
+        borderRadius: 12,
+        padding: "14px 24px",
+        width: 760,
+        maxWidth: 900,
+        boxSizing: "border-box",
+        fontSize: 15,
+        fontWeight: 600,
+        color: "#3730a3",
+        lineHeight: 1.5,
+        textAlign: "center",
+      }}>
+        All three share a probabilistic core: Bayes inverts a conditional, cross-entropy
+        scores a predicted distribution against the truth, and softmax produces that
+        normalized distribution in the first place.
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,126 @@
+import React from "react";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import { CANVAS, vis, useRevealStep } from "../../../core/presets.ts";
+
+const anime = (typeof window !== "undefined") ? (window as any).anime : null;
+
+function lerpColor(a: number[], b: number[], t: number) {
+  const r = Math.round(a[0] + (b[0] - a[0]) * t);
+  const g = Math.round(a[1] + (b[1] - a[1]) * t);
+  const bl = Math.round(a[2] + (b[2] - a[2]) * t);
+  return "rgb(" + r + "," + g + "," + bl + ")";
+}
+
+const RED = [220, 38, 38];   // #dc2626
+const GREEN = [5, 150, 105]; // #059669
+
+const COMPARISONS = [
+  { label: "Top-1 Accuracy", old: "58.4%", neu: "94.2%" },
+  { label: "Coverage", old: "62%", neu: "87.3%" },
+  { label: "False Positives", old: "23%", neu: "3.1%" },
+];
+
+export default function DemoNumberMorph(props: SlideComponentProps) {
+  const Reveal = props.Reveal;
+  const ref = useRevealStep(Reveal);
+  const step = ref[0], ready = ref[1], instant = ref[2];
+
+  const stateRef = React.useState({ val: 30, color: "rgb(220,38,38)" });
+  const view = stateRef[0], setView = stateRef[1];
+
+  const morphedRef = React.useRef(false);
+
+  React.useEffect(function () {
+    if (step >= 1) {
+      if (morphedRef.current) return;
+      morphedRef.current = true;
+      if (!anime || !anime.animate) {
+        setView({ val: 4.2, color: "rgb(5,150,105)" });
+        return;
+      }
+      const obj = { val: 30, t: 0 };
+      anime.animate(obj, {
+        val: 4.2,
+        t: 1,
+        duration: 1500,
+        ease: "outExpo",
+        update: function () {
+          setView({ val: obj.val, color: lerpColor(RED, GREEN, obj.t) });
+        },
+      });
+    } else {
+      morphedRef.current = false;
+      setView({ val: 30, color: "rgb(220,38,38)" });
+    }
+  }, [step]);
+
+  const isMorphed = step >= 1;
+  const displayVal = isMorphed
+    ? view.val.toFixed(1)
+    : Math.round(view.val) + "+";
+
+  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",
+    }}>
+      {/* hero number */}
+      <div style={{ display: "flex", alignItems: "baseline", gap: 12 }}>
+        <span style={{
+          fontSize: 100, fontWeight: 900,
+          color: view.color, lineHeight: 1,
+          fontVariantNumeric: "tabular-nums",
+        }}>{displayVal}</span>
+        <span style={{ fontSize: 40, fontWeight: 700, color: view.color }}>min</span>
+        <span style={Object.assign({
+          marginLeft: 16, fontSize: 22, fontWeight: 800,
+          color: "#059669", background: "#d1fae5",
+          padding: "6px 14px", borderRadius: 999,
+        }, vis(step, 1, instant))}>7x faster</span>
+      </div>
+
+      {/* label */}
+      <div style={{ fontSize: 20, fontWeight: 600, color: "#6b7280", marginTop: 14 }}>
+        Mean Time to Detect
+      </div>
+
+      {/* comparison stats */}
+      <div style={Object.assign({
+        display: "flex", gap: 32, marginTop: 48,
+      }, vis(step, 2, instant))}>
+        {COMPARISONS.map(function (c, i) {
+          return (
+            <div key={i} style={{
+              display: "flex", flexDirection: "column", alignItems: "center",
+              minWidth: 200,
+            }}>
+              <div style={{ fontSize: 15, fontWeight: 700, color: "#6b7280", marginBottom: 8 }}>
+                {c.label}
+              </div>
+              <div style={{ display: "flex", alignItems: "baseline", gap: 8 }}>
+                <span style={{
+                  fontSize: 22, fontWeight: 700, color: "#dc2626",
+                  textDecoration: "line-through",
+                }}>{c.old}</span>
+                <span style={{ fontSize: 18, color: "#9ca3af" }}>&#8594;</span>
+                <span style={{ fontSize: 26, fontWeight: 900, color: "#059669" }}>{c.neu}</span>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* conclusion */}
+      <div style={Object.assign({
+        marginTop: 44, fontSize: 18, fontWeight: 600,
+        color: "#374151", fontStyle: "italic",
+      }, vis(step, 3, instant))}>
+        End-to-end improvement across all dimensions
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,185 @@
+import React from "react";
+import type { SlideComponentProps } from "../../../core/types.ts";
+import { useRevealStep } from "../../../core/presets.ts";
+
+const W = 1200, H = 560;
+
+// An S-shaped bezier curve spanning the canvas.
+const PATH_D =
+  "M 120,440 C 320,440 320,120 560,120 S 880,440 1080,120";
+
+const PARTICLE_COLORS = ["#4361ee", "#7209b7", "#f72585", "#4cc9f0", "#4895ef"];
+
+// Subtle background grid dots.
+function gridDots() {
+  const dots = [];
+  for (let y = 40; y < H; y += 60) {
+    for (let x = 40; x < W; x += 60) {
+      dots.push(<circle key={x + "-" + y} cx={x} cy={y} r={1.5} fill="#d6d6e8" />);
+    }
+  }
+  return dots;
+}
+
+export default function DemoPath({ Reveal }: SlideComponentProps) {
+  const rs = useRevealStep(Reveal);
+  const step = rs[0], ready = rs[1], instant = rs[2];
+
+  const pathRef = React.useRef<SVGPathElement>(null);
+  const leadRef = React.useRef<SVGGElement>(null);
+  const trailRefs = React.useRef<(SVGGElement | null)[]>([]);
+  const gradStopRefs = React.useRef<(SVGStopElement | null)[]>([]);
+
+  function pointAt(progress: number) {
+    const el = pathRef.current;
+    if (!el) return { x: 0, y: 0 };
+    const len = el.getTotalLength();
+    return el.getPointAtLength(len * progress);
+  }
+
+  function placeAt(node: SVGGElement | null, progress: number) {
+    if (!node) return;
+    const p = pointAt(progress);
+    node.setAttribute("transform", "translate(" + p.x + "," + p.y + ")");
+  }
+
+  function runStep(step: number, instant: boolean) {
+    const anime = (window as any).anime;
+    const path = pathRef.current;
+    if (!path) return;
+    const len = path.getTotalLength();
+    path.style.strokeDasharray = String(len);
+
+    // Step 0: draw the path.
+    if (step >= 0) {
+      if (!anime || instant) {
+        path.style.strokeDashoffset = String(0);
+      } else if (path.dataset.drawn !== "1") {
+        path.dataset.drawn = "1";
+        anime.animate(path, {
+          strokeDashoffset: [len, 0],
+          duration: 1400,
+          easing: "inOutQuad",
+        });
+      }
+    } else {
+      path.style.strokeDashoffset = String(len);
+      path.dataset.drawn = "0";
+    }
+
+    // Step 1: single particle travels along the path.
+    const lead = leadRef.current;
+    if (lead) {
+      if (step >= 1) {
+        lead.style.opacity = "1";
+        if (!anime || instant) {
+          placeAt(lead, 1);
+        } else {
+          const moverL = { t: 0 };
+          anime.animate(moverL, {
+            t: 1,
+            duration: 2000,
+            easing: "inOutCubic",
+            onUpdate: function () { placeAt(lead, moverL.t); },
+          });
+        }
+      } else {
+        lead.style.opacity = "0";
+        placeAt(lead, 0);
+      }
+    }
+
+    // Step 2: staggered trail of particles.
+    const trail = trailRefs.current.filter(Boolean) as SVGGElement[];
+    trail.forEach(function (node, i) {
+      if (step >= 2) {
+        node.style.opacity = "1";
+        if (!anime || instant) {
+          placeAt(node, 1);
+        } else {
+          const mover = { t: 0 };
+          anime.animate(mover, {
+            t: 1,
+            duration: 2200,
+            easing: "inOutSine",
+            delay: i * 180,
+            loop: true,
+            onUpdate: function () { placeAt(node, mover.t); },
+          });
+        }
+      } else {
+        node.style.opacity = "0";
+        placeAt(node, 0);
+      }
+    });
+
+    // Step 3: gradient color sweep.
+    const stops = gradStopRefs.current.filter(Boolean) as SVGStopElement[];
+    if (stops.length && step >= 3 && anime && !instant) {
+      anime.animate(stops, {
+        stopColor: ["#4361ee", "#f72585", "#4cc9f0"],
+        duration: 1600,
+        easing: "inOutQuad",
+        loop: true,
+        alternate: true,
+      });
+    }
+  }
+
+  // Drive imperative anime after the SVG paints with current refs.
+  React.useEffect(function () {
+    const id = requestAnimationFrame(function () { runStep(step, instant); });
+    return function () { cancelAnimationFrame(id); };
+  }, [step, instant]);
+
+  return (
+    <svg
+      viewBox={"0 0 " + W + " " + H}
+      style={{ width: "100%", height: "100%", display: "block", opacity: ready ? 1 : 0, transition: "opacity 0.2s ease" }}
+    >
+      <defs>
+            <linearGradient id="demoPathGrad" x1="0" y1="0" x2="1" y2="0">
+              <stop ref={function (el) { gradStopRefs.current[0] = el; }} offset="0%" stopColor="#4361ee" />
+              <stop ref={function (el) { gradStopRefs.current[1] = el; }} offset="100%" stopColor="#f72585" />
+            </linearGradient>
+            <filter id="demoGlow" x="-150%" y="-150%" width="400%" height="400%">
+              <feGaussianBlur stdDeviation="4" result="blur" />
+              <feMerge>
+                <feMergeNode in="blur" />
+                <feMergeNode in="SourceGraphic" />
+              </feMerge>
+            </filter>
+          </defs>
+
+          <g>{gridDots()}</g>
+
+          <path
+            ref={pathRef}
+            d={PATH_D}
+            fill="none"
+            stroke="url(#demoPathGrad)"
+            strokeWidth={6}
+            strokeLinecap="round"
+          />
+
+          {/* Trail particles */}
+          {PARTICLE_COLORS.map(function (c, i) {
+            return (
+              <g
+                key={i}
+                ref={function (el) { trailRefs.current[i] = el; }}
+                style={{ opacity: 0 }}
+              >
+                <circle r={7} fill={c} filter="url(#demoGlow)" />
+              </g>
+            );
+          })}
+
+      {/* Lead particle */}
+      <g ref={leadRef} style={{ opacity: 0 }}>
+        <circle r={11} fill="#fff" filter="url(#demoGlow)" />
+        <circle r={6} fill="#4361ee" />
+      </g>
+    </svg>
+  );
+}