61:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/3gx96u50v9idb.js","/creators-assets/_next/static/immutable/chunks/125_ce2ese0y_.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/069_m7850i8jf.js","/creators-assets/_next/static/immutable/chunks/03586ab1rea-b.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0-lv0573a1cyl.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/24gcuxpvxd8dy.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3vd9_7_mqx0kl.js","/creators-assets/_next/static/immutable/chunks/3l37d07td4kzk.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3nw4q_evu8ge1.js","/creators-assets/_next/static/immutable/chunks/3o5qsyzxffd89.js","/creators-assets/_next/static/immutable/chunks/0sdd6rzuigoor.js","/creators-assets/_next/static/immutable/chunks/04onqby6uwgz7.js","/creators-assets/_next/static/immutable/chunks/16d5vpfsnfybw.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/0yulab_mho2q7.js","/creators-assets/_next/static/immutable/chunks/3_6nvj55e699g.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/0pc9t50m5x90i.js","/creators-assets/_next/static/immutable/chunks/3fyhezch4qqad.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/0v2aom8xv86j9.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/0s-n7u5-dwtml.js"],"S"] 62:T5c7,

Social Proof Review is designed to help you boost credibility and conversion while keeping full creative control.Learn how to use this component here.Core Features

Facepile / AvatarsDisplay user photos, initials, or placeholder avatars with overlap effects, tooltips, and optional overflow badges. Fully customizable size, border radius, and styling.
Call-to-Action ButtonIncludes multiple variants (solid, outline, ghost) with hover states, custom colors, padding, font controls, and flexible width/height options. Can be linked to any URL and opened in a new tab.
RatingsShow ratings with stars (full or half), customizable star colors, sizes, and a text label (e.g., “5/5 from 15+ founders”).
Layout OptionsSwitch easily between horizontal or vertical layouts. Adjust spacing, background color, border radius, and padding to match your design system.
Animation SupportSmooth entrance animations for avatars and badges with controllable delay per avatar.
Full Design ControlEvery part is customisable—backgrounds, borders, fonts, colors, sizes, all exposed in Framer’s property panel for designers to fine-tune without touching code.

63:T40b,

The Before After Slider is a useful visual comparison component designed for creators, marketers, and designers who want to highlight transformations with elegance and control.

Whether you're comparing skin treatments, UI redesigns, home renovations, or photo edits, this component offers:

Image Input Controls for uploading both before and after visuals
Initial Slider Position setting to control the starting reveal
Draggable Handle with your choice of icons: arrows or chevrons
Customizable Icon Container — choose between round, square, or your own radius
Full styling options for icon color, padding, background, and component corner radius
Built-in fallback text if images aren't provided

Designed with flexibility in mind, this component is fully responsive, intuitive to use, and easy to integrate into any Framer project.

