Forecast Cycle

LisbonNow

21°C

Clear sky

About this piece

Forecast Cycle

Forecast card that walks through the next few hours on its own, swapping the temperature with a soft rise while the sun turns, clouds drift, and rain falls.

Usage

The import and the props worth knowing about, in one place.

import { Weather11 } from "@/components/beste/piece/weather11";

<Weather11
  place="Lisbon"
  frames={[
    {
      "label": "Now",
      "temp": 21,
      "condition": "sun"
    },
    {
      "label": "15:00",
      "temp": 19,
      "condition": "cloud"
    },
    {
      "label": "18:00",
      "temp": 17,
      "condition": "rain"
    },
    {
      "label": "21:00",
      "temp": 15,
      "condition": "cloud"
    }
  ]}
/>

More Weather pieces

View all Weather
Istanbul
18°C
CloudyH:21° · L:12°

Weather Card

City name, big temperature, condition label, and a high/low line with an icon tile that colors by condition.

Mon
24°15°
Tue
22°14°
Wed
18°12°
Thu
19°13°
Fri
25°16°

Weekly Forecast

Row of day columns with weekday label, condition icon, and a high/low temperature pair.

Heat AdvisoryAdvisory

Heat index up to 38°C this afternoon. Stay hydrated and avoid direct sun.

Until 9:00 PM tonight

Weather Alert

Severity-colored triangle alert with title, severity badge, descriptive detail, and an Until line.

Now22°
10 AM23°
11 AM24°
12 PM24°
1 PM21°
2 PM20°

Hourly Forecast

Six-column hourly strip pairing each label with a condition icon and a tabular temperature.

SunriseSunset
6:14 AM8:42 PM
Daylight 14h 28m

Sunrise & Sunset

Sunrise and sunset times bracketing a thin track with an amber sun marker positioned by day progress.

PrecipitationNext 6h
10%
Now
25%
11
60%
12
95%
1
78%
2
35%
3

Precipitation Bars

Six-hour rain probability column chart with sky-blue bars rising on a muted track and percentages on top.