From 9b724e22c79a0f52423ade82725f795764bdcb71 Mon Sep 17 00:00:00 2001
From: zv <zv@zvcloud.net>
Date: Mon, 1 Jun 2026 19:31:13 +0200
Subject: [PATCH] feat: enhance rain animation visibility

---
 components/weather/weather-effects.tsx | 18 ++++++++++--------
 components/weather/weather-hero.tsx    |  2 +-
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/components/weather/weather-effects.tsx b/components/weather/weather-effects.tsx
index c65da8f..77a2b25 100644
--- a/components/weather/weather-effects.tsx
+++ b/components/weather/weather-effects.tsx
@@ -3,11 +3,13 @@
 import { motion, useReducedMotion } from "framer-motion";
 import type { SynopStation, WeatherMood } from "@/types/imgw";
 
-const rainDrops = Array.from({ length: 32 }, (_, index) => ({
+const rainDrops = Array.from({ length: 58 }, (_, index) => ({
   left: `${(index * 29 + 7) % 100}%`,
   delay: (index % 11) * 0.13,
-  duration: 0.72 + (index % 5) * 0.12,
-  height: 12 + (index % 4) * 4,
+  duration: 0.72 + (index % 6) * 0.1,
+  height: 15 + (index % 5) * 5,
+  opacity: 0.48 + (index % 4) * 0.1,
+  width: index % 5 === 0 ? 2 : 1,
 }));
 
 const windLines = Array.from({ length: 7 }, (_, index) => ({
@@ -26,11 +28,11 @@ export function WeatherEffects({ station, mood }: { station: SynopStation; mood:
   const reduceMotion = useReducedMotion();
   const rainfall = station.rainfall ?? 0;
   const isRaining = rainfall >= 0.1;
-  const visibleDrops = rainfall >= 5 ? rainDrops : rainDrops.slice(0, 18);
+  const visibleDrops = rainfall >= 5 ? rainDrops : rainfall >= 1 ? rainDrops.slice(0, 44) : rainDrops.slice(0, 30);
   const isWindy = (station.windSpeed ?? 0) >= 8;
 
   return (
-    <div aria-hidden="true" className="pointer-events-none absolute inset-0 overflow-hidden">
+    <div aria-hidden="true" className="pointer-events-none absolute inset-0 z-[1] overflow-hidden">
       {(mood === "cloudy" || mood === "rain") && (
         <>
           <motion.div
@@ -77,10 +79,10 @@ export function WeatherEffects({ station, mood }: { station: SynopStation; mood:
         <motion.span
           key={index}
           initial={{ y: "-8vh", opacity: 0 }}
-          animate={{ y: ["-8vh", "85vh"], x: [0, -12], opacity: [0, 0.5, 0.12] }}
+          animate={{ y: ["-8vh", "85vh"], x: [0, -16], opacity: [0, drop.opacity, 0.18] }}
           transition={{ duration: drop.duration, delay: drop.delay, repeat: Infinity, ease: "linear" }}
-          className="absolute -top-8 w-px rounded-full bg-cyan-100/80"
-          style={{ height: drop.height, left: drop.left, transform: "rotate(14deg)" }}
+          className="absolute -top-10 rounded-full bg-slate-100/90 shadow-[0_0_6px_rgba(226,232,240,0.7)] blur-[0.25px]"
+          style={{ height: drop.height, left: drop.left, width: drop.width, transform: "rotate(14deg)" }}
         />
       ))}
       {mood === "cold" && (
diff --git a/components/weather/weather-hero.tsx b/components/weather/weather-hero.tsx
index 876db2c..8bf1a93 100644
--- a/components/weather/weather-hero.tsx
+++ b/components/weather/weather-hero.tsx
@@ -40,7 +40,7 @@ export function WeatherHero({ station, locationName, distanceKm }: { station: Sy
       <WeatherEffects station={station} mood={mood} />
       <div className="absolute -right-20 -top-20 size-72 rounded-full bg-white/15 blur-3xl" />
       <div className="absolute -bottom-24 -left-16 size-72 rounded-full bg-cyan-200/15 blur-3xl" />
-      <div className="relative">
+      <div className="relative z-10">
         <div className="flex flex-wrap items-center gap-3">
           <span className="flex items-center gap-1.5 text-sm font-medium text-white/85"><MapPin className="size-4" />{locationName ?? station.name}</span>
           {locationName && <span className="text-xs text-white/65">{t("location.heroSource", { station: station.name, distance: distanceKm ?? 0 })}</span>}