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
45 lines
1.3 KiB
Svelte
45 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import type { FxOf } from "../fx";
|
|
import { center } from "./geom";
|
|
let { fx }: { fx: FxOf<"tacks-ow"> } = $props();
|
|
const c = $derived(center(fx.at));
|
|
// Each tack: head disc + spike, at its own angle and beat.
|
|
const TACKS = [
|
|
{ x: -10, y: -4, rot: -18, cls: "" },
|
|
{ x: 5, y: -9, rot: 12, cls: "late" },
|
|
{ x: -1, y: 5, rot: -5, cls: "later" },
|
|
];
|
|
</script>
|
|
|
|
{#each TACKS as t (t.cls)}
|
|
<g transform={`translate(${c.x + t.x} ${c.y + t.y}) rotate(${t.rot})`}>
|
|
<g class={`tack ${t.cls}`}>
|
|
<path d="M -4 3 Q -4 0 0 0 Q 5 1 4 4 Q 0 7 -4 3 Z" class="head" />
|
|
<path d="M -2.1 1.5 L 0 -7.5 L 2.1 1.5 z" class="spike" />
|
|
<path d="M 0 -6 L 0 1" stroke="#efe8d4" stroke-width="0.6" />
|
|
</g>
|
|
</g>
|
|
{/each}
|
|
|
|
<style>
|
|
.tack .head {
|
|
fill: #8a2f24;
|
|
stroke: #5c1c14;
|
|
stroke-width: 0.8;
|
|
}
|
|
.tack .spike { fill: #b9b3a4; stroke: #6e6450; stroke-width: 0.5; }
|
|
.tack {
|
|
opacity: 0;
|
|
animation: tack-hop 0.55s ease-out forwards;
|
|
}
|
|
.tack.late { animation-delay: 0.1s; }
|
|
.tack.later { animation-delay: 0.2s; }
|
|
@keyframes tack-hop {
|
|
0% { opacity: 0; transform: translateY(4px); }
|
|
22% { opacity: 1; transform: translateY(-10px); }
|
|
50% { transform: translateY(-2px); }
|
|
72% { transform: translateY(-7px); }
|
|
100% { opacity: 0; transform: translateY(-2px); }
|
|
}
|
|
</style>
|