5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/00zhqb0zqgnk3.js","/creators-assets/_next/static/immutable/chunks/0jb7r9vkvbp9b.js","/creators-assets/_next/static/immutable/chunks/3_vedwwik9kwx.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1-b7928ji0zgp.js","/creators-assets/_next/static/immutable/chunks/24u-mm0hygst1.js","/creators-assets/_next/static/immutable/chunks/2e6uhasjhfbil.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/1e4nq30y40mt7.js","/creators-assets/_next/static/immutable/chunks/0ccg8j7qcn1bd.js","/creators-assets/_next/static/immutable/chunks/3-aog2q7la1hs.js","/creators-assets/_next/static/immutable/chunks/0a1gpscfztyde.js","/creators-assets/_next/static/immutable/chunks/0t3q4gzvfui5n.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/41lhc7ix2xugk.js","/creators-assets/_next/static/immutable/chunks/3f-jmjjx_9lv_.js","/creators-assets/_next/static/immutable/chunks/30smfjlh8o71p.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/2a2w_2tavj0_e.js","/creators-assets/_next/static/immutable/chunks/1o0ogv90oxalc.js","/creators-assets/_next/static/immutable/chunks/10ydirfi9qu21.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/1xcqqseh8q_et.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/33vct7_koc9st.js","/creators-assets/_next/static/immutable/chunks/1pd9j9dvaikmb.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js","/creators-assets/_next/static/immutable/chunks/2jl0sg8984bmg.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2q-c5-h7837do.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/1tmy_9cuep5o7.js","/creators-assets/_next/static/immutable/chunks/1dzckq15yxafa.js","/creators-assets/_next/static/immutable/chunks/0g9mmnya96tz6.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.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/01a0f984-fb0a-707f-b3ed-b13bc78bb701.jpg","metadata":{"tint":{"h":240,"s":75,"l":13},"width":3200,"height":2400}}],"post":null,"createdAt":"2026-10-01T22:11:49.203Z","updatedAt":"2026-10-01T22:11:49.203Z","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