From d654e2d1cb76aa4d1032db2c424b7937e44b9429 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Thu, 10 Sep 2026 21:53:46 -0700 Subject: The zap chip lands on the tap and pulses until the payment settles. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit A zap took a few seconds to pay and its public receipt trailed that by seconds more, so the tally chip appeared long after the tap — the tap looked ignored, and the only way to tell it had worked was the toast. Now the chip appears on the tap carrying your amount, breathing while the payment is in flight; it goes solid the moment the payment lands, and steps aside when the real receipt arrives (which is also how it avoids counting your zap twice). The ark and Lightning one-tap flows report their outcome back — a failure, or a fallback into the form, takes the chip straight off again rather than leaving it pulsing. An unreported zap gives up after 45s. A zap sent from the form reports too, so the tally shows it right away instead of waiting on a relay. Reduced-motion gets a dimmed chip, no pulse. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_019mrt228Upn9nNCwGixzSLx --- src/style.css | 9 +++++++++ 1 file changed, 9 insertions(+) (limited to 'src/style.css') diff --git a/src/style.css b/src/style.css index ba94c11..4028655 100644 --- a/src/style.css +++ b/src/style.css @@ -485,6 +485,15 @@ hr.divider { margin: 16px 0; } .zap-tally.chat-react { font-size: 12px; padding: 1px 7px 1px 5px; } .zap-tally.clickable { cursor: pointer; } .zap-tally.on { text-decoration: underline; text-decoration-color: color-mix(in srgb, #e6a800 60%, transparent); text-underline-offset: 2px; } +/* A zap in flight: the chip lands the moment you tap and breathes until the + payment settles — the bolt carries the pulse, the number stays readable. */ +.zap-tally.flying { animation: zap-breathe 1.15s ease-in-out infinite; } +.zap-tally.flying svg { animation: zap-flicker 1.15s ease-in-out infinite; transform-origin: center; } +@keyframes zap-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } } +@keyframes zap-flicker { 0%, 100% { transform: scale(.82); } 50% { transform: scale(1.12); } } +@media (prefers-reduced-motion: reduce) { + .zap-tally.flying, .zap-tally.flying svg { animation: none; opacity: .7; } +} .chat-compose { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); align-items: center; flex: 0 0 auto; -- cgit v1.2.3