Tear Strip Envelope Reveal with a Draggable Tab, on Canvas
Overview
A paper envelope for React and Next.js with a perforated tear strip. Drag the tab sideways and the strip rips off along the perforation, curling and falling, the top drops away and a coupon rises out. Canvas 2D with no WebGL, and it runs with hardware acceleration off.
The envelope has paper grain, a stamp, a barcode and a red strip with holes along both edges, all baked once into small canvases. Drag the tab and the tear front follows your hand in small rips, so the envelope jerks and rocks on its ledge. Behind the front, the torn strip is a chain of points drawn as thin slices of paper. It holds a curl, shows its white back when it folds over, and hangs in a loop under its own weight. The torn edges are seeded lines with loose white fibres.
Details
- Category
- Cards
- Interaction
- On Load + Drag + On Click
- Trigger
- On Load
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 098 / Cards
Crumpled Paper Card You Can Crush and Throw, on Canvas
On Load · On Click · Drag
No. 116 / Cards
Stretchy Cloth Image Card You Can Grab, with Canvas Physics
On Load · Drag · Mouse Move · On Click
No. 115 / Cards
Peel-Off Sticker Card with a Draggable Curl, on Canvas
On Load · Drag · Mouse Move · On Click
(02)FAQ
Tear Strip Envelope Reveal with a Draggable Tab, on Canvas — FAQ
01What does it need from my page?
npm install gsap @gsap/react, and Tailwind CSS v4. It doesn't use Three.js or WebGL. Pass your display font as the CSS variable --tear-display, and the printing on the envelope and coupon uses it. The image must be on your own domain or allow cross-origin reading.
02What can I put inside?
Pass image for the photo, couponTitle, couponBody and code for the words, and ctaLabel and ctaHref for a real link that appears once it's open. The address prop is printed on the front, and a | in it breaks the line.
03Can I use it from a keyboard or a screen reader?
Yes. A real button tears the strip, and then becomes a reset. Focusing the button gives the envelope a small tug. When it opens, the coupon's words are announced from a visually hidden live region.
04What about phones and reduced motion?
On a phone a vertical swipe scrolls the page, and a sideways drag on the strip tears it. With reduced motion it starts open as one still frame with the coupon showing and the link working, and no running loop.