From 3b58a31a376fbd85951a081afbb1576c45196219 Mon Sep 17 00:00:00 2001
From: zv <zv@zvcloud.net>
Date: Sat, 13 Jun 2026 12:12:08 +0200
Subject: [PATCH] fix: improve weather card precipitation effects

---
 components/weather/weather-effects.tsx | 82 ++++++++++++++++++++------
 1 file changed, 63 insertions(+), 19 deletions(-)

diff --git a/components/weather/weather-effects.tsx b/components/weather/weather-effects.tsx
index d39683d..aef0eff 100644
--- a/components/weather/weather-effects.tsx
+++ b/components/weather/weather-effects.tsx
@@ -2,34 +2,78 @@
 
 import { motion, useReducedMotion } from "framer-motion";
 
-const rainDrops = Array.from({ length: 12 }, (_, index) => ({
-  left: `${(index * 43 + 7) % 101}%`,
-  delay: (index % 9) * 0.18,
-  duration: 1.1 + (index % 4) * 0.18,
+const rainDrops = Array.from({ length: 32 }, (_, index) => ({
+  left: `${(index * 29 + 7) % 101}%`,
+  delay: (index % 16) * 0.08,
+  duration: 0.82 + (index % 5) * 0.1,
+  lengthClass: index % 3 === 0 ? "h-16" : index % 3 === 1 ? "h-12" : "h-9",
+  opacity: index % 3 === 0 ? 0.46 : index % 3 === 1 ? 0.38 : 0.3,
 }));
 
+const mistDrops = Array.from({ length: 18 }, (_, index) => ({
+  left: `${(index * 37 + 19) % 101}%`,
+  delay: (index % 9) * 0.16,
+  duration: 1.35 + (index % 4) * 0.12,
+}));
+
+const lightningBolts = [
+  "left-[68%] top-[12%] h-28 rotate-[18deg]",
+  "left-[76%] top-[20%] h-20 rotate-[24deg]",
+];
+
 export function WeatherEffects({ precipitation10m, thunderstorm = false }: { precipitation10m?: number | null; thunderstorm?: boolean }) {
   const reduceMotion = useReducedMotion();
   const isRaining = (precipitation10m ?? 0) > 0;
 
   return (
     <div aria-hidden="true" className="pointer-events-none absolute inset-0 z-[1] overflow-hidden">
-      {isRaining && rainDrops.map((drop, index) => (
-        <motion.span
-          key={`rain-${index}`}
-          initial={{ y: "-12vh", opacity: 0 }}
-          animate={reduceMotion ? { opacity: 0.18 } : { y: ["-12vh", "115vh"], opacity: [0, 0.22, 0] }}
-          transition={{ duration: drop.duration, delay: drop.delay, repeat: Infinity, ease: "linear" }}
-          className="absolute -top-8 h-10 w-px rotate-[8deg] rounded-full bg-foreground/35"
-          style={{ left: drop.left }}
-        />
-      ))}
+      {isRaining && (
+        <>
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: reduceMotion ? 0.08 : [0.06, 0.1, 0.07] }}
+            transition={{ duration: 3.5, repeat: Infinity, ease: "easeInOut" }}
+            className="absolute inset-0 bg-foreground"
+          />
+          <div className="absolute inset-x-0 bottom-0 h-20 bg-foreground/5" />
+          {rainDrops.map((drop, index) => (
+            <motion.span
+              key={`rain-${index}`}
+              initial={{ y: "-18vh", opacity: 0 }}
+              animate={reduceMotion ? { opacity: 0.24 } : { y: ["-18vh", "118vh"], opacity: [0, drop.opacity, 0] }}
+              transition={{ duration: drop.duration, delay: drop.delay, repeat: Infinity, ease: "linear" }}
+              className={`absolute -top-12 w-0.5 rotate-[10deg] rounded-full bg-foreground/55 shadow-[0_0_10px_hsl(var(--foreground)/0.16)] ${drop.lengthClass}`}
+              style={{ left: drop.left }}
+            />
+          ))}
+          {mistDrops.map((drop, index) => (
+            <motion.span
+              key={`mist-${index}`}
+              initial={{ y: "-10vh", opacity: 0 }}
+              animate={reduceMotion ? { opacity: 0.16 } : { y: ["-10vh", "112vh"], opacity: [0, 0.22, 0] }}
+              transition={{ duration: drop.duration, delay: drop.delay, repeat: Infinity, ease: "linear" }}
+              className="absolute -top-8 h-6 w-px rotate-[10deg] rounded-full bg-accent/45"
+              style={{ left: drop.left }}
+            />
+          ))}
+        </>
+      )}
       {thunderstorm && (
-        <motion.div
-          animate={reduceMotion ? { opacity: 0.08 } : { opacity: [0, 0, 0.16, 0, 0.08, 0] }}
-          transition={{ duration: 6, repeat: Infinity, repeatDelay: 2.5 }}
-          className="absolute inset-0 bg-foreground"
-        />
+        <>
+          <motion.div
+            animate={reduceMotion ? { opacity: 0.1 } : { opacity: [0, 0, 0.28, 0.04, 0.18, 0] }}
+            transition={{ duration: 5.5, repeat: Infinity, repeatDelay: 2.2 }}
+            className="absolute inset-0 bg-foreground"
+          />
+          {lightningBolts.map((className, index) => (
+            <motion.span
+              key={`lightning-${index}`}
+              animate={reduceMotion ? { opacity: 0.18 } : { opacity: [0, 0, 0.72, 0, 0.34, 0] }}
+              transition={{ duration: 5.5, repeat: Infinity, repeatDelay: 2.2, delay: index * 0.05 }}
+              className={`absolute w-0.5 rounded-full bg-warning/75 shadow-[0_0_22px_hsl(var(--warning)/0.45)] ${className}`}
+            />
+          ))}
+        </>
       )}
     </div>
   );