Paper Tear Reveal
Drag to tear the paper open and expose the content beneath, with a jagged tear edge and paper confetti.
This is a WebberUI Pro component
Free during the launch campaign: sign up or sign in, then hit “Copy install command” in the preview above and it installs straight away — no payment, no credit card. The command below returns 401 while you are signed out.
The paper on top tears open under a drag just like real paper: a jagged tear line splits it in two, each half curling with a white fibrous edge, and dragging past the threshold sends the whole sheet away while confetti bursts along the tear; below the threshold it springs back. A good fit for coupons, easter eggs, and prize reveals.
npx shadcn@latest add "https://webberui.com/r/paper-tear-reveal.json?t=<install token>"Playground
Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.
<PaperTearReveal />
Installation
npx shadcn@latest add "https://webberui.com/r/paper-tear-reveal.json?t=<install token>"Or, once registries are configured in components.json, install it as @webberui/paper-tear-reveal.
Usage
import { PaperTearReveal } from "@/components/ui/paper-tear-reveal";
<PaperTearReveal
cover={
<div className="flex h-full items-center justify-center rounded-2xl bg-amber-50">
Press and drag to tear
</div>
}
onTear={() => console.log("torn!")}
>
<div className="flex h-44 items-center justify-center rounded-2xl bg-rose-500 text-white">
The hidden offer
</div>
</PaperTearReveal>Props
| Prop | Type | Default | Description |
|---|---|---|---|
cover | React.ReactNode | — | Content of the paper on top; it fills the whole container and splits into two halves that fly away once torn |
children | React.ReactNode | — | The covered content underneath, which also determines the size of the whole component |
onTear | () => void | — | Callback fired when the paper has fully torn away |
threshold | number | 0.32 | Tear threshold (0 to 1); once the drag progress exceeds it the whole sheet tears away, and below it the sheet springs back |
teeth | number | 14 | Number of teeth along the center jagged line; larger numbers make a finer tear edge |
guide | boolean | true | Whether to show the center dashed line and scissors cut guide |
tearLabel | string | "撕開紙面，查看底下內容" | Action description provided to assistive technology (the built-in default is Traditional Chinese — pass this prop to word it in your own language) |
className | string | — | Custom classes merged into the outermost container |
Accessibility
- The paper is presented as
role="button"and is keyboard focusable; pressing Enter or Space tears it open directly, so dragging is never required - When the user has "reduce motion" enabled at the system level, it becomes tap-to-tear: no fly-away animation, no confetti, and the underlying content is revealed directly
- The action description comes from
tearLabel; the paper content duplicated across the left and right halves and the confetti particles are all markedaria-hidden, so assistive technology does not announce decorative content twice - Once the tear completes, the interactive layer is removed from the DOM so the underlying content can be focused and operated normally