5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/00zhqb0zqgnk3.js","/creators-assets/_next/static/immutable/chunks/0jb7r9vkvbp9b.js","/creators-assets/_next/static/immutable/chunks/3_vedwwik9kwx.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3y8qjjd_v0fjc.js","/creators-assets/_next/static/immutable/chunks/0_aohzx8_x6oa.js","/creators-assets/_next/static/immutable/chunks/2e6uhasjhfbil.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/0ccg8j7qcn1bd.js","/creators-assets/_next/static/immutable/chunks/1o0ogv90oxalc.js","/creators-assets/_next/static/immutable/chunks/0a1gpscfztyde.js","/creators-assets/_next/static/immutable/chunks/0t3q4gzvfui5n.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/41lhc7ix2xugk.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/30smfjlh8o71p.js","/creators-assets/_next/static/immutable/chunks/3-aog2q7la1hs.js","/creators-assets/_next/static/immutable/chunks/2a2w_2tavj0_e.js","/creators-assets/_next/static/immutable/chunks/3f-jmjjx_9lv_.js","/creators-assets/_next/static/immutable/chunks/10ydirfi9qu21.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/0lmmu21lg5-zj.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/05jm9t-fm5ei_.js","/creators-assets/_next/static/immutable/chunks/1pd9j9dvaikmb.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js","/creators-assets/_next/static/immutable/chunks/2jl0sg8984bmg.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2q-c5-h7837do.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/2k4fp8uwg758i.js","/creators-assets/_next/static/immutable/chunks/1dzckq15yxafa.js","/creators-assets/_next/static/immutable/chunks/0g9mmnya96tz6.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T673,

Broken by Design Pro is a hero made of shattered glass. The pane flies in and assembles in front of the visitor, with your title set inside the glass. Every shard is its own 3D layer: the pane follows the pointer, and the shard you touch lifts, tilts and catches the light.

Everything is editable from the properties panel: title, title size, colors, interaction, sound and the mute button.

Features

- 16 real glass shards, each an independent 3D layer

- Your title inside the glass, sliced shard by shard

- Assembling entrance that plays when the hero comes into view

- Pointer parallax and hover lift with a moving highlight

- Optional glass tick sound, with a mute button

- Separate glass set for portrait screens and phones

- Self-contained: no global styles, never touches your page's scroll

- Respects reduced motion

- Lightweight still preview in the editor

Includes the glass sprites, the button images, the font file, an install guide and a commercial license for unlimited projects.

License: the Marketplace badge reads "Single-Use", but this component comes with a broader license, included in the download. One license covers one person or one company and can be used in unlimited projects, personal or for clients, including commercial ones. Reselling or redistributing the component or its media is not allowed.

The glass artwork was created with generative AI tools. The title font is Space Grotesk (SIL Open Font License).

Support: guglielmo.dev@proton.me

5a:[["$","$L5d",null,{"post":{"id":"01a0fa28-7798-718d-9dc3-b584d8599f9e","title":null,"body":"

New component: Shattered Glass Hero. A hero made of 16 interactive 3D glass shards, with your title inside the glass. Live demo: https://brokenbydesign.framer.website

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"New component: Shattered Glass Hero. A hero made of 16 interactive 3D glass shards, with your title inside the glass. Live demo: "},{"type":"text","text":"https://brokenbydesign.framer.website","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://brokenbydesign.framer.website","target":"_blank"}}]}]}]},"author":{"framerUserId":"804c6d57-adef-4494-9f6d-d9bbfdfe54fa","name":"Guglielmo Giannattasio","slug":"guglielmo-giannattasio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2816290/6wsgMNpAD-q35ycKzLn90xa1pn4sEu2PrmeGFNPs","followed":false,"followsYou":false},"media":[],"resources":[{"id":"WueeQfChCKyU0Ji6XjjJ","resolved":true,"title":"Shattered Glass Hero","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Broken by Design","marks":[{"type":"bold"}]},{"type":"text","text":" Pro is a hero made of shattered glass. The pane flies in and assembles in front of the visitor, with your title set inside the glass. Every shard is its own 3D layer: the pane follows the pointer, and the shard you touch lifts, tilts and catches the light."}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is editable from the properties panel: title, title size, colors, interaction, sound and the mute button."}]},{"type":"paragraph","content":[{"type":"text","text":"Features","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"- 16 real glass shards, each an independent 3D layer"}]},{"type":"paragraph","content":[{"type":"text","text":"- Your title inside the glass, sliced shard by shard"}]},{"type":"paragraph","content":[{"type":"text","text":"- Assembling entrance that plays when the hero comes into view"}]},{"type":"paragraph","content":[{"type":"text","text":"- Pointer parallax and hover lift with a moving highlight"}]},{"type":"paragraph","content":[{"type":"text","text":"- Optional glass tick sound, with a mute button"}]},{"type":"paragraph","content":[{"type":"text","text":"- Separate glass set for portrait screens and phones"}]},{"type":"paragraph","content":[{"type":"text","text":"- Self-contained: no global styles, never touches your page's scroll"}]},{"type":"paragraph","content":[{"type":"text","text":"- Respects reduced motion"}]},{"type":"paragraph","content":[{"type":"text","text":"- Lightweight still preview in the editor"}]},{"type":"paragraph","content":[{"type":"text","text":"Includes the glass sprites, the button images, the font file, an install guide and a commercial license for unlimited projects."}]},{"type":"paragraph","content":[{"type":"text","text":"License: the Marketplace badge reads \"Single-Use\", but this component comes with a broader license, included in the download. One license covers one person or one company and can be used in unlimited projects, personal or for clients, including commercial ones. Reselling or redistributing the component or its media is not allowed.","marks":[{"type":"code"}]}]},{"type":"paragraph","content":[{"type":"text","text":"The glass artwork was created with generative AI tools. The title font is Space Grotesk (SIL Open Font License).","marks":[{"type":"italic"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Support: guglielmo.dev@proton.me","marks":[{"type":"code"}]}]}]},"introduction":"Broken by Design · 3D shards","slug":"shattered-glass-hero","author":{"framerUserId":"804c6d57-adef-4494-9f6d-d9bbfdfe54fa","name":"Guglielmo Giannattasio","slug":"guglielmo-giannattasio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2816290/6wsgMNpAD-q35ycKzLn90xa1pn4sEu2PrmeGFNPs","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/804c6d57-adef-4494-9f6d-d9bbfdfe54fa/01a0fa27-921d-77ef-80d8-976a599f0fbc.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-02T01:09:10.510Z","updatedAt":"2026-10-02T18:39:05.114Z","publishedAt":"2026-10-02T01:09:10.507Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://brokenbydesign.framer.website","price":"5","paymentUrl":"https://guglielmo20.gumroad.com/l/broken-by-design","workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"ZN0hHTGlnz7dCkBQlfTk","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-02T01:09:11.192Z","updatedAt":"2026-10-02T01:09:11.192Z","reported":false}}],"$L5f"]

Suggested for you