eric/wizwar6e
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

The pit reads as depth, not a dot

Browse Source 
Its hole was a near-black disc that sat on the parchment like spilled
ink. Now an earthen gradient ellipse, offset toward the far wall,
with the far lip catching the light — a hole you look INTO.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
Eric Wagoner
2026-08-17 10:19:28 -04:00
co-authored by Claude Fable 5
parent 308f1b6ff9
commit a88cae3a0e
1 changed files with 15 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/fx-sprites/PitFall.svelte
+15 -5
View File
@@ -8,14 +8,17 @@
</script>
<defs>
<radialGradient id={`pit-hole-${uid}`}>
<stop offset="0" stop-color="#0c0905" />
<stop offset="0.75" stop-color="#241b10" />
<stop offset="1" stop-color="#241b10" stop-opacity="0" />
<radialGradient id={`pit-hole-${uid}`} cy="0.42">
<stop offset="0" stop-color="#1a130a" />
<stop offset="0.55" stop-color="#3a2c1a" stop-opacity="0.9" />
<stop offset="0.85" stop-color="#5f4a33" stop-opacity="0.55" />
<stop offset="1" stop-color="#5f4a33" stop-opacity="0" />
</radialGradient>
</defs>
<circle cx={c.x} cy={c.y} r="14" fill={`url(#pit-hole-${uid})`} class="hole" />
<ellipse cx={c.x} cy={c.y} rx="14" ry="11" fill={`url(#pit-hole-${uid})`} class="hole" />
<!-- The far lip catches the light: reads as depth, not a dot -->
<path d={`M ${c.x - 10} ${c.y - 5} a 12 8 0 0 1 20 0`} class="lip" />
<circle cx={c.x} cy={c.y - 2} r="8" class="faller" style={`transform-origin: ${c.x}px ${c.y}px`} />
<g class="rim-dust">
<circle cx={c.x - 11} cy={c.y - 6} r="3" class="dust" />
@@ -33,6 +36,13 @@
fill: rgba(120, 100, 70, 0.85);
animation: fall-in 0.55s ease-in 0.06s forwards;
}
.lip {
fill: none;
stroke: rgba(233, 225, 203, 0.7);
stroke-width: 1.6;
stroke-linecap: round;
animation: hole-open 0.75s ease-out forwards;
}
.dust { fill: rgba(160, 150, 130, 0.75); animation: dust-drift 0.7s ease-out 0.15s forwards; opacity: 0; }
.dust.late { animation-delay: 0.24s; }
.dust.later { animation-delay: 0.32s; }