back

Magnetic Button

2025

A button that responds to cursor proximity with a magnetic pull effect. Creates an engaging, playful interaction.

Features

  • •Smooth cursor-following animation
  • •Customizable magnetic strength
  • •Works with any child content
  • •Touch-device compatible

Dependencies

motion

Preview

Open in

Usage

Example
<MagneticButton strength={0.4}>
      <button className="px-8 py-4 bg-white text-gray-900 rounded-xl font-medium shadow-lg">
        Hover & move around me
      </button>
    </MagneticButton>