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/TacksOw.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { FxOf } from "../fx";
+  import { center } from "./geom";
+  let { fx }: { fx: FxOf<"tacks-ow"> } = $props();
+  const c = $derived(center(fx.at));
+</script>
+
+<g class="tacks">
+  <text x={c.x - 10} y={c.y - 4}>✱</text>
+  <text x={c.x + 4} y={c.y - 10} class="late">✱</text>
+  <text x={c.x - 2} y={c.y + 6} class="later">✱</text>
+</g>
+
+<style>
+  .tacks text {
+    font-size: 13px;
+    fill: #b3372b;
+    animation: hop 0.6s ease-out forwards;
+  }
+  .tacks .late { animation-delay: 0.1s; opacity: 0; }
+  .tacks .later { animation-delay: 0.2s; opacity: 0; }
+  @keyframes hop {
+    0% { opacity: 0; transform: translateY(2px); }
+    30% { opacity: 1; transform: translateY(-5px); }
+    60% { transform: translateY(-1px); }
+    100% { opacity: 0; transform: translateY(-8px); }
+  }
+</style>