Stretchy Cloth Image Card You Can Grab, with Canvas Physics
Overview
A photo printed on a sheet of cloth for React and Next.js. Grab it anywhere and pull: the fabric stretches, folds and lights up along its creases, then springs back. A real cloth simulation on a 2D canvas, with no WebGL, that runs with hardware acceleration off.
The card is a grid of points joined by springs that resist stretching hard and resist squashing only a little, so it buckles into real folds when it's pushed together. Each frame the picture is painted across that grid by a small texture mapper written in plain JavaScript, and the light on each fold comes from the cloth's own shape. Nothing here needs a GPU, so it behaves the same with hardware acceleration turned off.
Details
- Category
- Cards
- Interaction
- On Load + Drag + Mouse Move + On Click
- Trigger
- On Load
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 096 / Hero
Hanging Cloth Banner Hero with Wind Physics on Canvas
On Load · Drag · Mouse Move · On Click
No. 118 / Hero
Zipper Reveal Hero with a Draggable Pull, on Canvas
On Load · Drag · On Scroll · On Click
No. 115 / Cards
Peel-Off Sticker Card with a Draggable Curl, on Canvas
On Load · Drag · Mouse Move · On Click
(02)FAQ
Stretchy Cloth Image Card You Can Grab, with Canvas Physics — 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 --cloth-display, and the caption printed on the cloth uses it too. The image must be on your own domain or allow cross-origin reading, since the canvas reads its pixels.
02Does it run with hardware acceleration off?
Yes. It was tested in Brave with "Use graphics acceleration when available" off. The canvas stays at the page's own resolution when no GPU is found, and if frames take too long it steps down to fewer solver passes and simpler sampling.
03Can I change how stretchy it is?
Yes. The stretch prop runs from 0, a stiff canvas, to 1, a loose knit. The wind prop sets the breeze. Set aspect to change its shape, and the cloth and ink props to set the margin and its printing.
04What about phones, keyboards and reduced motion?
On a phone a vertical swipe scrolls the page and a sideways drag grabs the cloth. The button under the heading pulls the cloth for keyboard users. With reduced motion it hangs still with no running loop and the text is all there.