Shattered Mirror — Glass Physics Animation

The Shattered Mirror simulation is an interactive experience where a “reflective” glass surface breaks into realistic fragments upon user interaction. It’s a tactile and visually striking effect that combines 2D Canvas with simple 3D physics.

How It Works

The animation divides a single image or gradient into a grid of Fragment objects. When clicked, these fragments are assigned random velocities and a gravitational force, causing them to “explode” and fall off the screen. After a set duration, the fragments are “recalled,” and a smooth interpolation logic pulls them back into their original “mirror” positions.

Use Cases

• Creative storytelling websites
• “Break the ice” interactive intro sections
• High-concept landing pages for psychological or reflective brands
• Portfolio “reset” animations

How to Customize

• Change Gravity: Adjust the 0.5 value in the Fragment.update() method to make the glass fall faster or slower.
• Adjust Fragmentation: Increase the rows and cols in the init() function to create smaller, more detailed shards.
• Toggle Auto-Reset: Modify the setTimeout in the click listener to change how long the mirror stays shattered before reforming.

Frequently Asked Questions

Can I use an image instead of a gradient?

Yes! In the Fragment.draw() method, instead of ctx.fillRect, use ctx.drawImage with a source image and the corresponding source coordinates for that specific shard.

Is it performance-heavy?

The simulation is highly optimized. Even with 150+ fragments, it uses simple vector math that modern mobile and desktop CPUs can handle with ease at 60FPS.

Does it support multiple clicks?

The current implementation logic ignores clicks while the mirror is in its “shattered” state to prevent coordinate overlapping, ensuring a smooth transition back to the reset state.