Jelly Image Card Soft Body Physics with Canvas
Overview
A photo card for React and Next.js that behaves like a block of jelly. It drops in, squashes on an invisible floor and wobbles, and you can dent it, press it and pull it. The image is drawn pixel by pixel in JavaScript.
The card is a grid of 208 nodes joined by springs. A second spring pulls each node to where a rigid card would put it, so the card keeps its shape and wobbles for a long time. The photo is drawn across the grid by a small scanline rasterizer written for this component, into a typed array with no GPU, and the grid's shape sets the light, so the highlight slides and bends as the card moves. The drawn area stays under about 250,000 pixels.
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 114 / Cards
Shattering Glass Image Animation with Canvas
On Load · On Click · Mouse Move
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
Jelly Image Card Soft Body Physics with Canvas — FAQ
01Can I use any photo?
Yes, as long as it is on your own domain or served with CORS, because the component reads its pixels. Pass src, and the photo is cropped to fill the card.
02Why not WebGL?
So it runs the same with no GPU, for example with hardware acceleration switched off. The cost is that the card has to stay small enough for JavaScript to draw, and the component sets its size for you.
03What does it need from my page?
npm install gsap @gsap/react, and Tailwind CSS v4. The physics and the rasterizer use no other library. It fills the height of the screen and has its own background.
04What happens with reduced motion?
The card sits settled on the floor with one frozen ripple across it, the text is all visible, and no loop runs. The button moves the ripple somewhere else, instantly.