Every flourish gets its own file, and a workshop to watch them in

The effects move out of Board.svelte into src/fx-sprites/ — one
component per flourish, markup and animation CSS together, so editing
the fireball means opening Fireball.svelte and nothing else. A
registry (index.ts) maps kind to sprite; Board renders through it.
The event mapping stays in fx.ts.

And a viewer: /?fx opens the Flourish Workshop — every sprite on a
labeled parchment tile, replaying on a 2.2-second beat. Under the dev
server, editing any sprite file hot-reloads the gallery mid-loop.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

packages/web/src/fx-sprites/Portal.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+  import type { FxOf } from "../fx";
+  import { CELL } from "./geom";
+  let { fx }: { fx: FxOf<"portal" | "portal-cell"> } = $props();
+</script>
+
+{#if fx.kind === "portal"}
+  {@const x1 = fx.side === "E" ? (fx.cell.x + 1) * CELL : fx.cell.x * CELL}
+  {@const y1 = fx.side === "S" ? (fx.cell.y + 1) * CELL : fx.cell.y * CELL}
+  {@const x2 = fx.side === "W" ? fx.cell.x * CELL : (fx.cell.x + 1) * CELL}
+  {@const y2 = fx.side === "N" ? fx.cell.y * CELL : (fx.cell.y + 1) * CELL}
+  <line {x1} {y1} {x2} {y2} class="portal glow" />
+  <line {x1} {y1} {x2} {y2} class="portal" />
+{:else}
+  <rect x={fx.at.x * CELL + 3} y={fx.at.y * CELL + 3}
+    width={CELL - 6} height={CELL - 6} rx="6" class="veil" />
+{/if}
+
+<style>
+  .portal {
+    stroke: #9be3e0;
+    stroke-width: 3;
+    stroke-dasharray: 6 5;
+    stroke-linecap: round;
+    filter: drop-shadow(0 0 4px rgba(155, 227, 224, 0.9));
+    animation: shimmer 0.95s ease-in-out forwards;
+  }
+  .portal.glow {
+    stroke: rgba(180, 138, 224, 0.5);
+    stroke-width: 9;
+    stroke-dasharray: none;
+    filter: blur(2px);
+    animation: breathe 0.95s ease-in-out forwards;
+  }
+  .veil {
+    fill: rgba(155, 227, 224, 0.12);
+    stroke: #9be3e0;
+    stroke-width: 2.5;
+    stroke-dasharray: 7 5;
+    filter: drop-shadow(0 0 4px rgba(155, 227, 224, 0.8));
+    animation: shimmer 0.95s ease-in-out forwards;
+  }
+  @keyframes shimmer {
+    0% { opacity: 0; stroke-dashoffset: 0; }
+    20% { opacity: 1; }
+    80% { opacity: 0.85; }
+    100% { opacity: 0; stroke-dashoffset: 34; }
+  }
+  @keyframes breathe {
+    0% { opacity: 0; }
+    30% { opacity: 0.8; }
+    100% { opacity: 0; }
+  }
+</style>