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

Description

Focus Mosaic Image redraws the area around the pointer as a field of responsive image squares. Choose a crisp local Zoom, a soft Blur or combine both, while pointer velocity gently expands the focus field before it settles.

The Framer edition replaces the source demo's white dots and settings panel with responsive image controls, optional links, configurable fitting, a brand-controlled square grid, static Canvas behavior, reduced motion and near-viewport performance safeguards.

Features

Responsive image with Cover, Contain or Stretch fitting, focal position, alt text and optional link.
One exclusive Zoom, Blur or Zoom + Blur focus mode.
Adjustable square size, focus radius and optical strengths.
Optional full grid lines with thin width and custom color controls.
Smooth pointer following with velocity-sensitive expansion and no idle animation loop.
Loading, image-error, reduced-motion and static Canvas states.
Near-viewport pausing and Light, Auto or High Canvas quality.

Setup

Paste the Component URL into a Framer project.
Choose an Image, set its fit/focal position and write useful Alt Text.
Select Zoom, Blur or Both and tune Focus Size.
Optionally enable Grid Lines, then choose their color and width.
Open Preview to test pointer response, reduced motion and optional link behavior.

59:[["$","$L5c",null,{"post":{"id":"01a06c3a-8a9f-73b9-a4cf-db89e655f2f2","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"242463b7-88fd-4d9e-aa36-95050ef77502","name":"Angelo Engelbrecht","slug":"angelo-engelbrecht","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/242463b7-88fd-4d9e-aa36-95050ef77502/1jqq33by","followed":false,"followsYou":false},"media":[],"resources":[{"id":"qWxJ3JvYv8ai60GdviwD","resolved":true,"title":"Mosaic Image","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Description"}]},{"type":"paragraph","content":[{"type":"text","text":"Focus Mosaic Image redraws the area around the pointer as a field of responsive image squares. Choose a crisp local Zoom, a soft Blur or combine both, while pointer velocity gently expands the focus field before it settles."}]},{"type":"paragraph","content":[{"type":"text","text":"The Framer edition replaces the source demo's white dots and settings panel with responsive image controls, optional links, configurable fitting, a brand-controlled square grid, static Canvas behavior, reduced motion and near-viewport performance safeguards."}]},{"type":"paragraph","content":[{"type":"text","text":"Features"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive image with Cover, Contain or Stretch fitting, focal position, alt text and optional link."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"One exclusive Zoom, Blur or Zoom + Blur focus mode."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable square size, focus radius and optical strengths."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional full grid lines with thin width and custom color controls."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth pointer following with velocity-sensitive expansion and no idle animation loop."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Loading, image-error, reduced-motion and static Canvas states."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Near-viewport pausing and Light, Auto or High Canvas quality."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Setup"}]},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Paste the Component URL into a Framer project."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose an Image, set its fit/focal position and write useful Alt Text."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Select Zoom, Blur or Both and tune Focus Size."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optionally enable Grid Lines, then choose their color and width."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Open Preview to test pointer response, reduced motion and optional link behavior."}]}]}],"attrs":{"type":null,"start":1}}]},"introduction":"Pointer-responsive image mosaic","slug":"mosaic-image","author":{"framerUserId":"242463b7-88fd-4d9e-aa36-95050ef77502","name":"Angelo Engelbrecht","slug":"angelo-engelbrecht","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/242463b7-88fd-4d9e-aa36-95050ef77502/1jqq33by","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/242463b7-88fd-4d9e-aa36-95050ef77502/01a06c3a-6b35-7426-9ddc-a9d307b3044d.png","metadata":{"tint":{"h":180,"s":13,"l":24},"width":1060,"height":782}}],"post":null,"createdAt":"2026-09-04T11:42:50.488Z","updatedAt":"2026-09-04T11:42:50.488Z","publishedAt":"2026-09-04T11:42:50.485Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://best-fact-729234.framer.app/page-13","price":"5","paymentUrl":"https://arcengel.lemonsqueezy.com/checkout/buy/6efb1fd6-924c-4990-b4f6-231f3cbe1e70","workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"q2e3khzPPrvhW8uMKAC7","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-04T11:42:51.039Z","updatedAt":"2026-09-04T11:42:51.039Z","reported":false}}],"$L5e"]

Suggested for you