Magnetic Button Component

The MagneticButton component is an interactive UI element that creates a magnetic effect, pulling the cursor towards the button when it is within a certain range. This component is highly customizable and provides a unique user experience.

Features

• Magnetic Effect: Attracts the cursor when it is within a defined range.
• Customizable Intensity: Adjust the magnetic pull strength.
• Flexible Interaction Area: Choose between the component itself or its parent.
• Consistent wrapper API: Use className for styling (customClassName remains supported).
• Smooth Animations: Uses spring-based animations for smooth transitions.
• Lightweight: Pointer tracking is scoped to the active interaction and cleaned up automatically.
• Reduced-motion safe: Returns to its resting position when motion is reduced.

Playground

Tune the pull strength and range, then move your cursor near the button.

Installation

npx shadcn@latest add @sona-ui/magnetic-button

Usage

export default function MagneticButtonExample() {
  return (
    <div className="p-2 border border-border border-dashed rounded-full">
      <Magnetic interactionArea="parent">
        <button
          type="button"
          className="px-6 py-4 font-semibold text-foreground bg-background rounded-full cursor-pointer"
        >
          Magnetic Button
        </button>
      </Magnetic>
    </div>
  );
}

Props