貼紙翻角卡片
hover 時如貼紙般翻起一角露出底下內容，可拖曳撕開。
卡片右下角像貼紙一樣翻起：hover 時翻角放大、露出紙背與投影，拖曳翻角超過門檻整張貼紙便會撕離飛出，露出底下隱藏的內容。適合優惠碼揭示、彩蛋內容或刮刮卡式的互動驚喜。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
36
88
0.55
<PeelStickerCard />
安裝
npx shadcn@latest add https://webberui.com/r/peel-sticker-card.json或在 components.json 設定 registries 後，改用 @webberui/peel-sticker-card 安裝。
安裝依賴後，從 registry JSON（/r/peel-sticker-card.json 的 files[0].content）複製 peel-sticker-card.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
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重新掛載元件來重新貼上