Crumpled Paper Card You Can Crush and Throw, on Canvas
Overview
A printed sheet of paper for React and Next.js that crushes into a ball on click, bounces, opens back out with visible creases, and can be thrown across the stage. A triangle mesh on a 2D canvas, with no WebGL, that runs with hardware acceleration off.
The sheet is a triangle mesh with its points knocked slightly out of line, printed with your headline, photo and copy. Seeded crease lines cross it, and each triangle gets one light value from its own normal, so the facets have sharp edges that catch the lamp. Click it and the corners go in first, then the whole sheet wraps into a lumpy ball in about 0.7 seconds, with a hard bounce at the end.
Details
- Category
- Cards
- Interaction
- On Load + On Click + Drag
- Trigger
- On Load
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 117 / Cards
Tear Strip Envelope Reveal with a Draggable Tab, on Canvas
On Load · Drag · On Click
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
Crumpled Paper Card You Can Crush and Throw, 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 --crumple-display, in regular and italic, and the printed headline uses it too. The image must be on your own domain or allow cross-origin reading.
02What gets printed on the sheet?
Pass masthead, note, headline, copy and stamp as text, and image for the photo. The photo is printed in black ink and the copy repeats to fill two columns. To print something else, change bakePrint in crumple-stage.ts.
03Can I use it from a keyboard?
Yes. A real button crumples the sheet and smooths it out again, and focusing the button gives it a small hop. Describe the sheet with the alt prop for screen readers.
04What about phones and reduced motion?
On a phone a vertical swipe scrolls the page, a tap crumples or opens, and a sideways drag picks it up to throw. With reduced motion the sheet lies open as one still frame with its creases showing and no running loop. The button still swaps between the sheet and the ball, with no animation.