Eric WagonerandClaude Fable 5
308f1b6ff9
Eric's fireball lands as the house style — layered construction, gradient core, glow halo, a directional tail riding rotate="auto" — with its defs scoped per instance via $props.id(), so simultaneous fireballs cannot steal each other's gradients. The rest of the catalog is rebuilt in its image: the waterbolt becomes its cold sibling (spray tail, no turbulence — one heavy filter stack is enough); lightning grows a glowing core and branching forks; the burst blooms through a fire gradient with a shockwave and flying embers; the splash throws a crown of droplets; the shield raises a gradient dome with a rim strike; the pow star flashes white and radiates speed dashes; claws leave tapered gashes; the absorbed card spirals in along a pull ring; the soul is a proper little ghost with eyes, swaying as it rises; fireworks ride colored trails; Chaos catches card slips in its vortex; the pit opens a gradient hole that swallows a faller; ooze splats and flings blobs; the thornbush sheds leaves; slime closes over and pops bubbles; masonry dust goes soft with falling grit. Whiff, tacks, portal, and the sector ghosts keep their simpler forms on purpose — restraint is part of the style. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
46 lines
1.4 KiB
Svelte
46 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
import type { FxOf } from "../fx";
|
|
import { center } from "./geom";
|
|
|
|
let { fx }: { fx: FxOf<"chaos-swirl"> } = $props();
|
|
const c = $derived(center(fx.at));
|
|
const CARDS = [0, 72, 144, 216, 288];
|
|
</script>
|
|
|
|
<g class="chaos" style={`transform-origin: ${c.x}px ${c.y}px`}>
|
|
<circle cx={c.x} cy={c.y} r="30" class="ring inner" />
|
|
<circle cx={c.x} cy={c.y} r="55" class="ring mid" />
|
|
<circle cx={c.x} cy={c.y} r="80" class="ring outer" />
|
|
{#each CARDS as deg (deg)}
|
|
<rect
|
|
x={c.x + 46 * Math.cos((deg * Math.PI) / 180) - 5}
|
|
y={c.y + 46 * Math.sin((deg * Math.PI) / 180) - 7}
|
|
width="10" height="14" rx="1.5"
|
|
class="slip"
|
|
transform={`rotate(${deg + 25} ${c.x + 46 * Math.cos((deg * Math.PI) / 180)} ${c.y + 46 * Math.sin((deg * Math.PI) / 180)})`}
|
|
/>
|
|
{/each}
|
|
</g>
|
|
|
|
<style>
|
|
.ring {
|
|
fill: none;
|
|
stroke-width: 4;
|
|
stroke-dasharray: 30 22;
|
|
}
|
|
.ring.inner { stroke: #b48ae0; }
|
|
.ring.mid { stroke: #8a5fc0; stroke-dasharray: 44 30; }
|
|
.ring.outer { stroke: #e2c8ff; stroke-dasharray: 60 40; }
|
|
.slip {
|
|
fill: #f6f0df;
|
|
stroke: #43331f;
|
|
stroke-width: 1;
|
|
}
|
|
.chaos { animation: chaos-spin 1.4s ease-in-out forwards; }
|
|
@keyframes chaos-spin {
|
|
0% { opacity: 0; transform: rotate(0deg) scale(0.5); }
|
|
20% { opacity: 1; }
|
|
100% { opacity: 0; transform: rotate(220deg) scale(1.4); }
|
|
}
|
|
</style>
|