60:["$","$L61",null,{"value":{"fallback":{"$inf$activity-creator-ec5fd7a3-e5e0-4e0f-bbee-91f173e9a07b-all:/unified/creator/ec5fd7a3-e5e0-4e0f-bbee-91f173e9a07b/activity/":[{"data":[{"id":"01a043cb-2b37-751c-aaa1-c17db50c143b","type":"creator.followed","target":{"type":"creator","id":"a7cd9fe6-cf81-4a41-8e93-bca0291dba80","preview":"Framer","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/107446/xpZr8yYS_400x400-2-MqZMjb2zlessnXickTqkyAzkfqz6le.jpg","slug":"framer","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"ec5fd7a3-e5e0-4e0f-bbee-91f173e9a07b","name":"Desygnative","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/798960/0MHTlURfG-5mrILqFcLbGupr4DI2pQtexOxTkouw","slug":"desygnative","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-27T15:16:23.465Z","latestAt":"2026-08-27T15:16:23.465Z"},{"id":"01a043c7-1440-7224-8dcc-1585ca5d3740","type":"comment.reply","target":{"type":"post","id":"019a0fdf-b760-7259-b737-8633f1093f03","preview":"Pan and Zoom Viewer","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/dPNU6bA2Q3DIVRYybBbB/pan-zoom-viewer-ExOZQAJWaFErw8oykHLBPjbVAqW1jq","targetDeleted":false,"owned":true,"actions":{"postId":"019a0fdf-b760-7259-b737-8633f1093f03","like":{"count":16,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a043c7-1422-717a-812b-f7efd294b867","preview":"HI @Lara Neuburg I have updated the component. You can update it and give it a spin. I'd love to know what you experience.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"HI "},{"type":"mention","attrs":{"id":"b7e2fb86-2f0c-4d79-bd39-937927ee914f","slug":"lara-neuburg","label":"Lara Neuburg","mentionSuggestionChar":"@"}},{"type":"text","text":" I have updated the component. You can update it and give it a spin. I'd love to know what you experience."}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019a0fdf-b760-7259-b737-8633f1093f03","like":{"count":0,"liked":false},"reply":{"parentCommentId":"019f8ecc-2196-74ef-940b-2e7d855777c4"},"repost":null}},"actors":[{"id":"ec5fd7a3-e5e0-4e0f-bbee-91f173e9a07b","name":"Desygnative","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/798960/0MHTlURfG-5mrILqFcLbGupr4DI2pQtexOxTkouw","slug":"desygnative","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-27T15:11:55.456Z","latestAt":"2026-08-27T15:11:55.456Z"},{"id":"01a0423e-21d0-74b7-b7fb-fab05fedee35","type":"comment.reply","target":{"type":"post","id":"01a0401c-49a4-7309-8ec4-1a0f359a9b9b","preview":"What does \"Show reported content mean\" on a published component? @Victoria @Framer Geeks","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"What does \"Show reported content mean\" on a published component? "},{"type":"mention","attrs":{"id":"40d92c41-f800-405e-a88c-e39a2d1cce36","slug":"victoria-framer","label":"Victoria","mentionSuggestionChar":"@"}},{"type":"text","text":" "},{"type":"mention","attrs":{"id":"e384faea-043f-4f5c-bd25-070ec91488d7","slug":"framergeeks","label":"Framer Geeks","mentionSuggestionChar":"@"}},{"type":"text","text":" "}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ec5fd7a3-e5e0-4e0f-bbee-91f173e9a07b/01a0401b-a822-701e-bdc3-b56171080cea.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a0401c-49a4-7309-8ec4-1a0f359a9b9b","like":{"count":7,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a0423e-21b5-73bd-9379-7ef9ca1a7d7a","preview":"Thank you.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Thank you."}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"01a0401c-49a4-7309-8ec4-1a0f359a9b9b","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a041ac-bc3c-7222-9499-db872a96fcaa"},"repost":null}},"actors":[{"id":"ec5fd7a3-e5e0-4e0f-bbee-91f173e9a07b","name":"Desygnative","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/798960/0MHTlURfG-5mrILqFcLbGupr4DI2pQtexOxTkouw","slug":"desygnative","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-27T08:02:43.280Z","latestAt":"2026-08-27T08:02:43.280Z"},{"id":"01a0423e-0962-74db-8dfe-b3f0f5939678","type":"comment.reply","target":{"type":"post","id":"01a0401c-49a4-7309-8ec4-1a0f359a9b9b","preview":"What does \"Show reported content mean\" on a published component? @Victoria @Framer Geeks","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"What does \"Show reported content mean\" on a published component? "},{"type":"mention","attrs":{"id":"40d92c41-f800-405e-a88c-e39a2d1cce36","slug":"victoria-framer","label":"Victoria","mentionSuggestionChar":"@"}},{"type":"text","text":" "},{"type":"mention","attrs":{"id":"e384faea-043f-4f5c-bd25-070ec91488d7","slug":"framergeeks","label":"Framer Geeks","mentionSuggestionChar":"@"}},{"type":"text","text":" "}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ec5fd7a3-e5e0-4e0f-bbee-91f173e9a07b/01a0401b-a822-701e-bdc3-b56171080cea.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a0401c-49a4-7309-8ec4-1a0f359a9b9b","like":{"count":7,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a0423e-0935-700f-8ceb-c928587c198e","preview":"Thank you it has been sorted.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Thank you it has been sorted."}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"01a0401c-49a4-7309-8ec4-1a0f359a9b9b","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a0405d-adca-70cd-af62-809181527d78"},"repost":null}},"actors":[{"id":"ec5fd7a3-e5e0-4e0f-bbee-91f173e9a07b","name":"Desygnative","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/798960/0MHTlURfG-5mrILqFcLbGupr4DI2pQtexOxTkouw","slug":"desygnative","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-27T08:02:37.026Z","latestAt":"2026-08-27T08:02:37.026Z"},{"id":"01a0423d-cb90-723c-8987-1cf30988bacc","type":"comment.liked","target":{"type":"comment","id":"01a0405d-adca-70cd-af62-809181527d78","preview":"It means your component requires some changes in order to be listed. You'll receive an email with instructions on what needs to change soon, if you haven't already.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"It means your component requires some changes in order to be listed. You'll receive an email with instructions on what needs to change soon, if you haven't already."}]},{"type":"paragraph"}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"01a0401c-49a4-7309-8ec4-1a0f359a9b9b","like":{"count":3,"liked":false},"reply":{"parentCommentId":"01a0405d-adca-70cd-af62-809181527d78"},"repost":null}},"context":{"type":"post","id":"01a0401c-49a4-7309-8ec4-1a0f359a9b9b","preview":"What does \"Show reported content mean\" on a published component? @Victoria @Framer Geeks","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"What does \"Show reported content mean\" on a published component? "},{"type":"mention","attrs":{"id":"40d92c41-f800-405e-a88c-e39a2d1cce36","slug":"victoria-framer","label":"Victoria","mentionSuggestionChar":"@"}},{"type":"text","text":" "},{"type":"mention","attrs":{"id":"e384faea-043f-4f5c-bd25-070ec91488d7","slug":"framergeeks","label":"Framer Geeks","mentionSuggestionChar":"@"}},{"type":"text","text":" "}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ec5fd7a3-e5e0-4e0f-bbee-91f173e9a07b/01a0401b-a822-701e-bdc3-b56171080cea.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a0401c-49a4-7309-8ec4-1a0f359a9b9b","like":{"count":7,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"ec5fd7a3-e5e0-4e0f-bbee-91f173e9a07b","name":"Desygnative","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/798960/0MHTlURfG-5mrILqFcLbGupr4DI2pQtexOxTkouw","slug":"desygnative","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-27T08:02:21.195Z","latestAt":"2026-08-27T08:02:21.195Z"},{"id":"01a0423d-c687-779a-a0aa-88612793ea24","type":"comment.liked","target":{"type":"comment","id":"01a041ac-bc3c-7222-9499-db872a96fcaa","preview":"Hi! Your component was automatically reported by our system due to some security issues. We see you have fixed those and now it's visible again in the marketplace: https://www.framer.com/marketplace/components/pan-zoom-viewer/","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Hi! Your component was automatically reported by our system due to some security issues. We see you have fixed those and now it's visible again in the marketplace: "},{"type":"text","text":"https://www.framer.com/marketplace/components/pan-zoom-viewer/","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"https://www.framer.com/marketplace/components/pan-zoom-viewer/","target":"_blank"}}]}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"01a0401c-49a4-7309-8ec4-1a0f359a9b9b","like":{"count":1,"liked":false},"reply":{"parentCommentId":"01a041ac-bc3c-7222-9499-db872a96fcaa"},"repost":null}},"context":{"type":"post","id":"01a0401c-49a4-7309-8ec4-1a0f359a9b9b","preview":"What does \"Show reported content mean\" on a published component? @Victoria @Framer Geeks","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"What does \"Show reported content mean\" on a published component? "},{"type":"mention","attrs":{"id":"40d92c41-f800-405e-a88c-e39a2d1cce36","slug":"victoria-framer","label":"Victoria","mentionSuggestionChar":"@"}},{"type":"text","text":" "},{"type":"mention","attrs":{"id":"e384faea-043f-4f5c-bd25-070ec91488d7","slug":"framergeeks","label":"Framer Geeks","mentionSuggestionChar":"@"}},{"type":"text","text":" "}]}]},"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ec5fd7a3-e5e0-4e0f-bbee-91f173e9a07b/01a0401b-a822-701e-bdc3-b56171080cea.png","targetDeleted":false,"owned":true,"actions":{"postId":"01a0401c-49a4-7309-8ec4-1a0f359a9b9b","like":{"count":7,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"ec5fd7a3-e5e0-4e0f-bbee-91f173e9a07b","name":"Desygnative","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/798960/0MHTlURfG-5mrILqFcLbGupr4DI2pQtexOxTkouw","slug":"desygnative","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-27T08:02:19.907Z","latestAt":"2026-08-27T08:02:19.907Z"},{"id":"01a03e80-a72e-77f8-85dd-349a0becb619","type":"comment.reply","target":{"type":"post","id":"019a0fdf-b760-7259-b737-8633f1093f03","preview":"Pan and Zoom Viewer","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/dPNU6bA2Q3DIVRYybBbB/pan-zoom-viewer-ExOZQAJWaFErw8oykHLBPjbVAqW1jq","targetDeleted":false,"owned":true,"actions":{"postId":"019a0fdf-b760-7259-b737-8633f1093f03","like":{"count":16,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a03e80-a715-77de-898b-58ff9cb9ea6a","preview":"Thanks so much for pointing this out.\nYou’re right that the initial and reset zoom are currently tied to 10%, and the Object Fit options aren’t differentiated clearly enough.\nI have been out of office for a while now. But I’m going to update the component. And I will like you know when it is updated.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Thanks so much for pointing this out."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"You’re right that the initial and reset zoom are currently tied to 10%, and the Object Fit options aren’t differentiated clearly enough."}]},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":"I have been out of office for a while now. But I’m going to update the component. And I will like you know when it is updated."}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019a0fdf-b760-7259-b737-8633f1093f03","like":{"count":0,"liked":false},"reply":{"parentCommentId":"019f8ecc-2196-74ef-940b-2e7d855777c4"},"repost":null}},"actors":[{"id":"ec5fd7a3-e5e0-4e0f-bbee-91f173e9a07b","name":"Desygnative","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/798960/0MHTlURfG-5mrILqFcLbGupr4DI2pQtexOxTkouw","slug":"desygnative","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-26T14:36:53.934Z","latestAt":"2026-08-26T14:36:53.934Z"},{"id":"01a03e7f-955c-76fb-97ea-f4edcd9c2083","type":"comment.liked","target":{"type":"comment","id":"019f8ecc-2196-74ef-940b-2e7d855777c4","preview":"Thanks for the component, it's helping a lot. But I'm confused how to change the inital zoom percentage. It starts with 10 % and also resets to that 10 % on the reset button. The \"Object Fit\" selection doesn't differentiate either.","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Thanks for the component, it's helping a lot. But I'm confused how to change the inital zoom percentage. It starts with 10 % and also resets to that 10 % on the reset button. The \"Object Fit\" selection doesn't differentiate either. "}]}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019a0fdf-b760-7259-b737-8633f1093f03","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019f8ecc-2196-74ef-940b-2e7d855777c4"},"repost":null}},"context":{"type":"post","id":"019a0fdf-b760-7259-b737-8633f1093f03","preview":"Pan and Zoom Viewer","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/dPNU6bA2Q3DIVRYybBbB/pan-zoom-viewer-ExOZQAJWaFErw8oykHLBPjbVAqW1jq","targetDeleted":false,"owned":true,"actions":{"postId":"019a0fdf-b760-7259-b737-8633f1093f03","like":{"count":16,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"ec5fd7a3-e5e0-4e0f-bbee-91f173e9a07b","name":"Desygnative","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/798960/0MHTlURfG-5mrILqFcLbGupr4DI2pQtexOxTkouw","slug":"desygnative","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-26T14:35:43.831Z","latestAt":"2026-08-26T14:35:43.831Z"},{"id":"01a03e73-7eaa-71d7-b81c-4ee2ef6f7681","type":"comment.reply","target":{"type":"post","id":"019a0fdf-b760-7259-b737-8633f1093f03","preview":"Pan and Zoom Viewer","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/dPNU6bA2Q3DIVRYybBbB/pan-zoom-viewer-ExOZQAJWaFErw8oykHLBPjbVAqW1jq","targetDeleted":false,"owned":true,"actions":{"postId":"019a0fdf-b760-7259-b737-8633f1093f03","like":{"count":16,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"context":{"type":"comment","id":"01a03e73-7e8c-7143-8c2b-d9aa2608fda5","preview":"Thank you Irina. I have updated the component to have a default state and mobile state. This makes it responsive for you to add the interactive pan and zoom component to you project. Would you like a demo on how to achieve that?","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Thank you Irina. I have updated the component to have a default state and mobile state. This makes it responsive for you to add the interactive pan and zoom component to you project. Would you like a demo on how to achieve that?"}]}]},"thumbnail":null,"targetDeleted":false,"owned":true,"actions":{"postId":"019a0fdf-b760-7259-b737-8633f1093f03","like":{"count":0,"liked":false},"reply":{"parentCommentId":"019fb871-521a-7361-a0c2-0cdeac5e68c1"},"repost":null}},"actors":[{"id":"ec5fd7a3-e5e0-4e0f-bbee-91f173e9a07b","name":"Desygnative","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/798960/0MHTlURfG-5mrILqFcLbGupr4DI2pQtexOxTkouw","slug":"desygnative","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-26T14:22:31.594Z","latestAt":"2026-08-26T14:22:31.594Z"},{"id":"01a03e72-4d62-72e8-b9d9-1d0a4bf66f02","type":"comment.liked","target":{"type":"comment","id":"019fb871-521a-7361-a0c2-0cdeac5e68c1","preview":"nice component, but unfortunately not responsive enough regarding the toolbar, it doesn't scale in small breakpoints like phone (320-375px), it just crops the toolbar","previewJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"nice component, but unfortunately not responsive enough regarding the toolbar, it doesn't scale in small breakpoints like phone (320-375px), it just crops the toolbar"}]},{"type":"paragraph"}]},"thumbnail":null,"targetDeleted":false,"owned":false,"actions":{"postId":"019a0fdf-b760-7259-b737-8633f1093f03","like":{"count":1,"liked":false},"reply":{"parentCommentId":"019fb871-521a-7361-a0c2-0cdeac5e68c1"},"repost":null}},"context":{"type":"post","id":"019a0fdf-b760-7259-b737-8633f1093f03","preview":"Pan and Zoom Viewer","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/dPNU6bA2Q3DIVRYybBbB/pan-zoom-viewer-ExOZQAJWaFErw8oykHLBPjbVAqW1jq","targetDeleted":false,"owned":true,"actions":{"postId":"019a0fdf-b760-7259-b737-8633f1093f03","like":{"count":16,"liked":false},"reply":{"parentCommentId":null},"repost":{"count":0,"reposted":false,"repostId":null}}},"actors":[{"id":"ec5fd7a3-e5e0-4e0f-bbee-91f173e9a07b","name":"Desygnative","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/798960/0MHTlURfG-5mrILqFcLbGupr4DI2pQtexOxTkouw","slug":"desygnative","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":null,"visibility":"public","startedAt":"2026-08-26T14:21:13.437Z","latestAt":"2026-08-26T14:21:13.437Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:ec5fd7a3-e5e0-4e0f-bbee-91f173e9a07b:/unified/posts/?creator=ec5fd7a3-e5e0-4e0f-bbee-91f173e9a07b&with=reposts":[{"data":[{"id":"01a0401c-49a4-7309-8ec4-1a0f359a9b9b","title":null,"body":"

What does "Show reported content mean" on a published component? @Victoria @Framer Geeks

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"What does \"Show reported content mean\" on a published component? "},{"type":"mention","attrs":{"id":"40d92c41-f800-405e-a88c-e39a2d1cce36","slug":"victoria-framer","label":"Victoria","mentionSuggestionChar":"@"}},{"type":"text","text":" "},{"type":"mention","attrs":{"id":"e384faea-043f-4f5c-bd25-070ec91488d7","slug":"framergeeks","label":"Framer Geeks","mentionSuggestionChar":"@"}},{"type":"text","text":" "}]}]},"author":{"framerUserId":"ec5fd7a3-e5e0-4e0f-bbee-91f173e9a07b","name":"Desygnative","slug":"desygnative","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/798960/0MHTlURfG-5mrILqFcLbGupr4DI2pQtexOxTkouw","badges":["available","studio"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/ec5fd7a3-e5e0-4e0f-bbee-91f173e9a07b/01a0401b-a822-701e-bdc3-b56171080cea.png","metadata":{"tint":{"h":0,"s":0,"l":58},"width":1374,"height":620}}],"resources":[],"contests":[],"categories":[{"id":"cf35162f-8406-49a9-a023-4c58024795ee","name":"General","slug":"general","description":"General","metaTitle":"General","metaDescription":"General"}],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":5},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-26T22:06:30.827Z","updatedAt":"2026-08-26T22:06:30.827Z"},{"id":"019a0fdf-b760-7259-b737-8633f1093f03","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"ec5fd7a3-e5e0-4e0f-bbee-91f173e9a07b","name":"Desygnative","slug":"desygnative","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/798960/0MHTlURfG-5mrILqFcLbGupr4DI2pQtexOxTkouw","badges":["available","studio"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"dPNU6bA2Q3DIVRYybBbB","resolved":true,"title":"Pan and Zoom Viewer","body":"

The Pan & Zoom Viewer is a versatile Framer component that lets users pan and zoom images with smooth, intuitive controls. The built-in toolbar provides quick access to pan mode, zoom in/out, and reset functions. The control panel is fully customizable—change its position, background, corner radius, padding, and shadow to match your design.The component supports responsive images and adapts to any layout, making it so perfect for Navigating large maps and blueprints, Reviewing large documents, Navigating 3D environments, and more.

Features:

Pan and zoom with mouse, touch, or toolbar controls
Responsive image support
Customizable toolbar and control panel
Reset to fit image automatically
Accessible and easy to use
Works in any Framer project

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"The Pan & Zoom Viewer","marks":[{"type":"bold"}]},{"type":"text","text":" is a versatile Framer component that lets users pan and zoom images with smooth, intuitive controls. The built-in toolbar provides quick access to pan mode, zoom in/out, and reset functions. The control panel is fully customizable—change its position, background, corner radius, padding, and shadow to match your design.The component supports responsive images and adapts to any layout, making it so perfect for "},{"type":"text","text":"Navigating large maps and blueprints","marks":[{"type":"bold"}]},{"type":"text","text":", "},{"type":"text","text":"Reviewing large documents","marks":[{"type":"bold"}]},{"type":"text","text":", "},{"type":"text","text":"Navigating 3D environments","marks":[{"type":"bold"}]},{"type":"text","text":", and more."}]},{"type":"customHeading","content":[{"type":"text","text":"Features:"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pan and zoom with mouse, touch, or toolbar controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive image support"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customizable toolbar and control panel"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Reset to fit image automatically"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Accessible and easy to use"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Works in any Framer project"}]}]}]}]},"introduction":"High-precision image exploration","slug":"pan-zoom-viewer","author":{"framerUserId":"ec5fd7a3-e5e0-4e0f-bbee-91f173e9a07b","name":"Desygnative","slug":"desygnative","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/798960/0MHTlURfG-5mrILqFcLbGupr4DI2pQtexOxTkouw","badges":["available","studio"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/dPNU6bA2Q3DIVRYybBbB/pan-zoom-viewer-ExOZQAJWaFErw8oykHLBPjbVAqW1jq","metadata":{"tint":{"h":0,"s":0,"l":58},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-10-13T13:32:34.971Z","updatedAt":"2026-08-26T21:59:49.375Z","publishedAt":"2025-10-23T07:01:51.072Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://interactiveimageviewer.framer.website","price":"7","paymentUrl":"https://buy.stripe.com/4gMbJ2d3D57K0sD6btaMU08","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"X1TYjyGA2yFioWxKyL4F","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":16,"liked":false},"comments":{"count":5},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-10-23T07:01:51.072Z","updatedAt":"2025-10-23T07:01:51.072Z"},{"id":"01996368-36ba-7f86-9060-dd4ba0da97c3","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"ec5fd7a3-e5e0-4e0f-bbee-91f173e9a07b","name":"Desygnative","slug":"desygnative","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/798960/0MHTlURfG-5mrILqFcLbGupr4DI2pQtexOxTkouw","badges":["available","studio"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"CXTPXADINe2YfnUWtvZt","resolved":true,"title":"Social Proof Review","body":"$62","bodyJson":null,"introduction":"Lightweight proof to boosts credibility","slug":"proof-stacky","author":{"framerUserId":"ec5fd7a3-e5e0-4e0f-bbee-91f173e9a07b","name":"Desygnative","slug":"desygnative","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/798960/0MHTlURfG-5mrILqFcLbGupr4DI2pQtexOxTkouw","badges":["available","studio"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/CXTPXADINe2YfnUWtvZt/proof-stacky-uPaCgBWYz72HSwNLsAENRPDlujlJcZ","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-09-12T16:56:51.687Z","updatedAt":"2026-05-09T07:10:57.023Z","publishedAt":"2025-09-19T19:16:38.202Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://proofstacky.framer.website/","price":"15","paymentUrl":"https://buy.stripe.com/dRmfZi3t38jW5MXeHZaMU06","workshop":false,"categories":[{"id":"cd81cc33-d6cf-4630-8e59-b5b3100166ba","name":"Buttons","slug":"buttons"}],"lastSaveId":"OZQ4X5T1ANCHFAuUoe9T","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":5,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-09-19T19:16:38.202Z","updatedAt":"2025-09-19T19:16:38.202Z"},{"id":"019874f7-e882-7ab6-b218-81914ed3c3b3","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"ec5fd7a3-e5e0-4e0f-bbee-91f173e9a07b","name":"Desygnative","slug":"desygnative","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/798960/0MHTlURfG-5mrILqFcLbGupr4DI2pQtexOxTkouw","badges":["available","studio"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"8FTFvWMEFXvyySoQEyND","resolved":true,"title":"Before After Slider","body":"$63","bodyJson":null,"introduction":"Show the difference instantly","slug":"before-after-slider","author":{"framerUserId":"ec5fd7a3-e5e0-4e0f-bbee-91f173e9a07b","name":"Desygnative","slug":"desygnative","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/798960/0MHTlURfG-5mrILqFcLbGupr4DI2pQtexOxTkouw","badges":["available","studio"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/8FTFvWMEFXvyySoQEyND/before-after-slider-dYSocRfXAx7SnJafouSG2J7CQKm7OR","metadata":{"tint":{"h":0,"s":10,"l":16},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-08-01T14:20:11.816Z","updatedAt":"2026-05-09T07:11:55.376Z","publishedAt":"2025-08-04T12:04:20.738Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://beforeandafterslider.framer.website","price":"11","paymentUrl":"https://buy.stripe.com/28E7sM8Nn7fSdfp2ZhaMU09","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"0OxPOAloeqP4vOJoslFi","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":3,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-08-04T12:04:20.738Z","updatedAt":"2025-08-04T12:04:20.738Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L64"}]