Meteors
背景流星／流星雨劃過效果，canvas 2D 繪製發光拖尾與閃爍星點。
以 canvas 2D 模擬夜空流星雨：每顆流星帶漸層拖尾與發光頭部，背景可選鋪一層微微閃爍的星點，適合當 hero 或卡片底層。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
20
115
8
120
<Meteors />
安裝
npx shadcn@latest add https://webberui.com/r/meteors.json或在 components.json 設定 registries 後，改用 @webberui/meteors 安裝。
安裝依賴後，從 registry JSON（/r/meteors.json 的 files[0].content）複製 meteors.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
把前景內容當作 children 傳入，流星會鋪在內容底層：
import { Meteors } from "@/components/ui/meteors";
<Meteors className="h-[320px] w-full rounded-xl">
<div className="relative z-10 flex h-full items-center justify-center">
<h3 className="text-2xl font-semibold text-slate-100">Meteor Shower</h3>
</div>
</Meteors>容器高度由你的 className 決定（例如 h-[320px]）；元件本身不使用任何 viewport 高度單位。
Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
quantity | number | 20 | 同時在畫面上的流星數量 |
color | string | currentColor | 流星顏色；未指定時隨主題的文字色 |
angle | number | 115 | 飛行方向（度），0 向右、90 正下方 |
speed | number | 8 | 頭部速度（每幀位移 px） |
trailLength | number | 120 | 拖尾長度基準（px） |
glow | boolean | true | 流星頭部是否帶發光光暈 |
stars | boolean | true | 背景是否鋪一層閃爍星點 |
children | ReactNode | — | 疊在流星之上的前景內容 |
可及性
- 使用者系統開啟「減少動態效果」時，只繪製一張靜止的星空與流星，不啟動動畫迴圈
- canvas 為純裝飾層，帶
aria-hidden且pointer-events-none，不干擾前景內容與輔助科技