zv/wtr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: reduce frontend visual effects

Browse Source
This commit is contained in:
zv
2026-06-04 20:10:19 +02:00
parent 9395659f07
commit cdce40e69c
12 changed files with 63 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
components/weather/weather-effects.tsx
View File

@@ -1,95 +1,36 @@
"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,
}));
const rainDrops = Array.from({ length: 22 }, (_, index) => ({
const rainDrops = Array.from({ length: 12 }, (_, index) => ({
left: `${(index * 43 + 7) % 101}%`,
delay: (index % 9) * 0.18,
duration: 0.8 + (index % 4) * 0.14,
duration: 1.1 + (index % 4) * 0.18,
}));
export function WeatherEffects({ station, mood, precipitation10m, thunderstorm = false }: { station: SynopStation; mood: WeatherMood; precipitation10m?: number | null; thunderstorm?: boolean }) {
export function WeatherEffects({ precipitation10m, thunderstorm = false }: { 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">
{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-full bg-slate-100/25 blur-2xl"
/>
<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-full bg-slate-300/20 blur-2xl"
/>
<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-12 -top-16 size-52 rounded-full bg-amber-200/25 blur-2xl"
/>
)}
{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 }}
/>
))}
{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] }}
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-14 w-px rotate-[8deg] rounded-full bg-gradient-to-b from-transparent via-white/55 to-transparent blur-[0.35px]"
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.12 } : { opacity: [0, 0, 0.34, 0, 0.18, 0] }}
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-white"
className="absolute inset-0 bg-foreground"
/>
)}
{mood === "cold" && (
<div className="absolute inset-x-0 bottom-0 h-28 bg-gradient-to-t from-blue-100/20 to-transparent" />
)}
</div>
);
}