卡片與網格
貼紙翻角卡片
hover 時如貼紙般翻起一角露出底下內容，可拖曳撕開。
卡片右下角像貼紙一樣翻起：hover 時翻角放大、露出紙背與投影，拖曳翻角超過門檻整張貼紙便會撕離飛出，露出底下隱藏的內容。適合優惠碼揭示、彩蛋內容或刮刮卡式的互動驚喜。
把這個效果裝進你的專案
在專案資料夾執行指令，CLI 會加入原始碼與依賴套件，再依下方使用範例引用元件。
npx webberui@latest add "https://webberui.com/r/peel-sticker-card.json?t=<安裝 token>"Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
36
88
0.55
編輯中的呼叫預設屬性
<PeelStickerCard/>
完整範例包含預覽的排版與資料。先安裝元件，再把範例檔貼入你的專案。
安裝
npx webberui@latest add "https://webberui.com/r/peel-sticker-card.json?t=<安裝 token>"或在 components.json 設定 registries 後，改用 @webberui/peel-sticker-card 安裝。
使用
import { PeelStickerCard } from "@/components/ui/peel-sticker-card";
<PeelStickerCard
className="h-52 w-80"
onPeel={() => console.log("撕開了！")}
reveal={
<div className="flex h-full items-center justify-center font-mono font-bold">
WEBBER-88
</div>
}
>
<div className="flex h-full items-center justify-center bg-gradient-to-br from-violet-500 to-orange-400 text-white">
拖曳右下角撕開
</div>
</PeelStickerCard>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
children | React.ReactNode | — | 貼紙正面內容（蓋在上層、可被撕開的那一張） |
reveal | React.ReactNode | — | 撕開貼紙後露出的底層內容 |
peelSize | number | 36 | 靜止時右下角翻角的大小（px） |
hoverPeelSize | number | 88 | hover 時翻角放大到的大小（px） |
threshold | number | 0.55 | 撕離門檻：翻角超過「卡片短邊 × 此比例」時整張撕離（0 ~ 1） |
onPeel | () => void | — | 貼紙整張撕離時觸發 |
peelLabel | string | "撕開貼紙" | 翻角熱區的無障礙標籤 |
className | string | — | 透傳到最外層容器（需自行指定寬高） |
可及性
- 右下角熱區為可聚焦的
role="button"，鍵盤 Enter / Space 可直接撕開貼紙，不需要拖曳操作 - 撕開後透過
aria-live="polite"的狀態區域向螢幕閱讀器播報「貼紙已撕開」 - 使用者系統開啟「減少動態效果」時，翻角直接跳到定位、撕離改為單純淡出，不做 spring 與飛出動畫
- 摺角、光澤與陰影等純裝飾層皆標記
aria-hidden，不會干擾輔助科技朗讀 - 撕開屬單向互動；若需讓使用者復原，可如示範以變更
key重新掛載元件來重新貼上