天氣小卡
動畫天氣卡：太陽光暈/雨滴/雲飄/雪花場景、日夜配色、週預報
依 condition 渲染對應的動畫場景——晴天旋轉光芒、雨天雨滴下落、陰天雲層飄移、雪天雪花搖曳飄落——搭配日／夜漸層背景與晴夜的月亮星空，主體為大字溫度加體感與濕度資訊，底部附 5 日迷你預報列。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
<WeatherWidget />
安裝
npx shadcn@latest add https://webberui.com/r/weather-widget.json或在 components.json 設定 registries 後，改用 @webberui/weather-widget 安裝。
安裝依賴後，從 registry JSON（/r/weather-widget.json 的 files[0].content）複製 weather-widget.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
import { WeatherWidget } from "@/components/ui/weather-widget";
<WeatherWidget
night={false}
data={{
location: "台北市",
condition: "sunny", // "sunny" | "rainy" | "cloudy" | "snowy"
temperature: 31,
feelsLike: 34,
humidity: 62,
forecast: [
{ label: "週三", condition: "sunny", high: 32, low: 26 },
{ label: "週四", condition: "sunny", high: 33, low: 27 },
{ label: "週五", condition: "cloudy", high: 31, low: 26 },
{ label: "週六", condition: "rainy", high: 29, low: 25 },
{ label: "週日", condition: "sunny", high: 32, low: 26 },
],
}}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
data | WeatherData | — | 天氣資料：location（地點）、condition（狀態）、temperature（溫度）、feelsLike（體感）、humidity（濕度）、forecast（5 日預報） |
data.forecast[] | ForecastDay[] | — | 每筆含 label（星期）、condition（狀態）、high / low（高低溫），最多取前 5 筆 |
night | boolean | false | 夜間模式：切換為夜空漸層，晴天改顯示月亮與星星 |
className | string | — | 透傳到卡片外層容器 |
可及性
- 卡片以
role="group"搭配完整aria-label朗讀地點、日夜、天氣狀態、氣溫、體感與濕度 - 動畫場景（光芒、雨滴、雲層、雪花、星星）皆為裝飾性內容，以
aria-hidden對輔助科技隱藏 - 預報列每格附
sr-only完整句子（星期、狀態、高低溫），不依賴圖示辨識 - 使用者系統開啟「減少動態效果」時，停用旋轉與飄落動畫，改為靜態場景；雨滴與雪花以固定位置呈現
- 雨滴、雲飄與雪花的位置由 index 種子的偽亂數產生，SSR 與 client 輸出一致，不會造成 hydration 錯誤