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

1. Introduction

The ZoomableProductViewer component enables users to zoom in on product images interactively, enhancing visual details for better product examination.

2. Features

Interactive zoom functionality with various modes (hover, click, both)
Customizable zoom lens shape and size
Adjustable zoom level for detailed views
Option to display a hint and zoom indicator for user guidance
Configurable styles including background color and shadow effects

3. Installation & Setup

To add the ZoomableProductViewer component to your Framer project.

Open your Framer project.
Navigate to the Marketplace and search for "ZoomableProductViewer".
Click the "Install" button to add the component to your project.
Drag the ZoomableProductViewer component onto your canvas.

4. How to Use

Select the Component: Click on the ZoomableProductViewer component on the canvas.
Upload an Image: In the properties panel, upload a high-resolution image for better zoom quality.
Configure Zoom Settings:- Set the zoom level, lens size, and shape according to your preference.
Adjust Style: Modify the background color, border radius, and shadow settings to match your design.
Customize UI Elements: Enable or disable the hint and zoom indicator as needed.
Set Interaction Preferences: Choose how the zoom is activated (hover, click, or both) and adjust smooth follow settings.
Preview: Test the component in preview mode to ensure the zoom functionality works as expected.

5. Property Controls Reference

zoomConfigures the zoom functionality of the component.

level (Number, Default: 2.5) - The magnification level applied to the image when zoomed.
lensSize (Number, Default: 150) - The diameter of the zoom lens in pixels.
lensShape (Enum, Default: "circle") - Determines the shape of the zoom lens (circle or square).
showLensBorder (Boolean, Default: true) - Whether to display a border around the zoom lens.
lensBorderColor (Color, Default: "rgba(255, 255, 255, 0.8)") - Color of the lens border.
lensBorderWidth (Number, Default: 3) - Thickness of the lens border in pixels.
safePadding (Number, Default: 32) - Extra padding to prevent lens clipping at edges.

styleControls the visual appearance of the component.

backgroundColor (Color, Default: "#0a0a0a") - Background color of the component.
borderRadius (Number, Default: 12) - Corner roundness in pixels.
showShadow (Boolean, Default: true) - Whether to display a shadow around the component.
shadowColor (Color, Default: "rgba(0, 0, 0, 0.3)") - Color of the shadow.
shadowBlur (Number, Default: 30) - Blur effect of the shadow in pixels.

uiConfigures user interface elements of the component.

showHint (Boolean, Default: true) - Whether to display a hint when the user hovers over the image.
hintText (String, Default: "Hover to zoom") - Text displayed in the hint.
hintPosition (Enum, Default: "top-left") - Position of the hint relative to the component.
showZoomIndicator (Boolean, Default: true) - Whether to display the zoom level indicator.
cursorStyle (Enum, Default: "crosshair") - Style of the cursor when hovering over the component.

interactionConfigures user interaction settings.

zoomMode (Enum, Default: "hover") - Determines how the zoom is activated (hover, click, or both).
smoothFollow (Boolean, Default: true) - Enables smooth following of the mouse cursor within the zoom area.
followSpeed (Number, Default: 0.15) - Speed of the smooth follow effect.

5a:[["$","$L5d",null,{"post":{"id":"019bb2eb-02f6-7e05-ba5e-c213db9767a3","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"q1V9uzVysGIM5SsrsKe7","resolved":true,"title":"ZoomableProdViewer","body":"$5e","bodyJson":null,"introduction":"","slug":"zoomableprodviewer","author":{"framerUserId":"6d43fd29-d6cb-4b85-8ffa-bdbf08dee210","name":"MJ Jung","slug":"mj-jung","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1325340/avatar-f4iYjxZk24mLMcclLvPyH7L98S6D4u.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/q1V9uzVysGIM5SsrsKe7/zoomableprodviewer-UxaFdmyqmvTfxz85o5n877C6fATyC7","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-12-22T16:55:13.682Z","updatedAt":"2026-01-12T15:06:57.008Z","publishedAt":"2026-01-12T15:55:04.822Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://authentic-updates-564137.framer.app/","price":"8","paymentUrl":"https://buy.polar.sh/polar_cl_Z7MDcPCnBl6lQSzDDQ0OixhN7WHFDaaKXI3JN1y2Itb","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"2EmwsGMcGLwG2iylgJeS","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-01-12T15:55:04.822Z","updatedAt":"2026-01-12T15:55:04.822Z","reported":false}}],"$L5f"]

Suggested for you