Magnetic Button

About

An interactive Magnetic Button that reacts to your cursor with smooth spring physics and 3D rotation. Designed for modern, premium interfaces, it adds delightful motion and depth to your CTAs.

Key features:

• Follows mouse movement using Framer Motion's spring physics
• 3D tilt, hover scale, and press animations
• Customizable colors, border, shadow, scale, radius, and typography
• Ripple effect on click with configurable color
• Hover sheen overlay for premium feel
• Supports links, click events, keyboard accessibility, and disabled state

Installation

Examples

Styled Variants

Multiple color schemes and styles — gradient CTA, outlined ghost pill, and subscription button with different magnet strengths and border radius values.

Hero Section CTAs

Primary + secondary CTA pair in a hero section context with custom spring stiffness, tilt angles, and hover scales.

Usage

import MagneticButton from "@/components/motionx/magnetic-button";

Basic

<MagneticButton>Get Started</MagneticButton>

Gradient with emoji

<MagneticButton
  className="bg-gradient-to-r from-violet-600 to-indigo-600 text-white"
  magnetStrength={0.35}
  borderRadius={16}
>
  🚀 Launch App
</MagneticButton>

Ghost / Outlined

<MagneticButton
  className="bg-transparent text-foreground border-2 border-foreground/20 shadow-none"
  magnetStrength={0.5}
  borderRadius={999}
>
  Learn More →
</MagneticButton>

Link button

<MagneticButton href="https://motionx.design" target="_blank">
  Visit MotionX
</MagneticButton>

Disabled state

<MagneticButton disabled>Unavailable</MagneticButton>

Custom physics

<MagneticButton
  magnetStrength={0.6}
  stiffness={200}
  damping={10}
  hoverScale={1.08}
  pressScale={0.92}
  tiltAngle={18}
>
  Bouncy Button
</MagneticButton>

Props

Note: All standard button HTML attributes are also supported via spread props. The component is fully keyboard accessible — pressing Enter or Space triggers the click handler.