MagnetInteractButton

Cinematic Motion for Irresistible CTAs

Elevate Your User Experience with Magnetic Interaction Static buttons are a thing of the past. In a digital landscape where attention is the primary currency, the Magnetic Spotlight Button gives you a competitive edge. This component is not just a UI element; it is a cinematic experience designed to bridge the gap between human intent and digital response. Built on a foundation of high-performance physics, this button creates a literal 'pull' towards your most important conversion points. By simulating physical weight and attraction, it provides users with a tactile satisfaction that standard buttons simply cannot match. Key Highlights * Magnetic Cursor Tracking: The button leverages real-time coordinate tracking to 'lean' towards the user's cursor. This creates an organic, fluid motion that makes the interface feel alive and responsive. * Dynamic Spotlight Engine: Using a custom radial gradient system, the button illuminates precisely where the cursor is. This 'flashlight' effect highlights your brand colors and text, ensuring maximum readability and visual interest. * Framer-Motion Physics: Powered by the industry-leading spring engine, you have granular control over the weight (mass), stiffness, and damping of the movement. No robotic transitions—just smooth, natural physics. * Optimized Performance: Engineered to be 'Framer Safe,' the code is lightweight and utilizes GPU-accelerated transforms to ensure zero lag, even on lower-end mobile devices. Complete Design Control * Physics Tuning: Adjust the Magnetic Strength (how hard it pulls) and Magnetic Range (how far away the cursor triggers the effect) to find the perfect balance for your brand. * Typography & Styling: Directly from the Framer sidebar, modify font families, weights, letter spacing, and text transformations. Customize the button padding and border-radius to fit any design system. * Lighting Customization: Toggle the spotlight effect and fine-tune its size, color, and opacity. Create everything from a subtle glow for luxury sites to a vibrant neon pulse for modern SaaS landing pages. Perfect For: * Hero Section CTAs: Make your 'Get Started' button impossible to ignore. * High-End Portfolios: Showcase your attention to detail through premium micro-interactions. * E-commerce Buy Buttons: Increase the perceived value of products through a more interactive checkout journey.

Cinematic Motion for Irresistible CTAs