const{Fragment:e,jsx:n,jsxs:t}=arguments[0];function _createMdxContent(i){const r={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(e,{children:[n(r.h1,{children:"TiltOnHover"}),"\n",n(r.p,{children:"The TiltOnHover variant creates stunning 3D tilt effects that respond to mouse movement, adding depth and interactivity to images. Features smooth animations, realistic glare effects, gyroscope support for mobile devices, and performance-optimized transforms for premium user experiences."}),"\n",n(r.h2,{children:"Features"}),"\n",t(r.ul,{children:["\n",t(r.li,{children:[n(r.strong,{children:"9 Animation Types"}),": From basic tilts to magnetic attractions and parallax effects"]}),"\n",t(r.li,{children:[n(r.strong,{children:"Interactive Glare Effects"}),": Mouse-following light reflections for premium feel"]}),"\n",t(r.li,{children:[n(r.strong,{children:"Gyroscope Support"}),": Mobile device orientation integration"]}),"\n",t(r.li,{children:[n(r.strong,{children:"Performance Optimized"}),": RequestAnimationFrame and smooth 60fps rendering"]}),"\n",t(r.li,{children:[n(r.strong,{children:"Axis Control"}),": Full control over X, Y, or both-axis movement"]}),"\n",t(r.li,{children:[n(r.strong,{children:"Touch Support"}),": Optional touch device interactions"]}),"\n",t(r.li,{children:[n(r.strong,{children:"TypeScript Ready"}),": Complete type definitions and IntelliSense"]}),"\n"]}),"\n",n(r.h2,{children:"Quick Start"}),"\n",n(r.pre,{children:n(r.code,{className:"language-tsx",children:'import { ReactiveImage } from "reactive-image";\n\nexport default function InteractiveCard() {\n return (\n \n );\n}\n'})}),"\n",n(r.h2,{children:"Animation Types"}),"\n",n(r.h3,{children:"Basic Tilt Effects"}),"\n",n(r.p,{children:"Perfect for cards, UI elements, and general interactivity."}),"\n",n(r.pre,{children:n(r.code,{className:"language-tsx",children:'// Simple 3D tilt (default)\n\n\n// Enhanced 3D perspective\n\n\n// Bouncy reset animation\n\n\n// Smooth elastic reset\n\n'})}),"\n",n(r.h3,{children:"Premium Glare Effects"}),"\n",n(r.p,{children:"Add realistic light reflections for luxury and product showcase experiences."}),"\n",n(r.pre,{children:n(r.code,{className:"language-tsx",children:'// Mouse-following glare\n\n\n// Center-positioned glare\n\n\n// Subtle glare for cards\n\n'})}),"\n",n(r.h3,{children:"Scale & Transform Effects"}),"\n",n(r.p,{children:"Combine tilting with scaling and advanced transformations."}),"\n",n(r.pre,{children:n(r.code,{className:"language-tsx",children:'// Scale with tilt\n\n\n// Floating effect with shadow\n\n\n// Parallax movement\n\n'})}),"\n",n(r.h3,{children:"Advanced Interactive Effects"}),"\n",n(r.p,{children:"Creative animations for unique user experiences."}),"\n",n(r.pre,{children:n(r.code,{className:"language-tsx",children:'// Magnetic attraction\n\n\n// Custom perspective depth\n\n'})}),"\n",n(r.h2,{children:"Axis Control"}),"\n",n(r.p,{children:"Control which axes respond to mouse movement for specific interaction patterns."}),"\n",n(r.pre,{children:n(r.code,{className:"language-tsx",children:'// Full movement (default)\n\n\n// Horizontal tilt only\n\n\n// Vertical tilt only\n\n\n// Comparison layout\n

\n \n

Both Axes

\n\n

\n \n

X-Axis Only

\n\n

\n \n

Y-Axis Only

\n'})}),"\n",n(r.h2,{children:"Timing & Performance"}),"\n",n(r.p,{children:"Fine-tune animation responsiveness and reset behavior."}),"\n",n(r.pre,{children:n(r.code,{className:"language-tsx",children:'// Fast responsive interaction\n\n\n// Smooth professional feel\n\n\n// Dramatic cinematic effect\n\n'})}),"\n",n(r.h2,{children:"Mobile & Touch Support"}),"\n",n(r.p,{children:"Enable tilt effects on touch devices with gyroscope integration."}),"\n",n(r.pre,{children:n(r.code,{className:"language-tsx",children:'// Touch-enabled tilt\n\n\n// Gyroscope integration (mobile)\n\n\n// Mobile-optimized settings\n\n'})}),"\n",n(r.h2,{children:"Advanced Configuration"}),"\n",n(r.p,{children:"Customize behavior, direction, and interaction patterns."}),"\n",n(r.pre,{children:n(r.code,{className:"language-tsx",children:'// Reverse tilt direction\n\n\n// Persistent tilt (no reset on leave)\n\n\n// High perspective intensity\n\n'})}),"\n",n(r.h2,{children:"Event Handling & Analytics"}),"\n",n(r.p,{children:"Track tilt interactions and trigger custom behaviors."}),"\n",n(r.pre,{children:n(r.code,{className:"language-tsx",children:'export default function TrackedTiltCard() {\n const handleTiltStart = ({ tiltX, tiltY }) => {\n console.log("Tilt started:", { tiltX, tiltY });\n // Track interaction start\n analytics.track("tilt_interaction_start");\n };\n\n const handleTiltMove = ({ tiltX, tiltY, mouseX, mouseY }) => {\n // Real-time tilt tracking\n console.log("Tilt position:", {\n tiltX: tiltX.toFixed(1),\n tiltY: tiltY.toFixed(1),\n mouse: { x: mouseX.toFixed(1), y: mouseY.toFixed(1) },\n });\n };\n\n const handleTiltEnd = () => {\n console.log("Tilt interaction ended");\n // Track engagement duration\n analytics.track("tilt_interaction_end");\n };\n\n return (\n \n );\n}\n'})}),"\n",n(r.h2,{children:"Styling & CSS Integration"}),"\n",n(r.p,{children:"Combine with CSS classes for complex designs and state-based styling."}),"\n",n(r.pre,{children:n(r.code,{className:"language-tsx",children:'// Dynamic styling during tilt\n\n\n// Card grid with consistent tilt effects\n

\n {cardData.map((card, index) => (\n

\n \n

{card.title}

{card.description}

\n ))}\n

\n'})}),"\n",n(r.h2,{children:"Real-World Patterns"}),"\n",n(r.h3,{children:"Premium Product Showcase"}),"\n",n(r.pre,{children:n(r.code,{className:"language-tsx",children:'const premiumProducts = [\n {\n image: "/watches/luxury-watch-1.jpg",\n name: "Swiss Master Chronograph",\n price: "$2,499",\n badge: "Limited Edition",\n },\n {\n image: "/watches/luxury-watch-2.jpg",\n name: "Heritage Classic",\n price: "$1,899",\n badge: "Best Seller",\n },\n {\n image: "/watches/luxury-watch-3.jpg",\n name: "Modern Minimalist",\n price: "$999",\n badge: "New Arrival",\n },\n];\n\nexport default function LuxuryWatchShowcase() {\n return (\n

\n Premium Collection\n

\n\n

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

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

\n\n

{product.name}

{product.price}

\n ))}\n

\n );\n}\n'})}),"\n",n(r.h3,{children:"Interactive Dashboard Cards"}),"\n",n(r.pre,{children:n(r.code,{className:"language-tsx",children:'const dashboardCards = [\n {\n icon: "📊",\n title: "Analytics",\n value: "1.2M",\n trend: "+15%",\n color: "blue",\n },\n {\n icon: "💰",\n title: "Revenue",\n value: "$45.2K",\n trend: "+8%",\n color: "green",\n },\n { icon: "👥", title: "Users", value: "8.4K", trend: "+23%", color: "purple" },\n {\n icon: "🎯",\n title: "Conversion",\n value: "3.2%",\n trend: "+12%",\n color: "orange",\n },\n];\n\nexport default function InteractiveDashboard() {\n return (\n

\n {dashboardCards.map((card, index) => (\n \n \n\n

\n {card.icon}\n \n {card.trend}\n \n

\n\n

\n {card.title}\n

{card.value}

\n ))}\n \n );\n}\n'})}),"\n",n(r.h3,{children:"Gaming Card Collection"}),"\n",n(r.pre,{children:n(r.code,{className:"language-tsx",children:'const gameCards = [\n {\n image: "/cards/legendary-dragon.jpg",\n name: "Legendary Dragon",\n rarity: "Legendary",\n power: 2500,\n glareColor: "rgba(255, 215, 0, 0.4)", // Gold for legendary\n },\n {\n image: "/cards/mystic-warrior.jpg",\n name: "Mystic Warrior",\n rarity: "Epic",\n power: 1800,\n glareColor: "rgba(138, 43, 226, 0.4)", // Purple for epic\n },\n {\n image: "/cards/forest-guardian.jpg",\n name: "Forest Guardian",\n rarity: "Rare",\n power: 1200,\n glareColor: "rgba(0, 191, 255, 0.4)", // Blue for rare\n },\n];\n\nexport default function GameCardCollection() {\n return (\n

\n Legendary Collection\n

\n\n

\n {gameCards.map((card, index) => (\n

\n \n\n

{card.name}

\n \n {card.rarity}\n \n \n ⚡ {card.power}\n \n

\n ))}\n

\n );\n}\n'})}),"\n",n(r.h2,{children:"API Reference"}),"\n",n(r.h3,{children:"Props"}),"\n",t(r.table,{children:[n(r.thead,{children:t(r.tr,{children:[n(r.th,{children:"Prop"}),n(r.th,{children:"Type"}),n(r.th,{children:"Default"}),n(r.th,{children:"Description"})]})}),t(r.tbody,{children:[t(r.tr,{children:[n(r.td,{children:n(r.code,{children:"tiltMax"})}),n(r.td,{children:n(r.code,{children:"number"})}),n(r.td,{children:n(r.code,{children:"10"})}),n(r.td,{children:"Maximum tilt angle in degrees"})]}),t(r.tr,{children:[n(r.td,{children:n(r.code,{children:"animation"})}),n(r.td,{children:n(r.code,{children:"TiltAnimationType"})}),n(r.td,{children:n(r.code,{children:'"basic"'})}),n(r.td,{children:"Animation type and behavior"})]}),t(r.tr,{children:[n(r.td,{children:n(r.code,{children:"axis"})}),n(r.td,{children:n(r.code,{children:"TiltAxis"})}),n(r.td,{children:n(r.code,{children:'"both"'})}),n(r.td,{children:"Tilt axis restriction (both, x, y)"})]}),t(r.tr,{children:[n(r.td,{children:n(r.code,{children:"timing"})}),n(r.td,{children:n(r.code,{children:"TiltTiming"})}),n(r.td,{children:n(r.code,{children:"{}"})}),n(r.td,{children:"Animation timing configuration"})]}),t(r.tr,{children:[n(r.td,{children:n(r.code,{children:"perspective"})}),n(r.td,{children:n(r.code,{children:"number"})}),n(r.td,{children:n(r.code,{children:"1000"})}),n(r.td,{children:"3D perspective value in pixels"})]}),t(r.tr,{children:[n(r.td,{children:n(r.code,{children:"scale"})}),n(r.td,{children:n(r.code,{children:"number"})}),n(r.td,{children:n(r.code,{children:"1"})}),n(r.td,{children:"Scale factor during tilt"})]}),t(r.tr,{children:[n(r.td,{children:n(r.code,{children:"glare"})}),n(r.td,{children:n(r.code,{children:"GlareSettings"})}),n(r.td,{children:n(r.code,{children:"{}"})}),n(r.td,{children:"Glare effect configuration"})]}),t(r.tr,{children:[n(r.td,{children:n(r.code,{children:"shadow"})}),n(r.td,{children:n(r.code,{children:"boolean"})}),n(r.td,{children:n(r.code,{children:"false"})}),n(r.td,{children:"Enable dynamic shadows"})]}),t(r.tr,{children:[n(r.td,{children:n(r.code,{children:"reverse"})}),n(r.td,{children:n(r.code,{children:"boolean"})}),n(r.td,{children:n(r.code,{children:"false"})}),n(r.td,{children:"Reverse tilt direction"})]}),t(r.tr,{children:[n(r.td,{children:n(r.code,{children:"resetOnLeave"})}),n(r.td,{children:n(r.code,{children:"boolean"})}),n(r.td,{children:n(r.code,{children:"true"})}),n(r.td,{children:"Reset tilt when mouse leaves"})]}),t(r.tr,{children:[n(r.td,{children:n(r.code,{children:"gyroscope"})}),n(r.td,{children:n(r.code,{children:"boolean"})}),n(r.td,{children:n(r.code,{children:"false"})}),n(r.td,{children:"Enable gyroscope support (mobile)"})]}),t(r.tr,{children:[n(r.td,{children:n(r.code,{children:"enableTouch"})}),n(r.td,{children:n(r.code,{children:"boolean"})}),n(r.td,{children:n(r.code,{children:"false"})}),n(r.td,{children:"Enable touch device support"})]}),t(r.tr,{children:[n(r.td,{children:n(r.code,{children:"tiltClassName"})}),n(r.td,{children:n(r.code,{children:"string"})}),n(r.td,{children:n(r.code,{children:"undefined"})}),n(r.td,{children:"CSS class applied during tilt"})]}),t(r.tr,{children:[n(r.td,{children:n(r.code,{children:"onTiltStart"})}),n(r.td,{children:n(r.code,{children:"function"})}),n(r.td,{children:n(r.code,{children:"undefined"})}),n(r.td,{children:"Tilt start callback"})]}),t(r.tr,{children:[n(r.td,{children:n(r.code,{children:"onTiltMove"})}),n(r.td,{children:n(r.code,{children:"function"})}),n(r.td,{children:n(r.code,{children:"undefined"})}),n(r.td,{children:"Tilt move callback"})]}),t(r.tr,{children:[n(r.td,{children:n(r.code,{children:"onTiltEnd"})}),n(r.td,{children:n(r.code,{children:"function"})}),n(r.td,{children:n(r.code,{children:"undefined"})}),n(r.td,{children:"Tilt end callback"})]})]})]}),"\n",n(r.h3,{children:"Types"}),"\n",n(r.pre,{children:n(r.code,{className:"language-tsx",children:'// Animation types\ntype TiltAnimationType =\n | "basic" // Simple 3D tilt effect\n | "glare" // Tilt with interactive light reflection\n | "scale" // Tilt combined with scaling\n | "perspective" // Enhanced 3D depth effect\n | "bounce" // Bouncy reset animation\n | "elastic" // Smooth elastic reset\n | "magnetic" // Attraction-like movement\n | "float" // Floating effect with shadows\n | "parallax"; // Multi-layer movement effect\n\n// Axis control\ntype TiltAxis =\n | "both" // Full X and Y axis movement\n | "x" // Horizontal movement only\n | "y"; // Vertical movement only\n\n// Timing configuration\ntype TiltTiming = {\n duration?: number; // Mouse response time in ms (default: 200)\n reset?: number; // Reset animation duration in ms (default: 400)\n easing?: string; // CSS easing function (default: "ease-out")\n};\n\n// Glare effect settings\ntype GlareSettings = {\n enabled?: boolean; // Enable glare effect (default: false)\n maxOpacity?: number; // Maximum glare opacity (default: 0.3)\n color?: string; // Glare color (default: "rgba(255,255,255,0.3)")\n position?: "center" | "mouse"; // Glare positioning (default: "center")\n};\n'})}),"\n",n(r.h3,{children:"Animation Performance Guide"}),"\n",t(r.table,{children:[n(r.thead,{children:t(r.tr,{children:[n(r.th,{children:"Animation"}),n(r.th,{children:"Performance"}),n(r.th,{children:"Mobile Friendly"}),n(r.th,{children:"Best Tilt Range"}),n(r.th,{children:"Recommended Uses"})]})}),t(r.tbody,{children:[t(r.tr,{children:[n(r.td,{children:n(r.code,{children:"basic"})}),n(r.td,{children:"⭐⭐⭐⭐⭐"}),n(r.td,{children:"✅ Excellent"}),n(r.td,{children:"5-15°"}),n(r.td,{children:"General UI, cards"})]}),t(r.tr,{children:[n(r.td,{children:n(r.code,{children:"glare"})}),n(r.td,{children:"⭐⭐⭐⭐"}),n(r.td,{children:"✅ Good"}),n(r.td,{children:"8-12°"}),n(r.td,{children:"Premium products"})]}),t(r.tr,{children:[n(r.td,{children:n(r.code,{children:"scale"})}),n(r.td,{children:"⭐⭐⭐⭐"}),n(r.td,{children:"✅ Good"}),n(r.td,{children:"6-10°"}),n(r.td,{children:"Interactive elements"})]}),t(r.tr,{children:[n(r.td,{children:n(r.code,{children:"perspective"})}),n(r.td,{children:"⭐⭐⭐"}),n(r.td,{children:"⚠️ Moderate"}),n(r.td,{children:"10-20°"}),n(r.td,{children:"Hero sections"})]}),t(r.tr,{children:[n(r.td,{children:n(r.code,{children:"bounce"})}),n(r.td,{children:"⭐⭐⭐⭐"}),n(r.td,{children:"✅ Good"}),n(r.td,{children:"8-15°"}),n(r.td,{children:"Playful interfaces"})]}),t(r.tr,{children:[n(r.td,{children:n(r.code,{children:"elastic"})}),n(r.td,{children:"⭐⭐⭐⭐⭐"}),n(r.td,{children:"✅ Excellent"}),n(r.td,{children:"6-12°"}),n(r.td,{children:"Modern UI"})]}),t(r.tr,{children:[n(r.td,{children:n(r.code,{children:"magnetic"})}),n(r.td,{children:"⭐⭐⭐"}),n(r.td,{children:"⚠️ Moderate"}),n(r.td,{children:"8-12°"}),n(r.td,{children:"Creative interactions"})]}),t(r.tr,{children:[n(r.td,{children:n(r.code,{children:"float"})}),n(r.td,{children:"⭐⭐⭐"}),n(r.td,{children:"⚠️ Moderate"}),n(r.td,{children:"5-10°"}),n(r.td,{children:"Card hovers"})]}),t(r.tr,{children:[n(r.td,{children:n(r.code,{children:"parallax"})}),n(r.td,{children:"⭐⭐"}),n(r.td,{children:"❌ Limited"}),n(r.td,{children:"10-18°"}),n(r.td,{children:"Desktop experiences"})]})]})]}),"\n",n(r.h2,{children:"Performance Guidelines"}),"\n",n(r.h3,{children:"Optimization Tips"}),"\n",t(r.ul,{children:["\n",t(r.li,{children:[n(r.strong,{children:"Tilt Range"}),": Use 5-15° for optimal visual impact without motion sickness"]}),"\n",t(r.li,{children:[n(r.strong,{children:"Perspective"}),": Keep between 800-1500px for best performance"]}),"\n",t(r.li,{children:[n(r.strong,{children:"Mobile"}),": Use ",n(r.code,{children:"tiltMax <= 10"})," and avoid complex animations on mobile"]}),"\n",t(r.li,{children:[n(r.strong,{children:"Glare Effects"}),": Limit ",n(r.code,{children:"maxOpacity"})," to 0.3-0.5 for subtle, professional effects"]}),"\n",t(r.li,{children:[n(r.strong,{children:"Reset Timing"}),": 300-600ms provides good balance between responsiveness and smoothness"]}),"\n"]}),"\n",n(r.h3,{children:"Accessibility"}),"\n",n(r.pre,{children:n(r.code,{className:"language-tsx",children:'// Respect user preferences\n\n'})}),"\n",n(r.h3,{children:"Browser Support"}),"\n",t(r.table,{children:[n(r.thead,{children:t(r.tr,{children:[n(r.th,{children:"Feature"}),n(r.th,{children:"Chrome 80+"}),n(r.th,{children:"Firefox 75+"}),n(r.th,{children:"Safari 13+"}),n(r.th,{children:"Edge 80+"})]})}),t(r.tbody,{children:[t(r.tr,{children:[n(r.td,{children:"Basic Tilt"}),n(r.td,{children:"✅ Full"}),n(r.td,{children:"✅ Full"}),n(r.td,{children:"✅ Full"}),n(r.td,{children:"✅ Full"})]}),t(r.tr,{children:[n(r.td,{children:"Glare Effects"}),n(r.td,{children:"✅ Full"}),n(r.td,{children:"✅ Full"}),n(r.td,{children:"✅ Full"}),n(r.td,{children:"✅ Full"})]}),t(r.tr,{children:[n(r.td,{children:"Gyroscope"}),n(r.td,{children:"✅ Full"}),n(r.td,{children:"⚠️ Limited"}),n(r.td,{children:"✅ Full"}),n(r.td,{children:"✅ Full"})]}),t(r.tr,{children:[n(r.td,{children:"Touch Events"}),n(r.td,{children:"✅ Full"}),n(r.td,{children:"✅ Full"}),n(r.td,{children:"✅ Full"}),n(r.td,{children:"✅ Full"})]}),t(r.tr,{children:[n(r.td,{children:"Performance"}),n(r.td,{children:"✅ 60fps"}),n(r.td,{children:"✅ 60fps"}),n(r.td,{children:"✅ 60fps"}),n(r.td,{children:"✅ 60fps"})]})]})]}),"\n",n(r.hr,{}),"\n",n(r.p,{children:t(r.em,{children:["Ready to add immersive 3D effects to your images? Explore our ",n(r.a,{href:"/showcase",children:"showcase page"})," for live demonstrations or check out other ",n(r.a,{href:"/docs/getting-started",children:"component variants"})," in our documentation."]})})]})}return{default:function(e={}){const{wrapper:t}=e.components||{};return t?n(t,{...e,children:n(_createMdxContent,{...e})}):_createMdxContent(e)}};