Shattering Glass Image Animation with Canvas
Overview
A photo under glass for React and Next.js that breaks where you click. Shards spin, fall and land on the floor, then fly back and assemble into the next image, all on a plain 2D canvas.
On load, about 160 triangles of glass fly in from outside the frame, spinning, and settle into the first photo with a small overshoot. A crack pattern is built around the point you click, so the long slivers always radiate from your impact. A crack runs out in a fraction of a second, then each shard flies with its own spin and tumble, catches the light when it faces you, throws a soft shadow on the wall and bounces on the floor.
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 105 / Cards
Jelly Image Card Soft Body Physics with Canvas
On Load · Mouse Move · 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
Shattering Glass Image Animation with Canvas — FAQ
01How do I set the photos?
Pass images as an array of src and alt. They need to be same origin or served with CORS headers. Each alt becomes the canvas label while that image is showing.
02Can I put my own heading next to it?
Yes. Anything you pass as children sits on the wall under the flying glass. Use align to hang the picture on the right or in the centre, and className to size the stage.
03Does it work without a mouse?
The button does the same as a click, and its label changes to say what will happen next. On a phone, a tap breaks the glass and a vertical swipe still scrolls the page.
04What does it need from my page?
npm install gsap @gsap/react, and Tailwind CSS v4. Give the stage a height through className. There are no other dependencies.
05What happens with reduced motion?
The photo is drawn once as a still with no running loop, all text is visible, and the button or a click moves to the next image straight away.