37 lines
1.4 KiB
TypeScript
37 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
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,
|
|
}));
|
|
|
|
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 }}
|
|
/>
|
|
))}
|
|
{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"
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|