5c:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/3gx96u50v9idb.js","/creators-assets/_next/static/immutable/chunks/125_ce2ese0y_.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/069_m7850i8jf.js","/creators-assets/_next/static/immutable/chunks/03586ab1rea-b.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0-lv0573a1cyl.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/24gcuxpvxd8dy.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3vd9_7_mqx0kl.js","/creators-assets/_next/static/immutable/chunks/3l37d07td4kzk.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3nw4q_evu8ge1.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2qsfz_74auu2_.js","/creators-assets/_next/static/immutable/chunks/1xkjm3oyldl_r.js","/creators-assets/_next/static/immutable/chunks/16d5vpfsnfybw.js","/creators-assets/_next/static/immutable/chunks/3yfgkb3cck8zt.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/3kyaj4hrugjs0.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2ryuxt_mk774w.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0pc9t50m5x90i.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/0e-wwv74y78f7.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js"],"PostDetailCard"] 5d:T50f,

A macOS-style dock made of real glass. Not a blur: a displacement map built from the rounded rectangle, so whatever sits behind the slab is genuinely bent, with a chromatic split at the edges. Put it over stripes and watch a straight line leave the slab as an S.

Icons magnify along a cosine bell as the cursor approaches - neighbours grow less, the falloff is continuous, and the slab widens to hold them. A specular edge trails behind the movement, and that lag is what makes the surface read as glass.

Twenty icons are drawn by hand in the code - home, search, gallery, camera, play, music, mail, messages, profile, settings, cart, heart, star, bookmark, calendar, folder, grid, globe, bell, external link - on one grid with one stroke weight. Or bring your own image, or paste your own SVG, which is cleaned through a strict whitelist before it is used.

IMPORTANT: glass needs something to refract. Place it over a photo, a video or a gradient; on a flat white or black page there is nothing to bend. A Preview backdrop is included for designing, and it should stay off on a live site.

Real links, keyboard reachable, visible focus. Nothing loaded from outside. Honours prefers-reduced-motion and rests quietly on the Framer canvas.

59:[["$","$L5c",null,{"post":{"id":"01a00543-dcb7-76a7-8fa2-45b73aeedab6","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"84056947-c5e8-41eb-8f22-456fbd7f0c88","name":"Lucas","slug":"gatyh","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/84056947-c5e8-41eb-8f22-456fbd7f0c88/4jeo79l3","followed":false,"followsYou":false},"media":[],"resources":[{"id":"tlG4XMIO2QxFBmM3Ekxq","resolved":true,"title":"Refraction Dock","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"A macOS-style dock made of real glass. Not a blur: a displacement map built from the rounded rectangle, so whatever sits behind the slab is genuinely bent, with a chromatic split at the edges. Put it over stripes and watch a straight line leave the slab as an S."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Icons magnify along a cosine bell as the cursor approaches - neighbours grow less, the falloff is continuous, and the slab widens to hold them. A specular edge trails behind the movement, and that lag is what makes the surface read as glass."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Twenty icons are drawn by hand in the code - home, search, gallery, camera, play, music, mail, messages, profile, settings, cart, heart, star, bookmark, calendar, folder, grid, globe, bell, external link - on one grid with one stroke weight. Or bring your own image, or paste your own SVG, which is cleaned through a strict whitelist before it is used."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"IMPORTANT: glass needs something to refract. Place it over a photo, a video or a gradient; on a flat white or black page there is nothing to bend. A Preview backdrop is included for designing, and it should stay off on a live site."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"Real links, keyboard reachable, visible focus. Nothing loaded from outside. Honours prefers-reduced-motion and rests quietly on the Framer canvas."}]}]},"introduction":"A dock that really bends light","slug":"refraction-dock","author":{"framerUserId":"84056947-c5e8-41eb-8f22-456fbd7f0c88","name":"Lucas","slug":"gatyh","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/84056947-c5e8-41eb-8f22-456fbd7f0c88/4jeo79l3","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/84056947-c5e8-41eb-8f22-456fbd7f0c88/01a00543-7053-705d-8377-ae05349f52d7.jpg","metadata":{"tint":{"h":140,"s":47,"l":30},"width":2400,"height":1800}}],"post":null,"createdAt":"2026-08-15T11:52:08.064Z","updatedAt":"2026-08-15T11:52:08.064Z","publishedAt":"2026-08-15T11:52:08.061Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://jazzed-hexagon-627045.framer.app/glass-dock","price":"5","paymentUrl":"https://buy.stripe.com/9B6fZh7D70PHgf41VKejK0q","workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"3aJjLtsGpRlssF5LSHny","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-15T11:52:08.631Z","updatedAt":"2026-08-15T11:52:08.631Z","reported":false}}],"$L5e"]

Suggested for you