紅包按鈕
開紅包互動：待機微搖、點擊拆封、金額滾動與金幣噴發。
完整的開紅包互動：紅底金紋的紅包封待機時輕微搖擺引導點擊，點擊後金色「福」字封口旋開、封蓋翻起，金額卡向上滑出並將數字滾動到目標金額，同時金幣 emoji 粒子朝上噴發，適合發獎、抽紅包、節慶行銷等場景，可重置重玩。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
8888
18
<RedEnvelopeButton />
安裝
npx shadcn@latest add https://webberui.com/r/red-envelope-button.json或在 components.json 設定 registries 後，改用 @webberui/red-envelope-button 安裝。
安裝依賴後，從 registry JSON（/r/red-envelope-button.json 的 files[0].content）複製 red-envelope-button.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion lucide-react clsx tailwind-merge使用
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