wuwi/splatter-tennis
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

The shields glint instead of burning

Browse Source 
A chimney of rising embers on a trophy read as a fire. Three points ON the
shield now, dark for most of a long cycle and flaring for a fraction of it,
with delays and durations that share no common multiple — so a glint lands
somewhere on the row every couple of seconds and never in the same rhythm.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
wuwiandClaude Fable 5 committed 2026-08-31 15:56:08 +02:00
1 parent 87833db095
commit 57650160a6
3 files changed
+27 -25
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
+10 -11
View File
@@ -373,17 +373,16 @@ if (location.hostname !== 'splatter-tennis.wuwi.one' && !window.Capacitor?.isNat
align-items: center; gap: 4px; }
/* ...and an earned shield SMOULDERS: two-pixel embers drifting off it, each on its own delay and
lane (main.embers). Pure CSS — the menu parks the game loop and this has no business waking it. */
/* they lift off the shield's TOP EDGE into the dark above it — at the old bottom:22px the whole
flight happened ACROSS the artwork, where a 3px gold speck is invisible (Oliver saw nothing) */
#cdBadges .badge em { position: absolute; bottom: 52px; width: 3px; height: 3px; background: #fff2c9;
box-shadow: 0 0 6px 2px rgba(232,178,58,0.75);
opacity: 0; pointer-events: none; animation-name: ember;
animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes ember {
0% { transform: translate(0, 6px) scale(0.6); opacity: 0; }
20% { opacity: 1; }
60% { transform: translate(3px, -10px) scale(1); opacity: 0.75; }
100% { transform: translate(-2px, -32px) scale(0.35); opacity: 0; } }
/* ...and it CATCHES THE LIGHT: three points on the shield, dark for most of a long cycle and
flaring for a fraction of it (main.glints). Not a fire — a glint, the way metal behaves. */
#cdBadges .badge em { position: absolute; width: 4px; height: 4px; border-radius: 50%;
background: #fff6dc; box-shadow: 0 0 7px 2px rgba(255,231,170,0.9);
opacity: 0; pointer-events: none; animation-name: glint;
animation-timing-function: ease-out; animation-iteration-count: infinite; }
@keyframes glint {
0%, 88%, 100% { opacity: 0; transform: scale(0.3); }
92% { opacity: 1; transform: scale(1); }
96% { opacity: 0.35; transform: scale(0.6); } }
@media (prefers-reduced-motion: reduce) { #cdBadges .badge em { display: none; } }
#cdBadges img { height: 46px; image-rendering: pixelated; }
#cdBadges .badge u { font: 700 7px Silkscreen, monospace; color: var(--acid); letter-spacing: 0.5px;