Hanging Cards on a Wire, Clothesline Gallery with Canvas Physics
Overview
A photo gallery for React and Next.js where the cards hang from a wire on wooden pegs, like clothes drying. They sway in a breeze, and pulling one stretches it and drags the wire, so its neighbours swing too. A real simulation on a 2D canvas, with no WebGL, that runs with hardware acceleration off.
The wire and every card live in one simulation, so forces travel between them. Pull a card down and the wire dips, the pegs tilt, and the cards on either side start to swing. Each card is a small sheet of cloth, painted by a texture mapper written in plain JavaScript, with shading that follows its bends and a soft shadow that moves on the wall behind.
Details
- Category
- Gallery
- 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. 116 / Cards
Stretchy Cloth Image Card You Can Grab, with Canvas Physics
On Load · Drag · Mouse Move · On Click
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
(02)FAQ
Hanging Cards on a Wire, Clothesline Gallery 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 --line-display, and the titles printed on the cards use it too. Images must be on your own domain or allow cross-origin reading, since the canvas reads their pixels.
02How many cards can it hold?
Five looks best on one wide line. On a screen under 760 pixels wide the cards split across several wires, three to a wire. The card size is worked out from the page, so a few more will fit, but each one adds to the work the CPU does per frame.
03Does 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.
04What about phones, keyboards and reduced motion?
A quick click or tap opens a card's link. On a phone a vertical swipe scrolls the page and a sideways drag grabs a card. With a keyboard, tabbing to a link tugs its card and outlines it, and a button shakes the line. With reduced motion the cards hang still with no running loop.