Docs
Magnetic Button

Magnetic Button

Button that tracks the cursor with elastic spring physics using Framer Motion.

Installation

Usage

import { MagneticButton } from "@/components/pioneerui/magnetic-button"
 
export default function CTA() {
  return (
    <MagneticButton strength={0.4}>
      Get started
    </MagneticButton>
  )
}

Props

PropTypeDefaultDescription
strengthnumber0.4Magnetic pull strength (0–1)
radiusnumber150Detection radius in pixels
childrenReact.ReactNodeundefinedButton content
classNamestringundefinedAdditional CSS classes