fix: use IMGW Hybrid for current weather
This commit is contained in:
@@ -15,9 +15,16 @@ const stars = Array.from({ length: 16 }, (_, index) => ({
|
||||
delay: (index % 6) * 0.35,
|
||||
}));
|
||||
|
||||
export function WeatherEffects({ station, mood }: { station: SynopStation; mood: WeatherMood }) {
|
||||
const rainDrops = Array.from({ length: 22 }, (_, index) => ({
|
||||
left: `${(index * 43 + 7) % 101}%`,
|
||||
delay: (index % 9) * 0.18,
|
||||
duration: 0.8 + (index % 4) * 0.14,
|
||||
}));
|
||||
|
||||
export function WeatherEffects({ station, mood, precipitation10m, thunderstorm = false }: { station: SynopStation; mood: WeatherMood; precipitation10m?: number | null; thunderstorm?: boolean }) {
|
||||
const reduceMotion = useReducedMotion();
|
||||
const isWindy = (station.windSpeed ?? 0) >= 8;
|
||||
const isRaining = (precipitation10m ?? 0) > 0;
|
||||
|
||||
return (
|
||||
<div aria-hidden="true" className="pointer-events-none absolute inset-0 z-[1] overflow-hidden">
|
||||
@@ -63,6 +70,23 @@ export function WeatherEffects({ station, mood }: { station: SynopStation; mood:
|
||||
style={{ top: line.top, width: line.width }}
|
||||
/>
|
||||
))}
|
||||
{isRaining && rainDrops.map((drop, index) => (
|
||||
<motion.span
|
||||
key={`rain-${index}`}
|
||||
initial={{ y: "-12vh", opacity: 0 }}
|
||||
animate={reduceMotion ? { opacity: 0.36 } : { y: ["-12vh", "115vh"], opacity: [0, 0.55, 0] }}
|
||||
transition={{ duration: drop.duration, delay: drop.delay, repeat: Infinity, ease: "linear" }}
|
||||
className="absolute -top-8 h-14 w-px rotate-[8deg] rounded-full bg-gradient-to-b from-transparent via-white/55 to-transparent blur-[0.35px]"
|
||||
style={{ left: drop.left }}
|
||||
/>
|
||||
))}
|
||||
{thunderstorm && (
|
||||
<motion.div
|
||||
animate={reduceMotion ? { opacity: 0.12 } : { opacity: [0, 0, 0.34, 0, 0.18, 0] }}
|
||||
transition={{ duration: 6, repeat: Infinity, repeatDelay: 2.5 }}
|
||||
className="absolute inset-0 bg-white"
|
||||
/>
|
||||
)}
|
||||
{mood === "cold" && (
|
||||
<div className="absolute inset-x-0 bottom-0 h-28 bg-gradient-to-t from-cyan-100/20 to-transparent" />
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user