5e:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3fk0f7q4960ol.js","/creators-assets/_next/static/immutable/chunks/00fdmr6kfsdrw.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/1zwfgkv6hl7ih.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/1xwqa9rrktdcw.js","/creators-assets/_next/static/immutable/chunks/1p5p3hxx00owh.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/11rwwufuwaox5.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/2b15v_9ruhnys.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/26nhnsanh2piz.js","/creators-assets/_next/static/immutable/chunks/2riq6xk2ap_dl.js","/creators-assets/_next/static/immutable/chunks/1q3yt3z40r1ue.js","/creators-assets/_next/static/immutable/chunks/3_2gh-txmrtwa.js","/creators-assets/_next/static/immutable/chunks/3xhwx36tyhh8-.js","/creators-assets/_next/static/immutable/chunks/0w757zrv0hi6k.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2jy6qwxbn3dqw.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.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/2051y-i4b0nnm.js"],"PostDetailCard"] 5f:T628,

GridMosaic — Grid Takeover Effect for Framer

The grid takeover effect is everywhere in brand content right now, and every version of it is a rendered video. GridMosaic runs the effect live on your Framer site.

Drop in any clip or photo. The component cuts out the subject in the browser, then rebuilds the composite in real time: tiled background with shuffled cells and exposure jitter, mosaic pixelation, a white paper-cut edge around the subject, grid lines on top. Tiles drift and fade between states instead of snapping, so the motion reads like the original edit, not a slideshow.

What's built in:

Auto cutout for people, in the browser. Pre-keyed alpha video supported for product shots and hair-perfect edges.
Reverse background playback that matches forward smoothness, so the background can run against the subject.
Image mode with automatic parallax, driven by scroll or cursor, with the subject counter-drifting for depth.
Three hover modes: tiles pixelate, reveal the background, or scramble around the cursor.
Grid-anchored typography with Framer's full font picker, plus an editable branding slot in the corner.
Performance-minded throughout: one canvas, video loads only when visible, playback pauses offscreen, reduced motion holds a still, alt text included.

Full control over grid density, seed, tile behavior, subject placement and scale, edge width and color, B&W treatment, and re-roll timing.

5b:[["$","$L5e",null,{"post":{"id":"019ff12d-6728-7739-8a6f-88791c6f5951","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"2962fc65-063f-4330-beb8-c5119114c9d0","name":"Francisc Toth","slug":"frankie-expert-pro","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2962fc65-063f-4330-beb8-c5119114c9d0/d8tnin2c","badges":["available","pro","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"9KN7B96TGUH3qYoPwqio","resolved":true,"title":"GridMosaic","body":"$5f","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"GridMosaic — Grid Takeover Effect for Framer","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"The grid takeover effect is everywhere in brand content right now, and every version of it is a rendered video. GridMosaic runs the effect live on your Framer site."}]},{"type":"paragraph","content":[{"type":"text","text":"Drop in any clip or photo. The component cuts out the subject in the browser, then rebuilds the composite in real time: tiled background with shuffled cells and exposure jitter, mosaic pixelation, a white paper-cut edge around the subject, grid lines on top. Tiles drift and fade between states instead of snapping, so the motion reads like the original edit, not a slideshow."}]},{"type":"paragraph","content":[{"type":"text","text":"What's built in:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Auto cutout for people, in the browser. Pre-keyed alpha video supported for product shots and hair-perfect edges."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reverse background playback that matches forward smoothness, so the background can run against the subject."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image mode with automatic parallax, driven by scroll or cursor, with the subject counter-drifting for depth."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Three hover modes: tiles pixelate, reveal the background, or scramble around the cursor."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Grid-anchored typography with Framer's full font picker, plus an editable branding slot in the corner."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Performance-minded throughout: one canvas, video loads only when visible, playback pauses offscreen, reduced motion holds a still, alt text included."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Full control over grid density, seed, tile behavior, subject placement and scale, edge width and color, B&W treatment, and re-roll timing."}]}]},"introduction":"That grid takeover effect","slug":"gridmosaic","author":{"framerUserId":"2962fc65-063f-4330-beb8-c5119114c9d0","name":"Francisc Toth","slug":"frankie-expert-pro","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2962fc65-063f-4330-beb8-c5119114c9d0/d8tnin2c","badges":["available","pro","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/2962fc65-063f-4330-beb8-c5119114c9d0/019ff12c-8f3c-7288-ba27-6b71f4cb0154.png","metadata":{"tint":{"h":60,"s":8,"l":31},"width":3150,"height":1848}}],"post":null,"createdAt":"2026-08-11T14:15:11.874Z","updatedAt":"2026-08-11T18:18:06.229Z","publishedAt":"2026-08-11T14:15:11.864Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://gridmosaic.framer.website/","price":"10","paymentUrl":"https://store.framer-expert.com/checkout/buy/d2f4b6a5-cce7-485c-aef9-ba82a8f7073f","workshop":false,"categories":[{"id":"1a3a0eb3-698e-461a-bf42-2502a7ed43e0","name":"Backgrounds","slug":"backgrounds"}],"lastSaveId":"LK8MPdlTB7JrkzUtMfpy"}}],"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-08-11T14:15:12.425Z","updatedAt":"2026-08-11T14:15:12.425Z","reported":false}}],"$L60"]

Suggested for you