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:T839,

2115 — trimming to land under 2000 with headroom:

1987 characters. Paste-ready:

Liquid Glass Grid puts a droplet of glass under the cursor. The dot grid beneath never scrambles — every dot holds its lattice position. What moves is the light passing through them.

HOW IT WORKS

The blob is a real lens, not a blur. Dots inside it are remapped through a refraction profile: a flat, magnified core, then a compressed outer band that squeezes the remaining dots against the rim. That compression creates the bright, dense refraction ring hugging the edge — the detail your eye reads as glass rather than overlay. The mapping is continuous at the boundary, so there is no seam.

The blob behaves like a droplet. Three animated harmonics ripple its outline so it is never a circle. It trails the cursor on a spring and stretches along its direction of travel with a volume-preserving squash, settling as it rests. On exit the lens winds down on an ease-out decay rather than cutting off.

Above the refracted dots sits the glass body: a tint that stays clear in the middle and frosts toward the rim, a specular sheen, a wet glint, a rim light and edge darkening.

PROPERTIES

Dot Color, Dot Size, Spacing, Blob Size, Follow, Dot Scale, Brighten, Glass, Magnify, Edge Bend, Wobble, Squash, Chromatic, Tint, Tint Opacity, Rim Light. Every control carries inline help. Turn Glass off and dots still scale and brighten under the cursor.

THEME SUPPORT

Dot Color and Tint accept hex, RGB and Framer color styles, resolved live every frame, so dots switch between your light and dark tokens instantly.

PERFORMANCE

One hardware-accelerated canvas on requestAnimationFrame. Dots outside the lens are batched into a single fill; only those inside pay for the lens math. Density is capped automatically, output is at native pixel ratio, and the grid rebuilds on resize. Pointer tracking is window-level, so it works as a true background behind your content.

5a:[["$","$L5d",null,{"post":{"id":"01a0776f-8b9e-7369-a072-a54fae8f6f76","title":null,"body":"

Another day, another component.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Another day, another component. "}]}]},"author":{"framerUserId":"29ef87c6-7130-4312-ac0b-e05b305c9c22","name":"Chiranjeev Singh","slug":"runicdevs","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/29ef87c6-7130-4312-ac0b-e05b305c9c22/z35oxdm8","followed":false,"followsYou":false},"media":[],"resources":[{"id":"UVgT5vQ2SutJLVenPY32","resolved":true,"title":"Liquid Glass Grid","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"2115 — trimming to land under 2000 with headroom:"}]},{"type":"paragraph","content":[{"type":"text","text":"1987 characters.","marks":[{"type":"bold"}]},{"type":"text","text":" Paste-ready:"}]},{"type":"paragraph","content":[{"type":"text","text":"Liquid Glass Grid puts a droplet of glass under the cursor. The dot grid beneath never scrambles — every dot holds its lattice position. What moves is the light passing through them."}]},{"type":"paragraph","content":[{"type":"text","text":"HOW IT WORKS","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"The blob is a real lens, not a blur. Dots inside it are remapped through a refraction profile: a flat, magnified core, then a compressed outer band that squeezes the remaining dots against the rim. That compression creates the bright, dense refraction ring hugging the edge — the detail your eye reads as glass rather than overlay. The mapping is continuous at the boundary, so there is no seam."}]},{"type":"paragraph","content":[{"type":"text","text":"The blob behaves like a droplet. Three animated harmonics ripple its outline so it is never a circle. It trails the cursor on a spring and stretches along its direction of travel with a volume-preserving squash, settling as it rests. On exit the lens winds down on an ease-out decay rather than cutting off."}]},{"type":"paragraph","content":[{"type":"text","text":"Above the refracted dots sits the glass body: a tint that stays clear in the middle and frosts toward the rim, a specular sheen, a wet glint, a rim light and edge darkening."}]},{"type":"paragraph","content":[{"type":"text","text":"PROPERTIES","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Dot Color, Dot Size, Spacing, Blob Size, Follow, Dot Scale, Brighten, Glass, Magnify, Edge Bend, Wobble, Squash, Chromatic, Tint, Tint Opacity, Rim Light. Every control carries inline help. Turn Glass off and dots still scale and brighten under the cursor."}]},{"type":"paragraph","content":[{"type":"text","text":"THEME SUPPORT","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Dot Color and Tint accept hex, RGB and Framer color styles, resolved live every frame, so dots switch between your light and dark tokens instantly."}]},{"type":"paragraph","content":[{"type":"text","text":"PERFORMANCE","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"One hardware-accelerated canvas on requestAnimationFrame. Dots outside the lens are batched into a single fill; only those inside pay for the lens math. Density is capped automatically, output is at native pixel ratio, and the grid rebuilds on resize. Pointer tracking is window-level, so it works as a true background behind your content."}]}]},"introduction":"Dots stay still. The light bends.","slug":"liquid-glass-grid","author":{"framerUserId":"29ef87c6-7130-4312-ac0b-e05b305c9c22","name":"Chiranjeev Singh","slug":"runicdevs","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/29ef87c6-7130-4312-ac0b-e05b305c9c22/z35oxdm8","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/29ef87c6-7130-4312-ac0b-e05b305c9c22/01a0776f-6c55-7368-b8e1-0c1e156b7325.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":2492,"height":1316}}],"post":null,"createdAt":"2026-09-06T15:56:33.542Z","updatedAt":"2026-10-06T15:27:14.284Z","publishedAt":"2026-09-06T15:56:33.539Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://dotgridliquidglassblob.framer.website/?editSite","price":"5","paymentUrl":"https://www.paypal.com/ncp/payment/BZ6U2SJDDGDGN","workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"2FATPg1c7SLUuIID6ECa","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-06T15:56:34.078Z","updatedAt":"2026-09-06T15:56:34.078Z","reported":false}}],"$L5f"]

Suggested for you