142 lines
4.6 KiB
TypeScript
142 lines
4.6 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 = [
|
|
{
|
|
className: "left-[18%] top-[4%] h-44 w-24",
|
|
path: "M62 0 L42 39 L56 36 L35 88 L48 84 L28 142",
|
|
delay: 0,
|
|
opacity: 0.78,
|
|
},
|
|
{
|
|
className: "left-[42%] top-[-4%] h-52 w-28",
|
|
path: "M38 0 L61 47 L45 43 L72 101 L57 96 L82 164",
|
|
delay: 0.34,
|
|
opacity: 0.86,
|
|
},
|
|
{
|
|
className: "right-[12%] top-[22%] h-48 w-24",
|
|
path: "M70 0 L48 52 L63 49 L36 108 L52 103 L24 170",
|
|
delay: 0.72,
|
|
opacity: 0.68,
|
|
},
|
|
{
|
|
className: "right-[34%] top-[44%] h-32 w-20",
|
|
path: "M28 0 L44 33 L33 31 L52 75 L41 72 L60 116",
|
|
delay: 1.08,
|
|
opacity: 0.5,
|
|
},
|
|
];
|
|
|
|
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((bolt, index) => (
|
|
<motion.svg
|
|
key={`lightning-${index}`}
|
|
viewBox="0 0 96 176"
|
|
preserveAspectRatio="xMidYMid meet"
|
|
animate={
|
|
reduceMotion
|
|
? { opacity: bolt.opacity * 0.22 }
|
|
: { opacity: [0, 0, bolt.opacity, bolt.opacity * 0.08, 0], scaleY: [0.98, 0.98, 1.02, 1, 0.99] }
|
|
}
|
|
transition={{ duration: 3.6, repeat: Infinity, repeatDelay: 2.4, delay: bolt.delay }}
|
|
className={`absolute text-foreground dark:text-white ${bolt.className}`}
|
|
>
|
|
<path
|
|
d={bolt.path}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="3"
|
|
vectorEffect="non-scaling-stroke"
|
|
opacity="0.06"
|
|
/>
|
|
<path
|
|
d={bolt.path}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="1.7"
|
|
vectorEffect="non-scaling-stroke"
|
|
opacity="0.22"
|
|
/>
|
|
<path
|
|
d={bolt.path}
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="0.95"
|
|
vectorEffect="non-scaling-stroke"
|
|
opacity="0.86"
|
|
/>
|
|
</motion.svg>
|
|
))}
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|