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>
53 lines
1.6 KiB
Svelte
53 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import type { FxOf } from "../fx";
|
|
import { center } from "./geom";
|
|
|
|
let { fx }: { fx: FxOf<"shield"> } = $props();
|
|
const uid = $props.id();
|
|
const c = $derived(center(fx.at));
|
|
</script>
|
|
|
|
<defs>
|
|
<radialGradient id={`shield-dome-${uid}`}>
|
|
<stop offset="0" stop-color="#ffe9a3" stop-opacity="0" />
|
|
<stop offset="0.75" stop-color="#ffdf7a" stop-opacity="0.25" />
|
|
<stop offset="1" stop-color="#c9a72a" stop-opacity="0.9" />
|
|
</radialGradient>
|
|
<filter id={`shield-glow-${uid}`} x="-80%" y="-80%" width="260%" height="260%">
|
|
<feGaussianBlur stdDeviation="3" result="blur" />
|
|
<feMerge><feMergeNode in="blur" /><feMergeNode in="SourceGraphic" /></feMerge>
|
|
</filter>
|
|
</defs>
|
|
|
|
<circle cx={c.x} cy={c.y} r="16" fill={`url(#shield-dome-${uid})`} class="dome" filter={`url(#shield-glow-${uid})`} />
|
|
<circle cx={c.x} cy={c.y} r="16" class="rim" />
|
|
|
|
<style>
|
|
.dome {
|
|
transform-box: fill-box;
|
|
transform-origin: center;
|
|
animation: dome 0.7s ease-out forwards;
|
|
}
|
|
.rim {
|
|
transform-box: fill-box;
|
|
transform-origin: center;
|
|
fill: none;
|
|
stroke: #fff3c4;
|
|
stroke-width: 2;
|
|
animation: rim-strike 0.7s ease-out forwards;
|
|
}
|
|
@keyframes dome {
|
|
0% { opacity: 0; transform: scale(0.6); }
|
|
30% { opacity: 1; transform: scale(1.1); }
|
|
60% { transform: scale(0.95); }
|
|
100% { opacity: 0; transform: scale(1.15); }
|
|
}
|
|
@keyframes rim-strike {
|
|
0% { opacity: 0; transform: scale(0.6); }
|
|
28% { opacity: 1; transform: scale(1.12); }
|
|
45% { opacity: 0.4; }
|
|
58% { opacity: 0.9; transform: scale(0.95); }
|
|
100% { opacity: 0; transform: scale(1.18); }
|
|
}
|
|
</style>
|