Magnetic Button is not just a call-to-action—it’s a premium interactive component that transforms standard clicks into a gamified, physics-driven experience. Engineered with dynamic spring damping and an overlay spotlight tracker, this component breaks free of its layout to follow the user, giving your site an instant, award-winning feel. Whether you are building a high-conversion landing page, an e-commerce checkout, or a portfolio contact section, Magnetic Button delivers buttery-smooth performance, interactive physics, and complete visual control right from the Framer sidebar.

✨ Key Highlights

• Magnetic Pull: As the cursor approaches, the button detaches from its static position and smoothly tracks the mouse's trajectory.

• Dynamic Spotlight: A radiant, screen-blended gradient physically tracks inside the button exactly where the cursor is hovering.

• Tactile Spring Scaling: Pops up and scales beautifully on hover, then satisfyingly compresses down on click using precise physical mass.

• Mobile-First Engineering: Gracefully degrades on touch devices, maintaining its beautiful styling and click animations without erratic tracking.

• Zero-Code Customization: Every visual aspect—from spotlight sizing to magnetic range and font families—is an intuitive control directly inside Framer.

⚙️ Complete Design Control

• Content & Typography: Fully customize the text, apply specific font weights, adjust letter spacing, and set text transformations (uppercase, lowercase).

• Geometry & Appearance: Define horizontal and vertical padding, tweak border radiuses, and choose specific hex codes for the background, borders, and spotlight gradient.

• Physics & Motion: Dictate the pixel range where the magnet engages, control the strength of the pull, and adjust the stiffness of the spring snapping it back to the center.

💡 Perfect For

• High-Conversion Landing Pages: Gamify your primary "Sign Up" or "Get Started" buttons to increase click-through rates.

• E-commerce Checkout: Make the "Add to Cart" action feel uniquely satisfying and premium.

• Portfolio Contact Sections: Draw the user's eye to your "Let's Talk" button with irresistible interaction design.