Eric WagonerandClaude Fable 5.1
8dfd0e0c29
Eric repainted the maze. The first-person materials are painterly sandstone, flagstone, and iron; the hand-drawn token set is redrawn with matching chests and hats; the standing conjurations — hedges, jello, dust, safe, warp light — and the effect billboards are redone in the same hand; and the board's flourishes trade their filters and gradients for flat cel silhouettes cut from five shared shapes, which read better against the counters and cost a phone nothing. Thirty scene goldens re-blessed against the new walls. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Jm2auWk6RP71CjaAb4FMoG
54 lines
1.8 KiB
Svelte
54 lines
1.8 KiB
Svelte
<script lang="ts">
|
|
import type { FxOf } from "../fx";
|
|
import { center, impact, drop } from "./geom";
|
|
|
|
let { fx }: { fx: FxOf<"burst"> } = $props();
|
|
const c = $derived(center(fx.at));
|
|
const EMBERS = [15, 80, 145, 210, 275, 340];
|
|
</script>
|
|
|
|
<g class="bloom" style={`transform-origin: ${c.x}px ${c.y}px`}>
|
|
<path d={`M ${c.x-14} ${c.y+3} q -10 -12 1 -14 q -1 7 6 5 q -7 -16 4 -16 q -2 8 5 9 q 6 -11 12 -3 q -8 1 -3 7 q 14 -3 12 7 q -7 -5 -10 2 q 8 10 -2 13 q 0 -8 -6 -7 q -7 10 -13 3 q 6 -1 3 -6 q -11 7 -13 0 Z`} fill="#d55224" stroke="#833521" stroke-width="0.6" />
|
|
<path d={impact(c.x,c.y,15)} fill="#ffb83f" />
|
|
<path d={impact(c.x,c.y,7)} fill="#fff0b8" />
|
|
</g>
|
|
<path d={`M ${c.x-6} ${c.y-1} q 2 -6 7 -4 M ${c.x+5} ${c.y+1} q -2 5 -6 4`} class="shockwave" />
|
|
{#each EMBERS as deg (deg)}
|
|
<path d={drop(c.x + 13 * Math.cos((deg * Math.PI) / 180), c.y + 13 * Math.sin((deg * Math.PI) / 180), deg % 2 === 0 ? 2 : 1.5)}
|
|
class="ember"
|
|
style={`transform-origin: ${c.x}px ${c.y}px`}
|
|
/>
|
|
{/each}
|
|
|
|
<style>
|
|
.bloom {
|
|
animation: bloom 0.5s ease-out forwards;
|
|
}
|
|
.shockwave {
|
|
transform-box: fill-box;
|
|
transform-origin: center;
|
|
fill: none;
|
|
stroke: #ffd27a;
|
|
stroke-width: 2.5;
|
|
animation: shockwave 0.45s ease-out 0.08s forwards;
|
|
opacity: 0;
|
|
}
|
|
.ember {
|
|
fill: #ff9d19;
|
|
animation: ember-fly 0.55s ease-out forwards;
|
|
}
|
|
@keyframes bloom {
|
|
0% { opacity: 0; transform: scale(0.2); }
|
|
25% { opacity: 1; transform: scale(1.2); }
|
|
100% { opacity: 0; transform: scale(2.4); }
|
|
}
|
|
@keyframes shockwave {
|
|
0% { opacity: 0.9; transform: scale(1); }
|
|
100% { opacity: 0; transform: scale(6); }
|
|
}
|
|
@keyframes ember-fly {
|
|
0% { opacity: 1; transform: scale(1); }
|
|
100% { opacity: 0; transform: scale(2.1) rotate(24deg); }
|
|
}
|
|
</style>
|