design-infraReport a problem or share feedback← Catalog
Paper Crumple
freereact-bits/paper-crumple
An image that crumples into a textured 3D sheet while held and follows the grabbed point as you drag. Release it as a crumpled ball, unfold it flat, or leave the paper creased, with customizable folds, paper grain, lighting and shadows.
$
npx shadcn@latest add @react-bits/PaperCrumple-TS-TWnpm deps: three
- Source
- React Bits
- Kind
- component
- Categories
- misc
- Use as
- drop-in — replaces your component
- Applies to
- misc
- Motion
- on drag, enter, loop · expressive · webgl · high cost · respects reduced motion
- Tags
- micro, three
- Licence
- MIT + Commons Clause: free to use in commercial apps/sites, but you may not sell or redistribute the components themselves (alone, bundled, or ported). React Bits Pro is a separate paid product.
- Live demo
- www.reactbits.dev
- Docs
- www.reactbits.dev
Similar
Compare all 4 →- Shredderreact-bits/shredderA list with a paper shredder at the bottom. Drag a row into the slit and the rollers tug it in, pull it through and cut it into strips that curl out underneath, tumble away and fade out. The rest of the list settles down on a spring and the shredded item is handed to you to delete.
- Slide Commitreact-bits/slide-commitSlide-to-confirm handle that plants with a spinner while your action runs, unfurls into a done pill on success and springs home with a squash and shake on failure.
- Stackreact-bits/stackLayered stack with swipe animations, autoplay and smooth transitions.