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
39 lines
1.1 KiB
Svelte
39 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import type { FxOf } from "../fx";
|
|
import { center } from "./geom";
|
|
|
|
let { fx }: { fx: FxOf<"absorb"> } = $props();
|
|
const c = $derived(center(fx.at));
|
|
</script>
|
|
|
|
<circle cx={c.x} cy={c.y} r="14" class="pull" />
|
|
<g class="card" style={`transform-origin: ${c.x}px ${c.y}px`}>
|
|
<path d={`M ${c.x-9} ${c.y-13} l 18 1 -1 25 -17 -1 Z`} fill="#f6f0df" />
|
|
<path d={`M ${c.x-5} ${c.y-8} l 10 0 -1 15 -9 1 Z M ${c.x} ${c.y-5} l 3 5 -3 5 -3 -5 Z`} fill="none" stroke="#967c55" stroke-width="0.8" />
|
|
</g>
|
|
|
|
<style>
|
|
.card {
|
|
stroke: #43331f;
|
|
stroke-width: 1.5;
|
|
animation: swallow 0.65s ease-in forwards;
|
|
}
|
|
.pull {
|
|
transform-box: fill-box;
|
|
transform-origin: center;
|
|
fill: none;
|
|
stroke: rgba(180, 138, 224, 0.6);
|
|
stroke-width: 2;
|
|
stroke-dasharray: 5 6;
|
|
animation: pull-in 0.6s ease-in forwards;
|
|
}
|
|
@keyframes swallow {
|
|
0% { opacity: 0.95; transform: scale(1) rotate(0deg); }
|
|
100% { opacity: 0; transform: scale(0.05) rotate(140deg); }
|
|
}
|
|
@keyframes pull-in {
|
|
0% { opacity: 0.8; transform: scale(1.6) rotate(0deg); }
|
|
100% { opacity: 0; transform: scale(0.2) rotate(-90deg); }
|
|
}
|
|
</style>
|