feat: add atmospheric cloudy weather theme
This commit is contained in:
@@ -31,6 +31,22 @@ export function WeatherEffects({ station, mood }: { station: SynopStation; mood:
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div aria-hidden="true" className="pointer-events-none absolute inset-0 overflow-hidden">
|
<div aria-hidden="true" className="pointer-events-none absolute inset-0 overflow-hidden">
|
||||||
|
{(mood === "cloudy" || mood === "rain") && (
|
||||||
|
<>
|
||||||
|
<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" && (
|
{mood === "warm" && (
|
||||||
<motion.div
|
<motion.div
|
||||||
animate={reduceMotion ? undefined : { scale: [1, 1.08, 1], opacity: [0.4, 0.58, 0.4] }}
|
animate={reduceMotion ? undefined : { scale: [1, 1.08, 1], opacity: [0.4, 0.58, 0.4] }}
|
||||||
|
|||||||
@@ -1,9 +1,10 @@
|
|||||||
import { CloudRain, CloudSun, MoonStar, Snowflake, ThermometerSun, Wind } from "lucide-react";
|
import { Cloud, CloudRain, CloudSun, MoonStar, Snowflake, ThermometerSun, Wind } from "lucide-react";
|
||||||
import type { WeatherMood } from "@/types/imgw";
|
import type { WeatherMood } from "@/types/imgw";
|
||||||
|
|
||||||
export function WeatherIcon({ mood, className = "" }: { mood: WeatherMood; className?: string }) {
|
export function WeatherIcon({ mood, className = "" }: { mood: WeatherMood; className?: string }) {
|
||||||
const Icon = {
|
const Icon = {
|
||||||
warm: ThermometerSun,
|
warm: ThermometerSun,
|
||||||
|
cloudy: Cloud,
|
||||||
rain: CloudRain,
|
rain: CloudRain,
|
||||||
wind: Wind,
|
wind: Wind,
|
||||||
cold: Snowflake,
|
cold: Snowflake,
|
||||||
|
|||||||
@@ -164,6 +164,7 @@ export function getWeatherMoodFromData(station: SynopStation, date = new Date())
|
|||||||
if (hour < 6 || hour >= 21) return "night";
|
if (hour < 6 || hour >= 21) return "night";
|
||||||
if ((station.windSpeed ?? 0) >= 8) return "wind";
|
if ((station.windSpeed ?? 0) >= 8) return "wind";
|
||||||
if ((station.temperature ?? 15) <= 3) return "cold";
|
if ((station.temperature ?? 15) <= 3) return "cold";
|
||||||
|
if ((station.humidity ?? 0) >= 80) return "cloudy";
|
||||||
if ((station.temperature ?? 15) >= 20) return "warm";
|
if ((station.temperature ?? 15) >= 20) return "warm";
|
||||||
return "mild";
|
return "mild";
|
||||||
}
|
}
|
||||||
@@ -179,7 +180,8 @@ export function getWeatherDescription(station: SynopStation, language: Language
|
|||||||
export function moodGradient(mood: WeatherMood) {
|
export function moodGradient(mood: WeatherMood) {
|
||||||
return {
|
return {
|
||||||
warm: "from-sky-400 via-blue-500 to-indigo-700",
|
warm: "from-sky-400 via-blue-500 to-indigo-700",
|
||||||
rain: "from-slate-500 via-blue-700 to-slate-950",
|
cloudy: "from-slate-600 via-slate-700 to-slate-900",
|
||||||
|
rain: "from-slate-600 via-blue-900 to-slate-950",
|
||||||
wind: "from-cyan-600 via-slate-600 to-blue-950",
|
wind: "from-cyan-600 via-slate-600 to-blue-950",
|
||||||
cold: "from-cyan-300 via-blue-500 to-indigo-900",
|
cold: "from-cyan-300 via-blue-500 to-indigo-900",
|
||||||
night: "from-slate-800 via-indigo-950 to-slate-950",
|
night: "from-slate-800 via-indigo-950 to-slate-950",
|
||||||
|
|||||||
@@ -115,4 +115,4 @@ export interface WeatherWarning {
|
|||||||
office: string | null;
|
office: string | null;
|
||||||
}
|
}
|
||||||
|
|
||||||
export type WeatherMood = "warm" | "rain" | "wind" | "cold" | "night" | "mild";
|
export type WeatherMood = "warm" | "cloudy" | "rain" | "wind" | "cold" | "night" | "mild";
|
||||||
|
|||||||
Reference in New Issue
Block a user