Shatter Button

Description:

A glass-textured button that cracks and shatters exactly where you click, with physically simulated shards that fall away and drop out of view — then reforms once your cursor leaves.

How it works:

• Click anywhere on the button and cracks radiate outward from that exact point

• The break spreads naturally outward from the impact point to the edges, not all at once

• Glass shatters into real Voronoi-based fragments, each sampling the actual button texture and label

• Pieces fall with simulated gravity and drop out of view at the bottom

• The void stays empty as long as your cursor remains over the button, and only reforms once you move away

• 3D tilt follows your cursor for a tactile, physical feel

Fully customizable:

• Label text, font, and color

• Optional link with new-tab control

• Layout: border radius and padding

• Glass surface: solid, linear, or radial fill with full color and angle/position control

• Native border and box-shadow controls, including separate hover states

• Crack behavior: ray count, length, grow speed, and impact glow

• Shard physics: gravity, drift, spin, fall tint, and edge highlight

• 3D tilt strength

Best used for:

• Hero CTAs on portfolio, agency, or product sites that want a distinctive, physical interaction

• Gaming, tech, or creative brand sites looking for a tactile "break the glass" moment

• Any page where a standard button feels too flat and the brand can support a bolder, more playful interaction

Refund Policy:

All sales are final. Due to the nature of digital products, no refunds, exchanges, or cancellations are offered once the component has been delivered. Please review the preview and feature list carefully before purchasing.

Support:

Questions, bugs, or help integrating this into your project? Reach out any time at acreziodesmond@gmail.com — happy to help.