@runtypelabs/persona 3.16.0 → 3.17.0

package/dist/widget.css

@@ -2824,3 +2824,136 @@
     transform: translateX(0);
   }
 }
+
+/* ============================================================
+   Stream animations — reveal effects for assistant message text
+   while streaming. Opt-in via `features.streamAnimation.type`.
+   Units are staggered via `--char-index` / `--word-index`
+   (set inline on each wrapper span). Timing is configured via
+   `--persona-stream-step` and `--persona-stream-duration` on
+   the `.persona-message-content` container.
+   ============================================================ */
+
+/* Per-char/per-word spans need to be inline-block so `transform` works for
+   the rise/fade animations. Each span animates from the moment it is first
+   added to the DOM — streaming itself provides the visible stagger, so the
+   CSS animation has no per-index delay. An index-based delay would compound
+   with the stream's arrival cadence and leave later chars permanently hidden. */
+[data-persona-root] .persona-stream-char,
+[data-persona-root] .persona-stream-word {
+  display: inline-block;
+  will-change: opacity, transform, filter;
+}
+
+/* Group chars belonging to the same word so the browser treats the word as a
+   single break unit. Without this, every inline-block char introduces a break
+   opportunity and words get split mid-letter during streaming, then snap back
+   when the final content replaces the wrapped spans. */
+[data-persona-root] .persona-stream-word-group {
+  white-space: nowrap;
+}
+
+/* ---------- typewriter: fade per arriving char + blinking caret ---------- */
+@keyframes persona-stream-typewriter-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+[data-persona-root] .persona-stream-typewriter .persona-stream-char {
+  animation: persona-stream-typewriter-in var(--persona-stream-step, 120ms) ease-out both;
+}
+
+/* ---------- letter-rise: per-char translateY + fade ---------- */
+@keyframes persona-stream-letter-rise {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+[data-persona-root] .persona-stream-letter-rise .persona-stream-char {
+  animation: persona-stream-letter-rise calc(var(--persona-stream-step, 120ms) * 2)
+    ease-out both;
+}
+
+/* ---------- word-fade: per-word blur + translateY fade-in ---------- */
+@keyframes persona-stream-word-fade {
+  from { opacity: 0; filter: blur(4px); transform: translateY(3px); }
+  to { opacity: 1; filter: blur(0); transform: translateY(0); }
+}
+[data-persona-root] .persona-stream-word-fade .persona-stream-word {
+  animation: persona-stream-word-fade calc(var(--persona-stream-step, 120ms) * 3)
+    ease-out both;
+}
+
+/* The following animations live in subpath plugin modules — their CSS is
+   injected by the plugin when activated, not by the core stylesheet:
+   - `wipe`        → @runtypelabs/persona/animations/wipe
+   - `glyph-cycle` → @runtypelabs/persona/animations/glyph-cycle */
+
+/* ---------- pop-bubble: scale + opacity entrance on the bubble ---------- */
+@keyframes persona-stream-pop-in {
+  0%   { transform: scale(0.6); opacity: 0; }
+  100% { transform: scale(1);   opacity: 1; }
+}
+[data-persona-root] .persona-stream-pop {
+  transform-origin: bottom left;
+  animation: persona-stream-pop-in 400ms cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
+}
+
+/* ---------- caret used by typewriter ---------- */
+@keyframes persona-stream-blink {
+  0%, 50%      { opacity: 1; }
+  50.01%, 100% { opacity: 0; }
+}
+[data-persona-root] .persona-stream-caret {
+  display: inline-block;
+  width: 2px;
+  height: 1em;
+  margin-left: 1px;
+  vertical-align: -2px;
+  background: currentColor;
+  animation: persona-stream-blink 1s steps(1) infinite;
+}
+
+/* ---------- skeleton placeholder (pre-first-token) ---------- */
+@keyframes persona-stream-skeleton-shimmer {
+  0%   { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+[data-persona-root] .persona-stream-skeleton {
+  padding: 2px 0;
+  /* The assistant bubble sizes to content. Give the skeleton an intrinsic
+     width so the bubble expands; the bubble's own `max-width: 85%` clamps
+     the upper bound. */
+  width: 260px;
+  max-width: 100%;
+}
+[data-persona-root] .persona-stream-skeleton-line {
+  width: 100%;
+  height: 10px;
+  border-radius: 3px;
+  background: linear-gradient(
+    90deg,
+    color-mix(in srgb, currentColor 12%, transparent) 0%,
+    color-mix(in srgb, currentColor 22%, transparent) 50%,
+    color-mix(in srgb, currentColor 12%, transparent) 100%
+  );
+  background-size: 200% 100%;
+  animation: persona-stream-skeleton-shimmer 1.4s linear infinite;
+}
+
+/* ---------- reduced-motion: disable per-unit and container animations ---------- */
+@media (prefers-reduced-motion: reduce) {
+  [data-persona-root] .persona-stream-typewriter .persona-stream-char,
+  [data-persona-root] .persona-stream-letter-rise .persona-stream-char,
+  [data-persona-root] .persona-stream-word-fade .persona-stream-word,
+  [data-persona-root] .persona-stream-pop,
+  [data-persona-root] .persona-stream-caret,
+  [data-persona-root] .persona-stream-skeleton-line {
+    animation: none !important;
+    opacity: 1 !important;
+    filter: none !important;
+    transform: none !important;
+    color: inherit !important;
+    background: none !important;
+    -webkit-background-clip: border-box !important;
+            background-clip: border-box !important;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@runtypelabs/persona",
-  "version": "3.16.0",
+  "version": "3.17.0",
   "description": "Themeable, pluggable streaming agent widget for websites, in plain JS with support for voice input and reasoning / tool output.",
   "type": "module",
   "main": "dist/index.cjs",
@@ -22,6 +22,21 @@
       "import": "./dist/theme-editor.js",
       "require": "./dist/theme-editor.cjs"
     },
+    "./testing": {
+      "types": "./dist/testing.d.ts",
+      "import": "./dist/testing.js",
+      "require": "./dist/testing.cjs"
+    },
+    "./animations/glyph-cycle": {
+      "types": "./dist/animations/glyph-cycle.d.ts",
+      "import": "./dist/animations/glyph-cycle.js",
+      "require": "./dist/animations/glyph-cycle.cjs"
+    },
+    "./animations/wipe": {
+      "types": "./dist/animations/wipe.d.ts",
+      "import": "./dist/animations/wipe.js",
+      "require": "./dist/animations/wipe.cjs"
+    },
     "./widget.css": "./dist/widget.css"
   },
   "files": [
@@ -76,11 +91,13 @@
     "access": "public"
   },
   "scripts": {
-    "build": "rimraf dist && pnpm run build:styles && pnpm run build:client && pnpm run build:installer && pnpm run build:theme-ref && pnpm run build:theme-editor",
+    "build": "rimraf dist && pnpm run build:styles && pnpm run build:client && pnpm run build:installer && pnpm run build:theme-ref && pnpm run build:theme-editor && pnpm run build:testing && pnpm run build:animations",
     "build:theme-editor": "tsup src/theme-editor.ts --format esm,cjs --dts --out-dir dist --no-splitting",
+    "build:testing": "tsup src/testing.ts --format esm,cjs --dts --out-dir dist --no-splitting",
+    "build:animations": "tsup src/animations/glyph-cycle.ts src/animations/wipe.ts --format esm,cjs --dts --out-dir dist/animations --no-splitting",
     "build:theme-ref": "tsup src/theme-reference.ts --format esm,cjs --minify --dts",
     "build:styles": "node -e \"const fs=require('fs');fs.mkdirSync('dist',{recursive:true});fs.copyFileSync('src/styles/widget.css','dist/widget.css');\"",
-    "build:client": "tsup src/index.ts --format esm,cjs,iife --global-name AgentWidget --minify --sourcemap --splitting false --dts --loader \".css=text\"",
+    "build:client": "tsup src/index.ts --format esm,cjs --minify --sourcemap --splitting false --dts --loader \".css=text\" && tsup src/index-global.ts --format iife --global-name AgentWidget --minify --sourcemap --splitting false --out-dir dist --loader \".css=text\" && node -e \"const fs=require('fs');for(const ext of ['.global.js','.global.js.map']){const from='dist/index-global'+ext;if(fs.existsSync(from))fs.renameSync(from,'dist/index'+ext);}\"",
     "build:installer": "tsup src/install.ts --format iife --global-name SiteAgentInstaller --out-dir dist --minify --sourcemap --no-splitting",
     "lint": "eslint . --ext .ts",
     "typecheck": "tsc --noEmit",

package/src/animations/glyph-cycle.ts

@@ -0,0 +1,332 @@
+import type { StreamAnimationPlugin } from "../types";
+import { registerStreamAnimationPlugin } from "../utils/stream-animation";
+
+/**
+ * Glyph-cycle animation — "hacker-settling" reveal.
+ *
+ * Each arriving char briefly cycles through a sequence of random glyphs
+ * before locking in to its final character. Unlike a pure CSS effect, this
+ * needs JS because it mutates `textContent` per tick. To keep idiomorph from
+ * clobbering mid-cycle work, each cycling span carries
+ * `data-preserve-runtime="stream-glyph-cycle"` until its cycle completes —
+ * morph honors that attribute as an absolute skip marker.
+ *
+ * A short buffer (`BUFFER_THRESHOLD`) holds the bubble empty (with the
+ * typing indicator) until enough text has arrived to run a visible reveal.
+ * Once released, every char starts as a random glyph and settles in order
+ * from the start, staggered by one `--persona-stream-step` between chars.
+ * Live tokens arriving after release queue behind the stagger slot, so the
+ * settling wave flows through the full message.
+ *
+ * Ships as a subpath module so consumers who don't want it pay zero cost.
+ * Importing this module auto-registers the plugin globally — just add the
+ * import and set `features.streamAnimation.type = "glyph-cycle"`.
+ *
+ * ```ts
+ * import "@runtypelabs/persona/animations/glyph-cycle";
+ * createAgentExperience(el, {
+ *   features: { streamAnimation: { type: "glyph-cycle" } },
+ * });
+ * ```
+ */
+
+const STYLES = `
+[data-persona-root] .persona-stream-glyph-cycle .persona-stream-char {
+  animation: persona-stream-glyph-cycle-fade
+    calc(var(--persona-stream-step, 120ms) * 1.5) ease-out both;
+}
+[data-persona-root] .persona-stream-glyph-cycle .persona-stream-char[data-glyph-cycle-final] {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+@keyframes persona-stream-glyph-cycle-fade {
+  from { opacity: 0.35; }
+  to   { opacity: 1; }
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-persona-root] .persona-stream-glyph-cycle .persona-stream-char {
+    animation: none !important;
+    opacity: 1 !important;
+  }
+}
+`.trim();
+
+// Matches the source design: alphanumerics + a small set of symbols.
+const GLYPHS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#$%&@";
+const TICK_COUNT = 10;
+// Base interval between glyph swaps (ms). Scaled by the widget's configured
+// `speed` so the cycle feels coherent with the rest of the stream animation —
+// faster speed → snappier cycling, slower speed → more deliberate flicker.
+const BASE_TICK_MS = 120;
+const DEFAULT_STEP_MS = 120;
+// Probability that each later still-cycling sibling gets re-randomized on
+// every tick. Matches the source prototype's cross-glyph jitter feel.
+const CROSS_FLICKER_PROBABILITY = 0.4;
+// Hold the stream back until at least this many chars have arrived. Once
+// released, every char is rendered as a random glyph and settles in order
+// from the start — so the visible animation carries through the full text.
+const BUFFER_THRESHOLD = 50;
+
+const getStepMs = (container: HTMLElement | null): number => {
+  if (!container) return DEFAULT_STEP_MS;
+  const raw = container.style.getPropertyValue("--persona-stream-step")?.trim();
+  const match = raw.match(/([\d.]+)\s*ms/);
+  return match ? parseFloat(match[1]) : DEFAULT_STEP_MS;
+};
+
+const getTickMs = (span: HTMLElement): number => {
+  const container = span.closest(".persona-stream-glyph-cycle") as HTMLElement | null;
+  const step = getStepMs(container);
+  return (BASE_TICK_MS * step) / DEFAULT_STEP_MS;
+};
+
+const randomGlyph = (avoid?: string): string => {
+  let ch = GLYPHS[Math.floor(Math.random() * GLYPHS.length)];
+  // Don't settle on the same random glyph twice in a row (small visual cue
+  // that something is actually cycling).
+  if (avoid && ch === avoid) {
+    ch = GLYPHS[(GLYPHS.indexOf(ch) + 1) % GLYPHS.length];
+  }
+  return ch;
+};
+
+// Mirrors the source prototype's "lightly randomize later glyphs" step: while
+// a char is cycling, every not-yet-settled char after it in DOM order has a
+// chance to flicker too. Keeps the un-settled tail feeling alive.
+const flickerLaterSiblings = (span: HTMLElement): void => {
+  const container = span.closest(".persona-stream-glyph-cycle") as HTMLElement | null;
+  if (!container) return;
+  // Any scheduled char that still has its final char stashed is "pending
+  // or cycling" — both kinds are valid flicker targets. Settled chars have
+  // `data-glyph-cycle-final` deleted and are excluded.
+  const unsettled = container.querySelectorAll<HTMLElement>(
+    ".persona-stream-char[data-glyph-cycle-final]"
+  );
+  let seenSelf = false;
+  for (const other of Array.from(unsettled)) {
+    if (other === span) {
+      seenSelf = true;
+      continue;
+    }
+    if (!seenSelf) continue;
+    if (Math.random() < CROSS_FLICKER_PROBABILITY) {
+      other.textContent = randomGlyph();
+    }
+  }
+};
+
+// Per-container timestamp tracking: when the next char's cycle should settle.
+// Each char starts cycling immediately on schedule — no static placeholder
+// wait — and finishes when `Date.now() >= settleAt`. This slot advances by
+// one stagger step per schedule, so the burst settles left-to-right while
+// every char is visibly flickering from the moment it enters the DOM.
+const containerNextSettleAt = new WeakMap<Element, number>();
+
+// Adaptive stagger state. We measure the real interval between scheduleCycle
+// calls (= the stream's arrival cadence) and pace the glyph wave to it, a
+// touch faster (DRAIN_FACTOR < 1) so any initial burst queue drains down to
+// live-tracking instead of permanently lagging behind the live cursor.
+const DEFAULT_ARRIVAL_MS = 25;
+const STAGGER_DRAIN_FACTOR = 0.5;
+const MIN_STAGGER_MS = 6;
+const EMA_ALPHA = 0.25;
+const containerLastScheduleAt = new WeakMap<Element, number>();
+const containerArrivalMs = new WeakMap<Element, number>();
+
+const observeStagger = (container: Element | null, now: number): number => {
+  if (!container) return DEFAULT_ARRIVAL_MS * STAGGER_DRAIN_FACTOR;
+  const last = containerLastScheduleAt.get(container);
+  containerLastScheduleAt.set(container, now);
+  let observed = containerArrivalMs.get(container) ?? DEFAULT_ARRIVAL_MS;
+  if (last !== undefined) {
+    const interval = now - last;
+    // Skip near-zero intervals (burst within one MutationObserver batch) —
+    // they don't reflect the real stream cadence.
+    if (interval > 1) {
+      observed = observed * (1 - EMA_ALPHA) + interval * EMA_ALPHA;
+      containerArrivalMs.set(container, observed);
+    }
+  }
+  return Math.max(MIN_STAGGER_MS, observed * STAGGER_DRAIN_FACTOR);
+};
+
+// Per-message count of in-flight cycles (scheduled or actively ticking).
+// Used by `isAnimating()` so message-bubble keeps rendering in animated
+// mode until the cycle wave finishes, even after `message.streaming` is
+// false.
+const activeCyclesByMessage = new Map<string, number>();
+
+const getMessageId = (span: HTMLElement): string | null => {
+  const bubble = span.closest<HTMLElement>("[data-message-id]");
+  return bubble?.dataset.messageId ?? null;
+};
+
+const incrementActive = (messageId: string | null): void => {
+  if (!messageId) return;
+  activeCyclesByMessage.set(messageId, (activeCyclesByMessage.get(messageId) ?? 0) + 1);
+};
+
+const decrementActive = (messageId: string | null): void => {
+  if (!messageId) return;
+  const count = activeCyclesByMessage.get(messageId) ?? 0;
+  if (count <= 1) activeCyclesByMessage.delete(messageId);
+  else activeCyclesByMessage.set(messageId, count - 1);
+};
+
+const scheduleCycle = (span: HTMLElement): void => {
+  if (span.dataset.glyphCycleScheduled === "true") return;
+  const finalChar = span.textContent ?? "";
+  if (!finalChar || /\s/.test(finalChar)) return;
+
+  span.dataset.glyphCycleScheduled = "true";
+  // Stash the target char and immediately paint a random glyph so the span
+  // reads as "cycling" even before its staggered kickoff. Also opt out of
+  // morph — without this, streamed token re-renders would overwrite our
+  // placeholder glyph with the final char.
+  span.dataset.glyphCycleFinal = finalChar;
+  span.setAttribute("data-preserve-runtime", "stream-glyph-cycle");
+  span.textContent = randomGlyph();
+  // Record the owning message so `isAnimating()` can report in-flight work
+  // even after streaming has ended.
+  const messageId = getMessageId(span);
+  if (messageId) span.dataset.glyphCycleMessageId = messageId;
+  incrementActive(messageId);
+
+  const container = span.closest(".persona-stream-glyph-cycle") as HTMLElement | null;
+  const now = Date.now();
+  const staggerMs = observeStagger(container, now);
+  const tickMs = getTickMs(span);
+  const baseDurationMs = TICK_COUNT * tickMs;
+
+  // Settle time = later of (this char's own cycle ends) or (previous settle
+  // slot + one stagger step). The `max()` keeps left-to-right order during
+  // bursts, while post-drain live chars just get the base cycle.
+  let settleAt = now + baseDurationMs;
+  if (container) {
+    const prev = containerNextSettleAt.get(container);
+    if (prev !== undefined) settleAt = Math.max(settleAt, prev);
+    containerNextSettleAt.set(container, settleAt + staggerMs);
+  }
+
+  startCycle(span, finalChar, settleAt);
+};
+
+const startCycle = (
+  span: HTMLElement,
+  finalChar: string,
+  settleAt: number
+): void => {
+  if (span.dataset.glyphCycleStarted === "true") return;
+  span.dataset.glyphCycleStarted = "true";
+
+  const tickMs = getTickMs(span);
+  // Seed `lastGlyph` from the placeholder scheduleCycle painted, so the
+  // first real tick guarantees a different glyph.
+  let lastGlyph: string | undefined = span.textContent ?? undefined;
+  const step = () => {
+    if (!span.isConnected) return;
+    if (Date.now() >= settleAt) {
+      span.textContent = finalChar;
+      span.removeAttribute("data-preserve-runtime");
+      delete span.dataset.glyphCycleStarted;
+      delete span.dataset.glyphCycleFinal;
+      decrementActive(span.dataset.glyphCycleMessageId ?? null);
+      delete span.dataset.glyphCycleMessageId;
+      // Keep `data-glyph-cycle-scheduled` set so the MutationObserver and
+      // processCharSpans selectors skip settled chars on future re-morphs.
+      return;
+    }
+    const glyph = randomGlyph(lastGlyph);
+    span.textContent = glyph;
+    lastGlyph = glyph;
+    flickerLaterSiblings(span);
+    setTimeout(step, tickMs);
+  };
+  setTimeout(step, tickMs);
+};
+
+const processCharSpans = (root: Element | Document | ShadowRoot): void => {
+  const spans = root.querySelectorAll?.(
+    ".persona-stream-glyph-cycle .persona-stream-char:not([data-glyph-cycle-scheduled])"
+  );
+  if (!spans) return;
+  for (const span of Array.from(spans)) {
+    scheduleCycle(span as HTMLElement);
+  }
+};
+
+const isElement = (node: Node): node is HTMLElement => node.nodeType === 1;
+
+export const glyphCycle: StreamAnimationPlugin = {
+  name: "glyph-cycle",
+  containerClass: "persona-stream-glyph-cycle",
+  wrap: "char",
+  // Narrow the default skip list so inline `<code>` and fenced `<pre>`
+  // code blocks both render as cycling glyphs along with everything else.
+  // Links stay clickable; <script>/<style> stay untouched.
+  skipTags: ["a", "script", "style"],
+  styles: STYLES,
+  bufferContent(content) {
+    // Hold the bubble empty until we've accumulated enough text to run a
+    // visible cycle from the start.
+    if (content.length < BUFFER_THRESHOLD) return "";
+    // Then trim to the last "safe" whitespace: one that sits outside any
+    // unclosed `**bold**` pair. Without this, whitespace INSIDE a partial
+    // bold pair (e.g. the space between `template` and `literal` in
+    // `**template literal**`) would trigger a render of the partial
+    // `**template`, which markdown emits as literal asterisks, gets
+    // wrapped + marked `data-preserve-runtime`, and leaks through later
+    // morphs — the final structure can't reconcile.
+    let boldPairs = 0;
+    let lastSafe = -1;
+    let i = 0;
+    while (i < content.length) {
+      if (content[i] === "*" && content[i + 1] === "*") {
+        boldPairs += 1;
+        i += 2;
+        continue;
+      }
+      if (/\s/.test(content[i]) && boldPairs % 2 === 0) {
+        lastSafe = i;
+      }
+      i += 1;
+    }
+    if (lastSafe < 0) return "";
+    return content.slice(0, lastSafe);
+  },
+  isAnimating(message) {
+    return (activeCyclesByMessage.get(message.id) ?? 0) > 0;
+  },
+  onAttach(root) {
+    // Process any chars already in the DOM when the plugin activates.
+    processCharSpans(root as Element | Document | ShadowRoot);
+
+    const observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        for (const node of Array.from(mutation.addedNodes)) {
+          if (!isElement(node)) continue;
+          // Either the added node is a char span inside a glyph-cycle
+          // container, or it contains char spans (a word-group, paragraph,
+          // or whole bubble that was just morphed in).
+          if (
+            node.classList.contains("persona-stream-char") &&
+            node.closest(".persona-stream-glyph-cycle")
+          ) {
+            scheduleCycle(node);
+          } else {
+            processCharSpans(node);
+          }
+        }
+      }
+    });
+    observer.observe(root, { childList: true, subtree: true });
+
+    return () => observer.disconnect();
+  },
+};
+
+// Auto-register on import. ESM consumers get zero cost if they don't import;
+// once imported, the plugin is available globally by name without requiring
+// an explicit `plugins: { "glyph-cycle": glyphCycle }` config.
+registerStreamAnimationPlugin(glyphCycle);
+
+export default glyphCycle;

package/src/animations/wipe.ts

@@ -0,0 +1,66 @@
+import type { StreamAnimationPlugin } from "../types";
+import { registerStreamAnimationPlugin } from "../utils/stream-animation";
+
+/**
+ * Wipe animation — per-word left-to-right mask reveal.
+ *
+ * Each arriving word is revealed via a soft feathered mask that sweeps from
+ * right to left. Uses `mask-image` (not `background-clip: text`) so the
+ * text's normal color is preserved and nested markdown formatting works.
+ *
+ * ```ts
+ * import "@runtypelabs/persona/animations/wipe";
+ * createAgentExperience(el, {
+ *   features: { streamAnimation: { type: "wipe" } },
+ * });
+ * ```
+ */
+
+const STYLES = `
+@keyframes persona-stream-wipe {
+  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
+  to   { -webkit-mask-position: 0% 0;   mask-position: 0% 0;   }
+}
+[data-persona-root] .persona-stream-wipe .persona-stream-word {
+  -webkit-mask-image: linear-gradient(
+    90deg,
+    black 0%,
+    black 45%,
+    transparent 55%,
+    transparent 100%
+  );
+          mask-image: linear-gradient(
+    90deg,
+    black 0%,
+    black 45%,
+    transparent 55%,
+    transparent 100%
+  );
+  -webkit-mask-size: 200% 100%;
+          mask-size: 200% 100%;
+  -webkit-mask-position: 100% 0;
+          mask-position: 100% 0;
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+  animation: persona-stream-wipe calc(var(--persona-stream-step, 120ms) * 3)
+    ease-out forwards;
+}
+@media (prefers-reduced-motion: reduce) {
+  [data-persona-root] .persona-stream-wipe .persona-stream-word {
+    animation: none !important;
+    -webkit-mask-image: none !important;
+            mask-image: none !important;
+  }
+}
+`.trim();
+
+export const wipe: StreamAnimationPlugin = {
+  name: "wipe",
+  containerClass: "persona-stream-wipe",
+  wrap: "word",
+  styles: STYLES,
+};
+
+registerStreamAnimationPlugin(wipe);
+
+export default wipe;