The workshop gains 'The standing fires': board furniture on display

FirewallEdge (both orientations), the illusion shimmer, and the sight
trace (direct and through-a-warp) join the /?fx gallery — and to keep
the display honest, the shimmer and sight trace were extracted from
Board.svelte's inline markup into IllusionShimmer.svelte and
SightTraceOverlay.svelte, so the workshop mounts the very components
the live board does. No copies to drift.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0138A8CjeQRpvzKxuMfz1Bqc
This commit is contained in:
Eric Wagoner
2026-08-18 09:13:31 -04:00
co-authored by Claude Fable 5
parent ce556b5508
commit ed7a58a698
4 changed files with 171 additions and 60 deletions
+42
View File
@@ -0,0 +1,42 @@
<script lang="ts">
// An UNTESTED illusion wall: the wall renders solid underneath (it is a
// wall to you until your eyes rule) — this is the tell-tale shimmer laid
// over it, and the tap target that offers the belief test.
let { x, y, kind, onclick }: {
x: number; y: number; kind: "V" | "H";
onclick?: () => void;
} = $props();
const CELL = 48;
const x1 = $derived(kind === "V" ? (x + 1) * CELL : x * CELL + 2);
const y1 = $derived(kind === "V" ? y * CELL + 2 : (y + 1) * CELL);
const x2 = $derived(kind === "V" ? (x + 1) * CELL : (x + 1) * CELL - 2);
const y2 = $derived(kind === "V" ? (y + 1) * CELL - 2 : (y + 1) * CELL);
</script>
<line {x1} {y1} {x2} {y2} class="illusion-shimmer" />
{#if onclick}
<line {x1} {y1} {x2} {y2} class="illusion-hit"
role="button" tabindex="-1" aria-label="a shimmering wall — test your eyes"
onclick={(ev) => { ev.stopPropagation(); onclick?.(); }}
onkeydown={() => {}} />
{/if}
<style>
.illusion-shimmer {
stroke: #cfc3f0;
stroke-width: 3;
stroke-dasharray: 4 5;
stroke-linecap: round;
pointer-events: none;
animation: shimmer-drift 1.4s linear infinite;
}
.illusion-hit { stroke: transparent; stroke-width: 14; cursor: pointer; }
@keyframes shimmer-drift {
0% { stroke-dashoffset: 0; opacity: 0.9; }
50% { opacity: 0.4; }
100% { stroke-dashoffset: -18; opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
.illusion-shimmer { animation: none; opacity: 0.7; }
}
</style>