70 lines
2.9 KiB
TypeScript
70 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import { motion, useReducedMotion } from "framer-motion";
|
|
|
|
const rainDrops = Array.from({ length: 32 }, (_, index) => ({
|
|
left: `${(index * 29 + 7) % 101}%`,
|
|
delay: (index % 16) * 0.08,
|
|
duration: 0.82 + (index % 5) * 0.1,
|
|
lengthClass: index % 3 === 0 ? "h-16" : index % 3 === 1 ? "h-12" : "h-9",
|
|
opacity: index % 3 === 0 ? 0.58 : index % 3 === 1 ? 0.48 : 0.36,
|
|
}));
|
|
|
|
const mistDrops = Array.from({ length: 18 }, (_, index) => ({
|
|
left: `${(index * 37 + 19) % 101}%`,
|
|
delay: (index % 9) * 0.16,
|
|
duration: 1.35 + (index % 4) * 0.12,
|
|
}));
|
|
|
|
const lightningBolts = [
|
|
"left-[68%] top-[12%] h-28 rotate-[12deg]",
|
|
"left-[78%] top-[22%] h-20 rotate-[18deg]",
|
|
];
|
|
|
|
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: "-18vh", 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" }}
|
|
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 }}
|
|
/>
|
|
))}
|
|
{mistDrops.map((drop, index) => (
|
|
<motion.span
|
|
key={`mist-${index}`}
|
|
initial={{ y: "-10vh", opacity: 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" }}
|
|
className="absolute -top-8 h-7 w-px rotate-[10deg] rounded-full bg-accent/55"
|
|
style={{ left: drop.left }}
|
|
/>
|
|
))}
|
|
</>
|
|
)}
|
|
{thunderstorm && (
|
|
<>
|
|
{lightningBolts.map((className, index) => (
|
|
<motion.span
|
|
key={`lightning-${index}`}
|
|
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 }}
|
|
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%)" }}
|
|
/>
|
|
))}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|