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

fix: limit precipitation effects to weather overlay

Browse Source
This commit is contained in:
zv
2026-06-13 12:19:44 +02:00
parent 3b58a31a37
commit 169b3693b8
1 changed files with 10 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,7 +7,7 @@ const rainDrops = Array.from({ length: 32 }, (_, index) => ({
delay: (index % 16) * 0.08, delay: (index % 16) * 0.08,
duration: 0.82 + (index % 5) * 0.1, duration: 0.82 + (index % 5) * 0.1,
lengthClass: index % 3 === 0 ? "h-16" : index % 3 === 1 ? "h-12" : "h-9", 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, opacity: index % 3 === 0 ? 0.58 : index % 3 === 1 ? 0.48 : 0.36,
})); }));
const mistDrops = Array.from({ length: 18 }, (_, index) => ({ const mistDrops = Array.from({ length: 18 }, (_, index) => ({
@@ -17,8 +17,8 @@ const mistDrops = Array.from({ length: 18 }, (_, index) => ({
})); }));
const lightningBolts = [ const lightningBolts = [
"left-[68%] top-[12%] h-28 rotate-[18deg]", "left-[68%] top-[12%] h-28 rotate-[12deg]",
"left-[76%] top-[20%] h-20 rotate-[24deg]", "left-[78%] top-[22%] h-20 rotate-[18deg]",
]; ];
export function WeatherEffects({ precipitation10m, thunderstorm = false }: { precipitation10m?: number | null; thunderstorm?: boolean }) { export function WeatherEffects({ precipitation10m, thunderstorm = false }: { precipitation10m?: number | null; thunderstorm?: boolean }) {
@@ -29,20 +29,13 @@ export function WeatherEffects({ precipitation10m, thunderstorm = false }: { pre
<div aria-hidden="true" className="pointer-events-none absolute inset-0 z-[1] overflow-hidden"> <div aria-hidden="true" className="pointer-events-none absolute inset-0 z-[1] overflow-hidden">
{isRaining && ( {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) => ( {rainDrops.map((drop, index) => (
<motion.span <motion.span
key={`rain-${index}`} key={`rain-${index}`}
initial={{ y: "-18vh", opacity: 0 }} initial={{ y: "-18vh", opacity: 0 }}
animate={reduceMotion ? { opacity: 0.24 } : { y: ["-18vh", "118vh"], opacity: [0, drop.opacity, 0] }} animate={reduceMotion ? { y: `${(index % 8) * 14}vh`, opacity: 0.28 } : { y: ["-18vh", "118vh"], opacity: [0, drop.opacity, 0] }}
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-12 w-0.5 rotate-[10deg] rounded-full bg-foreground/55 shadow-[0_0_10px_hsl(var(--foreground)/0.16)] ${drop.lengthClass}`} className={`absolute -top-12 w-0.5 rotate-[10deg] rounded-full bg-foreground/70 shadow-[0_0_8px_hsl(var(--foreground)/0.18)] ${drop.lengthClass}`}
style={{ left: drop.left }} style={{ left: drop.left }}
/> />
))} ))}
@@ -50,9 +43,9 @@ export function WeatherEffects({ precipitation10m, thunderstorm = false }: { pre
<motion.span <motion.span
key={`mist-${index}`} key={`mist-${index}`}
initial={{ y: "-10vh", opacity: 0 }} initial={{ y: "-10vh", opacity: 0 }}
animate={reduceMotion ? { opacity: 0.16 } : { y: ["-10vh", "112vh"], opacity: [0, 0.22, 0] }} animate={reduceMotion ? { y: `${(index % 6) * 18}vh`, opacity: 0.16 } : { y: ["-10vh", "112vh"], opacity: [0, 0.26, 0] }}
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 h-6 w-px rotate-[10deg] rounded-full bg-accent/45" className="absolute -top-8 h-7 w-px rotate-[10deg] rounded-full bg-accent/55"
style={{ left: drop.left }} style={{ left: drop.left }}
/> />
))} ))}
@@ -60,17 +53,13 @@ export function WeatherEffects({ precipitation10m, thunderstorm = false }: { pre
)} )}
{thunderstorm && ( {thunderstorm && (
<> <>
<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) => ( {lightningBolts.map((className, index) => (
<motion.span <motion.span
key={`lightning-${index}`} key={`lightning-${index}`}
animate={reduceMotion ? { opacity: 0.18 } : { opacity: [0, 0, 0.72, 0, 0.34, 0] }} animate={reduceMotion ? { opacity: 0.2 } : { opacity: [0, 0, 0.82, 0, 0.38, 0] }}
transition={{ duration: 5.5, repeat: Infinity, repeatDelay: 2.2, delay: index * 0.05 }} 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}`} className={`absolute w-3 bg-warning/80 shadow-[0_0_24px_hsl(var(--warning)/0.42)] ${className}`}
style={{ clipPath: "polygon(46% 0, 100% 0, 62% 38%, 100% 38%, 22% 100%, 44% 52%, 0 52%)" }}
/> />
))} ))}
</> </>