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.
* 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.
* 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.
* 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.
Creative Apes
