5d:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rc641binzbjp.js","/creators-assets/_next/static/immutable/chunks/12ci1vsd8nj4u.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/2ply_q-h6u_2z.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/1pb7yncyfm9fe.js","/creators-assets/_next/static/immutable/chunks/1j6jg0y72xk13.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/26nhnsanh2piz.js","/creators-assets/_next/static/immutable/chunks/03itqfxm4gmj8.js","/creators-assets/_next/static/immutable/chunks/114fkj16mhe97.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/16inv17cv83xq.js","/creators-assets/_next/static/immutable/chunks/2760bhhttj0zo.js","/creators-assets/_next/static/immutable/chunks/3_z6gb0g1nigd.js","/creators-assets/_next/static/immutable/chunks/3vlbhrh3-zofo.js","/creators-assets/_next/static/immutable/chunks/120bipr4k16wv.js","/creators-assets/_next/static/immutable/chunks/3ea2l_ol8wqqa.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/1zr4ew02k6y_l.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/08ajsjh8ypdt2.js","/creators-assets/_next/static/immutable/chunks/1ddgh6mv1wg4x.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/3t6k2_m2gc3-k.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0w6oa8_ba59u4.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/3c3kl-ixsd844.js"],"PostDetailCard"] 5e:T6d8,

Proximity Scale takes a row or column of layers and scales each one by how close the cursor is to it. Neighbours swell in sequence rather than a single item

snapping on its own, which is what makes a dock feel physical instead of twitchy.

Add any number of layers to the Items slot and tune the curve on the canvas. Twelve property controls cover max scale, influence radius, lift, direction, gap, alignment, growth origin, and follow and return timing.

How it behaves

Each item scales on a smooth bell curve measured from its own centre to the cursor, and lift moves with scale so items rise as they grow. Influence sets how wide that curve spreads: raise it to pull more neighbours in for a soft ripple, lower it for a tighter, more pointed response.

Recommended settings

Dock. Row, gap 16, align End, grow from Bottom, max scale 1.7, influence 150, lift 18.

Even row. Align Center, grow from Center, lift 0, max scale 1.4, influence 120.

Sidebar. Column, grow from Center, lift 10, influence 130.

Setting up

Paste the component link into your Framer project's Insert panel. Nothing to install. The items do not have to be identical, or square. Any layers work.

Good to know

Every layer in the Items slot needs to sit at the top level of your page, alongside the breakpoint frame. That is how Framer slots work, and it applies to each item rather than just the first.

Motion runs on published sites and in preview. On the canvas the component holds still on purpose, so it stays easy to select. It responds to a mouse only, so scrolling on a phone never triggers it.

5a:[["$","$L5d",null,{"post":{"id":"01a085c6-1157-751c-9ff4-8fc5a84e444b","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"54198757-9b1f-4b7c-8c24-6d45816d4d5c","name":"Gwatsin T","slug":"gwatsinthong","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/54198757-9b1f-4b7c-8c24-6d45816d4d5c/twq02do4","followed":false,"followsYou":false},"media":[],"resources":[{"id":"fC2JkxEhil6hlsjW5hax","resolved":true,"title":"Proximity Scale","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Proximity Scale takes a row or column of layers and scales each one by how close the cursor is to it. Neighbours swell in sequence rather than a single item"}]},{"type":"paragraph","content":[{"type":"text","text":"snapping on its own, which is what makes a dock feel physical instead of twitchy."}]},{"type":"paragraph","content":[{"type":"text","text":"Add any number of layers to the Items slot and tune the curve on the canvas. Twelve property controls cover max scale, influence radius, lift, direction, gap, alignment, growth origin, and follow and return timing."}]},{"type":"paragraph","content":[{"type":"text","text":"How it behaves","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Each item scales on a smooth bell curve measured from its own centre to the cursor, and lift moves with scale so items rise as they grow. Influence sets how wide that curve spreads: raise it to pull more neighbours in for a soft ripple, lower it for a tighter, more pointed response."}]},{"type":"paragraph","content":[{"type":"text","text":"Recommended settings","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Dock","marks":[{"type":"italic"}]},{"type":"text","text":". Row, gap 16, align End, grow from Bottom, max scale 1.7, influence 150, lift 18."}]},{"type":"paragraph","content":[{"type":"text","text":"Even row","marks":[{"type":"italic"}]},{"type":"text","text":". Align Center, grow from Center, lift 0, max scale 1.4, influence 120."}]},{"type":"paragraph","content":[{"type":"text","text":"Sidebar","marks":[{"type":"italic"}]},{"type":"text","text":". Column, grow from Center, lift 10, influence 130."}]},{"type":"paragraph","content":[{"type":"text","text":"Setting up","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Paste the component link into your Framer project's Insert panel. Nothing to install. The items do not have to be identical, or square. Any layers work."}]},{"type":"paragraph","content":[{"type":"text","text":"Good to know","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Every layer in the Items slot needs to sit at the top level of your page, alongside the breakpoint frame. That is how Framer slots work, and it applies to each item rather than just the first."}]},{"type":"paragraph","content":[{"type":"text","text":"Motion runs on published sites and in preview. On the canvas the component holds still on purpose, so it stays easy to select. It responds to a mouse only, so scrolling on a phone never triggers it."}]}]},"introduction":"Layers that swell near your cursor","slug":"proximity-scale","author":{"framerUserId":"54198757-9b1f-4b7c-8c24-6d45816d4d5c","name":"Gwatsin T","slug":"gwatsinthong","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/54198757-9b1f-4b7c-8c24-6d45816d4d5c/twq02do4","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/54198757-9b1f-4b7c-8c24-6d45816d4d5c/01a085c5-f6d0-7133-9c2d-5b404b23fc92.png","metadata":{"tint":{"h":0,"s":67,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-09T10:45:44.839Z","updatedAt":"2026-09-12T06:24:10.920Z","publishedAt":"2026-09-09T10:45:44.834Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://proximityscale-gt.framer.website?via=w0d7qem","price":"9","paymentUrl":"https://buy.polar.sh/polar_cl_OADvIyKRUZ99ntw1l1KHYvLmIHzGLQlTyO9Jo0kS7lu","workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"IiwqYwKjSpvLuAKEfBRq","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-09T10:45:45.432Z","updatedAt":"2026-09-09T10:45:45.432Z","reported":false}}],"$L5f"]

Suggested for you