const{Fragment:n,jsx:e,jsxs:t}=arguments[0];function _createMdxContent(i){const o={a:"a",code:"code",em:"em",h1:"h1",h2:"h2",h3:"h3",hr:"hr",li:"li",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",ul:"ul",...i.components};return t(n,{children:[e(o.h1,{children:"ZoomOnHover"}),"\n",e(o.p,{children:"The ZoomOnHover variant creates smooth zoom effects that respond to mouse hover, providing engaging visual feedback and enhanced user interaction. Features multiple animation types, flexible transform origins, customizable effects, and performance-optimized transforms for professional image experiences."}),"\n",e(o.h2,{children:"Features"}),"\n",t(o.ul,{children:["\n",t(o.li,{children:[e(o.strong,{children:"9 Animation Types"}),": From simple scales to elastic bounces and 3D perspectives"]}),"\n",t(o.li,{children:[e(o.strong,{children:"Flexible Transform Origins"}),": 9 predefined positions plus cursor-following zoom"]}),"\n",t(o.li,{children:[e(o.strong,{children:"Advanced Effects"}),": Combine zoom with rotation, blur, opacity, and translation"]}),"\n",t(o.li,{children:[e(o.strong,{children:"Performance Optimized"}),": Smooth CSS transform animations with 60fps rendering"]}),"\n",t(o.li,{children:[e(o.strong,{children:"Touch Device Support"}),": Optional touch interactions for mobile experiences"]}),"\n",t(o.li,{children:[e(o.strong,{children:"Customizable Timing"}),": Precise control over duration, delay, and easing"]}),"\n",t(o.li,{children:[e(o.strong,{children:"TypeScript Ready"}),": Complete type definitions and IntelliSense"]}),"\n"]}),"\n",e(o.h2,{children:"Quick Start"}),"\n",e(o.pre,{children:e(o.code,{className:"language-tsx",children:'import { ReactiveImage } from "reactive-image";\n\nexport default function ProductPreview() {\n return (\n \n );\n}\n'})}),"\n",e(o.h2,{children:"Animation Types"}),"\n",e(o.h3,{children:"Basic Zoom Effects"}),"\n",e(o.p,{children:"Simple and reliable zoom animations for most use cases."}),"\n",e(o.pre,{children:e(o.code,{className:"language-tsx",children:'// Simple scale (default)\n\n\n// Scale with fade\n\n\n// Scale with slide\n\n'})}),"\n",e(o.h3,{children:"Dynamic Effects"}),"\n",e(o.p,{children:"Add movement and rotation for more engaging interactions."}),"\n",e(o.pre,{children:e(o.code,{className:"language-tsx",children:'// Scale with rotation\n\n\n// 3D perspective zoom\n\n\n// Scale with blur\n\n'})}),"\n",e(o.h3,{children:"Elastic & Bounce Effects"}),"\n",e(o.p,{children:"Playful animations with spring physics for modern interfaces."}),"\n",e(o.pre,{children:e(o.code,{className:"language-tsx",children:'// Elastic zoom\n\n\n// Bounce effect\n\n\n// Pulse animation\n\n'})}),"\n",e(o.h2,{children:"Transform Origins"}),"\n",e(o.p,{children:"Control where the zoom effect originates for different interaction patterns."}),"\n",e(o.pre,{children:e(o.code,{className:"language-tsx",children:'// Center origin (default)\n\n\n// Corner origins for asymmetric effects\n

\n \n\n \n\n \n\n \n

\n\n// Edge origins for directional effects\n

\n \n\n \n\n \n\n \n

\n'})}),"\n",e(o.h2,{children:"Cursor-Following Zoom"}),"\n",e(o.p,{children:"Interactive zoom that follows mouse position for exploration interfaces."}),"\n",e(o.pre,{children:e(o.code,{className:"language-tsx",children:'// Cursor-following zoom\n\n\n// Magnifying glass effect\n\n'})}),"\n",e(o.h2,{children:"Timing & Performance"}),"\n",e(o.p,{children:"Fine-tune animation responsiveness and visual feedback."}),"\n",e(o.pre,{children:e(o.code,{className:"language-tsx",children:'// Fast responsive zoom\n\n\n// Smooth professional zoom\n\n\n// Dramatic artistic zoom\n\n'})}),"\n",e(o.h2,{children:"Advanced Configuration"}),"\n",e(o.p,{children:"Customize overflow behavior, opacity effects, and interaction patterns."}),"\n",e(o.pre,{children:e(o.code,{className:"language-tsx",children:'// Contained zoom (prevents overflow)\n\n\n// Multi-effect combination\n\n\n// Touch-enabled zoom\n\n'})}),"\n",e(o.h2,{children:"Event Handling & Analytics"}),"\n",e(o.p,{children:"Track zoom interactions and trigger custom behaviors."}),"\n",e(o.pre,{children:e(o.code,{className:"language-tsx",children:'export default function TrackedZoomImage() {\n const handleZoomStart = () => {\n console.log("Zoom interaction started");\n // Track user engagement\n analytics.track("image_zoom_start", {\n zoom_scale: 1.2,\n animation_type: "elastic",\n });\n };\n\n const handleZoomEnd = () => {\n console.log("Zoom interaction ended");\n // Track interaction completion\n analytics.track("image_zoom_end");\n };\n\n return (\n \n );\n}\n'})}),"\n",e(o.h2,{children:"Styling & CSS Integration"}),"\n",e(o.p,{children:"Combine with CSS classes for complex designs and state-based styling."}),"\n",e(o.pre,{children:e(o.code,{className:"language-tsx",children:'// Dynamic styling during zoom\n\n\n// Card layout with consistent zoom effects\n

\n {imageGallery.map((item, index) => (\n

\n \n

{item.title}

{item.description}

\n ))}\n

\n'})}),"\n",e(o.h2,{children:"Real-World Patterns"}),"\n",e(o.h3,{children:"E-commerce Product Grid"}),"\n",e(o.pre,{children:e(o.code,{className:"language-tsx",children:'const products = [\n {\n id: 1,\n image: "/products/sneakers-1.jpg",\n name: "Premium Running Shoes",\n price: "$129.99",\n rating: 4.8,\n badge: "Best Seller",\n },\n {\n id: 2,\n image: "/products/sneakers-2.jpg",\n name: "Urban Street Style",\n price: "$89.99",\n rating: 4.6,\n badge: "New Arrival",\n },\n {\n id: 3,\n image: "/products/sneakers-3.jpg",\n name: "Casual Comfort",\n price: "$69.99",\n rating: 4.7,\n badge: null,\n },\n];\n\nexport default function ProductGrid() {\n return (\n

\n Featured Products\n

\n\n

\n {products.map((product) => (\n \n {/* Product Image with Zoom */}\n

\n {product.badge && (\n \n {product.badge}\n \n )}\n\n \n

\n\n {/* Product Info */}\n

\n {product.name}\n

\n ★\n \n {product.rating}\n \n

\n\n

\n \n {product.price}\n \n \n

\n ))}\n

\n \n );\n}\n'})}),"\n",e(o.h3,{children:"Photography Portfolio"}),"\n",e(o.pre,{children:e(o.code,{className:"language-tsx",children:'const portfolioImages = [\n {\n id: 1,\n src: "/portfolio/landscape-1.jpg",\n title: "Mountain Sunrise",\n category: "Landscape",\n location: "Swiss Alps",\n },\n {\n id: 2,\n src: "/portfolio/portrait-1.jpg",\n title: "Street Portrait",\n category: "Portrait",\n location: "Tokyo, Japan",\n },\n {\n id: 3,\n src: "/portfolio/architecture-1.jpg",\n title: "Modern Architecture",\n category: "Architecture",\n location: "New York City",\n },\n {\n id: 4,\n src: "/portfolio/wildlife-1.jpg",\n title: "Wildlife Safari",\n category: "Wildlife",\n location: "Serengeti, Tanzania",\n },\n];\n\nexport default function PhotographyPortfolio() {\n return (\n

Photography Portfolio

\n Capturing moments, creating memories\n

\n\n

\n {portfolioImages.map((image, index) => (\n

\n \n\n {/* Overlay Information */}\n

\n \n {image.category}\n \n

{image.title}

📍 {image.location}

\n ))}\n

\n );\n}\n'})}),"\n",e(o.h3,{children:"Interactive Image Explorer"}),"\n",e(o.pre,{children:e(o.code,{className:"language-tsx",children:'const explorationImages = [\n {\n src: "/explore/city-aerial.jpg",\n title: "Urban Exploration",\n hotspots: [\n { x: 30, y: 40, label: "Financial District" },\n { x: 70, y: 25, label: "Central Park" },\n { x: 55, y: 80, label: "Harbor Area" },\n ],\n },\n {\n src: "/explore/museum-interior.jpg",\n title: "Museum Virtual Tour",\n hotspots: [\n { x: 20, y: 30, label: "Ancient Artifacts" },\n { x: 80, y: 45, label: "Modern Art Gallery" },\n { x: 50, y: 70, label: "Interactive Exhibits" },\n ],\n },\n];\n\nexport default function InteractiveExplorer() {\n const [selectedImage, setSelectedImage] = useState(0);\n\n return (\n

\n Interactive Explorer\n

\n\n

\n {explorationImages.map((_, index) => (\n setSelectedImage(index)}\n className={`px-6 py-2 rounded-lg font-medium transition-colors ${\n selectedImage === index\n ? "bg-blue-500 text-white"\n : "bg-gray-200 text-gray-700 hover:bg-gray-300"\n }`}\n >\n View {index + 1}\n \n ))}\n

\n\n

\n \n\n {/* Hotspots */}\n {explorationImages[selectedImage].hotspots.map((hotspot, index) => (\n \n

\n {hotspot.label}\n

\n ))}\n

\n\n

\n {explorationImages[selectedImage].title}\n

\n Hover over the image to zoom in and explore. Click hotspots for more\n information.\n

\n \n );\n}\n'})}),"\n",e(o.h2,{children:"API Reference"}),"\n",e(o.h3,{children:"Props"}),"\n",t(o.table,{children:[e(o.thead,{children:t(o.tr,{children:[e(o.th,{children:"Prop"}),e(o.th,{children:"Type"}),e(o.th,{children:"Default"}),e(o.th,{children:"Description"})]})}),t(o.tbody,{children:[t(o.tr,{children:[e(o.td,{children:e(o.code,{children:"zoomScale"})}),e(o.td,{children:e(o.code,{children:"number"})}),e(o.td,{children:e(o.code,{children:"1.15"})}),e(o.td,{children:"Zoom scale factor (1.0 = original size)"})]}),t(o.tr,{children:[e(o.td,{children:e(o.code,{children:"animation"})}),e(o.td,{children:e(o.code,{children:"ZoomAnimationType"})}),e(o.td,{children:e(o.code,{children:'"scale"'})}),e(o.td,{children:"Animation type and behavior"})]}),t(o.tr,{children:[e(o.td,{children:e(o.code,{children:"origin"})}),e(o.td,{children:e(o.code,{children:"ZoomOrigin"})}),e(o.td,{children:e(o.code,{children:'"center"'})}),e(o.td,{children:"Transform origin point"})]}),t(o.tr,{children:[e(o.td,{children:e(o.code,{children:"timing"})}),e(o.td,{children:e(o.code,{children:"ZoomTiming"})}),e(o.td,{children:e(o.code,{children:"{}"})}),e(o.td,{children:"Animation timing configuration"})]}),t(o.tr,{children:[e(o.td,{children:e(o.code,{children:"followCursor"})}),e(o.td,{children:e(o.code,{children:"boolean"})}),e(o.td,{children:e(o.code,{children:"false"})}),e(o.td,{children:"Enable cursor following (for cursor origin)"})]}),t(o.tr,{children:[e(o.td,{children:e(o.code,{children:"opacityChange"})}),e(o.td,{children:e(o.code,{children:"number"})}),e(o.td,{children:e(o.code,{children:"1"})}),e(o.td,{children:"Opacity during zoom (0-1)"})]}),t(o.tr,{children:[e(o.td,{children:e(o.code,{children:"blurAmount"})}),e(o.td,{children:e(o.code,{children:"number"})}),e(o.td,{children:e(o.code,{children:"0"})}),e(o.td,{children:"Blur amount in pixels"})]}),t(o.tr,{children:[e(o.td,{children:e(o.code,{children:"rotation"})}),e(o.td,{children:e(o.code,{children:"number"})}),e(o.td,{children:e(o.code,{children:"0"})}),e(o.td,{children:"Rotation angle in degrees"})]}),t(o.tr,{children:[e(o.td,{children:e(o.code,{children:"containZoom"})}),e(o.td,{children:e(o.code,{children:"boolean"})}),e(o.td,{children:e(o.code,{children:"false"})}),e(o.td,{children:"Prevent zoom overflow"})]}),t(o.tr,{children:[e(o.td,{children:e(o.code,{children:"enableTouch"})}),e(o.td,{children:e(o.code,{children:"boolean"})}),e(o.td,{children:e(o.code,{children:"false"})}),e(o.td,{children:"Enable touch device support"})]}),t(o.tr,{children:[e(o.td,{children:e(o.code,{children:"zoomClassName"})}),e(o.td,{children:e(o.code,{children:"string"})}),e(o.td,{children:e(o.code,{children:"undefined"})}),e(o.td,{children:"CSS class applied during zoom"})]}),t(o.tr,{children:[e(o.td,{children:e(o.code,{children:"onZoomStart"})}),e(o.td,{children:e(o.code,{children:"function"})}),e(o.td,{children:e(o.code,{children:"undefined"})}),e(o.td,{children:"Zoom start callback"})]}),t(o.tr,{children:[e(o.td,{children:e(o.code,{children:"onZoomEnd"})}),e(o.td,{children:e(o.code,{children:"function"})}),e(o.td,{children:e(o.code,{children:"undefined"})}),e(o.td,{children:"Zoom end callback"})]})]})]}),"\n",e(o.h3,{children:"Types"}),"\n",e(o.pre,{children:e(o.code,{className:"language-tsx",children:'// Animation types\ntype ZoomAnimationType =\n | "scale" // Simple scale transformation\n | "scaleRotate" // Scale with rotation effect\n | "scaleBlur" // Scale with blur effect\n | "scaleFade" // Scale with opacity change\n | "scaleSlide" // Scale with slight translation\n | "perspective" // 3D perspective transformation\n | "pulse" // Quick pulse effect\n | "bounce" // Bouncy elastic effect\n | "elastic"; // Smooth elastic transformation\n\n// Transform origins\ntype ZoomOrigin =\n | "center" // Center of image\n | "top" // Top edge\n | "bottom" // Bottom edge\n | "left" // Left edge\n | "right" // Right edge\n | "top-left" // Top-left corner\n | "top-right" // Top-right corner\n | "bottom-left" // Bottom-left corner\n | "bottom-right" // Bottom-right corner\n | "cursor"; // Mouse position\n\n// Timing configuration\ntype ZoomTiming = {\n duration?: number; // Animation duration in ms (default: 300)\n delay?: number; // Animation delay in ms (default: 0)\n easing?: string; // CSS easing function (default: "ease-out")\n};\n'})}),"\n",e(o.h3,{children:"Animation Performance Guide"}),"\n",t(o.table,{children:[e(o.thead,{children:t(o.tr,{children:[e(o.th,{children:"Animation"}),e(o.th,{children:"Performance"}),e(o.th,{children:"Mobile Friendly"}),e(o.th,{children:"Best Scale Range"}),e(o.th,{children:"Recommended Uses"})]})}),t(o.tbody,{children:[t(o.tr,{children:[e(o.td,{children:e(o.code,{children:"scale"})}),e(o.td,{children:"⭐⭐⭐⭐⭐"}),e(o.td,{children:"✅ Excellent"}),e(o.td,{children:"1.1-1.3"}),e(o.td,{children:"Product images, UI"})]}),t(o.tr,{children:[e(o.td,{children:e(o.code,{children:"scaleRotate"})}),e(o.td,{children:"⭐⭐⭐⭐"}),e(o.td,{children:"✅ Good"}),e(o.td,{children:"1.1-1.2"}),e(o.td,{children:"Creative interactions"})]}),t(o.tr,{children:[e(o.td,{children:e(o.code,{children:"scaleBlur"})}),e(o.td,{children:"⭐⭐⭐"}),e(o.td,{children:"⚠️ Moderate"}),e(o.td,{children:"1.1-1.25"}),e(o.td,{children:"Artistic effects"})]}),t(o.tr,{children:[e(o.td,{children:e(o.code,{children:"scaleFade"})}),e(o.td,{children:"⭐⭐⭐⭐⭐"}),e(o.td,{children:"✅ Excellent"}),e(o.td,{children:"1.1-1.4"}),e(o.td,{children:"Subtle interactions"})]}),t(o.tr,{children:[e(o.td,{children:e(o.code,{children:"scaleSlide"})}),e(o.td,{children:"⭐⭐⭐⭐"}),e(o.td,{children:"✅ Good"}),e(o.td,{children:"1.05-1.15"}),e(o.td,{children:"Card hover effects"})]}),t(o.tr,{children:[e(o.td,{children:e(o.code,{children:"perspective"})}),e(o.td,{children:"⭐⭐⭐"}),e(o.td,{children:"⚠️ Moderate"}),e(o.td,{children:"1.1-1.2"}),e(o.td,{children:"Hero sections"})]}),t(o.tr,{children:[e(o.td,{children:e(o.code,{children:"pulse"})}),e(o.td,{children:"⭐⭐⭐⭐⭐"}),e(o.td,{children:"✅ Excellent"}),e(o.td,{children:"1.05-1.15"}),e(o.td,{children:"Button interactions"})]}),t(o.tr,{children:[e(o.td,{children:e(o.code,{children:"bounce"})}),e(o.td,{children:"⭐⭐⭐⭐"}),e(o.td,{children:"✅ Good"}),e(o.td,{children:"1.1-1.25"}),e(o.td,{children:"Playful interfaces"})]}),t(o.tr,{children:[e(o.td,{children:e(o.code,{children:"elastic"})}),e(o.td,{children:"⭐⭐⭐⭐"}),e(o.td,{children:"✅ Good"}),e(o.td,{children:"1.1-1.3"}),e(o.td,{children:"Premium interactions"})]})]})]}),"\n",e(o.h2,{children:"Performance Guidelines"}),"\n",e(o.h3,{children:"Optimization Tips"}),"\n",t(o.ul,{children:["\n",t(o.li,{children:[e(o.strong,{children:"Scale Range"}),": Use 1.1-1.3 for optimal visual impact without performance issues"]}),"\n",t(o.li,{children:[e(o.strong,{children:"Mobile Optimization"}),": Prefer shorter durations (200-400ms) and smaller scales on mobile"]}),"\n",t(o.li,{children:[e(o.strong,{children:"Blur Effects"}),": Limit blur to 2-5px for good performance across devices"]}),"\n",t(o.li,{children:[e(o.strong,{children:"Container Overflow"}),": Use ",e(o.code,{children:"containZoom={true}"})," to prevent layout shifts"]}),"\n",t(o.li,{children:[e(o.strong,{children:"Touch Events"}),": Enable ",e(o.code,{children:"enableTouch"})," only when necessary to save resources"]}),"\n"]}),"\n",e(o.h3,{children:"Accessibility"}),"\n",e(o.pre,{children:e(o.code,{className:"language-tsx",children:'// Respects user motion preferences\n\n'})}),"\n",e(o.h3,{children:"Browser Support"}),"\n",t(o.table,{children:[e(o.thead,{children:t(o.tr,{children:[e(o.th,{children:"Feature"}),e(o.th,{children:"Chrome 80+"}),e(o.th,{children:"Firefox 75+"}),e(o.th,{children:"Safari 13+"}),e(o.th,{children:"Edge 80+"})]})}),t(o.tbody,{children:[t(o.tr,{children:[e(o.td,{children:"Basic Zoom"}),e(o.td,{children:"✅ Full"}),e(o.td,{children:"✅ Full"}),e(o.td,{children:"✅ Full"}),e(o.td,{children:"✅ Full"})]}),t(o.tr,{children:[e(o.td,{children:"Cursor Following"}),e(o.td,{children:"✅ Full"}),e(o.td,{children:"✅ Full"}),e(o.td,{children:"✅ Full"}),e(o.td,{children:"✅ Full"})]}),t(o.tr,{children:[e(o.td,{children:"Blur Effects"}),e(o.td,{children:"✅ Full"}),e(o.td,{children:"✅ Full"}),e(o.td,{children:"✅ Full"}),e(o.td,{children:"✅ Full"})]}),t(o.tr,{children:[e(o.td,{children:"3D Transforms"}),e(o.td,{children:"✅ Full"}),e(o.td,{children:"✅ Full"}),e(o.td,{children:"✅ Full"}),e(o.td,{children:"✅ Full"})]}),t(o.tr,{children:[e(o.td,{children:"Touch Events"}),e(o.td,{children:"✅ Full"}),e(o.td,{children:"✅ Full"}),e(o.td,{children:"✅ Full"}),e(o.td,{children:"✅ Full"})]}),t(o.tr,{children:[e(o.td,{children:"Performance"}),e(o.td,{children:"✅ 60fps"}),e(o.td,{children:"✅ 60fps"}),e(o.td,{children:"✅ 60fps"}),e(o.td,{children:"✅ 60fps"})]})]})]}),"\n",e(o.hr,{}),"\n",e(o.p,{children:t(o.em,{children:["Ready to add engaging zoom effects to your images? Check our ",e(o.a,{href:"/showcase",children:"showcase page"})," for live demonstrations or explore the complete ",e(o.a,{href:"/docs/getting-started",children:"component documentation"})," set."]})})]})}return{default:function(n={}){const{wrapper:t}=n.components||{};return t?e(t,{...n,children:e(_createMdxContent,{...n})}):_createMdxContent(n)}};