56:I[473921,["/creators-assets/_next/static/immutable/chunks/456dxp3afc8vw.js","/creators-assets/_next/static/immutable/chunks/2bxtessbrg0z1.js","/creators-assets/_next/static/immutable/chunks/0bntpu9zyiup3.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/0_p7_rfyih3ce.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/3x7cofmdt-u_a.js","/creators-assets/_next/static/immutable/chunks/18e_sauhpyyit.js","/creators-assets/_next/static/immutable/chunks/13xqrk3e5k8yu.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/3oybmd01gs-b6.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/1yn3k6g09tq32.js","/creators-assets/_next/static/immutable/chunks/3ly-i84yiij4i.js","/creators-assets/_next/static/immutable/chunks/1cey7skpirawe.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/2n9qmawfhavju.js","/creators-assets/_next/static/immutable/chunks/0m8lhf01xskqj.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/2lxef2-u417vc.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/439i_r5_4eszl.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3xmobvbzj3637.js","/creators-assets/_next/static/immutable/chunks/26fs9mkd8gzie.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/110hzb6dmcbdr.js","/creators-assets/_next/static/immutable/chunks/2eiu9v0ook5ln.js","/creators-assets/_next/static/immutable/chunks/1zt764sfv2wd7.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/3gx0_q52o4oil.js","/creators-assets/_next/static/immutable/chunks/0u_jiik6ovv_e.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/1tvhyiuh-gmez.js"],"PostDetailCard"] 57:T670,

Show what is inside your product. Product X-Ray splits a product into layers and lets the parts float apart in depth, so visitors see how it is built.

It starts closed, so the product looks normal. When the whole card is on screen it opens by itself. Hover a part and it lifts while the rest dims and its label lights up. On phones it plays on scroll and a tap also works.

What you get

Two ready samples: Smartphone and Headphones, with labels
Your own product: add transparent PNG layers, or swap the images of a sample part by part
Play when visible, or follow the scroll position
Layer hover: lift, dim the others, highlight the label
Transparent by default so it sits on any page, or give it a card
Start Zoom: the closed product is bigger and eases back as it opens
Easing, layer stagger, depth, tilt, perspective, accent, label chip, shadows and glow, all as controls
Phone settings: smaller movement, bigger product, labels off by default
Keyboard: Tab to focus, Enter or Space to toggle, Esc to reset
Respects reduced motion: small movement or a simple switch

How to use

Drop the component on your page and set its width to 100%.
Pick Smartphone or Headphones, or choose My own layers.
Publish. Done.

Good for product launches, hardware and gadget pages, repair and teardown stories, spec sections and case studies.

Built with React and Framer Motion only. No other libraries. No setup.

53:[["$","$L56",null,{"post":{"id":"01a14a96-dff8-75ec-9cdb-47b04b9ef60b","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"08a0564c-901d-4623-9aae-4f9c87e1bb77","name":"Vexora Studio","slug":"vexora-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/08a0564c-901d-4623-9aae-4f9c87e1bb77/38ye6ctv","followed":false,"followsYou":false},"media":[],"resources":[{"id":"YFlRDLMWZydFjqlKcLiQ","resolved":true,"title":"Product X-Ray","body":"$57","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Show what is inside your product. Product X-Ray splits a product into layers and lets the parts float apart in depth, so visitors see how it is built."}]},{"type":"paragraph","content":[{"type":"text","text":"It starts closed, so the product looks normal. When the whole card is on screen it opens by itself. Hover a part and it lifts while the rest dims and its label lights up. On phones it plays on scroll and a tap also works."}]},{"type":"customHeading","content":[{"type":"text","text":"What you get"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Two ready samples: Smartphone and Headphones, with labels"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Your own product: add transparent PNG layers, or swap the images of a sample part by part"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Play when visible, or follow the scroll position"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Layer hover: lift, dim the others, highlight the label"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Transparent by default so it sits on any page, or give it a card"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Start Zoom: the closed product is bigger and eases back as it opens"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Easing, layer stagger, depth, tilt, perspective, accent, label chip, shadows and glow, all as controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Phone settings: smaller movement, bigger product, labels off by default"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Keyboard: Tab to focus, Enter or Space to toggle, Esc to reset"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Respects reduced motion: small movement or a simple switch"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"How to use"}],"attrs":{"level":2}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Drop the component on your page and set its width to 100%."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pick Smartphone or Headphones, or choose My own layers."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Publish. Done."}]}]}],"attrs":{"type":null,"start":1}},{"type":"paragraph","content":[{"type":"text","text":"Good for product launches, hardware and gadget pages, repair and teardown stories, spec sections and case studies."}]},{"type":"paragraph","content":[{"type":"text","text":"Built with React and Framer Motion only. No other libraries. No setup."}]}]},"introduction":"Exploded product views that play","slug":"product-x-ray","author":{"framerUserId":"08a0564c-901d-4623-9aae-4f9c87e1bb77","name":"Vexora Studio","slug":"vexora-studio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/08a0564c-901d-4623-9aae-4f9c87e1bb77/38ye6ctv","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/08a0564c-901d-4623-9aae-4f9c87e1bb77/01a14a96-25e4-703f-ad33-14ace0fb40da.jpg","metadata":{"tint":{"h":240,"s":50,"l":6},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-17T15:59:23.562Z","updatedAt":"2026-10-17T17:50:58.194Z","publishedAt":"2026-10-17T15:59:23.554Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/ProductXRay-BFp8aJ.js@EnCPkgmMNBpRAuGif92u","previewUrl":"https://amused-behaviors-508279.framer.app","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"323e97d6-f443-488c-8661-794a9a83a20f","name":"Effects","slug":"effects"}],"lastSaveId":"EnCPkgmMNBpRAuGif92u","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-10-17T15:59:24.153Z","updatedAt":"2026-10-17T15:59:24.153Z","reported":false,"type":"post"}}],"$L58"]

Suggested for you