NotSimpleUIPaper Tear
Tactile paper component with mouse-hold drag tearing for desktop and touch gesture tearing for mobile. Supports vintage newspapers, lined notebook sheets, thermal receipts, and custom images.
Preview
Click and hold your mouse (or drag with touch on mobile) across the newspaper. The tear follows your cursor in real time, and when you release, the severed piece falls downward.
Notebook Paper
Lined notebook paper with horizontal ruled blue lines, red margin, and binder hole punch cutouts. Press and drag to rip through the lines.
Field Notes · Page 12
Tearable Notebook Paper
Hold down mouse or touch and drag across the page. Release to sever and watch the torn piece tumble down.
Editorial Newspaper
Styled newspaper layout with vintage typography, double rule mastheads, and multi-column article print.
THE DAILY CHRONICLE
GESTURE-CONTROLLED PAPER TEARING UNVEILED
Click and hold your mouse or drag with your finger across any part of the paper. A live tear line follows your path in real time.
Upon release, the cut piece cleanly detaches and tumbles downward under simulated gravity, carving out the exact drawn contour.
Thermal Receipt
A thermal store receipt complete with side perforation cutouts, items breakdown, and barcode.
Installation
import { PaperTear } from "@/components/paper";
export default function Example() {
return (
<div className="w-full max-w-md">
{/* Newspaper image */}
<PaperTear
src="https://i.pinimg.com/736x/a7/8b/86/a78b86ce1fbea3ab7d982ff18506c529.jpg"
className="w-full h-96"
/>
{/* Lined notebook */}
<PaperTear variant="notebook" className="w-full h-80" />
{/* Store receipt */}
<PaperTear variant="receipt" className="w-full h-76" />
</div>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "newspaper" | "notebook" | "receipt" | "custom" | "newspaper" | Paper design template and texture. |
src / image | string | — | Image URL to render on the paper (e.g. newspaper photo, poster). |
alt | string | "Newspaper print" | Alt text for the rendered image. |
children | React.ReactNode | — | Custom elements or notes rendered inside the paper. |
enableSound | boolean | true | Plays synthetic Web Audio paper tearing sounds as you drag and release. |
minPaperThreshold | number | 0.18 | Fraction of paper remaining before auto-resetting with a fresh sheet. |
onTear | (info: { remainingRatio, tearCount, areaTorn }) => void | — | Callback fired each time a piece is torn. |
onReset | () => void | — | Callback fired when the paper runs out and resets. |
safeTouchMargin | number | 28 | Extra pointer/touch margin (in px) extending outside the paper boundary for easy edge grabbing. |
className | string | "" | Container sizing and positioning styles (e.g. w-full h-96). |