背景
落瓣背景
季節性飄落背景：櫻瓣／楓葉／雪花三種預設形狀、每瓣翻轉飄搖與風向擾動、密度與風速可調、可依滾動加速。
背景家族的季節限定款：以 2D canvas 繪製飄落的櫻瓣、楓葉或雪花，每一瓣有獨立的擺盪相位、自轉與翻面動作，風向與強度可調（負值向左飄）。粒子初始參數採確定性偽隨機（以索引為種子），每次重新整理的散佈都一致；背景預設透明，直接疊在你自己的底色上，適合櫻花季、秋楓與冬季活動頁。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add falling-petalsPlayground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
28
0.6
1
1
編輯中的呼叫預設屬性
<FallingPetals/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add https://webberui.com/r/falling-petals.json或在 components.json 設定 registries 後，改用 @webberui/falling-petals 安裝。
使用
import { FallingPetals } from "@/components/ui/falling-petals";
<FallingPetals
variant="sakura"
count={28}
wind={0.6}
className="flex h-[320px] items-center justify-center rounded-xl bg-slate-900"
>
<h2 className="text-3xl font-bold text-white">春・櫻吹雪</h2>
</FallingPetals>
// 楓葉往左吹、開啟捲動加速
<FallingPetals variant="maple" wind={-1.2} scrollBoost className="h-[320px]" />Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
variant | "sakura" | "maple" | "snow" | "sakura" | 形狀預設：櫻瓣／楓葉／雪花 |
count | number | 28 | 同時存在的粒子數量 |
wind | number | 0.6 | 風向與強度（-2 到 2，負值向左飄；超出範圍會被夾住） |
speed | number | 1 | 下落速度倍率 |
size | number | 1 | 粒子大小縮放係數 |
colors | string[] | — | 覆寫預設色票（sakura 粉白三色／maple 橙紅褐三色／snow 白），粒子逐一循環取用 |
scrollBoost | boolean | false | 依視窗捲動速度暫時加速下落，捲動停止後回復 |
opacity | number | 0.9 | 粒子整體不透明度 |
children | ReactNode | — | 疊在粒子之上的前景內容 |
className | string | — | 透傳到最外層容器 |
另外具名匯出 petalPresetColors(variant)（取得該 variant 的預設色票副本，方便微調後傳回 colors）與 PetalVariant 型別。
細節
- 粒子初始位置與參數用確定性偽隨機（mulberry32、種子為粒子索引）產生，render 期間不呼叫
Math.random，每次重新整理與 SSR 後的首幀散佈完全一致 - 形狀都是程式繪製的路徑：櫻瓣是一條尖端內凹的閉合貝茲曲線、楓葉是簡化五角鋸齒輪廓、雪花是六向短枝線段，無任何圖片資源
- canvas 以裝置像素比上限 2 繪製，
ResizeObserver隨容器尺寸重新播種；元件捲出視窗時以IntersectionObserver暫停動畫迴圈，省下離屏時的運算 scrollBoost開啟時在動畫幀內讀取捲動位置差值換算暫時加速（最高約 4 倍），捲動停止後指數衰減回正常速度- 粒子落出底部會從頂部重生、左右出界則從另一側回繞，畫面密度維持恆定
可及性
- canvas 帶
aria-hidden且pointer-events-none，純裝飾、不干擾互動與朗讀；前景內容由children正常參與無障礙樹 - 使用者系統開啟「減少動態效果」時，只繪製一幀靜態散佈的落瓣、不啟動動畫迴圈