Shatter Glass Button

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.