Paper Tear Reveal: React + Tailwind Component

Drag to tear the paper open and expose the content beneath, with a jagged tear edge and paper confetti.

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.

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add "https://webberui.com/r/paper-tear-reveal.en.json?t=<install token>"

New project or installation trouble? Start here →

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Tear thresholdthreshold

0.32

Tear-edge teethteeth

Show crop guidesguide

Accessibility instructionstearLabel

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<PaperTearReveal/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add "https://webberui.com/r/paper-tear-reveal.en.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`	`"Tear open the paper to view the contents below"`	Action description provided to assistive technology (the English source includes this default — 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 marked aria-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

Paper Tear Reveal