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

Spotlight Collage arranges your images and videos into a loose, overlapping collage. Hover any media and it stays put while the rest slide aside, shrink back and softly blur, so the one you are looking at stands alone. Move away and it eases back. On touch, a tap does the same.

Place every piece yourself: exact position, size and rotation per media, images and videos mixed freely, each from an upload or a URL. Then tune how far the others move, how much they scale and blur, the styling, and the spring behind every motion.

Key Features

Interaction

Hover or tap a media to spotlight it; the rest clear a path around it
Separate horizontal and vertical spread, plus scale-down and blur for the unfocused media
Optional lift, shadow and slight zoom on the hovered one
Tap outside to release on touch; links open on the second tap

Media

Image or video per item, from an upload or a URL
Manual X, Y, width, height and rotation for every piece
Videos autoplay muted, loop, pause off-screen and show their first frame while loading
Per-media link with an optional new tab

Reveal

Media animate in the first time the collage scrolls into view
Auto: pieces fly out from the centre and assemble the collage
Custom: set the starting opacity, scale and vertical offset
Adjustable duration and per-item stagger

Layout and Style

Auto Fit scales the collage to fit narrower breakpoints and fill containers, no per-breakpoint tuning
Manual zoom; visible or clipped overflow
Background, shadow, border and radius for every media

How to Set Up

Drop Spotlight Collage onto the canvas
Add your images and videos under Media, then place each with X, Y, width and height
Publish

Refund Policy

All sales of digital products are final and non-refundable. Questions? Contact hellonostromostudio@gmail.com before purchasing. Enjoy!

5a:[["$","$L5d",null,{"post":{"id":"01a07af2-32bc-7209-bd3d-993996106483","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"042e00c3-0e8c-49d7-b0d9-458a683d2cbe","name":"Nostromo Studio","slug":"nostromo-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/425429/avatar-hTmf9JbHiQIYsivHT2ttWZ6KjESn4J.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"H823glhLyBuNN1rHwOex","resolved":true,"title":"Spotlight Collage","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Spotlight Collage","marks":[{"type":"bold"}]},{"type":"text","text":" arranges your images and videos into a loose, overlapping collage. Hover any media and it stays put while the rest slide aside, shrink back and softly blur, so the one you are looking at stands alone. Move away and it eases back. On touch, a tap does the same."}]},{"type":"paragraph","content":[{"type":"text","text":"Place every piece yourself: exact position, size and rotation per media, images and videos mixed freely, each from an upload or a URL. Then tune how far the others move, how much they scale and blur, the styling, and the spring behind every motion."}]},{"type":"customHeading","content":[{"type":"text","text":"Key Features"}],"attrs":{"level":1}},{"type":"customHeading","content":[{"type":"text","text":"Interaction"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Hover or tap a media to spotlight it; the rest clear a path around it"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Separate horizontal and vertical spread, plus scale-down and blur for the unfocused media"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional lift, shadow and slight zoom on the hovered one"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Tap outside to release on touch; links open on the second tap"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Media"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image or video per item, from an upload or a URL"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Manual X, Y, width, height and rotation for every piece"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Videos autoplay muted, loop, pause off-screen and show their first frame while loading"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Per-media link with an optional new tab"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Reveal"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Media animate in the first time the collage scrolls into view"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Auto: pieces fly out from the centre and assemble the collage"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Custom: set the starting opacity, scale and vertical offset"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjustable duration and per-item stagger"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Layout and Style"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Auto Fit scales the collage to fit narrower breakpoints and fill containers, no per-breakpoint tuning"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Manual zoom; visible or clipped overflow"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Background, shadow, border and radius for every media"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How to Set Up"}],"attrs":{"level":1}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drop Spotlight Collage onto the canvas"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add your images and videos under Media, then place each with X, Y, width and height"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Publish"}]}]}],"attrs":{"type":null,"start":1}},{"type":"customHeading","content":[{"type":"text","text":"Refund Policy","marks":[{"type":"bold"}]}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"All sales of digital products are final and non-refundable. Questions? Contact "},{"type":"text","text":"hellonostromostudio@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:hellonostromostudio@gmail.com","target":"_blank"}}]},{"type":"text","text":" before purchasing. Enjoy!"}]}]},"introduction":"Spotlight any Media on Hover","slug":"spotlight-collage","author":{"framerUserId":"042e00c3-0e8c-49d7-b0d9-458a683d2cbe","name":"Nostromo Studio","slug":"nostromo-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/425429/avatar-hTmf9JbHiQIYsivHT2ttWZ6KjESn4J.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/042e00c3-0e8c-49d7-b0d9-458a683d2cbe/01a07af2-2332-7349-852b-d61e519d2f23.jpg","metadata":{"tint":{"h":0,"s":26,"l":63},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-09-07T08:18:07.650Z","updatedAt":"2026-09-13T19:15:41.285Z","publishedAt":"2026-09-07T08:18:07.647Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://spotlightcollage.framer.website/","price":"8","paymentUrl":"https://nostromo.lemonsqueezy.com/checkout/buy/d1bda9f0-aaad-4430-964e-e22b84c36cf3","workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"ebk504G0gcX32BPjxEmY","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-07T08:18:08.188Z","updatedAt":"2026-09-07T08:18:08.188Z","reported":false}}],"$L5f"]

Suggested for you