Shatter Glass Button is a premium component built for landing pages, creative campaigns, and portfolios. Instead of a generic ripple effect, it uses a cinematic shatter interaction: clicking the glass triggers an instant procedural fracture that radiates outwards, complete with an impact flash and auto-dismissing cracks.
The result is a button that feels physical, destructive, and highly memorable — ideal when a standard flat CTA is not enough.
## Key features
- Two crack modes: Spider Web or Bullet Hole.
- Procedural SVG fracture paths that animate dynamically.
- Authentic glassmorphism with frosted blur and edge refractions.
- Light and Dark glass themes for any background color.
- Central impact flash and auto-dismissing cracks.
- Fully responsive and easy to drop into any layout.
- Designed for cinematic, high-end, and immersive interfaces.
## Perfect for
- Creative agency portfolios.
- Web3, gaming, and crypto landing pages.
- High-end product drops or waitlists.
- Unconventional hero sections.
- CTA buttons that need maximum visual impact.
## Suggested controls
- Text and typography.
- Crack mode (Spider Web / Bullet Hole).
- Glass theme (Light / Dark).
- Glass tint color.
- Crack color.
- Hole size.
- Corner radius.
## Marketplace positioning
This is not a traditional, quiet UI button. It is a cinematic motion element for designers and creatives who want their primary CTA to feel physical, unexpected, and undeniably premium.