中文在地化
紅包按鈕
開紅包互動：待機微搖、點擊拆封、金額滾動與金幣噴發。
完整的開紅包互動：紅底金紋的紅包封待機時輕微搖擺引導點擊，點擊後金色「福」字封口旋開、封蓋翻起，金額卡向上滑出並將數字滾動到目標金額，同時金幣 emoji 粒子朝上噴發，適合發獎、抽紅包、節慶行銷等場景，可重置重玩。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add "https://webberui.com/r/red-envelope-button.json?t=<安裝 token>"Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
8888
18
編輯中的呼叫預設屬性
<RedEnvelopeButton/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add "https://webberui.com/r/red-envelope-button.json?t=<安裝 token>"或在 components.json 設定 registries 後，改用 @webberui/red-envelope-button 安裝。
使用
import { RedEnvelopeButton } from "@/components/ui/red-envelope-button";
<RedEnvelopeButton
amount={6000}
blessing="財源廣進"
onOpen={() => console.log("紅包已拆封")}
/>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
amount | number | — | 開封後滾動顯示的金額（元） |
blessing | string | "恭喜發財" | 祝福語：紅包封面直書與金額卡上顯示 |
prefix | string | "NT$" | 金額前綴 |
coinCount | number | 18 | 金幣粒子數量 |
onOpen | () => void | — | 拆封當下觸發 |
className | string | — | 透傳到外層容器 |
可及性
- 使用者系統開啟「減少動態效果」時，停用待機搖擺與金幣粒子，點擊直接顯示金額
- 紅包以原生
button呈現，可用鍵盤 Enter／Space 拆封，並附描述目前狀態的aria-label - 拆封結果透過
aria-live="polite"區域朗讀金額與祝福語；封蓋、封口與粒子等裝飾元素皆為aria-hidden