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

MDX_MediaMosaic transforms images and video into a premium, responsive editorial mosaic built for Framer.

🎬 Dual Playback Modes Use Pulse Director to automatically spotlight one visible video at a time, or switch it off for Gallery Mode with hover-to-play behavior.

✨ Viewport-Aware Pulse Director Playback focuses only on video cells visible in the viewport, using a fair shuffle queue while offscreen media is paused for better performance.

⚡ Predictive Lazy Loading Media begins loading shortly before entering view, reducing unnecessary network and playback overhead on larger collections.

🖼️ Advanced MediaGuard Handles empty, loading, cached, poster, and error states with polished Add Image, Add Video, and unavailable-media feedback.

🪞 Adaptive Theater Mode Open any media into a cinematic full-view experience with responsive sizing, previous/next navigation, swipe gestures, drag-to-dismiss, keyboard controls, persistent audio state, and an editable media counter.

📐 Native Framer Responsiveness Author Columns, Row Height, and tile spans per breakpoint for complete control across Desktop, Tablet, and Phone.

♿ Accessible by Design Keyboard activation, focus management, ARIA dialog behavior, Escape handling, and reduced-motion support are built in.

🛡️ Framer Static Renderer Safe Animations, Pulse playback, shimmer, and live video loading are disabled during static Canvas/export rendering.

🔗 See MDX_MediaMosaic in action Explore the live demo, full feature set, responsive behavior, and complete documentation:https://modax.framer.website/mdx-components/mdx-media-mosaic

One mosaic. Images, video, motion, and cinematic exploration — engineered as a complete media system.

5a:[["$","$L5d",null,{"post":{"id":"01a0f986-17c7-763b-bca2-3e0efce4c244","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"1381a1da-b3be-4fec-b846-806fce7d8e9d","name":"MODAX","slug":"modax","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/1381a1da-b3be-4fec-b846-806fce7d8e9d/pbf14fbi","followed":false,"followsYou":false},"media":[],"resources":[{"id":"OnaHuiFoecbWo9IyXiXV","resolved":true,"title":"MDX_MediaMosaic","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"MDX_MediaMosaic","marks":[{"type":"bold"}]},{"type":"text","text":" transforms images and video into a premium, responsive editorial mosaic built for Framer."}]},{"type":"paragraph","content":[{"type":"text","text":"🎬 "},{"type":"text","text":"Dual Playback Modes","marks":[{"type":"bold"}]},{"type":"text","text":" Use "},{"type":"text","text":"Pulse Director","marks":[{"type":"bold"}]},{"type":"text","text":" to automatically spotlight one visible video at a time, or switch it off for "},{"type":"text","text":"Gallery Mode","marks":[{"type":"bold"}]},{"type":"text","text":" with hover-to-play behavior."}]},{"type":"paragraph","content":[{"type":"text","text":"✨ "},{"type":"text","text":"Viewport-Aware Pulse Director","marks":[{"type":"bold"}]},{"type":"text","text":" Playback focuses only on video cells visible in the viewport, using a fair shuffle queue while offscreen media is paused for better performance."}]},{"type":"paragraph","content":[{"type":"text","text":"⚡ "},{"type":"text","text":"Predictive Lazy Loading","marks":[{"type":"bold"}]},{"type":"text","text":" Media begins loading shortly before entering view, reducing unnecessary network and playback overhead on larger collections."}]},{"type":"paragraph","content":[{"type":"text","text":"🖼️ "},{"type":"text","text":"Advanced MediaGuard","marks":[{"type":"bold"}]},{"type":"text","text":" Handles empty, loading, cached, poster, and error states with polished "},{"type":"text","text":"Add Image","marks":[{"type":"bold"}]},{"type":"text","text":", "},{"type":"text","text":"Add Video","marks":[{"type":"bold"}]},{"type":"text","text":", and unavailable-media feedback."}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"mirror","emoji":"🪞"}},{"type":"text","text":" "},{"type":"text","text":"Adaptive Theater Mode","marks":[{"type":"bold"}]},{"type":"text","text":" Open any media into a cinematic full-view experience with responsive sizing, previous/next navigation, swipe gestures, drag-to-dismiss, keyboard controls, persistent audio state, and an editable media counter."}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"triangular_ruler","emoji":"📐"}},{"type":"text","text":" "},{"type":"text","text":"Native Framer Responsiveness","marks":[{"type":"bold"}]},{"type":"text","text":" Author "},{"type":"text","text":"Columns, Row Height, and tile spans per breakpoint","marks":[{"type":"bold"}]},{"type":"text","text":" for complete control across Desktop, Tablet, and Phone."}]},{"type":"paragraph","content":[{"type":"text","text":"♿ "},{"type":"text","text":"Accessible by Design","marks":[{"type":"bold"}]},{"type":"text","text":" Keyboard activation, focus management, ARIA dialog behavior, Escape handling, and reduced-motion support are built in."}]},{"type":"paragraph","content":[{"type":"text","text":"🛡️ "},{"type":"text","text":"Framer Static Renderer Safe","marks":[{"type":"bold"}]},{"type":"text","text":" Animations, Pulse playback, shimmer, and live video loading are disabled during static Canvas/export rendering."}]},{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"link","emoji":"🔗"}},{"type":"text","text":" See MDX_MediaMosaic in action ","marks":[{"type":"bold"}]},{"type":"text","text":"Explore the live demo, full feature set, responsive behavior, and complete documentation:"},{"type":"text","text":"https://modax.framer.website/mdx-components/mdx-media-mosaic","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://modax.framer.website/mdx-components/mdx-media-mosaic","target":"_blank"}},{"type":"bold"}]}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"One mosaic. Images, video, motion, and cinematic exploration — engineered as a complete media system.","marks":[{"type":"bold"}]}]},{"type":"paragraph"}]},"introduction":"Premium image & video mosaic","slug":"mdx-mediamosaic","author":{"framerUserId":"1381a1da-b3be-4fec-b846-806fce7d8e9d","name":"MODAX","slug":"modax","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/1381a1da-b3be-4fec-b846-806fce7d8e9d/pbf14fbi","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/1381a1da-b3be-4fec-b846-806fce7d8e9d/01a109ec-090e-7738-918d-e44b779886f3.jpg","metadata":{"tint":{"h":0,"s":50,"l":6},"width":3200,"height":2400}}],"post":null,"createdAt":"2026-10-01T22:11:49.203Z","updatedAt":"2026-10-05T02:37:13.205Z","publishedAt":"2026-10-01T22:11:49.197Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://modax.framer.website/framer-preview/mdx-media-mosaic","price":"49","paymentUrl":"https://buy.stripe.com/4gMdR8eFh1bF6CO0Mn4ZG0n","workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"vYE9L9eqypcyGYxp791l","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-10-01T22:11:49.831Z","updatedAt":"2026-10-01T22:11:49.831Z","reported":false}}],"$L5f"]

Suggested for you