diff --git a/packages/web/src/Replay.svelte b/packages/web/src/Replay.svelte
index d142b30..973ff1a 100644
--- a/packages/web/src/Replay.svelte
+++ b/packages/web/src/Replay.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import Board from "./Board.svelte";
   import { humanize } from "./net.svelte";
+  import { fxForEvents, fxTtl, type BoardFx } from "./fx";
   import type { GameEvent, GameView } from "@wizwar/engine";
 
   let {
@@ -20,6 +21,21 @@
   );
   const atEnd = $derived(idx >= steps.length - 1);
 
+  /** Each step's spells flare on the reel exactly as they did at the table. */
+  let boardFx = $state<BoardFx[]>([]);
+  $effect(() => {
+    const step = steps[Math.min(idx, steps.length - 1)];
+    if (!step) return;
+    const timers: ReturnType<typeof setTimeout>[] = [];
+    for (const { fx, delay } of fxForEvents(step.events, step.view)) {
+      timers.push(setTimeout(() => {
+        boardFx = [...boardFx, fx];
+        timers.push(setTimeout(() => (boardFx = boardFx.filter((f) => f.id !== fx.id)), fxTtl(fx.kind)));
+      }, delay));
+    }
+    return () => { timers.forEach(clearTimeout); boardFx = []; };
+  });
+
   $effect(() => {
     if (!playing) return;
     const t = setInterval(() => {
@@ -47,7 +63,7 @@
       <button class="replay-skip" onclick={onclose}>{atEnd ? "back to the game" : "skip to now"}</button>
     </header>
     <div class="replay-board">
-      <Board view={step.view} />
+      <Board view={step.view} effects={boardFx} />
     </div>
     <div class="replay-caption">
       <strong>{step.actor}</strong>