const{Fragment:e,jsx:n,jsxs:i}=arguments[0];function _createMdxContent(r){const t={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",...r.components};return i(e,{children:[n(t.h1,{children:"HoverSwitch"}),"\n",n(t.p,{children:"The HoverSwitch variant creates engaging hover interactions by smoothly transitioning between two different images. Perfect for product showcases, before/after comparisons, and interactive galleries with professional animations and performance optimization."}),"\n",n(t.h2,{children:"Features"}),"\n",i(t.ul,{children:["\n",i(t.li,{children:[n(t.strong,{children:"8 Animation Types"}),": From smooth crossfades to dynamic 3D rotations"]}),"\n",i(t.li,{children:[n(t.strong,{children:"Performance Optimized"}),": Image preloading, lazy loading, efficient re-renders"]}),"\n",i(t.li,{children:[n(t.strong,{children:"Touch Device Support"}),": Optional touch interactions for mobile experiences"]}),"\n",i(t.li,{children:[n(t.strong,{children:"Customizable Timing"}),": Precise control over duration, delay, and easing"]}),"\n",i(t.li,{children:[n(t.strong,{children:"Accessibility Ready"}),": Proper ARIA attributes and keyboard support"]}),"\n",i(t.li,{children:[n(t.strong,{children:"TypeScript Support"}),": Full type definitions and IntelliSense"]}),"\n"]}),"\n",n(t.h2,{children:"Quick Start"}),"\n",n(t.pre,{children:n(t.code,{className:"language-tsx",children:'import { ReactiveImage } from "reactive-image";\n\nexport default function ProductShowcase() {\n return (\n \n );\n}\n'})}),"\n",n(t.h2,{children:"Animation Types"}),"\n",n(t.h3,{children:"Slide Animations"}),"\n",n(t.p,{children:"Perfect for before/after comparisons and directional reveals."}),"\n",n(t.pre,{children:n(t.code,{className:"language-tsx",children:'// Horizontal slide (customizable direction)\n\n\n// Vertical slide up\n\n\n// Vertical slide down\n\n'})}),"\n",n(t.h3,{children:"Fade & Crossfade Effects"}),"\n",n(t.p,{children:"Smooth transitions ideal for product variations and subtle changes."}),"\n",n(t.pre,{children:n(t.code,{className:"language-tsx",children:'// Simple crossfade (default)\n\n\n// Zoom with fade effect\n\n'})}),"\n",n(t.h3,{children:"Creative Effects"}),"\n",n(t.p,{children:"Eye-catching animations for artistic and premium experiences."}),"\n",n(t.pre,{children:n(t.code,{className:"language-tsx",children:'// Blur to focus transition\n\n\n// 3D flip effect\n\n\n// Combined scale and rotate\n\n'})}),"\n",n(t.h2,{children:"Timing Configuration"}),"\n",n(t.p,{children:"Fine-tune animation behavior with precise timing controls."}),"\n",n(t.pre,{children:n(t.code,{className:"language-tsx",children:'// Fast snappy interaction\n\n\n// Smooth professional transition\n\n\n// Artistic slow reveal\n\n'})}),"\n",n(t.h2,{children:"Slide Directions"}),"\n",n(t.p,{children:"Control the direction of slide animations for intuitive interactions."}),"\n",n(t.pre,{children:n(t.code,{className:"language-tsx",children:'// Horizontal slides\n

\n \n\n \n

\n\n// Vertical slides\n

\n \n\n \n

\n'})}),"\n",n(t.h2,{children:"Performance Optimization"}),"\n",n(t.p,{children:"Optimize loading and interaction performance for better user experience."}),"\n",n(t.pre,{children:n(t.code,{className:"language-tsx",children:'// Preload hover image for instant interaction\n\n\n// Critical images with eager loading\n\n\n// Background images with lazy optimization\n\n'})}),"\n",n(t.h2,{children:"Touch Device Support"}),"\n",n(t.p,{children:"Enable hover effects on touch devices with tap interactions."}),"\n",n(t.pre,{children:n(t.code,{className:"language-tsx",children:'// Mobile-friendly product gallery\n\n\n// Desktop-only hover effect\n\n'})}),"\n",n(t.h2,{children:"Event Handling & Analytics"}),"\n",n(t.p,{children:"Track interactions and trigger custom behaviors."}),"\n",n(t.pre,{children:n(t.code,{className:"language-tsx",children:'export default function TrackedHoverImage() {\n const handleAnimationStart = () => {\n // Track hover start\n analytics.track("image_hover_start", {\n image_type: "product_showcase",\n });\n };\n\n const handleAnimationEnd = () => {\n // Track hover completion\n analytics.track("image_hover_complete", {\n animation_type: "slide",\n });\n };\n\n return (\n \n );\n}\n'})}),"\n",n(t.h2,{children:"Advanced Styling & CSS Classes"}),"\n",n(t.p,{children:"Combine with CSS classes for complex designs and state-based styling."}),"\n",n(t.pre,{children:n(t.code,{className:"language-tsx",children:'// Dynamic styling based on hover state\n\n\n// Complex grid layout with consistent styling\n

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

\n'})}),"\n",n(t.h2,{children:"Real-World Patterns"}),"\n",n(t.h3,{children:"E-commerce Product Gallery"}),"\n",n(t.pre,{children:n(t.code,{className:"language-tsx",children:'const productImages = [\n { main: "/products/shoe-1-front.jpg", hover: "/products/shoe-1-side.jpg" },\n { main: "/products/shoe-2-front.jpg", hover: "/products/shoe-2-side.jpg" },\n { main: "/products/shoe-3-front.jpg", hover: "/products/shoe-3-side.jpg" },\n];\n\nexport default function ProductGrid() {\n return (\n

\n {productImages.map((product, index) => (\n

\n \n

Premium Sneaker

$129.99

\n ))}\n

\n );\n}\n'})}),"\n",n(t.h3,{children:"Portfolio Before/After Showcase"}),"\n",n(t.pre,{children:n(t.code,{className:"language-tsx",children:'const portfolioProjects = [\n {\n before: "/portfolio/website-before.jpg",\n after: "/portfolio/website-after.jpg",\n title: "E-commerce Redesign",\n description: "Complete UI overhaul with 40% conversion increase",\n },\n {\n before: "/portfolio/logo-before.jpg",\n after: "/portfolio/logo-after.jpg",\n title: "Brand Identity Refresh",\n description: "Modern logo design for tech startup",\n },\n];\n\nexport default function PortfolioShowcase() {\n return (\n

\n {portfolioProjects.map((project, index) => (\n \n

\n \n

\n Hover to see the transformation\n

{project.title}

\n {project.description}\n

\n ))}\n \n );\n}\n'})}),"\n",n(t.h3,{children:"Interactive Image Comparison"}),"\n",n(t.pre,{children:n(t.code,{className:"language-tsx",children:'export default function ComparisonTool() {\n const [selectedFilter, setSelectedFilter] = useState("original");\n\n const filterImages = {\n original: "/photo-original.jpg",\n vintage: "/photo-vintage.jpg",\n bw: "/photo-bw.jpg",\n sepia: "/photo-sepia.jpg",\n };\n\n return (\n

Photo Filter Preview

\n {Object.keys(filterImages).map((filter) => (\n setSelectedFilter(filter)}\n className={`px-4 py-2 rounded-lg capitalize ${\n selectedFilter === filter\n ? "bg-blue-500 text-white"\n : "bg-gray-200 text-gray-700"\n }`}\n >\n {filter}\n \n ))}\n

\n\n \n

\n );\n}\n'})}),"\n",n(t.h2,{children:"API Reference"}),"\n",n(t.h3,{children:"Props"}),"\n",i(t.table,{children:[n(t.thead,{children:i(t.tr,{children:[n(t.th,{children:"Prop"}),n(t.th,{children:"Type"}),n(t.th,{children:"Default"}),n(t.th,{children:"Description"})]})}),i(t.tbody,{children:[i(t.tr,{children:[n(t.td,{children:n(t.code,{children:"hoverSrc"})}),n(t.td,{children:n(t.code,{children:"string"})}),n(t.td,{children:n(t.code,{children:"undefined"})}),n(t.td,{children:"Image source for hover state"})]}),i(t.tr,{children:[n(t.td,{children:n(t.code,{children:"animation"})}),n(t.td,{children:n(t.code,{children:"HoverSwitchAnimationType"})}),n(t.td,{children:n(t.code,{children:'"crossfade"'})}),n(t.td,{children:"Animation type"})]}),i(t.tr,{children:[n(t.td,{children:n(t.code,{children:"slideDirection"})}),n(t.td,{children:n(t.code,{children:"SlideDirection"})}),n(t.td,{children:n(t.code,{children:'"right"'})}),n(t.td,{children:"Direction for slide animations"})]}),i(t.tr,{children:[n(t.td,{children:n(t.code,{children:"timing"})}),n(t.td,{children:n(t.code,{children:"HoverSwitchTiming"})}),n(t.td,{children:n(t.code,{children:"{}"})}),n(t.td,{children:"Animation timing configuration"})]}),i(t.tr,{children:[n(t.td,{children:n(t.code,{children:"preloadHover"})}),n(t.td,{children:n(t.code,{children:"boolean"})}),n(t.td,{children:n(t.code,{children:"true"})}),n(t.td,{children:"Preload hover image for instant interaction"})]}),i(t.tr,{children:[n(t.td,{children:n(t.code,{children:"disableLazy"})}),n(t.td,{children:n(t.code,{children:"boolean"})}),n(t.td,{children:n(t.code,{children:"false"})}),n(t.td,{children:"Disable lazy loading for critical images"})]}),i(t.tr,{children:[n(t.td,{children:n(t.code,{children:"enableTouch"})}),n(t.td,{children:n(t.code,{children:"boolean"})}),n(t.td,{children:n(t.code,{children:"false"})}),n(t.td,{children:"Enable touch device support"})]}),i(t.tr,{children:[n(t.td,{children:n(t.code,{children:"hoverClassName"})}),n(t.td,{children:n(t.code,{children:"string"})}),n(t.td,{children:n(t.code,{children:"undefined"})}),n(t.td,{children:"Additional CSS class when hovered"})]}),i(t.tr,{children:[n(t.td,{children:n(t.code,{children:"onAnimationStart"})}),n(t.td,{children:n(t.code,{children:"() => void"})}),n(t.td,{children:n(t.code,{children:"undefined"})}),n(t.td,{children:"Callback when animation starts"})]}),i(t.tr,{children:[n(t.td,{children:n(t.code,{children:"onAnimationEnd"})}),n(t.td,{children:n(t.code,{children:"() => void"})}),n(t.td,{children:n(t.code,{children:"undefined"})}),n(t.td,{children:"Callback when animation ends"})]})]})]}),"\n",n(t.h3,{children:"Types"}),"\n",n(t.pre,{children:n(t.code,{className:"language-tsx",children:'// Animation types\ntype HoverSwitchAnimationType =\n | "slide" // Directional slide transition\n | "crossfade" // Smooth opacity crossfade\n | "zoom" // Scale with fade effect\n | "blur" // Blur to focus transition\n | "rotateY" // 3D vertical flip\n | "slideUp" // Vertical slide from bottom\n | "slideDown" // Vertical slide from top\n | "scaleRotate"; // Combined scale and rotate\n\n// Slide directions (for slide animation)\ntype SlideDirection =\n | "left" // Slide from left to right\n | "right" // Slide from right to left\n | "up" // Slide from top to bottom\n | "down"; // Slide from bottom to top\n\n// Timing configuration\ntype HoverSwitchTiming = {\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-in-out")\n};\n'})}),"\n",n(t.h3,{children:"Animation Showcase"}),"\n",i(t.table,{children:[n(t.thead,{children:i(t.tr,{children:[n(t.th,{children:"Animation"}),n(t.th,{children:"Best For"}),n(t.th,{children:"Duration"}),n(t.th,{children:"Mobile"})]})}),i(t.tbody,{children:[i(t.tr,{children:[n(t.td,{children:n(t.code,{children:"slide"})}),n(t.td,{children:"Before/after comparisons"}),n(t.td,{children:"300-400ms"}),n(t.td,{children:"✅ Great"})]}),i(t.tr,{children:[n(t.td,{children:n(t.code,{children:"crossfade"})}),n(t.td,{children:"Product variations"}),n(t.td,{children:"250-350ms"}),n(t.td,{children:"✅ Perfect"})]}),i(t.tr,{children:[n(t.td,{children:n(t.code,{children:"zoom"})}),n(t.td,{children:"Detail reveals"}),n(t.td,{children:"300-500ms"}),n(t.td,{children:"✅ Good"})]}),i(t.tr,{children:[n(t.td,{children:n(t.code,{children:"blur"})}),n(t.td,{children:"Artistic effects"}),n(t.td,{children:"400-600ms"}),n(t.td,{children:"⚠️ Performance"})]}),i(t.tr,{children:[n(t.td,{children:n(t.code,{children:"rotateY"})}),n(t.td,{children:"Card flips"}),n(t.td,{children:"400-500ms"}),n(t.td,{children:"⚠️ Performance"})]}),i(t.tr,{children:[n(t.td,{children:n(t.code,{children:"slideUp"})}),n(t.td,{children:"Content reveals"}),n(t.td,{children:"250-350ms"}),n(t.td,{children:"✅ Great"})]}),i(t.tr,{children:[n(t.td,{children:n(t.code,{children:"slideDown"})}),n(t.td,{children:"Content reveals"}),n(t.td,{children:"250-350ms"}),n(t.td,{children:"✅ Great"})]}),i(t.tr,{children:[n(t.td,{children:n(t.code,{children:"scaleRotate"})}),n(t.td,{children:"Dynamic interactions"}),n(t.td,{children:"350-450ms"}),n(t.td,{children:"⚠️ Performance"})]})]})]}),"\n",n(t.h2,{children:"Performance Guidelines"}),"\n",n(t.h3,{children:"Loading Strategy"}),"\n",i(t.ul,{children:["\n",i(t.li,{children:[n(t.strong,{children:"Critical Images"}),": Use ",n(t.code,{children:"preloadHover={true}"})," and ",n(t.code,{children:"disableLazy={true}"})]}),"\n",i(t.li,{children:[n(t.strong,{children:"Above the Fold"}),": Use ",n(t.code,{children:"preloadHover={true}"})," and ",n(t.code,{children:"disableLazy={false}"})]}),"\n",i(t.li,{children:[n(t.strong,{children:"Below the Fold"}),": Use ",n(t.code,{children:"preloadHover={false}"})," and ",n(t.code,{children:"disableLazy={false}"})]}),"\n",i(t.li,{children:[n(t.strong,{children:"Decorative"}),": Use ",n(t.code,{children:"preloadHover={false}"})," and ",n(t.code,{children:"disableLazy={false}"})]}),"\n"]}),"\n",n(t.h3,{children:"Animation Performance"}),"\n",i(t.ul,{children:["\n",i(t.li,{children:[n(t.strong,{children:"Fast Interactions"}),": 200-300ms duration with ",n(t.code,{children:"ease-out"})]}),"\n",i(t.li,{children:[n(t.strong,{children:"Professional Transitions"}),": 300-400ms with ",n(t.code,{children:"cubic-bezier(0.4, 0, 0.2, 1)"})]}),"\n",i(t.li,{children:[n(t.strong,{children:"Artistic Effects"}),": 400-600ms with ",n(t.code,{children:"ease-in-out"})]}),"\n",i(t.li,{children:[n(t.strong,{children:"Mobile Devices"}),": Prefer shorter durations (200-350ms)"]}),"\n"]}),"\n",n(t.h3,{children:"Memory Optimization"}),"\n",i(t.ul,{children:["\n",n(t.li,{children:"Only preload hover images that users are likely to interact with"}),"\n",n(t.li,{children:"Use appropriate image formats (WebP, AVIF when supported)"}),"\n",n(t.li,{children:"Consider image dimensions - don't load unnecessarily large images"}),"\n",n(t.li,{children:"Test on slower devices to ensure smooth performance"}),"\n"]}),"\n",n(t.h2,{children:"Browser Support"}),"\n",i(t.table,{children:[n(t.thead,{children:i(t.tr,{children:[n(t.th,{children:"Browser"}),n(t.th,{children:"Version"}),n(t.th,{children:"Animation Support"}),n(t.th,{children:"Touch Support"})]})}),i(t.tbody,{children:[i(t.tr,{children:[n(t.td,{children:"Chrome"}),n(t.td,{children:"80+"}),n(t.td,{children:"✅ Full"}),n(t.td,{children:"✅ Full"})]}),i(t.tr,{children:[n(t.td,{children:"Firefox"}),n(t.td,{children:"75+"}),n(t.td,{children:"✅ Full"}),n(t.td,{children:"✅ Full"})]}),i(t.tr,{children:[n(t.td,{children:"Safari"}),n(t.td,{children:"13+"}),n(t.td,{children:"✅ Full"}),n(t.td,{children:"✅ Full"})]}),i(t.tr,{children:[n(t.td,{children:"Edge"}),n(t.td,{children:"80+"}),n(t.td,{children:"✅ Full"}),n(t.td,{children:"✅ Full"})]}),i(t.tr,{children:[n(t.td,{children:"Mobile Safari"}),n(t.td,{children:"13+"}),n(t.td,{children:"✅ Full"}),n(t.td,{children:"✅ Full"})]}),i(t.tr,{children:[n(t.td,{children:"Chrome Mobile"}),n(t.td,{children:"80+"}),n(t.td,{children:"✅ Full"}),n(t.td,{children:"✅ Full"})]})]})]}),"\n",n(t.hr,{}),"\n",n(t.p,{children:i(t.em,{children:["Ready to create engaging hover interactions? Check our ",n(t.a,{href:"/showcase",children:"showcase page"})," for live demos or explore more ",n(t.a,{href:"/docs/getting-started",children:"component variants"})," in our documentation."]})})]})}return{default:function(e={}){const{wrapper:i}=e.components||{};return i?n(i,{...e,children:n(_createMdxContent,{...e})}):_createMdxContent(e)}};