The zap chip lands on the tap and pulses until the payment settles.

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) <[email protected]>
Claude-Session: https://claude.ai/code/session_019mrt228Upn9nNCwGixzSLx

1 files changed, 9 insertions, 0 deletions

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;