Eric WagonerandClaude Fable 5
a59ecfa615
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>
34 lines
1.0 KiB
Svelte
34 lines
1.0 KiB
Svelte
<script lang="ts">
|
|
import type { FxOf } from "../fx";
|
|
import { center } from "./geom";
|
|
let { fx }: { fx: FxOf<"splash"> } = $props();
|
|
const c = $derived(center(fx.at));
|
|
</script>
|
|
|
|
<circle cx={c.x} cy={c.y} r="4" class="splash" />
|
|
<circle cx={c.x - 10} cy={c.y - 6} r="2.5" class="droplet" />
|
|
<circle cx={c.x + 9} cy={c.y - 8} r="2" class="droplet late" />
|
|
<circle cx={c.x + 3} cy={c.y - 12} r="1.8" class="droplet later" />
|
|
|
|
<style>
|
|
.splash {
|
|
transform-box: fill-box;
|
|
transform-origin: center;
|
|
fill: none;
|
|
stroke: #4fa3e3;
|
|
stroke-width: 3.5;
|
|
animation: ring 0.55s ease-out forwards;
|
|
}
|
|
.droplet { fill: #7cc0ee; animation: drop 0.6s ease-out forwards; }
|
|
.droplet.late { animation-delay: 0.08s; }
|
|
.droplet.later { animation-delay: 0.15s; }
|
|
@keyframes ring {
|
|
0% { opacity: 0.95; transform: scale(1); }
|
|
100% { opacity: 0; transform: scale(5); }
|
|
}
|
|
@keyframes drop {
|
|
0% { opacity: 0.9; transform: translateY(0); }
|
|
100% { opacity: 0; transform: translateY(-14px); }
|
|
}
|
|
</style>
|