feat: animated gradient for huge zaps

src/element/live-chat.css

@@ -224,6 +224,24 @@
   color: #FF8D2B;
 }
 
+.zap-container.big-zap:before {
+  background: linear-gradient(60deg, #2BD9FF, #8C8DED, #F838D9, #F83838, #FF902B, #DDF838);
+  animation: animatedgradient 3s ease alternate infinite;
+  background-size: 300% 300%;
+}
+
+@keyframes animatedgradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
 .zap-content {
   margin-top: 8px;
 }

src/element/live-chat.tsx

@@ -155,9 +155,10 @@ function ChatZap({ zap }: { zap: ParsedZap }) {
   if (!zap.valid) {
     return null;
   }
+  const isBig = zap.amount >= 1_000_000;
 
   return (
-    <div className="zap-container">
+    <div className={`zap-container ${isBig ? "big-zap" : ""}`}>
       <div className="zap">
         <Icon name="zap-filled" className="zap-icon" />
         <Profile