5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T902,

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.

5a:[["$","$L5d",null,{"post":{"id":"01a019ef-5675-742e-860b-dcf0bc3391c9","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"c5440e40-6989-4146-98db-cf1ff7ee3215","name":"Talha Manzoor","slug":"talhadesigns","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/c5440e40-6989-4146-98db-cf1ff7ee3215/e2ehgdiy","followed":false,"followsYou":false},"media":[],"resources":[{"id":"PVdQ0UxfUb1KaUB3Ms1m","resolved":true,"title":"Shatter Button","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Description:","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"How it works:","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Click anywhere on the button and cracks radiate outward from that exact point"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The break spreads naturally outward from the impact point to the edges, not all at once"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Glass shatters into real Voronoi-based fragments, each sampling the actual button texture and label"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pieces fall with simulated gravity and drop out of view at the bottom"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"The void stays empty as long as your cursor remains over the button, and only reforms once you move away"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"3D tilt follows your cursor for a tactile, physical feel"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Fully customizable:","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Label text, font, and color"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional link with new-tab control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Layout: border radius and padding"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Glass surface: solid, linear, or radial fill with full color and angle/position control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Native border and box-shadow controls, including separate hover states"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Crack behavior: ray count, length, grow speed, and impact glow"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Shard physics: gravity, drift, spin, fall tint, and edge highlight"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"3D tilt strength"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Best used for:","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hero CTAs on portfolio, agency, or product sites that want a distinctive, physical interaction"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Gaming, tech, or creative brand sites looking for a tactile \"break the glass\" moment"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Any page where a standard button feels too flat and the brand can support a bolder, more playful interaction"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Refund Policy:","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"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."}]},{"type":"paragraph","content":[{"type":"text","text":"Support:","marks":[{"type":"bold"}]},{"type":"text","text":" "}]},{"type":"paragraph","content":[{"type":"text","text":"Questions, bugs, or help integrating this into your project? Reach out any time at "},{"type":"text","text":"acreziodesmond@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:acreziodesmond@gmail.com","target":"_blank"}}]},{"type":"text","text":" — happy to help."}]}]},"introduction":"Interactive shattering glass butto","slug":"shatter-button","author":{"framerUserId":"c5440e40-6989-4146-98db-cf1ff7ee3215","name":"Talha Manzoor","slug":"talhadesigns","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/c5440e40-6989-4146-98db-cf1ff7ee3215/e2ehgdiy","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/c5440e40-6989-4146-98db-cf1ff7ee3215/01a019ef-215c-7375-a431-2f43732bef49.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-08-19T12:11:49.797Z","updatedAt":"2026-08-19T12:11:49.797Z","publishedAt":"2026-08-19T12:11:49.794Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://intuitive-channel-329459.framer.app/preview","price":"4","paymentUrl":"https://buy.polar.sh/polar_cl_RVbsQe346mJSq6xaAgZPXN4eE3ujRGbaaSyAa0JO3e9","workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"7zHyvBo3g9RnTToQaCQo","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-19T12:11:50.773Z","updatedAt":"2026-08-19T12:11:50.773Z","reported":false}}],"$L5f"]

Suggested for you