A weather card that draws the sky as an animated dot-matrix scene following the time of day (sun arc, moon phase, clouds, rain, snow, wind), with the current temperature, an hourly forecast strip and a 7-day low/high range chart, plus a compact single-condition tile variant.
import Weather from "@/components/ui/weather";
export default function WeatherDemo() {
return (
<div className="flex items-center justify-center p-10">
<Weather
place="Lisbon"
summary="Sunny now"
hour={9}
sky="clear"
condition="Sunny"
temp={19}
feels={18}
rain={0}
wind="9 km/h"
live
clock="09:00"
hours={[
{ label: "Now", hour: 9, kind: "clear", temp: 19 },
{ label: "12", hour: 12, kind: "partly", temp: 24 },
{ label: "15", hour: 15, kind: "rain", temp: 22 },
{ label: "18", hour: 18, kind: "cloud", temp: 20 },
{ label: "21", hour: 21, kind: "clear", temp: 17 },
{ label: "00", hour: 0, kind: "clear", temp: 15 },
]}
days={[
{ name: "Today", kind: "rain", low: 14, high: 24 },
{ name: "Sun", kind: "partly", low: 15, high: 23 },
{ name: "Mon", kind: "clear", low: 16, high: 26 },
{ name: "Tue", kind: "clear", low: 17, high: 28 },
{ name: "Wed", kind: "cloud", low: 16, high: 25 },
{ name: "Thu", kind: "rain", low: 14, high: 20 },
{ name: "Fri", kind: "partly", low: 13, high: 21 },
]}
/>
</div>
);
}
