72 lines
3.0 KiB
TypeScript
72 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { motion, useReducedMotion } from "framer-motion";
|
|
import type { SynopStation, WeatherMood } from "@/types/imgw";
|
|
|
|
const windLines = Array.from({ length: 7 }, (_, index) => ({
|
|
top: `${18 + index * 11}%`,
|
|
delay: index * 0.22,
|
|
width: 70 + (index % 3) * 34,
|
|
}));
|
|
|
|
const stars = Array.from({ length: 16 }, (_, index) => ({
|
|
left: `${(index * 37 + 11) % 96}%`,
|
|
top: `${(index * 23 + 8) % 72}%`,
|
|
delay: (index % 6) * 0.35,
|
|
}));
|
|
|
|
export function WeatherEffects({ station, mood }: { station: SynopStation; mood: WeatherMood }) {
|
|
const reduceMotion = useReducedMotion();
|
|
const isWindy = (station.windSpeed ?? 0) >= 8;
|
|
|
|
return (
|
|
<div aria-hidden="true" className="pointer-events-none absolute inset-0 z-[1] overflow-hidden">
|
|
{mood === "cloudy" && (
|
|
<>
|
|
<motion.div
|
|
animate={reduceMotion ? undefined : { x: ["-4%", "5%", "-4%"], y: [0, 8, 0], scale: [1, 1.05, 1] }}
|
|
transition={{ duration: 18, repeat: Infinity, ease: "easeInOut" }}
|
|
className="absolute -left-24 -top-20 h-52 w-[78%] rounded-[50%] bg-slate-100/30 blur-3xl"
|
|
/>
|
|
<motion.div
|
|
animate={reduceMotion ? undefined : { x: ["8%", "-5%", "8%"], y: [0, -6, 0], scale: [1.04, 1, 1.04] }}
|
|
transition={{ duration: 22, repeat: Infinity, ease: "easeInOut" }}
|
|
className="absolute -right-24 top-0 h-60 w-[82%] rounded-[50%] bg-slate-300/24 blur-3xl"
|
|
/>
|
|
<div className="absolute inset-x-0 bottom-0 h-44 bg-gradient-to-t from-slate-100/25 via-slate-200/10 to-transparent" />
|
|
<div className="absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-slate-950/15 to-transparent" />
|
|
</>
|
|
)}
|
|
{mood === "warm" && (
|
|
<motion.div
|
|
animate={reduceMotion ? undefined : { scale: [1, 1.08, 1], opacity: [0.4, 0.58, 0.4] }}
|
|
transition={{ duration: 7, repeat: Infinity, ease: "easeInOut" }}
|
|
className="absolute -right-16 -top-20 size-64 rounded-full bg-amber-200/45 blur-3xl"
|
|
/>
|
|
)}
|
|
{mood === "night" && stars.map((star, index) => (
|
|
<motion.span
|
|
key={index}
|
|
animate={reduceMotion ? undefined : { opacity: [0.2, 0.75, 0.2] }}
|
|
transition={{ duration: 2.4, delay: star.delay, repeat: Infinity, ease: "easeInOut" }}
|
|
className="absolute size-1 rounded-full bg-white/75"
|
|
style={{ left: star.left, top: star.top }}
|
|
/>
|
|
))}
|
|
{isWindy && windLines.map((line, index) => (
|
|
<motion.span
|
|
key={index}
|
|
initial={{ x: "-30%", opacity: 0 }}
|
|
animate={reduceMotion ? { opacity: 0.28 } : { x: ["-30%", "135%"], opacity: [0, 0.35, 0] }}
|
|
transition={{ duration: 3.4, delay: line.delay, repeat: Infinity, ease: "linear" }}
|
|
className="absolute h-px rounded-full bg-white/60"
|
|
style={{ top: line.top, width: line.width }}
|
|
/>
|
|
))}
|
|
{mood === "cold" && (
|
|
<div className="absolute inset-x-0 bottom-0 h-28 bg-gradient-to-t from-cyan-100/20 to-transparent" />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|