Merge pull request 'feat: animated gradient for huge zaps' (#28) from big-zaps into main

Reviewed-on: Kieran/stream#28

src/element/live-chat.css

@@ -226,6 +226,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

@@ -169,13 +169,16 @@ export function LiveChat({
   );
 }
 
+const BIG_ZAP_THRESHOLD = 100_000;
+
 function ChatZap({ zap }: { zap: ParsedZap }) {
   if (!zap.valid) {
     return null;
   }
+  const isBig = zap.amount >= BIG_ZAP_THRESHOLD;
 
   return (
-    <div className="zap-container">
+    <div className={`zap-container ${isBig ? "big-zap" : ""}`}>
       <div className="zap">
         <Icon name="zap-filled" className="zap-icon" />
         <Profile