@tandryukha/aidemo 0.8.0

package/src/config.ts

@@ -0,0 +1,222 @@
+import { promises as fs, readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { homedir } from "node:os";
+
+/**
+ * Engine install root = parent of src/. When the engine is run from its own
+ * repo this is the repo root; when it's fetched via `npx github:.../aidemo`
+ * it's the temp package dir. Either way, package.json / bin / .claude live here.
+ */
+export const ENGINE_ROOT = resolve(new URL("..", import.meta.url).pathname);
+/** Back-compat alias — historically the engine only ran from its own checkout. */
+export const REPO_ROOT = ENGINE_ROOT;
+
+/** The engine's own version, read from its bundled package.json (single source). */
+export function engineVersion(): string {
+  try {
+    const pkg = JSON.parse(readFileSync(resolve(ENGINE_ROOT, "package.json"), "utf8"));
+    return typeof pkg.version === "string" ? pkg.version : "0.0.0";
+  } catch {
+    return "0.0.0";
+  }
+}
+
+/** Parse one KEY=VALUE .env file into a plain object. No process.env side effects here —
+ *  see loadEnv() below for why the two files are read fully before anything is assigned. */
+async function readEnvFile(envPath: string): Promise<Record<string, string>> {
+  const values: Record<string, string> = {};
+  let raw: string;
+  try {
+    raw = await fs.readFile(envPath, "utf8");
+  } catch {
+    return values; // no file — nothing to load
+  }
+  for (const line of raw.split("\n")) {
+    const trimmed = line.trim();
+    if (!trimmed || trimmed.startsWith("#")) continue;
+    const eq = trimmed.indexOf("=");
+    if (eq === -1) continue;
+    const key = trimmed.slice(0, eq).trim();
+    let val = trimmed.slice(eq + 1).trim();
+    if (
+      (val.startsWith('"') && val.endsWith('"')) ||
+      (val.startsWith("'") && val.endsWith("'"))
+    ) {
+      val = val.slice(1, -1);
+    }
+    values[key] = val;
+  }
+  return values;
+}
+
+/**
+ * Load .env for the CLI. Reads the *consumer's* cwd/.env (so a repo that installed
+ * the skill can keep its own OpenAI key next to its demos) and the engine's own
+ * .env, then merges with cwd winning over the engine dir for any key both define.
+ *
+ * CRITICAL: a value found in EITHER .env file always OVERRIDES whatever is already
+ * in process.env — e.g. an OPENAI_API_KEY exported globally in a shell profile
+ * (~/.zshrc), possibly shared across several unrelated repos/projects. This is
+ * deliberate. The previous version of this function only assigned a var when it
+ * was not yet present in process.env at all, which is the exact "ambient wins"
+ * default that Node's `dotenv.config()` and Python's `load_dotenv()` also ship
+ * with — it LOOKS like a safe merge but actually means a repo's own .env is
+ * silently ignored whenever the key already happens to be set in the process
+ * environment, and the spend goes to whatever key that ambient value belongs to
+ * instead. See scripts/guard-openai-key.ts, which fails the build if this
+ * skip-if-already-set shape ever comes back. Ambient only wins here when
+ * NEITHER .env file defines the key at all (e.g. a deliberate one-off invocation
+ * like `OPENAI_API_KEY=sk-... aidemo record ...`). Called once at CLI startup.
+ */
+export async function loadEnv(): Promise<void> {
+  const cwdEnv = resolve(process.cwd(), ".env");
+  const engineEnv = resolve(ENGINE_ROOT, ".env");
+  const engineValues = await readEnvFile(engineEnv);
+  const cwdValues = cwdEnv === engineEnv ? {} : await readEnvFile(cwdEnv);
+  const merged = { ...engineValues, ...cwdValues }; // cwd wins per-key over the engine dir
+  for (const [key, val] of Object.entries(merged)) {
+    process.env[key] = val;
+  }
+}
+
+/**
+ * Custom endpoint for any OpenAI-compatible server (LocalAI, speaches,
+ * Kokoro-FastAPI, …). AIDEMO_OPENAI_BASE_URL wins over the SDK-standard
+ * OPENAI_BASE_URL; unset → api.openai.com.
+ */
+export const openAiBaseUrl = () =>
+  process.env.AIDEMO_OPENAI_BASE_URL || process.env.OPENAI_BASE_URL || undefined;
+
+export function requireOpenAiKey(): string {
+  const key = process.env.OPENAI_API_KEY;
+  if (key) return key;
+  // Local OpenAI-compatible servers rarely check auth; a placeholder key keeps
+  // the SDK happy without demanding a real one.
+  if (openAiBaseUrl()) return "sk-aidemo-local";
+  throw new Error(
+    "OPENAI_API_KEY is not set. Copy .env.example to .env and add your key, " +
+      "or point OPENAI_BASE_URL at a local OpenAI-compatible server."
+  );
+}
+
+export const TTS_MODEL = () => process.env.AIDEMO_TTS_MODEL || "gpt-4o-mini-tts";
+export const STT_MODEL = () => process.env.AIDEMO_STT_MODEL || "whisper-1";
+
+/**
+ * TTS backend for `aidemo voice`. Unset → OpenAI (or whatever OPENAI_BASE_URL
+ * points at), exactly as before this knob existed. Captions/STT are unaffected —
+ * they always use the OpenAI-compatible endpoint (but see captionsAutoOffline).
+ */
+export const ttsProvider = (): "openai" | "elevenlabs" | "local" => {
+  const p = process.env.AIDEMO_TTS_PROVIDER || "openai";
+  if (p !== "openai" && p !== "elevenlabs" && p !== "local") {
+    throw new Error(
+      `AIDEMO_TTS_PROVIDER="${p}" is not a known provider — use "openai" (default), "elevenlabs" or "local".`
+    );
+  }
+  return p;
+};
+
+/** The one model the in-process local provider runs — same weights speaches serves. */
+export const KOKORO_MODEL_ID = "onnx-community/Kokoro-82M-v1.0-ONNX";
+
+const KOKORO_DTYPES = ["fp32", "fp16", "q8", "q4", "q4f16"] as const;
+export type KokoroDtype = (typeof KOKORO_DTYPES)[number];
+/** Quantization for the local model: q8 ≈ 90 MB (default), fp32 ≈ 330 MB (best). */
+export const kokoroDtype = (): KokoroDtype => {
+  const d = process.env.AIDEMO_TTS_MODEL_DTYPE || "q8";
+  if (!KOKORO_DTYPES.includes(d as KokoroDtype)) {
+    throw new Error(
+      `AIDEMO_TTS_MODEL_DTYPE="${d}" is not a Kokoro quantization — use one of: ${KOKORO_DTYPES.join(", ")}.`
+    );
+  }
+  return d as KokoroDtype;
+};
+
+/**
+ * Voice used when the storyboard keeps the schema default ("marin", an OpenAI
+ * name Kokoro doesn't know). Any explicitly authored voiceId is passed to the
+ * local model verbatim. Same convention as ELEVENLABS_VOICE.
+ */
+export const KOKORO_VOICE = () => process.env.AIDEMO_KOKORO_VOICE || "af_heart";
+
+/**
+ * Where the local provider caches the downloaded model. Defaults inside the
+ * HuggingFace home (HF_HOME or ~/.cache/huggingface) so it survives
+ * node_modules reinstalls and a pre-seeded copy makes installs air-gapped.
+ */
+export const ttsModelCacheDir = () =>
+  process.env.AIDEMO_TTS_MODEL_CACHE ||
+  resolve(
+    process.env.HF_HOME || resolve(homedir(), ".cache", "huggingface"),
+    "transformersjs"
+  );
+
+/**
+ * `render` auto-routes captions through the offline (script-timed) derivation
+ * when the voice is generated locally and the STT call would fail anyway —
+ * local voice shouldn't demand a cloud key just for caption timing.
+ */
+export const captionsAutoOffline = () =>
+  ttsProvider() === "local" && !openAiBaseUrl() && !process.env.OPENAI_API_KEY;
+
+export function requireElevenLabsKey(): string {
+  const key = process.env.ELEVENLABS_API_KEY;
+  if (key) return key;
+  throw new Error(
+    "ELEVENLABS_API_KEY is not set but AIDEMO_TTS_PROVIDER=elevenlabs. Add the key " +
+      "to .env, or unset AIDEMO_TTS_PROVIDER to use the default OpenAI TTS."
+  );
+}
+
+export const ELEVENLABS_MODEL = () =>
+  process.env.AIDEMO_ELEVENLABS_MODEL || "eleven_multilingual_v2";
+/**
+ * Voice used when the storyboard keeps the schema default ("marin", an OpenAI
+ * name that means nothing to ElevenLabs). Any explicitly authored voiceId is
+ * passed to ElevenLabs verbatim instead. Default: Rachel.
+ */
+export const ELEVENLABS_VOICE = () =>
+  process.env.AIDEMO_ELEVENLABS_VOICE || "21m00Tcm4TlvDq8ikWAM";
+
+/**
+ * LLM-only servers (Ollama, plain llama.cpp/vLLM) speak the OpenAI chat
+ * protocol but 404 the audio routes — the only routes this engine calls.
+ * Rethrow that specific failure with what's wrong and what to run instead.
+ */
+export function explainAudioEndpointError(err: unknown, kind: "tts" | "stt"): never {
+  const base = openAiBaseUrl();
+  const status = (err as { status?: number } | null)?.status;
+  if (base && (status === 404 || status === 405)) {
+    const endpoint =
+      kind === "tts" ? "POST /v1/audio/speech (TTS)" : "POST /v1/audio/transcriptions (STT)";
+    throw new Error(
+      `${base} doesn't implement ${endpoint}. LLM-only servers like Ollama or plain ` +
+        `llama.cpp/vLLM have no OpenAI audio endpoints — point OPENAI_BASE_URL at a ` +
+        `speech server such as speaches instead (README → "Local models & offline")` +
+        (kind === "stt" ? `, or skip transcription: aidemo captions <dir> --offline` : "") +
+        `. Original error: ${(err as Error).message}`
+    );
+  }
+  throw err;
+}
+
+/** Dedicated Chrome profile handed to Playwright (logged into ChatGPT). */
+export const chromeProfileDir = () =>
+  process.env.AIDEMO_CHROME_PROFILE || resolve(REPO_ROOT, "chrome-profile");
+
+/** Default capture path: playwright | native | obs (see src/capture.ts). */
+export const defaultCaptureMode = () => process.env.AIDEMO_CAPTURE || "playwright";
+/** avfoundation input name for native capture. List devices with:
+ *  ffmpeg -f avfoundation -list_devices true -i "" */
+export const captureDevice = () =>
+  process.env.AIDEMO_CAPTURE_DEVICE || "Capture screen 0";
+export const obsUrl = () => process.env.AIDEMO_OBS_URL || "ws://127.0.0.1:4455";
+export const obsPassword = () => process.env.AIDEMO_OBS_PASSWORD;
+/**
+ * Escape hatch for the native/OBS capture crop sanity gate: "1" downgrades
+ * the abort-on-geometry-mismatch to a loud warning. A wrong crop can ship the
+ * whole desktop into the video — frame-review any take recorded with this set.
+ */
+export const nativeCropUnsafe = () =>
+  process.env.AIDEMO_NATIVE_CROP_UNSAFE === "1";

package/src/cursor-overlay.ts

@@ -0,0 +1,186 @@
+/**
+ * Compose-time cursor overlay. The default pipeline BAKES the cursor into the
+ * recording (src/cursor.ts). When a storyboard opts into `cursor` control, the
+ * take is recorded cursor-free and the player logs the cursor path
+ * (timeline `cursorSamples`); compose then draws the cursor as an overlay along
+ * that path so hide/resize is a recompose, never a re-record.
+ *
+ * The path is replayed with the same piecewise-expression trick as the auto-zoom
+ * (src/zoom.ts): overlay the cursor PNG at x='X(t)':y='Y(t)', where X/Y are
+ * piecewise-LINEAR over the recorded samples (the samples are already eased, so
+ * linear interpolation between them preserves the glide). Portable — `overlay`
+ * is the same baseline filter the caption strip uses. Applied to the content
+ * BEFORE the zoom pass, so the cursor zooms and pans with the frame, exactly
+ * like the baked one.
+ */
+
+/** A cursor sample already mapped into final content time + output pixels. */
+export interface CursorPoint {
+  /** Content-time seconds. */
+  t: number;
+  /** Output pixels (viewport CSS px * pxScale). */
+  x: number;
+  y: number;
+}
+
+/** A content-time span (seconds) during which the cursor is hidden. */
+export interface HideWindow {
+  a: number;
+  b: number;
+}
+
+/**
+ * Per-axis key budget. ffmpeg's expression evaluator allocates an AST and blows
+ * up (ENOMEM) somewhere past ~100 flat terms — measured ~80 OK / 120 fail on a
+ * stock build. X(t) and Y(t) are INDEPENDENT overlay expressions, so this budget
+ * is per axis; keeping it well under the cliff (and small) also protects weaker
+ * ffmpeg builds. The path is simplified to fit (simplifyAxis) — cheap, because
+ * the player's glides are eased S-curves that RDP collapses to a few keys each.
+ */
+const KEY_BUDGET = 48;
+
+interface Key {
+  t: number;
+  v: number;
+}
+
+function num(n: number): string {
+  const s = n.toFixed(3).replace(/\.?0+$/, "");
+  return s === "" || s === "-" ? "0" : s;
+}
+
+/** Linear-interpolation (vertical) error at `p` against the a→b chord. */
+function chordError(a: Key, b: Key, p: Key): number {
+  const dt = b.t - a.t;
+  const vAt = dt < 1e-9 ? a.v : a.v + ((b.v - a.v) * (p.t - a.t)) / dt;
+  return Math.abs(p.v - vAt);
+}
+
+/**
+ * Ramer–Douglas–Peucker on a value-over-time polyline, using vertical (linear-
+ * interpolation) error in the value's own units (pixels) — so `eps` is exactly
+ * "max pixels the drawn cursor may drift from the recorded path". Keeps the
+ * points where the curve actually bends; a straight or held stretch collapses to
+ * its endpoints. Iterative to avoid deep recursion on long inputs.
+ */
+function rdp(keys: Key[], eps: number): Key[] {
+  const n = keys.length;
+  if (n <= 2) return keys.slice();
+  const keep = new Uint8Array(n);
+  keep[0] = 1;
+  keep[n - 1] = 1;
+  const stack: Array<[number, number]> = [[0, n - 1]];
+  while (stack.length) {
+    const [lo, hi] = stack.pop()!;
+    if (hi - lo < 2) continue;
+    let maxErr = -1;
+    let idx = -1;
+    for (let i = lo + 1; i < hi; i++) {
+      const e = chordError(keys[lo], keys[hi], keys[i]);
+      if (e > maxErr) {
+        maxErr = e;
+        idx = i;
+      }
+    }
+    if (maxErr > eps && idx >= 0) {
+      keep[idx] = 1;
+      stack.push([lo, idx], [idx, hi]);
+    }
+  }
+  const out: Key[] = [];
+  for (let i = 0; i < n; i++) if (keep[i]) out.push(keys[i]);
+  return out;
+}
+
+/**
+ * Simplify one axis to at most KEY_BUDGET keys: start at a sub-pixel epsilon and
+ * grow it until the point count fits, so a busy path just drifts a pixel or two
+ * more rather than blowing the expression budget.
+ */
+function simplifyAxis(keys: Key[]): Key[] {
+  if (keys.length <= KEY_BUDGET) {
+    const r = rdp(keys, 1.2);
+    if (r.length <= KEY_BUDGET) return r;
+  }
+  let eps = 1.2;
+  for (let i = 0; i < 24; i++) {
+    const r = rdp(keys, eps);
+    if (r.length <= KEY_BUDGET) return r;
+    eps *= 1.6;
+  }
+  // Backstop: uniform thin (should never be reached for a real cursor path).
+  const step = Math.ceil(keys.length / KEY_BUDGET);
+  const out = keys.filter((_, i) => i % step === 0);
+  if (out[out.length - 1] !== keys[keys.length - 1]) out.push(keys[keys.length - 1]);
+  return out;
+}
+
+/**
+ * Piecewise-linear expression over overlay's `t` (seconds): holds the first
+ * value before the first key, linearly interpolates between keys, holds the last
+ * value after the last.
+ *
+ * Emitted as a FLAT sum of half-open gated segments — NOT nested `if`s. A path
+ * has dozens–hundreds of keys, and ffmpeg's expression parser blows its nesting
+ * limit ("Missing ')' or too many args") a hundred `if`s deep (zoom.ts gets away
+ * with nested `if` only because it has a handful of keys). Each segment
+ * [t_i, t_{i+1}) contributes `gte(t,t_i)*lt(t,t_{i+1})*(v_i + slope*(t-t_i))`;
+ * the gates are disjoint half-open intervals so exactly one term is live at a
+ * time. Depth stays ~3 regardless of key count.
+ */
+function piecewiseLinear(keys: Key[]): string {
+  if (keys.length === 1) return num(keys[0].v);
+  const first = keys[0];
+  const last = keys[keys.length - 1];
+  const terms: string[] = [`lt(t,${num(first.t)})*${num(first.v)}`];
+  for (let i = 0; i < keys.length - 1; i++) {
+    const a = keys[i];
+    const b = keys[i + 1];
+    const dt = b.t - a.t;
+    const gate = `gte(t,${num(a.t)})*lt(t,${num(b.t)})`;
+    if (a.v === b.v || dt < 1e-6) {
+      terms.push(`${gate}*${num(a.v)}`);
+    } else {
+      const slope = (b.v - a.v) / dt;
+      terms.push(`${gate}*(${num(a.v)}+(${num(slope)})*(t-${num(a.t)}))`);
+    }
+  }
+  terms.push(`gte(t,${num(last.t)})*${num(last.v)}`);
+  return terms.join("+");
+}
+
+/**
+ * Build the `-filter_complex` string overlaying the cursor PNG (input 1) onto
+ * the content (input 0) along `rawPts`, hidden during `hideWindows`. Returns
+ * null when there's nothing to draw (no samples). The PNG's top-left tracks the
+ * point — the same anchor the baked cursor used (translate(x,y)), so the arrow
+ * tip lands identically.
+ */
+export function buildCursorFilter(
+  rawPts: CursorPoint[],
+  hideWindows: HideWindow[] = []
+): string | null {
+  if (rawPts.length === 0) return null;
+  const sorted = [...rawPts].sort((p, q) => p.t - q.t);
+  // Strictly-increasing time so each segment has a positive span.
+  const mono: CursorPoint[] = [];
+  for (const p of sorted) {
+    const last = mono[mono.length - 1];
+    mono.push(last && p.t <= last.t ? { ...p, t: last.t + 0.001 } : p);
+  }
+  // Simplify each axis independently (X and Y are separate expressions) so each
+  // stays under the ffmpeg expression budget.
+  const X = piecewiseLinear(simplifyAxis(mono.map((p) => ({ t: p.t, v: p.x }))));
+  const Y = piecewiseLinear(simplifyAxis(mono.map((p) => ({ t: p.t, v: p.y }))));
+
+  // enable is single-quoted so the commas inside between()/not() are literal,
+  // not filtergraph separators (same reason zoom single-quotes its expressions).
+  let enable = "";
+  if (hideWindows.length) {
+    const terms = hideWindows
+      .map((w) => `between(t,${num(w.a)},${num(w.b)})`)
+      .join("+");
+    enable = `:enable='not(${terms})'`;
+  }
+  return `[0:v][1:v]overlay=x='${X}':y='${Y}':eval=frame${enable}[vout]`;
+}

package/src/cursor.ts

@@ -0,0 +1,134 @@
+import { chromium } from "playwright";
+
+/**
+ * The classic arrow pointer, shared by both cursor render paths so they look
+ * identical: the record-time BAKED cursor (cursorInitScript, injected into the
+ * page) and the compose-time OVERLAY cursor (renderCursorPng, rasterized and
+ * overlaid by compose when a storyboard opts into `cursor` control). 24x24
+ * viewBox; the visual tip sits near (5,2). Fill white, dark stroke, soft shadow.
+ */
+export const CURSOR_ARROW_PATH = "M5 2 L5 20 L10 15 L13 22 L16 21 L13 14 L20 14 Z";
+const CURSOR_FILL = "#ffffff";
+const CURSOR_STROKE = "#111111";
+
+/**
+ * Rasterize the arrow pointer to a transparent PNG for the compose-time cursor
+ * overlay (see src/cursor-overlay.ts). Same trick as the card/caption renderers:
+ * headless Chrome screenshots an SVG so the overlay pointer matches the baked
+ * one. The arrow is drawn in the top-left of a padded canvas (room for the drop
+ * shadow) with its tip at ~(5,2) — the same anchor as the baked cursor, so the
+ * overlay lands where the baked cursor would have. `sizePx` is the rendered
+ * width/height in output pixels (24 logical units * pxScale * cursor scale).
+ */
+export async function renderCursorPng(
+  outPath: string,
+  sizePx: number
+): Promise<void> {
+  // Logical canvas is 32 units (24 arrow + shadow headroom); scale to sizePx.
+  const LOGICAL = 32;
+  const dsf = Math.max(1, sizePx / LOGICAL);
+  const browser = await chromium.launch({ channel: "chrome", headless: true });
+  const context = await browser.newContext({
+    viewport: { width: LOGICAL, height: LOGICAL },
+    deviceScaleFactor: dsf,
+  });
+  const page = await context.newPage();
+  try {
+    await page.setContent(
+      `<!doctype html><html><head><meta charset="utf-8"><style>
+        html,body{margin:0;padding:0;background:transparent;}
+        svg{position:absolute;left:0;top:0;
+          filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));}
+      </style></head><body>
+        <svg width="${LOGICAL}" height="${LOGICAL}" viewBox="0 0 ${LOGICAL} ${LOGICAL}"
+             xmlns="http://www.w3.org/2000/svg">
+          <path d="${CURSOR_ARROW_PATH}" fill="${CURSOR_FILL}"
+            stroke="${CURSOR_STROKE}" stroke-width="1.3" stroke-linejoin="round"/>
+        </svg>
+      </body></html>`,
+      { waitUntil: "load" }
+    );
+    await page.screenshot({ path: outPath, omitBackground: true });
+  } finally {
+    await browser.close();
+  }
+}
+
+/**
+ * Injected into every frame (main page + widget iframes) via addInitScript.
+ * Playwright's built-in video does not capture the OS cursor and its mouse moves
+ * teleport, so we render our own cursor: an SVG pointer that follows mousemove
+ * events (which our eased player emits as many small steps) and pulses a ripple
+ * on mousedown. Each frame renders its own cursor; only the one under the
+ * pointer is visible at a time, so there is no double-cursor.
+ *
+ * This is the DEFAULT (baked) path. A storyboard with a `cursor` block skips
+ * this injection and draws the cursor at compose time instead (renderCursorPng
+ * + src/cursor-overlay.ts), so hide/resize is a recompose, not a re-record.
+ */
+export function cursorInitScript(): string {
+  // Serialized as a string so it runs in the page context with no closure deps.
+  return `(() => {
+    if (window.__aidemoCursor) return;
+    window.__aidemoCursor = true;
+
+    const NS = 'http://www.w3.org/2000/svg';
+    const style = document.createElement('style');
+    style.textContent = \`
+      .__aidemo-cursor{position:fixed;left:0;top:0;width:24px;height:24px;
+        z-index:2147483647;pointer-events:none;opacity:0;
+        transition:opacity .15s ease;will-change:transform;
+        filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));}
+      .__aidemo-ripple{position:fixed;left:0;top:0;width:14px;height:14px;
+        margin:-7px 0 0 -7px;border-radius:50%;
+        background:rgba(56,132,255,.45);z-index:2147483646;pointer-events:none;
+        transform:scale(.2);opacity:.9;}
+      @keyframes __aidemo-ripple-anim{
+        from{transform:scale(.2);opacity:.9}
+        to{transform:scale(2.6);opacity:0}}
+    \`;
+    const mount = () => {
+      if (!document.documentElement) return;
+      document.documentElement.appendChild(style);
+
+      const svg = document.createElementNS(NS, 'svg');
+      svg.setAttribute('class', '__aidemo-cursor');
+      svg.setAttribute('viewBox', '0 0 24 24');
+      const path = document.createElementNS(NS, 'path');
+      // Classic arrow pointer (shared with the compose-time overlay).
+      path.setAttribute('d', '${CURSOR_ARROW_PATH}');
+      path.setAttribute('fill', '${CURSOR_FILL}');
+      path.setAttribute('stroke', '${CURSOR_STROKE}');
+      path.setAttribute('stroke-width', '1.3');
+      path.setAttribute('stroke-linejoin', 'round');
+      svg.appendChild(path);
+      document.documentElement.appendChild(svg);
+
+      let x = window.innerWidth / 2, y = window.innerHeight / 2;
+      const place = () => { svg.style.transform = 'translate(' + x + 'px,' + y + 'px)'; };
+      place();
+
+      window.addEventListener('mousemove', (e) => {
+        x = e.clientX; y = e.clientY;
+        svg.style.opacity = '1';
+        place();
+      }, true);
+
+      window.addEventListener('mousedown', (e) => {
+        const r = document.createElement('div');
+        r.className = '__aidemo-ripple';
+        r.style.transform = 'translate(' + e.clientX + 'px,' + e.clientY + 'px) scale(.2)';
+        r.style.animation = '__aidemo-ripple-anim .5s ease-out forwards';
+        // account for the -7px margin by translating to the point
+        r.style.left = e.clientX + 'px';
+        r.style.top = e.clientY + 'px';
+        r.style.transform = 'scale(.2)';
+        document.documentElement.appendChild(r);
+        setTimeout(() => r.remove(), 550);
+      }, true);
+    };
+
+    if (document.documentElement) mount();
+    else document.addEventListener('DOMContentLoaded', mount);
+  })();`;
+}