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
62 lines
2.3 KiB
Svelte
62 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import type { FxOf } from "../fx";
|
|
import { center } from "./geom";
|
|
let { fx }: { fx: FxOf<"thorn-snap"> } = $props();
|
|
const c = $derived(center(fx.at));
|
|
</script>
|
|
|
|
<g class="bush" style={`transform-origin: ${c.x}px ${c.y + 10}px`}>
|
|
<!-- Three springing branches, thorn spurs along each -->
|
|
<g class="branch b0" style={`transform-origin: ${c.x}px ${c.y + 10}px`}>
|
|
<path d={`M ${c.x} ${c.y + 10} q -8 -10 -13 -20`} class="stem" />
|
|
<path d={`M ${c.x - 6} ${c.y + 1} l -5 -4 2 5 Z M ${c.x - 10} ${c.y - 6} l -5 -3 2 5 Z`} class="spur" />
|
|
</g>
|
|
<g class="branch b1" style={`transform-origin: ${c.x}px ${c.y + 10}px`}>
|
|
<path d={`M ${c.x} ${c.y + 10} q 1 -13 -1 -24`} class="stem" />
|
|
<path d={`M ${c.x} ${c.y - 2} l 6 -5 -2 6 Z M ${c.x - 1} ${c.y - 9} l -5 -5 2 6 Z`} class="spur" />
|
|
</g>
|
|
<g class="branch b2" style={`transform-origin: ${c.x}px ${c.y + 10}px`}>
|
|
<path d={`M ${c.x} ${c.y + 10} q 9 -9 15 -18`} class="stem" />
|
|
<path d={`M ${c.x + 7} ${c.y + 2} l 6 -4 -3 5 Z M ${c.x + 12} ${c.y - 4} l 6 -1 -3 4 Z`} class="spur" />
|
|
</g>
|
|
</g>
|
|
<g class="leaves">
|
|
<ellipse cx={c.x - 12} cy={c.y - 10} rx="3" ry="1.6" class="leaf" transform={`rotate(-30 ${c.x - 12} ${c.y - 10})`} />
|
|
<ellipse cx={c.x + 13} cy={c.y - 8} rx="2.6" ry="1.4" class="leaf late" transform={`rotate(40 ${c.x + 13} ${c.y - 8})`} />
|
|
</g>
|
|
|
|
<style>
|
|
.stem {
|
|
fill: none;
|
|
stroke: #467832;
|
|
stroke-width: 3.2;
|
|
stroke-linecap: round;
|
|
}
|
|
.spur {
|
|
fill: #2f5423;
|
|
stroke: #2f5423;
|
|
stroke-width: 1.6;
|
|
stroke-linecap: round;
|
|
}
|
|
.branch { animation: spring 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) forwards; opacity: 0; }
|
|
.branch.b1 { animation-delay: 0.05s; }
|
|
.branch.b2 { animation-delay: 0.1s; }
|
|
.bush { animation: bush-fade 0.7s ease-out forwards; }
|
|
.leaf { fill: #7fae55; animation: leaf-fall 0.7s ease-in 0.15s forwards; opacity: 0; }
|
|
.leaf.late { animation-delay: 0.24s; }
|
|
@keyframes spring {
|
|
0% { opacity: 0; transform: scaleY(0.15); }
|
|
60% { opacity: 1; transform: scaleY(1.12); }
|
|
100% { opacity: 1; transform: scaleY(1); }
|
|
}
|
|
@keyframes bush-fade {
|
|
0%, 70% { opacity: 1; }
|
|
100% { opacity: 0; }
|
|
}
|
|
@keyframes leaf-fall {
|
|
0% { opacity: 0; transform: translateY(0) rotate(0deg); }
|
|
25% { opacity: 0.9; }
|
|
100% { opacity: 0; transform: translateY(10px) rotate(50deg); }
|
|
}
|
|
</style>
|