Glass Shatter Interaction — JS Physics Animation with Source Code

The Glass Shatter effect is a destructive interaction where a minimalist card appears to explode into dozens of 3D triangular fragments upon being clicked. This “impossible” web effect creates a high sense of impact and physicality within a digital interface.

How It Works

When the card is clicked, its opacity is set to zero to hide it instantly. Simultaneously, a JavaScript loop creates 30 dynamically generated <div> “fragments”. Each fragment is given a unique clip-path: polygon(...) representing a random triangle. These fragments are then animated using the standard Web Animations API (animate()), translating them outward to random coordinates while rotating them in 3D space.

Use Cases

• “Break the Ice” onboarding steps
• Destructive actions (e.g., deleting a critical file)
• Creative “Game Over” screen transitions
• Portfolio highlights with high interactivity

How to Customize

• Fragment Count: Adjust the for loop limit (currently 30). More fragments look better but can be slower on older mobiles.
• Explosion Force: Change the tx and ty multipliers (currently 600) to make the fragments fly further or stay closer.
• Shatter Ease: Modify the easing property (currently cubic-bezier(0, .9, .5, 1)) to change how fast the shards fly at the start.

Frequently Asked Questions

Is this using a physics engine?

No. It uses simple randomized math and standard CSS transitions/animations. It does not calculate collisions or gravity, which keeps it extremely lightweight and performant for web use.

Why do the shards disappear?

The fragments use { fill: 'forwards' } and an opacity: 0 end state. They are also programmatically removed from the DOM using .onfinish to prevent memory leaks and keep the page clean after the animation.

Can I shatter any element?

Yes! The logic works by creating clones with clip-paths. You can modify the JS to capture the background color or content of any target element and apply it to the fragments for a “true” shatter effect on images or complex components.