撕紙揭示
拖曳撕開紙面露出底下內容，鋸齒撕邊與紙屑。
上層紙面像真的紙一樣被拖曳撕開：鋸齒撕裂線把紙分成兩半、各自捲翹帶白色毛邊，拖過閾值整張撕落並沿撕縫噴出紙屑，未達閾值則 spring 回彈，適合優惠券、彩蛋與抽獎揭示。
載入預覽⋯
Playground
即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。
0.32
14
<PaperTearReveal />
安裝
npx shadcn@latest add https://webberui.com/r/paper-tear-reveal.json或在 components.json 設定 registries 後，改用 @webberui/paper-tear-reveal 安裝。
安裝依賴後，從 registry JSON（/r/paper-tear-reveal.json 的 files[0].content）複製 paper-tear-reveal.tsx 原始碼到你的 components/ui/ 目錄：
npm install motion clsx tailwind-merge使用
import { PaperTearReveal } from "@/components/ui/paper-tear-reveal";
<PaperTearReveal
cover={
<div className="flex h-full items-center justify-center rounded-2xl bg-amber-50">
按住拖曳撕開
</div>
}
onTear={() => console.log("torn!")}
>
<div className="flex h-44 items-center justify-center rounded-2xl bg-rose-500 text-white">
隱藏的優惠內容
</div>
</PaperTearReveal>Props
| Prop | 型別 | 預設值 | 說明 |
|---|---|---|---|
cover | React.ReactNode | — | 上層紙面的內容，會鋪滿整個容器，撕開後分成兩半飛離 |
children | React.ReactNode | — | 底層被遮住的內容，同時決定整個元件的尺寸 |
onTear | () => void | — | 紙面完全撕落時觸發的回呼 |
threshold | number | 0.32 | 撕開判定閾值（0 到 1），拖曳進度超過即整張撕落，未達則回彈 |
teeth | number | 14 | 中線鋸齒的齒數，數字越大撕邊越細碎 |
guide | boolean | true | 是否顯示中央虛線與剪刀裁切導引 |
tearLabel | string | "撕開紙面，查看底下內容" | 提供給輔助科技的動作說明 |
className | string | — | 合併到最外層容器的自訂 class |
可及性
- 紙面以
role="button"呈現且可鍵盤聚焦，按 Enter 或 Space 直接撕開，不強制使用拖曳 - 使用者系統開啟「減少動態效果」時，改為點按即撕：不播放飛離動畫、不噴紙屑，底層內容直接揭示
- 動作說明由
tearLabel提供；左右兩半重複渲染的紙面內容與紙屑粒子均標記aria-hidden，避免輔助科技重複朗讀裝飾內容 - 撕落完成後互動層會從 DOM 移除，底層內容可正常聚焦與操作