zv/wtr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance rain animation visibility

Browse Source
This commit is contained in:
zv
2026-06-01 19:31:13 +02:00
parent 4dcc13dcbf
commit 9b724e22c7
2 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
components/weather/weather-effects.tsx
View File

@@ -3,11 +3,13 @@
import { motion, useReducedMotion } from "framer-motion"; import { motion, useReducedMotion } from "framer-motion";
import type { SynopStation, WeatherMood } from "@/types/imgw"; 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}%`, left: `${(index * 29 + 7) % 100}%`,
delay: (index % 11) * 0.13, delay: (index % 11) * 0.13,
duration: 0.72 + (index % 5) * 0.12, duration: 0.72 + (index % 6) * 0.1,
height: 12 + (index % 4) * 4, 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) => ({ const windLines = Array.from({ length: 7 }, (_, index) => ({
@@ -26,11 +28,11 @@ export function WeatherEffects({ station, mood }: { station: SynopStation; mood:
const reduceMotion = useReducedMotion(); const reduceMotion = useReducedMotion();
const rainfall = station.rainfall ?? 0; const rainfall = station.rainfall ?? 0;
const isRaining = rainfall >= 0.1; 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; const isWindy = (station.windSpeed ?? 0) >= 8;
return ( 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") && ( {(mood === "cloudy" || mood === "rain") && (
<> <>
<motion.div <motion.div
@@ -77,10 +79,10 @@ export function WeatherEffects({ station, mood }: { station: SynopStation; mood:
<motion.span <motion.span
key={index} key={index}
initial={{ y: "-8vh", opacity: 0 }} 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" }} transition={{ duration: drop.duration, delay: drop.delay, repeat: Infinity, ease: "linear" }}
className="absolute -top-8 w-px rounded-full bg-cyan-100/80" 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, transform: "rotate(14deg)" }} style={{ height: drop.height, left: drop.left, width: drop.width, transform: "rotate(14deg)" }}
/> />
))} ))}
{mood === "cold" && ( {mood === "cold" && (

2
components/weather/weather-hero.tsx
View File

@@ -40,7 +40,7 @@ export function WeatherHero({ station, locationName, distanceKm }: { station: Sy
<WeatherEffects station={station} mood={mood} /> <WeatherEffects station={station} mood={mood} />
<div className="absolute -right-20 -top-20 size-72 rounded-full bg-white/15 blur-3xl" /> <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="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"> <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> <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>} {locationName && <span className="text-xs text-white/65">{t("location.heroSource", { station: station.name, distance: distanceKm ?? 0 })}</span>}